zent/lib/colorpicker/SketchPresetColors.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactcss = require('./helpers/reactcss');

var _reactcss2 = _interopRequireDefault(_reactcss);

var _common = require('./common');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var SketchPresetColors = function SketchPresetColors(_ref) {
  var colors = _ref.colors,
      _onClick = _ref.onClick,
      prefix = _ref.prefix,
      type = _ref.type;

  var styles = (0, _reactcss2['default'])({
    'default': {
      colors: {
        margin: '0 -10px',
        padding: '10px 0 0 10px',
        borderTop: '1px solid #eee',
        display: 'flex',
        flexWrap: 'wrap',
        position: 'relative'
      },
      swatchWrap: {
        width: '16px',
        height: '16px',
        margin: '0 10px 10px 0'
      },
      swatch: {
        borderRadius: '3px',
        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)'
      }
    },
    'no-presets': {
      colors: {
        display: 'none'
      }
    }
  }, {
    'no-presets': !colors || !colors.length
  });

  var handleClick = function handleClick(hex, e) {
    _onClick({
      hex: hex,
      source: 'hex'
    }, e);
  };

  if (type === 'simple') {
    return _react2['default'].createElement(
      'div',
      { className: prefix + '-colorpicker-colors-select' },
      colors.map(function (color) {
        return _react2['default'].createElement('div', {
          key: color,
          className: prefix + '-colorpicker-colors-select__preview',
          style: { backgroundColor: color },
          onClick: function onClick() {
            return _onClick(color);
          },
          title: color
        });
      })
    );
  }

  return _react2['default'].createElement(
    'div',
    { style: styles.colors, className: prefix + '-colorpicker-colors' },
    colors.map(function (colorObjOrString) {
      var c = typeof colorObjOrString === 'string' ? { color: colorObjOrString } : colorObjOrString;
      return _react2['default'].createElement(
        'div',
        { key: c.color, style: styles.swatchWrap },
        _react2['default'].createElement(_common.Swatch, (0, _extends3['default'])({}, c, { style: styles.swatch, onClick: handleClick }))
      );
    })
  );
};

SketchPresetColors.propTypes = {
  colors: _propTypes2['default'].arrayOf(_propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].shape({
    color: _propTypes2['default'].string,
    title: _propTypes2['default'].string
  })]))
};

exports['default'] = SketchPresetColors;