feat: add new option hat

Author: wwayne

README.md

@@ -68,8 +68,10 @@ The options can be passed into genConfig or as React props
 | `faceColor`    | string |         |                                              |                      |
 | `earSize`      | string |         | small, big                                   |                      |
 | `hairColor`    | string |         |                                              |                      |
-| `hairStyle`    | string |         | normal, thick, mohawk, womanLong, womanShort, beanie |                      |
+| `hairStyle`    | string |         | normal, thick, mohawk, womanLong, womanShort |                      |
 | `hairColorRandom` | boolean |  false   |                           | thick,mohawk default only be black |
+| `hatColor`     | string |         |                                              |                      |
+| `hatStyle`     | string |         | none, beanie, turban                         | Usually is none      |
 | `eyeStyle`     | string |         | circle, oval, smile                          |                      |
 | `glassesStyle` | string |         | none, round, square                          | Usually is none      |
 | `noseStyle`    | string |         | short, long, round                           |                      |

demo/Single.js

@@ -17,6 +17,7 @@ export default class Single extends Component {
       size: 25, // rem
       faceColorPanelOpen: false,
       hairColorPanelOpen: false,
+      hatColorPanelOpen: false,
       shirtColorPanelOpen: false,
       bgColorPanelOpen: false
     };
@@ -59,6 +60,7 @@ export default class Single extends Component {
   closeAllColorPanel() {
     this.setState({
       hairColorPanelOpen: false,
+      hatColorPanelOpen: false,
       faceColorPanelOpen: false,
       shirtColorPanelOpen: false,
       bgColorPanelOpen: false
@@ -104,6 +106,7 @@ export default class Single extends Component {
       bgShape,
       faceColorPanelOpen,
       hairColorPanelOpen,
+      hatColorPanelOpen,
       shirtColorPanelOpen,
       bgColorPanelOpen
     } = this.state;
@@ -225,14 +228,37 @@ export default class Single extends Component {
               onClick={this.updateConfig.bind(this, "hairStyle", "womanShort")}>
               Woman Short
             </p>
+          </div>
+
+          {/* Hat */}
+          <div className="field">
+            <p>Hat</p>
+            <div className="colorPanelWrapper" onClick={(e) => e.nativeEvent.stopImmediatePropagation()}>
+              <i
+                className="iconfont icon-color"
+                onClick={this.toggleColorPanel.bind(this, "hatColorPanelOpen")} />
+              {hatColorPanelOpen &&
+                <ChromePicker
+                  className="colorPanel"
+                  color={config.hatColor}
+                  onChange={this.onChangeColor.bind(this, "hatColor")} />
+              }
+            </div>
+          </div>
+          <div className="opts">
+            <p
+              className={classnames("opt", { active: config.hatStyle === "none" })}
+              onClick={this.updateConfig.bind(this, "hatStyle", "none")}>
+              None
+            </p>
             <p
-              className={classnames("opt", { active: config.hairStyle === "turban" })}
-              onClick={this.updateConfig.bind(this, "hairStyle", "turban")}>
+              className={classnames("opt", { active: config.hatStyle === "turban" })}
+              onClick={this.updateConfig.bind(this, "hatStyle", "turban")}>
               Turban
             </p>
             <p
-              className={classnames("opt", { active: config.hairStyle === "beanie" })}
-              onClick={this.updateConfig.bind(this, "hairStyle", "beanie")}>
+              className={classnames("opt", { active: config.hatStyle === "beanie" })}
+              onClick={this.updateConfig.bind(this, "hatStyle", "beanie")}>
               Beanie
             </p>
           </div>

package.json

@@ -4,7 +4,9 @@
   "description": "react library for generating avatar",
   "main": "dist/index.js",
   "types": "dist/react-nice-avatar.d.ts",
-  "scripts": {},
+  "scripts": {
+    "prepublish": "make build"
+  },
   "keywords": [
     "react",
     "avatar",

src/hair/beanie.js

@@ -5,8 +5,6 @@ import Thick from "./thick";
 import Mohawk from "./mohawk";
 import WomanLong from "./womanLong";
 import WomanShort from "./womanShort";
-import Turban from './turban';
-import Beanie from "./beanie";
 
 export default function (props) {
   const { style, color, colorRandom } = props;
@@ -15,9 +13,7 @@ export default function (props) {
     case "mohawk": return <Mohawk color={color} colorRandom={colorRandom} />;
     case "womanLong": return <WomanLong color={color} />;
     case "womanShort": return <WomanShort color={color} />;
-    case 'beanie': return <Beanie color={color} />;
-    case "turban" : return <Turban color={color}/>;
-    case "normal": 
+    case "normal":
     default:
       return <Normal color={color} />;
   }