d2-ui/node_modules-v25.0.x/react-color/examples/sketch.md

d2-ui

```
var React = require('react');
var ReactCSS = require('reactcss');
var ColorPicker = require('react-color');

class SketchExample extends ReactCSS.Component {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
      color: '#F17013',
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  classes() {
    return {
      'default': {
        color: {
          width: '36px',
          height: '14px',
          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',
        },
      },
    };
  }

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

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

  handleChange(color) {
    this.setState({ color: '#' + color.hex });
  }

  render() {
    return (
      <div>
        <div is="swatch" onClick={ this.handleClick }>
          <div is="color" />
        </div>
        <ColorPicker
          color={ this.state.color }
          position="below"
          display={ this.state.displayColorPicker }
          onChange={ this.handleChange }
          onClose={ this.handleClose }
          type="sketch" />
      </div>
    );
  }
};
```