site: Add a primary color change button (#7401)

site/theme/template/Color/ColorPaletteTool.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import Color from 'color-standalone';
-import { ChromePicker } from 'react-color';
 import BezierEasing from 'bezier-easing/dist/bezier-easing';
 import ColorBlock from './ColorBlock';
+import ColorPicker from './ColorPicker';
 
 const easing = BezierEasing.apply(null, [0.26, 0.09, 0.37, 0.18]); // 色彩分布曲线
 const warmDark = 0.5;    // 暖色深度
@@ -10,75 +10,6 @@ const warmRotate = -26;  // 暖色角度
 const coldDark = 0.55;   // 冷色深度
 const coldRotate = 10;   // 冷色角度
 
-class Picker extends React.Component {
-  constructor(props) {
-    super();
-    this.state = {
-      displayColorPicker: false,
-      color: props.color,
-    };
-  }
-  componentWillReceiveProps(nextProps) {
-    this.setState({ color: nextProps.color });
-  }
-  handleClick = () => {
-    this.setState({ displayColorPicker: !this.state.displayColorPicker });
-  };
-  handleClose = () => {
-    this.setState({ displayColorPicker: false });
-  };
-  handleChange = (color) => {
-    this.setState({ color: color.hex });
-    this.props.onChange(color.hex);
-  };
-  render() {
-    const styles = {
-      color: {
-        width: '120px',
-        height: '24px',
-        borderRadius: '2px',
-        background: this.state.color,
-      },
-      swatch: {
-        padding: '5px',
-        background: '#fff',
-        borderRadius: '1px',
-        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
-        display: 'inline-block',
-        cursor: 'pointer',
-      },
-      popover: {
-        position: 'absolute',
-        zIndex: '2',
-      },
-      cover: {
-        position: 'fixed',
-        top: '0px',
-        right: '0px',
-        bottom: '0px',
-        left: '0px',
-      },
-      wrapper: {
-        position: 'inherit',
-        zIndex: '100',
-      },
-    };
-    return (
-      <div>
-        <div style={styles.swatch} onClick={this.handleClick}>
-          <div style={styles.color} />
-        </div>
-        {this.state.displayColorPicker ? <div style={styles.popover}>
-          <div style={styles.cover} onClick={this.handleClose} />
-          <div style={styles.wrapper}>
-            <ChromePicker color={this.state.color} onChange={this.handleChange} />
-          </div>
-        </div> : null}
-      </div>
-    );
-  }
-}
-
 // eslint-disable-next-line
 export default class ColorPaletteTool extends Component {
   state = {
@@ -142,7 +73,7 @@ export default class ColorPaletteTool extends Component {
           选择自定义主色
           <div className="color-palette-picker">
             <span style={{ display: 'inline-block' }}>
-              <Picker color={this.state.primaryColor} onChange={this.handleChangeColor} />
+              <ColorPicker type="chrome" color={this.state.primaryColor} onChange={this.handleChangeColor} />
             </span>
             <div className="color-palette-picker-value">
               {this.state.primaryColor}

site/theme/template/Color/ColorPicker.jsx

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import { ChromePicker, SketchPicker } from 'react-color';
+
+const noop = () => {};
+
+const pickers = {
+  chrome: ChromePicker,
+  sketch: SketchPicker,
+};
+
+export default class ColorPicker extends Component {
+  static defaultProps = {
+    onChange: noop,
+    onChangeComplete: noop,
+  }
+
+  constructor(props) {
+    super();
+    this.state = {
+      displayColorPicker: false,
+      color: props.color,
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    this.setState({ color: nextProps.color });
+  }
+  handleClick = () => {
+    this.setState({ displayColorPicker: !this.state.displayColorPicker });
+  };
+  handleClose = () => {
+    this.setState({ displayColorPicker: false });
+  };
+  handleChange = (color) => {
+    this.setState({ color: color.hex });
+    this.props.onChange(color.hex);
+  };
+  handleChangeComplete = (color) => {
+    this.setState({ color: color.hex });
+    this.props.onChangeComplete(color.hex);
+  };
+  render() {
+    const { small, type } = this.props;
+
+    const Picker = pickers[type];
+
+    const styles = {
+      color: {
+        width: small ? '80px' : '120px',
+        height: small ? '18px' : '24px',
+        borderRadius: '2px',
+        background: this.state.color,
+      },
+      swatch: {
+        padding: '5px',
+        background: '#fff',
+        borderRadius: '1px',
+        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+        display: 'inline-block',
+        cursor: 'pointer',
+      },
+      popover: {
+        position: 'absolute',
+        zIndex: '2',
+      },
+      cover: {
+        position: 'fixed',
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px',
+      },
+      wrapper: {
+        position: 'inherit',
+        zIndex: '100',
+      },
+    };
+    return (
+      <div>
+        <div style={styles.swatch} onClick={this.handleClick}>
+          <div style={styles.color} />
+        </div>
+        {this.state.displayColorPicker ? <div style={styles.popover}>
+          <div style={styles.cover} onClick={this.handleClose} />
+          <div style={styles.wrapper}>
+            <Picker
+              {...this.props}
+              color={this.state.color}
+              onChange={this.handleChange}
+              onChangeComplete={this.handleChangeComplete}
+            />
+          </div>
+        </div> : null}
+      </div>
+    );
+  }
+}

site/theme/template/Layout/Footer.jsx

@@ -1,9 +1,19 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Modal, Icon } from 'antd';
+import reqwest from 'reqwest';
 import { isLocalStorageNameSupported } from '../utils';
+import ColorPicker from '../Color/ColorPicker';
 
 class Footer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      color: '#108ee9',
+    };
+  }
+
   componentDidMount() {
     // for some iOS
     // http://stackoverflow.com/a/14555361
@@ -21,6 +31,24 @@ class Footer extends React.Component {
     }
   }
 
+  handleColorChange = (color) => {
+    reqwest({
+      url: 'https://ant-design-theme.now.sh/compile',
+      method: 'post',
+      data: {
+        variables: {
+          '@primary-color': color,
+        },
+      },
+    }).then((data) => {
+      this.setState({ color });
+      const head = document.querySelector('head');
+      const style = document.createElement('style');
+      style.innerText = data;
+      head.appendChild(style);
+    });
+  }
+
   infoNewVersion() {
     const messages = this.props.intl.messages;
     Modal.info({
@@ -66,6 +94,25 @@ class Footer extends React.Component {
                 <FormattedMessage id="app.footer.awesome" />
               </a>
             </div>
+            <div>
+              <ColorPicker
+                type="sketch"
+                small
+                color={this.state.color}
+                presetColors={[
+                  '#f04134',
+                  '#00a854',
+                  '#108ee9',
+                  '#f5317f',
+                  '#f56a00',
+                  '#7265e6',
+                  '#ffbf00',
+                  '#00a2ae',
+                  '#bfbfbf',
+                ]}
+                onChangeComplete={this.handleColorChange}
+              />
+            </div>
           </li>
           <li>
             <h2><Icon type="link" /> <FormattedMessage id="app.footer.links" /></h2>