choerodon-ui/pro/lib/lov/Lov.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobxReact = require("mobx-react");

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _mobx = require("mobx");

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _enum = require("../../../lib/_util/enum");

var _configure = require("../../../lib/configure");

var _icon = _interopRequireDefault(require("../icon"));

var _ModalContainer = require("../modal-container/ModalContainer");

var _LovView = _interopRequireDefault(require("./LovView"));

var _DataSet = _interopRequireDefault(require("../data-set/DataSet"));

var _Record = _interopRequireDefault(require("../data-set/Record"));

var _spin = _interopRequireDefault(require("../spin"));

var _LovCodeStore = _interopRequireDefault(require("../stores/LovCodeStore"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _EventManager = require("../_util/EventManager");

var _Select2 = require("../select/Select");

var _enum2 = require("../table/enum");

var _enum3 = require("../data-set/enum");

var _enum4 = require("./enum");

var _Button = _interopRequireDefault(require("../button/Button"));

var _enum5 = require("../button/enum");

var _localeContext = require("../locale-context");

var _utils = require("../stores/utils");

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var Lov =
/*#__PURE__*/
function (_Select) {
  (0, _inherits2["default"])(Lov, _Select);

  var _super = _createSuper(Lov);

  function Lov() {
    var _this;

    (0, _classCallCheck2["default"])(this, Lov);
    _this = _super.apply(this, arguments);
    _this.openModal = (0, _mobx.action)(function (fetchSingle) {
      var config = _this.getConfig();

      var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
          options = _assertThisInitialize.options,
          multiple = _assertThisInitialize.multiple,
          primitive = _assertThisInitialize.primitive,
          valueField = _assertThisInitialize.valueField; // TODO：lovEvents deprecated


      var lovEvents = _this.props.lovEvents;

      var modalProps = _this.getModalProps();

      var tableProps = _this.getTableProps();

      var noCache = _this.getProp('noCache');

      if (!_this.modal && config && options) {
        var width = config.width,
            title = config.title;
        options.unSelectAll();
        options.clearCachedSelected();

        if (multiple) {
          options.setCachedSelected(_this.getValues().map(function (value) {
            var selected = new _Record["default"](primitive ? (0, _defineProperty2["default"])({}, valueField, value) : (0, _mobx.toJS)(value), options);
            selected.isSelected = true;
            selected.isCached = true;
            selected.status = _enum3.RecordStatus.sync;
            return selected;
          }));
        }

        if (lovEvents) {
          Object.keys(lovEvents).forEach(function (event) {
            return options.addEventListener(event, lovEvents[event]);
          });
        }

        _this.modal = (0, _ModalContainer.open)((0, _objectSpread2["default"])({
          title: title,
          children: _react["default"].createElement(_LovView["default"], {
            dataSet: options,
            config: config,
            tableProps: tableProps,
            onDoubleClick: _this.handleLovViewSelect,
            onEnterDown: _this.handleLovViewSelect,
            multiple: _this.multiple,
            values: _this.getValues()
          }),
          onClose: _this.handleLovViewClose,
          onOk: _this.handleLovViewOk,
          destroyOnClose: true,
          closable: true
        }, modalProps, {
          style: (0, _objectSpread2["default"])({
            width: (0, _UnitConvertor.pxToRem)(width),
            minHeight: (0, _UnitConvertor.pxToRem)(Math.min(350, window.innerHeight))
          }, modalProps && modalProps.style),
          afterClose: _this.handleLovViewAfterClose
        }));

        if (_this.resetOptions(noCache) && fetchSingle !== true) {
          options.query();
        } else if (multiple) {
          options.releaseCachedSelected();
        }
      }
    });

    _this.handleLovViewSelect = function () {
      _this.modal.close();

      _this.handleLovViewOk();
    };

    _this.handleLovViewClose =
    /*#__PURE__*/
    (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee() {
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              delete _this.modal;

              _this.focus();

            case 2:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    /**
     * 关闭弹窗移除时间监听 后续废弃
     */

    _this.handleLovViewAfterClose = function () {
      // TODO：lovEvents deprecated
      var _assertThisInitialize2 = (0, _assertThisInitialized2["default"])(_this),
          options = _assertThisInitialize2.options,
          lovEvents = _assertThisInitialize2.props.lovEvents;

      var _this$getModalProps = _this.getModalProps(),
          _this$getModalProps$a = _this$getModalProps.afterClose,
          afterClose = _this$getModalProps$a === void 0 ? _noop["default"] : _this$getModalProps$a;

      afterClose();

      if (lovEvents) {
        Object.keys(lovEvents).forEach(function (event) {
          return options.removeEventListener(event, lovEvents[event]);
        });
      }
    };

    _this.handleLovViewOk =
    /*#__PURE__*/
    (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee2() {
      var _assertThisInitialize3, options, multiple, tableProps, selectionMode, result, records, values;

      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _assertThisInitialize3 = (0, _assertThisInitialized2["default"])(_this), options = _assertThisInitialize3.options, multiple = _assertThisInitialize3.multiple;
              tableProps = _this.getTableProps(); // 根据 mode 进行区分 假如 存在 rowbox 这些 不应该以 current 作为基准

              selectionMode = (0, _objectSpread2["default"])({
                selectionMode: multiple ? _enum2.SelectionMode.rowbox : _enum2.SelectionMode.none
              }, tableProps).selectionMode;

              if (tableProps.alwaysShowRowBox) {
                selectionMode = _enum2.SelectionMode.rowbox;
              }

              result = [];
              records = selectionMode === _enum2.SelectionMode.rowbox ? options.selected : result.concat(options.current || []);
              values = records.map(function (record) {
                return _this.processRecordToObject(record);
              });

              if (values[0] || multiple) {
                _this.setValue(multiple ? values : values[0] || _this.emptyValue);
              }

            case 8:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));
    return _this;
  }

  (0, _createClass2["default"])(Lov, [{
    key: "getPopupProps",

    /**
     * 增加lov popupContent 回调参数 用于控制对应交互
     */
    value: function getPopupProps() {
      var _this2 = this;

      var options = this.options,
          textField = this.textField,
          field = this.field,
          valueField = this.valueField;
      return {
        dataSet: options,
        textField: textField,
        valueField: valueField,
        field: field,
        setValue: function setValue(value) {
          return _this2.setValue(value);
        },
        setPopup: function setPopup(hidden) {
          return _this2.setPopup(hidden);
        }
      };
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      if (this.props.searchAction === _enum4.SearchAction.input) {
        return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "getPopupContent", this).call(this);
      }

      return null;
    }
  }, {
    key: "searchRemote",

    /**
     * 处理 Lov input 查询参数
     * @param text
     */
    value: function searchRemote(text) {
      if (this.filterText !== text) {
        var options = this.options,
            searchMatcher = this.searchMatcher,
            paramMatcher = this.paramMatcher,
            record = this.record,
            textField = this.textField,
            valueField = this.valueField;
        this.filterText = text;

        if (text && (0, _isString["default"])(searchMatcher)) {
          this.resetOptions(true);
          var textMatcher = text;

          if ((0, _isString["default"])(paramMatcher)) {
            textMatcher = text + paramMatcher;
          } else if ((0, _isFunction["default"])(paramMatcher)) {
            textMatcher = paramMatcher({
              record: record,
              text: text,
              textField: textField,
              valueField: valueField
            }) || text;
          }

          options.setQueryParameter(searchMatcher, textMatcher);

          if (this.props.searchAction === _enum4.SearchAction.input) {
            options.query();
          }
        }
      }
    }
  }, {
    key: "resetOptions",
    value: function resetOptions() {
      var noCache = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      var field = this.field,
          record = this.record,
          options = this.options;
      var queryDataSet = options.queryDataSet,
          pageSize = options.props.pageSize;
      var dirty = noCache;

      if (noCache) {
        options.pageSize = pageSize || 10;
      }

      if (queryDataSet && noCache) {
        var current = queryDataSet.current;

        if (current && current.dirty) {
          dirty = true;
          current.reset();
        }
      }

      if (field) {
        var lovPara = (0, _utils.getLovPara)(field, record);

        if (!(0, _isEqual["default"])(lovPara, options.queryParameter)) {
          options.queryParameter = lovPara;
          return true;
        }

        options.first();

        if (!options.length) {
          return true;
        }
      }

      return dirty;
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (!this.popup && e.keyCode === _KeyCode["default"].DOWN) {
        (0, _EventManager.stopEvent)(e);
        this.openModal();
      }

      if (e.keyCode === _KeyCode["default"].ENTER && this.props.searchAction === _enum4.SearchAction.blur) {
        (0, _EventManager.stopEvent)(e);
        this.blur();
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (this.modal) {
        e.preventDefault();
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "handleBlur", this).call(this, e);
    }
  }, {
    key: "getWrapperProps",
    value: function getWrapperProps() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "getWrapperProps", this).call(this, {
        onDoubleClick: this.handleOpenModal(),
        // Support ued to distinguish between select and lov
        className: this.getWrapperClassNames("".concat(this.prefixCls, "-lov"))
      });
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(value) {
      var _this3 = this;

      var textField = this.textField;
      var _this$props = this.props,
          mode = _this$props.mode,
          searchAction = _this$props.searchAction,
          fetchSingle = _this$props.fetchSingle;

      if (mode !== _enum4.ViewMode.button) {
        var hasRecord = false;

        if (this.getValue()) {
          hasRecord = this.getValue()[textField] === value;
        }

        if (searchAction === _enum4.SearchAction.blur && value && !hasRecord) {
          this.options.query().then(function () {
            var length = _this3.options.length;

            if (length > 1 && !fetchSingle || length === 1) {
              _this3.choose(_this3.options.get(0));
            } else if (_this3.options.length && fetchSingle) {
              _this3.openModal(fetchSingle);
            }
          });
        } else {
          (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "syncValueOnBlur", this).call(this, value);
        }
      }
    }
  }, {
    key: "getConfig",
    value: function getConfig() {
      var lovCode = this.lovCode;

      if (lovCode) {
        return _LovCodeStore["default"].getConfig(lovCode);
      }
    }
  }, {
    key: "getPlaceholders",
    value: function getPlaceholders() {
      var placeholder = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "getPlaceholders", this).call(this);

      if (placeholder.length) {
        return placeholder;
      }

      var config = this.getConfig();

      if (config) {
        var holder = config.placeholder;
        var holders = [];
        return holder ? holders.concat(holder) : holders;
      }

      return [];
    }
  }, {
    key: "getModalProps",
    value: function getModalProps() {
      var modalProps = this.props.modalProps;
      return (0, _objectSpread2["default"])({}, (0, _configure.getConfig)('lovModalProps'), {}, modalProps);
    }
  }, {
    key: "getTableProps",
    value: function getTableProps() {
      var tableProps = this.props.tableProps;
      return (0, _objectSpread2["default"])({}, (0, _configure.getConfig)('lovTableProps'), {}, tableProps);
    }
  }, {
    key: "selectSingle",
    value: function selectSingle() {
      var _this4 = this;

      var options = this.options;
      options.query().then(function () {
        if (options.length === 1) {
          _this4.choose(_this4.options.get(0));
        } else {
          _this4.openModal();
        }
      });
    }
  }, {
    key: "handleOpenModal",
    value: function handleOpenModal() {
      if (!this.isDisabled() && !this.isReadOnly()) {
        return this.autoSelectSingle ? this.selectSingle : this.openModal;
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return (0, _omit["default"])((0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "getOtherProps", this).call(this), ['modalProps', 'noCache', 'tableProps', 'lovEvents', 'searchAction', 'fetchSingle', 'autoSelectSingle']);
    }
  }, {
    key: "getButtonProps",
    value: function getButtonProps() {
      var _this$props2 = this.props,
          className = _this$props2.className,
          type = _this$props2.type;
      var options = this.options;
      var props = (0, _objectSpread2["default"])({}, _Button["default"].defaultProps, {}, (0, _omit["default"])(this.getOtherProps(), ['name']), {
        dataSet: options,
        className: (0, _classnames["default"])(className, "".concat(this.prefixCls, "-lov")),
        type: type
      });

      if (!this.isValid) {
        props.color = _enum5.ButtonColor.red;
      }

      return props;
    }
  }, {
    key: "getSuffix",
    value: function getSuffix() {
      var suffix = this.props.suffix;
      var icon = this.loading ? _react["default"].createElement(_spin["default"], {
        className: "".concat(this.prefixCls, "-lov-spin")
      }) : _react["default"].createElement(_icon["default"], {
        type: "search"
      });
      return this.wrapperSuffix(suffix || icon, {
        onClick: this.handleOpenModal()
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "componentWillUnmount", this).call(this);

      if (this.modal) {
        this.modal.close();
      }
    }
  }, {
    key: "select",
    value: function select() {
      var mode = this.props.mode;

      if (mode !== _enum4.ViewMode.button) {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "select", this).call(this);
      }
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var _this5 = this;

      var _this$props3 = this.props,
          mode = _this$props3.mode,
          children = _this$props3.children,
          clearButton = _this$props3.clearButton;

      if (mode === _enum4.ViewMode.button) {
        var elements = [_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
          key: "lov_button"
        }, this.getButtonProps(), {
          disabled: this.isDisabled(),
          onClick: function onClick() {
            return _this5.openModal();
          }
        }), children || this.getTextNode() || this.getPlaceholders()[0] || (0, _localeContext.$l)('Lov', 'choose'))];

        if (clearButton) {
          elements.push(_react["default"].createElement(_Button["default"], {
            key: "lov_clear_button",
            size: _enum.Size.small,
            funcType: _enum5.FuncType.flat,
            icon: "close",
            onClick: this.handleClearButtonClick
          }));
        }

        return elements;
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Lov.prototype), "renderWrapper", this).call(this);
    }
  }, {
    key: "searchMatcher",
    get: function get() {
      var searchMatcher = this.observableProps.searchMatcher;

      if ((0, _isString["default"])(searchMatcher)) {
        return searchMatcher;
      }

      return this.textField;
    }
  }, {
    key: "paramMatcher",
    get: function get() {
      var paramMatcher = this.observableProps.paramMatcher;
      return paramMatcher;
    }
  }, {
    key: "searchable",
    get: function get() {
      var searchable = this.observableProps.searchable;

      if (searchable === false) {
        return searchable;
      }

      var config = this.getConfig();

      if (config) {
        return config.editableFlag === 'Y';
      }

      return true;
    }
  }, {
    key: "lovCode",
    get: function get() {
      var field = this.field;

      if (field) {
        return field.get('lovCode');
      }

      return undefined;
    }
  }, {
    key: "popup",
    get: function get() {
      return !this.filterText || this.modal ? false : this.statePopup;
    }
    /**
     * 点击查询仅存在一条数据时自动选中
     */

  }, {
    key: "autoSelectSingle",
    get: function get() {
      if ('autoSelectSingle' in this.props) {
        return this.props.autoSelectSingle;
      }

      var autoSelectSingle = (0, _configure.getConfig)('lovAutoSelectSingle');

      if (typeof autoSelectSingle !== 'undefined') {
        return autoSelectSingle;
      }

      return false;
    }
  }, {
    key: "options",
    get: function get() {
      var field = this.field,
          lovCode = this.lovCode;

      if (field) {
        var options = field.options;

        if (options) {
          return options;
        }
      }

      if (lovCode) {
        var lovDataSet = _LovCodeStore["default"].getLovDataSet(lovCode, field);

        if (lovDataSet) {
          return lovDataSet;
        }
      }

      return new _DataSet["default"]();
    }
  }, {
    key: "loading",
    get: function get() {
      var options = this.options,
          searchAction = this.props.searchAction;
      return (searchAction === _enum4.SearchAction.blur || Boolean(this.autoSelectSingle)) && options.status === _enum3.DataSetStatus.loading && !this.popup;
    }
  }]);
  return Lov;
}(_Select2.Select);

