zent/lib/sku/components/SKUContainer.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 _input = require('../../input');

var _input2 = _interopRequireDefault(_input);

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

var _select2 = _interopRequireDefault(_select);

var _pop = require('../../pop');

var _pop2 = _interopRequireDefault(_pop);

var _find = require('lodash/find');

var _find2 = _interopRequireDefault(_find);

var _fullfillImage = require('zan-utils/fullfillImage');

var _fullfillImage2 = _interopRequireDefault(_fullfillImage);

var _upload = require('../../upload');

var _upload2 = _interopRequireDefault(_upload);

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

var _ref2 = _react2['default'].createElement('div', { className: 'arrow' });

var _ref3 = _react2['default'].createElement(
  'span',
  null,
  '\u66FF\u6362'
);

var _ref4 = _react2['default'].createElement(
  'i',
  null,
  '+'
);

var _ref5 = _react2['default'].createElement(
  'span',
  { className: 'sku-add' },
  '+\u6DFB\u52A0'
);

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

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

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

    _this.resetLeaf = function () {
      _this.setState({ leafValue: [] });
    };

    _this.selectSKU = function () {
      var _this$props = _this.props,
          sku = _this$props.sku,
          hasSKUImage = _this$props.hasSKUImage;
      var leafValue = _this.state.leafValue;
      var optionValue = _this.context.optionValue;

      var skuLeaf = _this.skuLeaf.state.selectedItems.map(function (item, key) {
        item[optionValue] = item.value || leafValue[key];
        item.is_show = hasSKUImage;
        delete item.cid;
        return item;
      });
      var skuLeafIds = sku.leaf.map(function (item) {
        return item[optionValue];
      });
      skuLeaf.forEach(function (item) {
        if (skuLeafIds.indexOf(item[optionValue]) < 0) {
          sku.leaf.push(item);
        }
      });
      _this.resetLeaf();
      _this.props.onSKULeafChange(sku.leaf);
    };

    _this.createSKULeaf = function (evt, leaf) {
      var sku = _this.props.sku;
      var _this$state = _this.state,
          leafValue = _this$state.leafValue,
          skuOptions = _this$state.skuOptions;
      var _this$context = _this.context,
          onCreateSKU = _this$context.onCreateSKU,
          optionValue = _this$context.optionValue,
          optionText = _this$context.optionText;

      if (leaf[optionValue] || typeof leaf[optionText] !== 'string') {
        if (leafValue.indexOf(leaf[optionValue]) < 0) {
          leafValue.push(leaf[optionValue]);
        }
        return false;
      }
      if (!leaf[optionText]) {
        return;
      }
      onCreateSKU({
        text: leaf[optionText],
        id: sku[optionValue]
      }).then(function (data) {
        var newSKULeaf = {};
        leafValue.push(data);
        newSKULeaf[optionText] = leaf[optionText];
        newSKULeaf[optionValue] = data;
        skuOptions.push(newSKULeaf);
        _this.setState({
          newLeafText: '',
          leafValue: [].concat(leafValue),
          skuOptions: [].concat(skuOptions)
        });
      });
    };

    _this.updateLeafValue = function (sku) {
      var optionValue = _this.context.optionValue;
      var leafValue = _this.state.leafValue;

      leafValue = leafValue.filter(function (item) {
        return item !== sku[optionValue];
      });
      _this.setState({ leafValue: [].concat(leafValue) });
    };

    _this.asyncFilterSKULeaf = function (keyword) {
      var _this$context2 = _this.context,
          optionText = _this$context2.optionText,
          maxLeafTextLength = _this$context2.maxLeafTextLength;
      var skuOptions = _this.state.skuOptions;

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

    _this.filterSKU = function (item, keyword) {
      var maxLeafTextLength = _this.context.maxLeafTextLength;

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

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

    _this.state = {
      skuOptions: [],
      newLeafText: '',
      leafValue: [],
      id: 0
    };
    return _this;
  }

  (0, _createClass3['default'])(SKUContainer, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var sku = this.props.sku;
      var optionValue = this.context.optionValue;

      sku[optionValue] && this.fetchLeafById(sku[optionValue]);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var optionValue = this.context.optionValue;

      if (this.state.id === nextProps.sku[optionValue]) return;
      this.fetchLeafById(nextProps.sku[optionValue]);
    }
  }, {
    key: 'fetchLeafById',
    value: function fetchLeafById(id) {
      var _this2 = this;

      if (!id) return;
      this.context.onFetchSKU(id).then(function (skuOptions) {
        _this2.setState({
          id: id,
          skuOptions: skuOptions
        });
      });
    }
  }, {
    key: 'removeSKULeaf',
    value: function removeSKULeaf(idx) {
      var sku = this.props.sku;

      sku.leaf.splice(idx, 1);
      this.props.onSKULeafChange(sku.leaf);
    }
  }, {
    key: 'handleRenameSKULeaf',
    value: function handleRenameSKULeaf(index) {
      var _this3 = this;

      var _props = this.props,
          sku = _props.sku,
          onSKULeafChange = _props.onSKULeafChange;
      var _context = this.context,
          optionValue = _context.optionValue,
          optionText = _context.optionText,
          onCreateSKU = _context.onCreateSKU;
      var skuOptions = this.state.skuOptions;

      var findKey = {};
      findKey[optionText] = this.renameText;
      var skuItem = (0, _find2['default'])(skuOptions, findKey);
      if (skuItem) {
        sku.leaf[index] = skuItem;
        onSKULeafChange(sku.leaf);
        return;
      }
      onCreateSKU({
        text: this.renameText,
        id: sku[optionValue]
      }).then(function (data) {
        var newSKULeaf = {};
        newSKULeaf[optionText] = _this3.renameText;
        newSKULeaf[optionValue] = data;
        skuOptions.push(newSKULeaf);
        _this3.setState({
          skuOptions: [].concat(skuOptions)
        });
        sku.leaf[index] = newSKULeaf;
        onSKULeafChange(sku.leaf);
      });
    }
  }, {
    key: 'renderSKUPopContent',
    value: function renderSKUPopContent() {
      var _this4 = this;

      var _context2 = this.context,
          optionValue = _context2.optionValue,
          optionText = _context2.optionText;
      var _state = this.state,
          leafValue = _state.leafValue,
          skuOptions = _state.skuOptions,
          newLeafText = _state.newLeafText;


      if (newLeafText) {
        skuOptions = [].concat(skuOptions);
        if (skuOptions.length > 0 && skuOptions[0][optionValue] === 0) {
          skuOptions[0][optionText] = newLeafText;
        } else {
          var newLeaf = {};
          newLeaf[optionValue] = 0;
          newLeaf[optionText] = newLeafText;
          skuOptions.unshift(newLeaf);
        }
      }

      return _react2['default'].createElement(_select2['default'], {
        ref: function ref(skuLeaf) {
          return _this4.skuLeaf = skuLeaf;
        },
        data: skuOptions,
        optionValue: optionValue,
        tags: true,
        open: true,
        filter: this.filterSKU,
        value: leafValue,
        onAsyncFilter: this.asyncFilterSKULeaf,
        onChange: this.createSKULeaf,
        onDelete: this.updateLeafValue,
        onOpen: this.handleReset
      });
    }
  }, {
    key: 'removeImg',
    value: function removeImg(id) {
      var sku = this.props.sku;
      var optionValue = this.context.optionValue;

      sku.leaf.forEach(function (item) {
        if (item[optionValue] === id) {
          item.img_url = '';
        }
      });
      this.props.onSKULeafChange(sku.leaf);
    }
  }, {
    key: 'uploadSuccess',
    value: function uploadSuccess(id, imageUrl) {
      var sku = this.props.sku;
      var optionValue = this.context.optionValue;

      sku.leaf.forEach(function (item) {
        if (item[optionValue] === id) {
          item.img_url = (0, _fullfillImage2['default'])(imageUrl[0].src, '!100x100.jpg');
        }
      });
      this.props.onSKULeafChange(sku.leaf);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this5 = this;

      var _context3 = this.context,
          optionValue = _context3.optionValue,
          optionText = _context3.optionText,
          prefix = _context3.prefix;
      var _props2 = this.props,
          sku = _props2.sku,
          hasSKUImage = _props2.hasSKUImage;


      return _react2['default'].createElement(
        'div',
        { className: 'group-container' },
        _react2['default'].createElement(
          'div',
          { className: 'sku-list' },
          sku.leaf.map(function (item, index) {
            return _react2['default'].createElement(
              _pop2['default'],
              {
                key: index,
                trigger: 'click',
                position: 'bottom-center',
                content: _react2['default'].createElement(_input2['default'], {
                  defaultValue: item[optionText],
                  onChange: function onChange(evt) {
                    return _this5.renameText = evt.target.value;
                  }
                }),
                wrapperClassName: (0, _classnames2['default'])(_this5.context.prefix + '-item', {
                  active: hasSKUImage
                }),
                onConfirm: _this5.handleRenameSKULeaf.bind(_this5, index)
              },
              _react2['default'].createElement(
                'div',
                null,
                _react2['default'].createElement(
                  'span',
                  null,
                  item[optionText]
                ),
                _react2['default'].createElement(
                  'span',
                  {
                    className: 'item-remove',
                    onClick: _this5.removeSKULeaf.bind(_this5, index)
                  },
                  'x'
                ),
                hasSKUImage ? _react2['default'].createElement(
                  'div',
                  { className: 'upload-img-wrap' },
                  _ref2,
                  item.img_url ? _react2['default'].createElement(
                    'div',
                    { className: 'upload-img' },
                    _react2['default'].createElement(
                      'span',
                      {
                        className: 'item-remove small',
                        title: '\u5220\u9664',
                        onClick: _this5.removeImg.bind(_this5, item[optionValue])
                      },
                      '\xD7'
                    ),
                    _react2['default'].createElement('img', {
                      src: item.img_url,
                      role: 'presentation',
                      alt: '',
                      'data-src': item.img_url
                    }),
                    _react2['default'].createElement(
                      _upload2['default'],
                      {
                        triggerClassName: 'img-edit',
                        materials: true,
                        maxAmount: '1',
                        onUpload: _this5.uploadSuccess.bind(_this5, item[optionValue])
                      },
                      _ref3
                    )
                  ) : _react2['default'].createElement(
                    _upload2['default'],
                    {
                      materials: true,
                      maxAmount: '1',
                      onUpload: _this5.uploadSuccess.bind(_this5, item[optionValue])
                    },
                    _ref4
                  )
                ) : ''
              )
            );
          }),
          sku[optionValue] > 0 ? _react2['default'].createElement(
            _pop2['default'],
            {
              trigger: 'click',
              position: 'bottom-center',
              className: prefix + '-pop',
              wrapperClassName: prefix + '-pop',
              content: this.renderSKUPopContent(),
              onConfirm: this.selectSKU,
              onClose: this.resetLeaf
            },
            _ref5
          ) : ''
        )
      );
    }
  }]);
  return SKUContainer;
}(_react.PureComponent || _react.Component);

SKUContainer.contextTypes = {
  prefix: _propTypes2['default'].string,
  maxLeafTextLength: _propTypes2['default'].number,
  optionValue: _propTypes2['default'].string,
  optionText: _propTypes2['default'].string,
  onFetchSKU: _propTypes2['default'].func,
  onCreateSKU: _propTypes2['default'].func
};

exports['default'] = SKUContainer;