zent/src/colorpicker/common/Swatch.js

一套前端设计语言和基于React的实现

import React from 'react';
import reactCSS from '../helpers/reactcss';

export const Swatch = ({ color, style, onClick, title = color }) => {
  const styles = reactCSS(
    {
      default: {
        swatch: {
          background: color,
          height: '100%',
          width: '100%',
          cursor: 'pointer'
        }
      },
      custom: {
        swatch: style
      }
    },
    'custom'
  );

  const handleClick = e => {
    onClick(color, e);
  };

  return <div style={styles.swatch} onClick={handleClick} title={title} />;
};

export default Swatch;