zent/lib/colorpicker/SketchFields.js

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

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactcss2 = _interopRequireDefault(_reactcss);

var _color = require('./helpers/color');

var _color2 = _interopRequireDefault(_color);

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

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

var ShetchFields = function ShetchFields(_ref) {
  var onChange = _ref.onChange,
      rgb = _ref.rgb,
      hsl = _ref.hsl,
      hex = _ref.hex,
      showAlpha = _ref.showAlpha,
      prefix = _ref.prefix;

  var styles = (0, _reactcss2['default'])({
    'default': {
      fields: {
        display: 'flex',
        paddingTop: '4px'
      },
      single: {
        flex: '1',
        paddingLeft: '6px'
      },
      alpha: {
        flex: '1',
        paddingLeft: '6px'
      },
      double: {
        flex: '2'
      },
      input: {
        width: '80%',
        padding: '4px 10% 3px',
        border: 'none',
        boxShadow: 'inset 0 0 0 1px #ccc',
        fontSize: '11px'
      },
      label: {
        display: 'block',
        textAlign: 'center',
        fontSize: '11px',
        color: '#222',
        paddingTop: '3px',
        paddingBottom: '4px',
        textTransform: 'capitalize'
      }
    },
    showAlpha: {
      alpha: {
        display: 'none'
      }
    }
  }, { showAlpha: !showAlpha });

  var handleChange = function handleChange(data, e) {
    if (data.hex) {
      _color2['default'].isValidHex(data.hex) && onChange({
        hex: data.hex,
        source: 'hex'
      }, e);
    } else if (data.r || data.g || data.b) {
      onChange({
        r: data.r || rgb.r,
        g: data.g || rgb.g,
        b: data.b || rgb.b,
        a: rgb.a,
        source: 'rgb'
      }, e);
    } else if (data.a) {
      if (data.a < 0) {
        data.a = 0;
      } else if (data.a > 100) {
        data.a = 100;
      }

      data.a = data.a / 100;
      onChange({
        h: hsl.h,
        s: hsl.s,
        l: hsl.l,
        a: data.a,
        source: 'rgb'
      }, e);
    }
  };

  return _react2['default'].createElement(
    'div',
    { style: styles.fields, className: prefix + '-colorpicker-input' },
    _react2['default'].createElement(
      'div',
      { style: styles.double },
      _react2['default'].createElement(_common.EditableInput, {
        style: { input: styles.input, label: styles.label },
        label: 'hex',
        value: hex.replace('#', ''),
        onChange: handleChange
      })
    ),
    _react2['default'].createElement(
      'div',
      { style: styles.single },
      _react2['default'].createElement(_common.EditableInput, {
        style: { input: styles.input, label: styles.label },
        label: 'r',
        value: rgb.r,
        onChange: handleChange,
        dragMax: '255'
      })
    ),
    _react2['default'].createElement(
      'div',
      { style: styles.single },
      _react2['default'].createElement(_common.EditableInput, {
        style: { input: styles.input, label: styles.label },
        label: 'g',
        value: rgb.g,
        onChange: handleChange,
        dragMax: '255'
      })
    ),
    _react2['default'].createElement(
      'div',
      { style: styles.single },
      _react2['default'].createElement(_common.EditableInput, {
        style: { input: styles.input, label: styles.label },
        label: 'b',
        value: rgb.b,
        onChange: handleChange,
        dragMax: '255'
      })
    ),
    _react2['default'].createElement(
      'div',
      { style: styles.alpha },
      _react2['default'].createElement(_common.EditableInput, {
        style: { input: styles.input, label: styles.label },
        label: 'a',
        value: Math.round(rgb.a * 100),
        onChange: handleChange,
        dragMax: '100'
      })
    )
  );
};

exports['default'] = ShetchFields;