Day14/100 React 颜色选择器

1、需求

在React+Ant Design的项目中，需要选择颜色。
Ant Design 没有合适的组件。

2、React-color

找到了这个插件，周下载量103w

官方给了Demo

import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'

class SketchExample extends React.Component {
  state = {
    displayColorPicker: false,
    color: {
      r: '241',
      g: '112',
      b: '19',
      a: '1',
    },
  };

  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false })
  };

  handleChange = (color) => {
    this.setState({ color: color.rgb })
  };

  render() {

    const styles = reactCSS({
      'default': {
        color: {
          width: '36px',
          height: '14px',
          borderRadius: '2px',
          background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
        },
        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',
        },
      },
    });

    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 }/>
          <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
        </div> : null }

      </div>
    )
  }
}

export default SketchExample

3、实际开发

1、我用的这种形式

2、需要十六进制转Rgba转格式

this.hexToRgba(this.props.toolColor)

hexToRgba(hex) {
    return {
        r: parseInt('0x' + hex.slice(1, 3)),
        g: parseInt('0x' + hex.slice(3, 5)),
        b: parseInt('0x' + hex.slice(5, 7)),
        a: '1',
    };
}

3、二次组件渲染问题

需要从父组件获取数据，重新渲染组件。

最后贴下全部代码

// Copyright 2021 zhaoarden
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'

class SketchColor extends React.Component {
    constructor(props){
        super(props)
        this.state={
            displayColorPicker: false,
        }
    }

    hexToRgba(hex) {
        return {
            r: parseInt('0x' + hex.slice(1, 3)),
            g: parseInt('0x' + hex.slice(3, 5)),
            b: parseInt('0x' + hex.slice(5, 7)),
            a: '1',
        };
    }
    // rgbaTohex(color) {
    //     return '#'+Number(color.r).toString(16)+Number(color.g).toString(16)+Number(color.b).toString(16);
    // }

  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false })
  };

  handleChange = (color) => {
    this.setState({ color: color.rgb })
    this.props.setTooloColor(color.hex)
  };

  render() {
    const {toolColor}=this.props
    let colorData=this.hexToRgba(toolColor)

    const styles = reactCSS({
      'default': {
        color: {
          width: '36px',
          height: '14px',
          borderRadius: '2px',
          background: `rgba(${ colorData.r }, ${ colorData.g }, ${ colorData.b }, ${ colorData.a })`,
        },
        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',
        },
      },
    });

    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 }/>
          <SketchPicker color={ colorData } onChange={ this.handleChange } />
        </div> : null }

      </div>
    )
  }
}

export const ChooseColor = React.memo(SketchColor)

以上

参考资料

http://casesandberg.github.io...