antui-admin/lib/components/form/TransferForm.js

admin ui for antd

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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 _transfer = require('antd/lib/transfer');

var _transfer2 = _interopRequireDefault(_transfer);

require('antd/lib/transfer/style/css');

var _modal = require('antd/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

require('antd/lib/modal/style/css');

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

require('antd/lib/button/style/css');

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

var TransferControlled = function (_Component) {
  (0, _inherits3.default)(TransferControlled, _Component);

  function TransferControlled(props) {
    (0, _classCallCheck3.default)(this, TransferControlled);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TransferControlled.__proto__ || (0, _getPrototypeOf2.default)(TransferControlled)).call(this, props));

    _this.triggerChange = function (nextTargetKeys, direction, moveKeys) {
      _this.setState({ value: nextTargetKeys });

      var onChange = _this.props.onChange;
      if (onChange) {
        onChange(nextTargetKeys);
      }
    };

    _this.showModal = function () {
      _this.setState({
        visible: true
      });
    };

    _this.hideModal = function () {
      _this.setState({
        visible: false
      });
    };

    var value = props.value,
        dataSource = props.dataSource,
        otherProps = (0, _objectWithoutProperties3.default)(props, ['value', 'dataSource']);

    _this.state = {
      value: value,
      dataSource: dataSource,
      visible: false
    };
    _this.otherProps = otherProps;
    return _this;
  }

  (0, _createClass3.default)(TransferControlled, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        var value = nextProps.value;
        this.setState(value);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          dataSource = _state.dataSource,
          value = _state.value;


      var comp = _react2.default.createElement(_transfer2.default, (0, _extends3.default)({}, this.otherProps, {
        dataSource: dataSource,
        titles: ['源', '目标'],
        targetKeys: value,
        onChange: this.triggerChange,
        render: function render(item) {
          return item.title || item.label;
        }
      }));

      if (this.otherProps.modal) {
        return _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            _button2.default,
            { onClick: this.showModal },
            '\u8BF7\u9009\u62E9',
            this.otherProps.title
          ),
          _react2.default.createElement(
            _modal2.default,
            (0, _extends3.default)({
              title: "请选择" + this.otherProps.title,
              visible: this.state && this.state.visible,
              onOk: this.hideModal,
              onCancel: this.hideModal,
              okText: '\u786E\u5B9A',
              cancelText: '\u53D6\u6D88'
            }, this.otherProps.modal),
            comp
          )
        );
      }

      return comp;
    }
  }]);
  return TransferControlled;
}(_react.Component);

/**
 * TransferForm组件
 */

TransferControlled.propTypes = {
  value: _propTypes2.default.array,
  dataSource: _propTypes2.default.array,
  onChange: _propTypes2.default.func
};

exports.default = function (_ref) {
  var form = _ref.form,
      name = _ref.name,
      dict = _ref.dict,
      _ref$formFieldOptions = _ref.formFieldOptions,
      formFieldOptions = _ref$formFieldOptions === undefined ? {} : _ref$formFieldOptions,
      record = _ref.record,
      initialValue = _ref.initialValue,
      rules = _ref.rules,
      onChange = _ref.onChange,
      dataSource = _ref.dataSource,
      otherProps = (0, _objectWithoutProperties3.default)(_ref, ['form', 'name', 'dict', 'formFieldOptions', 'record', 'initialValue', 'rules', 'onChange', 'dataSource']);
  var getFieldDecorator = form.getFieldDecorator;


  var initval = initialValue;

  if (record) {
    initval = record[name];
  }

  // 如果存在初始值
  if (initval !== null && typeof initval !== "undefined") {
    formFieldOptions.initialValue = initval;
  }

  // 如果有rules
  if (rules && rules.length) {
    formFieldOptions.rules = rules;
  }

  // 如果需要onChange
  if (typeof onChange === "function") {
    formFieldOptions.onChange = function (value) {
      return onChange(form, value);
    }; // form, value
  }

  return getFieldDecorator(name, formFieldOptions)(_react2.default.createElement(TransferControlled, (0, _extends3.default)({ dataSource: dataSource }, otherProps)));
};

module.exports = exports['default'];