zent/lib/design/preview/DesignPreviewController.js

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

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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 _reactDom = require('react-dom');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _pop2 = _interopRequireDefault(_pop);

var _pick = require('lodash/pick');

var _pick2 = _interopRequireDefault(_pick);

var _reactDnd = require('react-dnd');

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

var COMPONENT = 'component';

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

  function DesignPreviewController() {
    var _ref2;

    var _temp, _this, _ret;

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

    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 = DesignPreviewController.__proto__ || Object.getPrototypeOf(DesignPreviewController)).call.apply(_ref2, [this].concat(args))), _this), _this.onSelect = function (evt) {
      var editable = _this.props.editable;

      if (!editable) {
        return;
      }

      _this.invokeCallback('onSelect', evt, false);
    }, _this.onEdit = function (evt) {
      _this.invokeCallback('onEdit', evt, true);
    }, _this.onAdd = function (evt) {
      _this.invokeCallback('onAdd', evt, true);
    }, _this.onDelete = function () {
      _this.invokeCallback('onDelete', null, true);
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(DesignPreviewController, [{
    key: 'render',
    value: function render() {
      var _cx;

      var _props = this.props,
          dragable = _props.dragable,
          configurable = _props.configurable,
          highlightWhenSelect = _props.highlightWhenSelect,
          isSelected = _props.isSelected,
          isDragging = _props.isDragging,
          connectDragSource = _props.connectDragSource,
          connectDropTarget = _props.connectDropTarget,
          PreviewComponent = _props.component,
          previewProps = _props.previewProps,
          prefix = _props.prefix;

      var cls = (0, _classnames2['default'])(prefix + '-design-preview-controller', (_cx = {}, (0, _defineProperty3['default'])(_cx, prefix + '-design-preview-controller--selected', isSelected), (0, _defineProperty3['default'])(_cx, prefix + '-design-preview-controller--highlight', highlightWhenSelect), (0, _defineProperty3['default'])(_cx, prefix + '-design-preview-controller--dragable', dragable), _cx));
      var props = (0, _pick2['default'])(this.props, ['value', 'design', 'globalConfig']);
      var style = {
        opacity: isDragging ? 0 : 1
      };
      var tree = _react2['default'].createElement(
        'div',
        { className: cls, style: style, onClick: this.onSelect },
        _react2['default'].createElement(PreviewComponent, (0, _extends3['default'])({ prefix: prefix }, previewProps, props)),
        configurable && _react2['default'].createElement(Actions, {
          prefix: prefix,
          onEdit: this.onEdit,
          onAdd: this.onAdd,
          onDelete: this.onDelete
        })
      );

      if (!dragable) {
        return tree;
      }

      return connectDragSource(connectDropTarget(tree));
    }
  }, {
    key: 'invokeCallback',
    value: function invokeCallback(action, evt, stopPropagation) {
      if (stopPropagation && evt) {
        evt.stopPropagation();
      }

      var value = this.props.value;

      var cb = this.props[action];
      cb && cb(value);
    }
  }]);
  return DesignPreviewController;
}(_react.PureComponent || _react.Component);

DesignPreviewController.propTypes = {
  // 这个组件所在位置的下标
  index: _propTypes2['default'].number.isRequired,

  // 是否可以编辑，UMP里面有些地方config是不能编辑的
  editable: _propTypes2['default'].bool,

  // 组件是否可以拖拽
  dragable: _propTypes2['default'].bool,

  // 是否显示右下角的编辑区域
  configurable: _propTypes2['default'].bool,

  // 选中时是否高亮
  highlightWhenSelect: _propTypes2['default'].bool,

  // 当前是否选中
  isSelected: _propTypes2['default'].bool.isRequired,

  // 这个组件对应的值
  value: _propTypes2['default'].object.isRequired,

  // 选中的会掉函数
  onSelect: _propTypes2['default'].func.isRequired,

  // 编辑的回调函数
  onEdit: _propTypes2['default'].func.isRequired,

  // 添加新组件的回调函数
  onAdd: _propTypes2['default'].func.isRequired,

  // 删除组件的回调函数
  onDelete: _propTypes2['default'].func.isRequired,

  // 拖拽时移动组件的回调函数
  onMove: _propTypes2['default'].func.isRequired,

  // design 组件暴露的方法
  design: _propTypes2['default'].object.isRequired,

  // 用来渲染预览的组件
  component: _propTypes2['default'].func.isRequired,

  // 自定义配置
  globalConfig: _propTypes2['default'].object,

  // preview 额外的 props
  previewProps: _propTypes2['default'].object,

  prefix: _propTypes2['default'].string
};
DesignPreviewController.defaultProps = {
  prefix: 'zent'
};


var dndSource = {
  canDrag: function canDrag(props) {
    return props.dragable;
  },
  beginDrag: function beginDrag(props) {
    return {
      index: props.index
    };
  }
};

var dndTarget = {
  hover: function hover(props, monitor, component) {
    var dragIndex = monitor.getItem().index;
    var hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Determine rectangle on screen
    var hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();

    // Get vertical middle
    var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // Determine mouse position
    var clientOffset = monitor.getClientOffset();

    // Get pixels to the top
    var hoverClientY = clientOffset.y - hoverBoundingRect.top;

    // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%

    // Dragging downwards
    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
      return;
    }

    // Dragging upwards
    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
      return;
    }

    // Time to actually perform the action
    props.onMove(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  }
};

function Actions(_ref3) {
  var onEdit = _ref3.onEdit,
      onAdd = _ref3.onAdd,
      onDelete = _ref3.onDelete,
      prefix = _ref3.prefix;

  return _react2['default'].createElement(
    'div',
    { className: prefix + '-design-preview-controller__actions' },
    _react2['default'].createElement(
      'button',
      {
        onClick: onEdit,
        className: prefix + '-design-preview-controller__action-btn'
      },
      '\u7F16\u8F91'
    ),
    _react2['default'].createElement(
      'button',
      {
        onClick: onAdd,
        className: prefix + '-design-preview-controller__action-btn'
      },
      '\u52A0\u5185\u5BB9'
    ),
    _react2['default'].createElement(
      _pop2['default'],
      {
        content: '\u786E\u5B9A\u5220\u9664\uFF1F',
        trigger: 'click',
        position: 'left-center',
        centerArrow: true,
        onConfirm: onDelete
      },
      _react2['default'].createElement(
        'button',
        { className: prefix + '-design-preview-controller__action-btn' },
        '\u5220\u9664'
      )
    )
  );
}

/* eslint-disable new-cap, no-use-before-define */
exports['default'] = (0, _reactDnd.DropTarget)(COMPONENT, dndTarget, function (connect) {
  return {
    connectDropTarget: connect.dropTarget()
  };
})((0, _reactDnd.DragSource)(COMPONENT, dndSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
})(DesignPreviewController));
/* eslint-enable new-cap, no-use-before-define */