zent/lib/sku/components/SKUGroup.js

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

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _select = require('../../select');

var _select2 = _interopRequireDefault(_select);

var _checkbox = require('../../checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _SKUContainer = require('./SKUContainer');

var _SKUContainer2 = _interopRequireDefault(_SKUContainer);

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

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

var _ref2 = _react2['default'].createElement(
  'div',
  { className: 'sku-group-cont' },
  _react2['default'].createElement(
    'p',
    { className: 'help-block' },
    '\u76EE\u524D\u53EA\u652F\u6301\u4E3A\u7B2C\u4E00\u4E2A\u89C4\u683C\u8BBE\u7F6E\u4E0D\u540C\u7684\u89C4\u683C\u56FE\u7247'
  ),
  _react2['default'].createElement(
    'p',
    { className: 'help-block' },
    '\u8BBE\u7F6E\u540E\uFF0C\u7528\u6237\u9009\u62E9\u4E0D\u540C\u89C4\u683C\u4F1A\u663E\u793A\u4E0D\u540C\u56FE\u7247'
  ),
  _react2['default'].createElement(
    'p',
    { className: 'help-block' },
    '\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A640 x 640\u50CF\u7D20'
  )
);

var _ref3 = _react2['default'].createElement('div', { className: 'sku-group-cont' });

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

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

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

    _this.filterHandler = function (item, keyword) {
      var maxSKUTextLength = _this.context.maxSKUTextLength;

      if (maxSKUTextLength && maxSKUTextLength > 0) {
        keyword = keyword.substring(0, maxSKUTextLength);
      }
      return item.text.indexOf(keyword) > -1;
    };

    _this.selectSKUHandler = function (evt, sku) {
      var _this$props = _this.props,
          index = _this$props.index,
          onSKUChange = _this$props.onSKUChange;
      var _this$context = _this.context,
          optionValue = _this$context.optionValue,
          optionText = _this$context.optionText;

      sku.leaf = [];
      if (sku[optionValue] === _this.props.sku[optionValue]) return;
      if (sku[optionValue]) {
        onSKUChange(sku, index);
        return;
      }
      _this.createSKU(sku[optionText], index);
    };

    _this.asyncFilterSKU = function (keyword) {
      var skuTree = _this.props.skuTree;
      var _this$context2 = _this.context,
          optionText = _this$context2.optionText,
          maxSKUTextLength = _this$context2.maxSKUTextLength;

      if (maxSKUTextLength && maxSKUTextLength > 0) {
        keyword = keyword.substring(0, maxSKUTextLength);
      }
      if (skuTree.some(function (item) {
        return item[optionText] === keyword;
      })) return;
      _this.setState({
        newSKUText: keyword
      });
    };

    _this.onSKULeafChange = function (leaf) {
      var _this$props2 = _this.props,
          sku = _this$props2.sku,
          index = _this$props2.index,
          onSKUChange = _this$props2.onSKUChange;

      sku.leaf = leaf;
      onSKUChange(sku, index);
    };

    _this.checkSKUImage = function (evt) {
      var _this$props3 = _this.props,
          sku = _this$props3.sku,
          index = _this$props3.index,
          onSKUChange = _this$props3.onSKUChange;

      var isShow = evt.target.checked;
      sku.is_show = isShow;
      sku.leaf = sku.leaf.map(function (item) {
        item.is_show = isShow;
        return item;
      });
      _this.setState({
        hasSKUImage: isShow
      });
      onSKUChange(sku, index);
    };

    _this.handleReset = function () {
      _this.setState({
        newSKUText: ''
      });
    };

    _this.state = {
      newSKUText: '',
      hasSKUImage: props.sku.leaf ? props.sku.leaf.some(function (item) {
        return item.img_url;
      }) : false
    };
    return _this;
  }

  // 选择sku


  (0, _createClass3['default'])(SKUGroup, [{
    key: 'createSKU',


    // 创建sku
    value: function createSKU(text) {
      var _this2 = this;

      var _props = this.props,
          sku = _props.sku,
          index = _props.index,
          onSKUChange = _props.onSKUChange;
      var _context = this.context,
          onCreateGroup = _context.onCreateGroup,
          optionValue = _context.optionValue,
          optionText = _context.optionText;

      onCreateGroup(text).then(function (data) {
        if (data > 0) {
          sku[optionValue] = data;
          sku[optionText] = text;
          _this2.setState({
            newSKUText: ''
          });
          onSKUChange(sku, index);
        }
      });
    }
  }, {
    key: 'rebuildSKULeaf',
    value: function rebuildSKULeaf(sku, index) {
      var subGroup = this.state.subGroup;

      if (subGroup[index]) {
        subGroup[index].leaf = [].concat(sku);
      }
      this.setState({ subGroup: subGroup });
      this.props.onChange(subGroup);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          sku = _props2.sku,
          index = _props2.index,
          skuTree = _props2.skuTree;
      var _context2 = this.context,
          optionValue = _context2.optionValue,
          optionText = _context2.optionText;
      var _state = this.state,
          newSKUText = _state.newSKUText,
          hasSKUImage = _state.hasSKUImage;


      var prefix = this.context.prefix + '-group';

      if (newSKUText) {
        skuTree = [].concat(skuTree);
        if (skuTree[0][optionValue] === 0) {
          skuTree[0][optionText] = newSKUText;
        } else {
          var newSKU = {};
          newSKU[optionValue] = 0;
          newSKU[optionText] = newSKUText;
          skuTree.unshift(newSKU);
        }
      }

      return _react2['default'].createElement(
        'div',
        { className: prefix },
        _react2['default'].createElement(
          'h3',
          { className: 'group-title' },
          _react2['default'].createElement(_select2['default'], {
            open: typeof sku[optionValue] === 'undefined',
            optionValue: optionValue,
            data: skuTree,
            onChange: this.selectSKUHandler,
            filter: this.filterHandler,
            onAsyncFilter: this.asyncFilterSKU,
            onOpen: this.handleReset,
            value: sku[optionValue] || ''
          }),
          index === 0 ? _react2['default'].createElement(
            _checkbox2['default'],
            { checked: hasSKUImage, onChange: this.checkSKUImage },
            '\u6DFB\u52A0\u89C4\u683C\u56FE\u7247'
          ) : '',
          _react2['default'].createElement(
            'span',
            { className: 'group-remove', onClick: this.props.onSKUDelete },
            '\xD7'
          )
        ),
        _react2['default'].createElement(_SKUContainer2['default'], {
          sku: (0, _extends3['default'])({}, sku),
          hasSKUImage: hasSKUImage,
          onSKULeafChange: this.onSKULeafChange
        }),
        hasSKUImage ? _ref2 : _ref3
      );
    }
  }]);
  return SKUGroup;
}(_react.PureComponent || _react.Component);

SKUGroup.contextTypes = {
  prefix: _propTypes2['default'].string,
  maxSKUTextLength: _propTypes2['default'].number,
  optionValue: _propTypes2['default'].string,
  optionText: _propTypes2['default'].string,
  onCreateGroup: _propTypes2['default'].func
};

SKUGroup.propTypes = {
  index: _propTypes2['default'].number,
  sku: _propTypes2['default'].object.isRequired,
  onSKUDelete: _propTypes2['default'].func,
  onSKUChange: _propTypes2['default'].func
};

SKUGroup.defaultProps = {
  index: 0,
  data: {},
  onSKUDelete: noop,
  onSKUChange: noop
};

exports['default'] = SKUGroup;