zent/lib/sku/SKU.js

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

'use strict';

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

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _notify = require('../notify');

var _notify2 = _interopRequireDefault(_notify);

var _SKUGroup = require('./components/SKUGroup');

var _SKUGroup2 = _interopRequireDefault(_SKUGroup);

var _SKUButton = require('./components/SKUButton');

var _SKUButton2 = _interopRequireDefault(_SKUButton);

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

var noop = function noop(res) {
  return res;
};

var noopPromise = function noopPromise() {
  return new Promise(noop);
};

var SKU = function (_ref) {
  (0, _inherits3['default'])(SKU, _ref);

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

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

    _this.addSKU = function () {
      var data = _this.state.data;

      data.push({
        leaf: []
      });
      data = [].concat(data);
      _this.setState({ data: data });
    };

    _this.rebuildSKU = function (sku, index) {
      var optionValue = _this.props.optionValue;
      var _this$state = _this.state,
          data = _this$state.data,
          skuTree = _this$state.skuTree;

      if (data.some(function (item, idx) {
        return item[optionValue] === sku[optionValue] && index !== idx;
      })) {
        _notify2['default'].error('规格名不能相同');
        data = [].concat(data);
        _this.setState({ data: data });
        return false;
      }
      if (data[index]) {
        data[index] = sku;
      } else {
        data.push(sku);
      }
      if (!skuTree.some(function (item) {
        return item[optionValue] === sku[optionValue];
      })) {
        skuTree.push(sku);
        _this.setState({ skuTree: [].concat(skuTree) });
      }
      data = [].concat(data);

      _this.setState({ data: data });
      _this.props.onChange(data);
    };

    _this.state = {
      skuTree: [].concat(props.skuTree),
      data: props.value
    };
    return _this;
  }

  (0, _createClass3['default'])(SKU, [{
    key: 'getChildContext',
    value: function getChildContext() {
      return {
        prefix: this.props.prefix + '-sku',
        maxSKUTextLength: this.props.maxSKUTextLength,
        maxLeafTextLength: this.props.maxLeafTextLength,
        optionValue: this.props.optionValue,
        optionText: this.props.optionText,
        onFetchSKU: this.props.onFetchSKU,
        onCreateGroup: this.props.onCreateGroup,
        onCreateSKU: this.props.onCreateSKU
      };
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      var onFetchGroup = this.props.onFetchGroup;

      if (typeof onFetchGroup === 'function') {
        onFetchGroup().then(function (skuTree) {
          _this2.setState({ skuTree: [].concat(skuTree) });
        });
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        data: nextProps.value
      });
    }
  }, {
    key: 'deleteSKU',
    value: function deleteSKU(index) {
      var data = this.state.data;

      data.splice(index, 1);
      data = [].concat(data);
      this.setState({ data: data });
      this.props.onChange(data);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          className = _props.className,
          prefix = _props.prefix,
          maxSize = _props.maxSize,
          onCreateGroup = _props.onCreateGroup,
          disabled = _props.disabled;
      var _state = this.state,
          skuTree = _state.skuTree,
          data = _state.data;


      return _react2['default'].createElement(
        'div',
        { className: (0, _classnames2['default'])(prefix + '-sku', className) },
        data.map(function (item, index) {
          return _react2['default'].createElement(_SKUGroup2['default'], {
            key: index,
            index: index,
            sku: item,
            skuTree: skuTree,
            onSKUChange: _this3.rebuildSKU,
            onSKUDelete: _this3.deleteSKU.bind(_this3, index),
            onSKUCreate: onCreateGroup
          });
        }),
        data.length < maxSize ? _react2['default'].createElement(_SKUButton2['default'], { onClick: this.addSKU, disabled: disabled }) : ''
      );
    }
  }]);
  return SKU;
}(_react.PureComponent || _react.Component);

SKU.childContextTypes = {
  prefix: _propTypes2['default'].string,
  maxSKUTextLength: _propTypes2['default'].number,
  maxLeafTextLength: _propTypes2['default'].number,
  optionValue: _propTypes2['default'].string,
  optionText: _propTypes2['default'].string,
  onFetchSKU: _propTypes2['default'].func,
  onCreateGroup: _propTypes2['default'].func,
  onCreateSKU: _propTypes2['default'].func
};

SKU.propTypes = {
  className: _propTypes2['default'].string,
  value: _propTypes2['default'].array,
  disabled: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].bool]),
  maxSize: _propTypes2['default'].number,
  maxSKUTextLength: _propTypes2['default'].number,
  maxLeafTextLength: _propTypes2['default'].number,
  skuTree: _propTypes2['default'].array,
  optionValue: _propTypes2['default'].string,
  optionText: _propTypes2['default'].string,
  onFetchGroup: _propTypes2['default'].func,
  onFetchSKU: _propTypes2['default'].func,
  onCreateGroup: _propTypes2['default'].func,
  onCreateSKU: _propTypes2['default'].func,
  onChange: _propTypes2['default'].func,
  prefix: _propTypes2['default'].string
};

SKU.defaultProps = {
  className: '',
  value: [],
  maxSize: 3,
  maxSKUTextLength: 4,
  maxLeafTextLength: 20,
  skuTree: [],
  optionValue: 'id',
  optionText: 'text',
  onFetchGroup: noopPromise,
  onFetchSKU: noopPromise,
  onCreateGroup: noopPromise,
  onCreateSKU: noopPromise,
  onChange: noop,
  prefix: 'zent'
};

exports['default'] = SKU;