zent/lib/design/editor/DesignEditorAddComponent.js

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

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _isFunction = require('lodash/isFunction');

var _isFunction2 = _interopRequireDefault(_isFunction);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _designType = require('../utils/design-type');

var _componentGroup = require('../utils/component-group');

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

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

  function DesignEditorAddComponent() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, DesignEditorAddComponent);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref2 = DesignEditorAddComponent.__proto__ || Object.getPrototypeOf(DesignEditorAddComponent)).call.apply(_ref2, [this].concat(args))), _this), _this.onAdd = function (component) {
      return function () {
        var componentInstanceCount = _this.props.componentInstanceCount;


        if (canAddMoreInstance(component, componentInstanceCount)) {
          var shouldCreate = component.shouldCreate;

          shouldAddComponentPromise(component, shouldCreate).then(function () {
            var _this$props = _this.props,
                fromSelected = _this$props.fromSelected,
                onAddComponent = _this$props.onAddComponent;

            onAddComponent(component, fromSelected);
          }, _noop2['default']);
        }
      };
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(DesignEditorAddComponent, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          components = _props.components,
          prefix = _props.prefix,
          componentInstanceCount = _props.componentInstanceCount;


      if (!components || !components.length) {
        return null;
      }

      if ((0, _componentGroup.isGrouped)(components)) {
        return this.renderGrouped();
      }

      return _react2['default'].createElement(
        'div',
        {
          className: prefix + '-design-editor-add-component ' + prefix + '-design-editor-add-component--mixed'
        },
        _react2['default'].createElement(
          'div',
          { className: prefix + '-design-editor-add-component__mixed-title' },
          '\u6DFB\u52A0\u5185\u5BB9'
        ),
        _react2['default'].createElement(
          'div',
          { className: prefix + '-design-editor-add-component__mixed-list' },
          components.map(function (c, idx) {
            return _react2['default'].createElement(
              'button',
              {
                onClick: _this2.onAdd(c),
                key: idx,
                className: (0, _classnames2['default'])(prefix + '-design-editor-add-component__mixed-btn', (0, _defineProperty3['default'])({}, prefix + '-design-editor-add-component__mixed-btn--disabled', !canAddMoreInstance(c, componentInstanceCount)))
              },
              c.editor.designDescription
            );
          })
        )
      );
    }
  }, {
    key: 'renderGrouped',
    value: function renderGrouped() {
      var _this3 = this;

      var _props2 = this.props,
          components = _props2.components,
          prefix = _props2.prefix,
          componentInstanceCount = _props2.componentInstanceCount;

      var groups = (0, _componentGroup.splitGroup)(components);

      return _react2['default'].createElement(
        'div',
        {
          className: prefix + '-design-editor-add-component ' + prefix + '-design-editor-add-component--grouped'
        },
        groups.map(function (g) {
          return _react2['default'].createElement(ComponentGroup, {
            key: g.group.name,
            group: g.group,
            components: g.components,
            componentInstanceCount: componentInstanceCount,
            prefix: prefix,
            onAdd: _this3.onAdd
          });
        })
      );
    }
  }]);
  return DesignEditorAddComponent;
}(_react.PureComponent || _react.Component);

DesignEditorAddComponent.propTypes = {
  components: _propTypes2['default'].array,

  componentInstanceCount: _propTypes2['default'].object,

  onAddComponent: _propTypes2['default'].func.isRequired,

  fromSelected: _propTypes2['default'].bool,

  prefix: _propTypes2['default'].string
};
DesignEditorAddComponent.defaultProps = {
  fromSelected: false,
  prefix: 'zent'
};
exports['default'] = DesignEditorAddComponent;


function ComponentGroup(_ref3) {
  var prefix = _ref3.prefix,
      group = _ref3.group,
      components = _ref3.components,
      onAdd = _ref3.onAdd,
      componentInstanceCount = _ref3.componentInstanceCount;

  return _react2['default'].createElement(
    'div',
    { className: prefix + '-design-editor-add-component__grouped' },
    _react2['default'].createElement(
      'p',
      { className: prefix + '-design-editor-add-component__grouped-title' },
      group.name
    ),
    _react2['default'].createElement(
      'div',
      { className: prefix + '-design-editor-add-component__grouped-list' },
      components.map(function (c, idx) {
        return _react2['default'].createElement(
          'button',
          {
            onClick: onAdd(c),
            key: idx,
            className: (0, _classnames2['default'])(prefix + '-design-editor-add-component__grouped-btn', (0, _defineProperty3['default'])({}, prefix + '-design-editor-add-component__grouped-btn--disabled', !canAddMoreInstance(c, componentInstanceCount)))
          },
          c.editor.designDescription
        );
      })
    )
  );
}

function canAddMoreInstance(component, componentInstanceCount) {
  var type = component.type,
      limit = component.limit;

  var key = (0, _designType.serializeDesignType)(type);
  var count = componentInstanceCount.get(key);

  if ((0, _isFunction2['default'])(limit)) {
    return limit(count);
  }

  return limit ? count < limit : true;
}

// Normalize to Promise
function shouldAddComponentPromise(component, fn) {
  if ((0, _isFunction2['default'])(fn)) {
    return fn(component);
  }

  return Promise.resolve();
}