🎉 chore: 初始化 color-picker 组件

config/menu.ts

@@ -29,7 +29,7 @@ export const menus = {
     },
     {
       title: '业务组件',
-      children: ['asset-gallery', 'journey-map', 'heatmap-calendar'],
+      children: ['asset-gallery', 'ColorPicker', 'journey-map', 'heatmap-calendar'],
     },
     {
       title: 'Mindflow',

jest.config.base.js

@@ -1,6 +1,4 @@
-const {
-  default: umiConfig,
-} = require('@umijs/test/lib/createDefaultConfig/createDefaultConfig');
+const { default: umiConfig } = require('@umijs/test/lib/createDefaultConfig/createDefaultConfig');
 
 const defaultConfig = umiConfig(process.cwd(), {});
 
@@ -12,15 +10,15 @@ module.exports = {
   moduleNameMapper: {
     '@arvinxu/asset-gallery': '<rootDir>/packages/asset-gallery/src',
     '@arvinxu/preloader': '<rootDir>/packages/preloader/src',
-    '@arvinxu/macos-traffic-light':
-      '<rootDir>/packages/macos-traffic-light/src',
+    '@arvinxu/macos-traffic-light': '<rootDir>/packages/macos-traffic-light/src',
     '@arvinxu/journey-map': '<rootDir>/packages/journey-map/src',
     '@arvinxu/user-panel': '<rootDir>/packages/user-panel/src',
     '@arvinxu/heatmap-calendar': '<rootDir>/packages/heatmap-calendar/src',
     '@arvinxu/utils': '<rootDir>/packages/utils/src',
     '@arvinxu/i18n': '<rootDir>/packages/i18n/src',
     '@arvinxu/layout-kit': '<rootDir>/packages/layout-kit/src',
     '@arvinxu/sortable-list': '<rootDir>/packages/sortable-list/src',
+    '@arvinxu/color-picker': '<rootDir>/packages/color-picker/src',
     '@arvinxu/float-label-input': '<rootDir>/packages/float-label-input/src',
     '@arvinxu/page-loading': '<rootDir>/packages/page-loading/src',
     '@arvinxu/mindflow': '<rootDir>/packages/mindflow/src',

packages/color-picker/.fatherrc.js

@@ -0,0 +1,5 @@
+const base = require('../../.fatherrc');
+
+module.exports = {
+  ...base,
+};

packages/color-picker/README.md

@@ -0,0 +1,14 @@
+# @arvinxu/color-picker
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+## License
+
+[MIT](../../LICENSE) ® Arvin Xu
+
+<!-- npm url -->
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/color-picker.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/color-picker
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/color-picker.svg
+[download-url]: https://npmjs.org/package/@arvinxu/color-picker

packages/color-picker/demos/Basic.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import SketchPicker from '@arvinxu/color-picker';
+
+const Demo = () => {
+  return <SketchPicker />;
+};
+
+export default Demo;

packages/color-picker/jest.config.js

@@ -0,0 +1,14 @@
+const base = require('../../jest.config.base');
+
+const packageName = '@arvinxu/color-picker';
+
+const root = '<rootDir>/packages/color-picker';
+
+module.exports = {
+  ...base,
+  rootDir: '../..',
+  roots: [root],
+  name: packageName,
+  displayName: packageName,
+  collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`],
+};

packages/color-picker/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@arvinxu/color-picker",
+  "version": "1.0.0",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/color-picker#readme",
+  "repository": "git+https://github.com/arvinxx/components.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "father-build && pnpm run webpack",
+    "webpack": "webpack",
+    "test": "jest",
+    "test:update": "jest -u",
+    "prepublishOnly": "pnpm run build",
+    "cov": "jest --coverage",
+    "clean": "rm -rf es lib dist build coverage .umi"
+  }
+}

packages/color-picker/src/ColorPicker.md

@@ -0,0 +1,25 @@
+---
+title: ColorPicker
+order: 2
+group:
+  path: /
+nav:
+  path: /components
+---
+
+# ColorPicker
+
+一个更好用的取色器
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+<!-- npm url -->
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/color-picker.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/color-picker
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/color-picker.svg
+[download-url]: https://npmjs.org/package/@arvinxu/color-picker
+
+## 基本用法
+
+<code src="../demos/Basic" />

packages/color-picker/src/components/common/Alpha.js

@@ -0,0 +1,124 @@
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+import * as alpha from '../../helpers/alpha';
+
+import Checkboard from './Checkboard';
+
+export class Alpha extends (PureComponent || Component) {
+  componentWillUnmount() {
+    this.unbindEventListeners();
+  }
+
+  handleChange = (e) => {
+    const change = alpha.calculateChange(
+      e,
+      this.props.hsl,
+      this.props.direction,
+      this.props.a,
+      this.container,
+    );
+    change && typeof this.props.onChange === 'function' && this.props.onChange(change, e);
+  };
+
+  handleMouseDown = (e) => {
+    this.handleChange(e);
+    window.addEventListener('mousemove', this.handleChange);
+    window.addEventListener('mouseup', this.handleMouseUp);
+  };
+
+  handleMouseUp = () => {
+    this.unbindEventListeners();
+  };
+
+  unbindEventListeners = () => {
+    window.removeEventListener('mousemove', this.handleChange);
+    window.removeEventListener('mouseup', this.handleMouseUp);
+  };
+
+  render() {
+    const rgb = this.props.rgb;
+    const styles = reactCSS(
+      {
+        default: {
+          alpha: {
+            absolute: '0px 0px 0px 0px',
+            borderRadius: this.props.radius,
+          },
+          checkboard: {
+            absolute: '0px 0px 0px 0px',
+            overflow: 'hidden',
+            borderRadius: this.props.radius,
+          },
+          gradient: {
+            absolute: '0px 0px 0px 0px',
+            background: `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
+           rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
+            boxShadow: this.props.shadow,
+            borderRadius: this.props.radius,
+          },
+          container: {
+            position: 'relative',
+            height: '100%',
+            margin: '0 3px',
+          },
+          pointer: {
+            position: 'absolute',
+            left: `${rgb.a * 100}%`,
+          },
+          slider: {
+            width: '4px',
+            borderRadius: '1px',
+            height: '8px',
+            boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+            background: '#fff',
+            marginTop: '1px',
+            transform: 'translateX(-2px)',
+          },
+        },
+        vertical: {
+          gradient: {
+            background: `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
+           rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
+          },
+          pointer: {
+            left: 0,
+            top: `${rgb.a * 100}%`,
+          },
+        },
+        overwrite: {
+          ...this.props.style,
+        },
+      },
+      {
+        vertical: this.props.direction === 'vertical',
+        overwrite: true,
+      },
+    );
+
+    return (
+      <div style={styles.alpha}>
+        <div style={styles.checkboard}>
+          <Checkboard renderers={this.props.renderers} />
+        </div>
+        <div style={styles.gradient} />
+        <div
+          style={styles.container}
+          ref={(container) => (this.container = container)}
+          onMouseDown={this.handleMouseDown}
+          onTouchMove={this.handleChange}
+          onTouchStart={this.handleChange}
+        >
+          <div style={styles.pointer}>
+            {this.props.pointer ? (
+              <this.props.pointer {...this.props} />
+            ) : (
+              <div style={styles.slider} />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Alpha;

packages/color-picker/src/components/common/Checkboard.js

@@ -0,0 +1,33 @@
+import React, { isValidElement } from 'react';
+import reactCSS from 'reactcss';
+import * as checkboard from '../../helpers/checkboard';
+
+export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShadow, children }) => {
+  const styles = reactCSS({
+    default: {
+      grid: {
+        borderRadius,
+        boxShadow,
+        absolute: '0px 0px 0px 0px',
+        background: `url(${checkboard.get(white, grey, size, renderers.canvas)}) center left`,
+      },
+    },
+  });
+  return isValidElement(children) ? (
+    React.cloneElement(children, {
+      ...children.props,
+      style: { ...children.props.style, ...styles.grid },
+    })
+  ) : (
+    <div style={styles.grid} />
+  );
+};
+
+Checkboard.defaultProps = {
+  size: 8,
+  white: 'transparent',
+  grey: 'rgba(0,0,0,.08)',
+  renderers: {},
+};
+
+export default Checkboard;

packages/color-picker/src/components/common/ColorWrap.js

@@ -0,0 +1,72 @@
+import React, { Component, PureComponent } from 'react';
+import debounce from 'lodash/debounce';
+import * as color from '../../helpers/color';
+
+export const ColorWrap = (Picker) => {
+  class ColorPicker extends (PureComponent || Component) {
+    constructor(props) {
+      super();
+
+      this.state = {
+        ...color.toState(props.color, 0),
+      };
+
+      this.debounce = debounce((fn, data, event) => {
+        fn(data, event);
+      }, 100);
+    }
+
+    static getDerivedStateFromProps(nextProps, state) {
+      return {
+        ...color.toState(nextProps.color, state.oldHue),
+      };
+    }
+
+    handleChange = (data, event) => {
+      const isValidColor = color.simpleCheckForValidColor(data);
+      if (isValidColor) {
+        const colors = color.toState(data, data.h || this.state.oldHue);
+        this.setState(colors);
+        this.props.onChangeComplete && this.debounce(this.props.onChangeComplete, colors, event);
+        this.props.onChange && this.props.onChange(colors, event);
+      }
+    };
+
+    handleSwatchHover = (data, event) => {
+      const isValidColor = color.simpleCheckForValidColor(data);
+      if (isValidColor) {
+        const colors = color.toState(data, data.h || this.state.oldHue);
+        this.props.onSwatchHover && this.props.onSwatchHover(colors, event);
+      }
+    };
+
+    render() {
+      const optionalEvents = {};
+      if (this.props.onSwatchHover) {
+        optionalEvents.onSwatchHover = this.handleSwatchHover;
+      }
+
+      return (
+        <Picker {...this.props} {...this.state} onChange={this.handleChange} {...optionalEvents} />
+      );
+    }
+  }
+
+  ColorPicker.propTypes = {
+    ...Picker.propTypes,
+  };
+
+  ColorPicker.defaultProps = {
+    ...Picker.defaultProps,
+    color: {
+      h: 250,
+      s: 0.5,
+      l: 0.2,
+      a: 1,
+    },
+  };
+
+  return ColorPicker;
+};
+
+export default ColorWrap;