zent/lib/colorpicker/common/ColorWrap.js

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

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _debounce = require('lodash/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

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

var _color2 = _interopRequireDefault(_color);

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

var ColorWrap = exports.ColorWrap = function ColorWrap(Picker) {
  var ColorPicker = function (_Component) {
    (0, _inherits3['default'])(ColorPicker, _Component);

    function ColorPicker(props) {
      (0, _classCallCheck3['default'])(this, ColorPicker);

      var _this = (0, _possibleConstructorReturn3['default'])(this, (ColorPicker.__proto__ || Object.getPrototypeOf(ColorPicker)).call(this, props));

      _this.handleChange = function (data, event) {
        var isValidColor = _color2['default'].simpleCheckForValidColor(data);
        if (isValidColor) {
          var colors = _color2['default'].toState(data, data.h || _this.state.oldHue);
          _this.setState(colors);

          // 外部传入回调
          _this.props.onChangeComplete && _this.debounce(_this.props.onChangeComplete, colors, event);
          _this.props.onChange && _this.props.onChange(colors, event);
        }
      };

      _this.state = (0, _extends3['default'])({}, _color2['default'].toState(props.color, 0), {
        visible: props.display
      });
      _this.debounce = (0, _debounce2['default'])(function (fn, data, event) {
        fn(data, event);
      }, 100);
      return _this;
    }

    (0, _createClass3['default'])(ColorPicker, [{
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        this.setState((0, _extends3['default'])({}, _color2['default'].toState(nextProps.color, this.state.oldHue), {
          visible: nextProps.display
        }));
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2['default'].createElement(Picker, (0, _extends3['default'])({}, this.props, this.state, { onChange: this.handleChange }));
      }
    }]);
    return ColorPicker;
  }(_react.Component);

  ColorPicker.defaultProps = {
    color: {
      h: 250,
      s: 0.5,
      l: 0.2,
      a: 1
    }
  };

  return ColorPicker;
};

exports['default'] = ColorWrap;