Lov.displayName = 'Lov';
Lov.propTypes = (0, _objectSpread2["default"])({}, _Select2.Select.propTypes, {}, _Button["default"].propTypes, {
  modalProps: _propTypes["default"].object,
  tableProps: _propTypes["default"].object,
  noCache: _propTypes["default"].bool,
  fetchSingle: _propTypes["default"].bool,
  autoSelectSingle: _propTypes["default"].bool,

  /**
   * 触发查询变更的动作， default: input
   */
  searchAction: _propTypes["default"].oneOf([_enum4.SearchAction.blur, _enum4.SearchAction.input])
});
Lov.defaultProps = (0, _objectSpread2["default"])({}, _Select2.Select.defaultProps, {
  clearButton: true,
  checkValueOnOptionsChange: false,
  searchAction: _enum4.SearchAction.input,
  fetchSingle: false
});
(0, _tslib.__decorate)([_mobx.observable], Lov.prototype, "filterText", void 0);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "searchMatcher", null);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "paramMatcher", null);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "searchable", null);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "lovCode", null);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "popup", null);
(0, _tslib.__decorate)([_autobind["default"]], Lov.prototype, "getPopupProps", null);
(0, _tslib.__decorate)([_autobind["default"]], Lov.prototype, "getPopupContent", null);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "options", null);
(0, _tslib.__decorate)([_mobx.action], Lov.prototype, "searchRemote", null);
(0, _tslib.__decorate)([_autobind["default"]], Lov.prototype, "handleKeyDown", null);
(0, _tslib.__decorate)([_autobind["default"]], Lov.prototype, "handleBlur", null);
(0, _tslib.__decorate)([_autobind["default"]], Lov.prototype, "selectSingle", null);
(0, _tslib.__decorate)([_autobind["default"]], Lov.prototype, "handleOpenModal", null);
(0, _tslib.__decorate)([_mobx.computed], Lov.prototype, "loading", null);
Lov = (0, _tslib.__decorate)([_mobxReact.observer], Lov);
var _default = Lov;
exports["default"] = _default;
//# sourceMappingURL=Lov.js.map