feat: integrate with Typescript

Author: wwayne

.babelrc

@@ -7,6 +7,7 @@
           "corejs": "3.12"
         }
       ],
-      "@babel/preset-react"
+      "@babel/preset-react",
+      "@babel/preset-typescript"
   ]
 }

.npmignore

@@ -21,4 +21,6 @@ test/
 
 Makefile
 README.md
-rollup.config.js
+rollup.config.js
+jest.config.js
+tsconfig.json

Makefile

@@ -22,7 +22,7 @@ build:
 	@rm -rf ./dist
 	@npx rollup -c rollup.config.js
 	@echo "Copy type into dist..."
-	@cp react-nice-avatar.d.ts dist/react-nice-avatar.d.ts
+	@cp src/types.ts dist/index.d.ts
 build-demo:
 	@echo "Building demo..."
 	@rm -rf ./demo/dist

demo/rollup.config.js

@@ -6,6 +6,7 @@ import serve from "rollup-plugin-serve";
 import livereload from "rollup-plugin-livereload";
 import replace from "@rollup/plugin-replace";
 import scss from "rollup-plugin-scss";
+import typescript from "@rollup/plugin-typescript";
 
 let plugins = [
   replace({
@@ -15,6 +16,9 @@ let plugins = [
   babel({
     exclude: "node_modules/**"
   }),
+  typescript({
+    tsconfig: path.resolve(__dirname, "./tsconfig.json")
+  }),
   resolve(),
   commonjs(),
   scss()
@@ -28,17 +32,17 @@ if (process.env.NODE_ENV === "development" && process.env.MODE !== "build") {
       host: "localhost",
       port: 5555
     }),
-    livereload({ watch: path.resolve(__dirname, "./") })
+    livereload({ watch: path.resolve(__dirname, "./src") })
   ]);
 }
 
 export default {
-  input: path.resolve(__dirname, "./index.js"),
+  input: path.resolve(__dirname, "./src/index.tsx"),
   output: [
     {
       file: path.resolve(__dirname, "./dist/index.js"),
       format: "iife",
-      sourcemap: true
+      sourcemap: false
     }
   ],
   plugins

demo/Cases.js demo/src/Cases.tsxdemo/Cases.js renamed to demo/src/Cases.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import Avatar from "../src";
+import Avatar from "../../src";
+
+type GenApplicationMockup = (opt?: { theme?: string }) => React.ReactElement
 
 export default function (props) {
   const { config } = props;
@@ -33,7 +35,7 @@ export default function (props) {
     </div>
   );
 
-  const genApplicationMockup = ({ theme } = {}) => (
+  const genApplicationMockup:GenApplicationMockup = ({ theme } = {}) => (
     <div className={classnames("application", theme)}>
       <div className="applicationHeader">
         <div className="icons">

demo/Single.js demo/src/Single.tsxdemo/Single.js renamed to demo/src/Single.tsx

@@ -5,11 +5,17 @@ import Slider from "rc-slider";
 import domtoimage from "dom-to-image";
 import { saveAs } from "file-saver";
 
-import Avatar, { genConfig } from "../src";
+import Avatar, { genConfig } from "../../src";
+
+import {
+  SingleComponentProps,
+  SingleComponentState,
+  Panel
+} from './types'
 
 import "rc-slider/assets/index.css";
 
-export default class Single extends Component {
+export default class Single extends Component<SingleComponentProps, SingleComponentState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -33,7 +39,7 @@ export default class Single extends Component {
     window.removeEventListener("click", this.closeAllColorPanel);
   }
 
-  updateConfig(field, value) {
+  updateConfig(field: string, value: any) {
     const { config, updateConfig } = this.props;
     if (config[field] === value) return;
     config[field] = value;
@@ -44,17 +50,17 @@ export default class Single extends Component {
     }
   }
 
-  onChangeColor(field, value) {
+  onChangeColor(field: string, value: { hex: string }) {
     const { config, updateConfig } = this.props;
     config[field] = value.hex;
     updateConfig(config);
   }
 
-  toggleColorPanel(panelName, e) {
+  toggleColorPanel(panelName: Panel, e) {
     e.nativeEvent.stopImmediatePropagation();
     this.setState({
       [panelName]: !this.state[panelName]
-    });
+    } as any);
   }
 
   closeAllColorPanel() {
@@ -87,16 +93,18 @@ export default class Single extends Component {
   async download() {
     const scale = 2;
     const node = document.getElementById("avatar");
-    const blob = await domtoimage.toBlob(node, {
-      height: node.offsetHeight * scale,
-      style: {
-        transform: `scale(${scale}) translate(${node.offsetWidth / 2 / scale}px, ${node.offsetHeight / 2 / scale}px)`,
-        "border-radius": 0
-      },
-      width: node.offsetWidth * scale
-    });
+    if (node) {
+      const blob = await domtoimage.toBlob(node, {
+        height: node.offsetHeight * scale,
+        style: {
+          transform: `scale(${scale}) translate(${node.offsetWidth / 2 / scale}px, ${node.offsetHeight / 2 / scale}px)`,
+          "border-radius": 0
+        },
+        width: node.offsetWidth * scale
+      });
 
-    saveAs(blob, "avatar.png");
+      saveAs(blob, "avatar.png");
+    }
   }
 
   render() {

demo/_iconfont.scss demo/src/_iconfont.scssdemo/_iconfont.scss renamed to demo/src/_iconfont.scss

@@ -1,12 +1,14 @@
 import React, { Component } from "react";
 import classnames from "classnames";
 
-import { genConfig } from "../src";
-
+import { genConfig } from "../../src";
 import Single from "./Single";
 import Cases from "./Cases";
 
-export default class App extends Component {
+import { AppComponentState } from './types'
+import { AvatarFullConfig } from '../../src/types'
+
+export default class App extends Component<{}, AppComponentState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -16,13 +18,13 @@ export default class App extends Component {
     };
   }
 
-  onChangeTab(tab) {
+  onChangeTab(tab: string) {
     this.setState({
       currentTab: tab
     });
   }
 
-  updateConfig(config) {
+  updateConfig(config: AvatarFullConfig) {
     this.setState({
       config: { ...config, hairColorRandom: true }
     });