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

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

import _extends from "@babel/runtime/helpers/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import isEqual from 'lodash/isEqual';
import isString from 'lodash/isString';
import isFunction from 'lodash/isFunction';
import noop from 'lodash/noop';
import { action, computed, observable, toJS } from 'mobx';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import KeyCode from '../../../es/_util/KeyCode';
import { Size } from '../../../es/_util/enum';
import { getConfig } from '../../../es/configure';
import Icon from '../icon';
import { open } from '../modal-container/ModalContainer';
import LovView from './LovView';
import DataSet from '../data-set/DataSet';
import Record from '../data-set/Record';
import Spin from '../spin';
import lovStore from '../stores/LovCodeStore';
import autobind from '../_util/autobind';
import { stopEvent } from '../_util/EventManager';
import { Select } from '../select/Select';
import { SelectionMode } from '../table/enum';
import { DataSetStatus, RecordStatus } from '../data-set/enum';
import { ViewMode, SearchAction } from './enum';
import Button from '../button/Button';
import { ButtonColor, FuncType } from '../button/enum';
import { $l } from '../locale-context';
import { getLovPara } from '../stores/utils';

var Lov =
/*#__PURE__*/
function (_Select) {
  _inherits(Lov, _Select);

  var _super = _createSuper(Lov);

  function Lov() {
    var _this;

    _classCallCheck(this, Lov);

    _this = _super.apply(this, arguments);
    _this.openModal = action(function (fetchSingle) {
      var config = _this.getConfig();

      var _assertThisInitialize = _assertThisInitialized(_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(primitive ? _defineProperty({}, valueField, value) : toJS(value), options);
            selected.isSelected = true;
            selected.isCached = true;
            selected.status = RecordStatus.sync;
            return selected;
          }));
        }

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

        _this.modal = open(_objectSpread({
          title: title,
          children: React.createElement(LovView, {
            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: _objectSpread({
            width: pxToRem(width),
            minHeight: 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__*/
    _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.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 = _assertThisInitialized(_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 : _this$getModalProps$a;

      afterClose();

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

    _this.handleLovViewOk =
    /*#__PURE__*/
    _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee2() {
      var _assertThisInitialize3, options, multiple, tableProps, selectionMode, result, records, values;

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

              selectionMode = _objectSpread({
                selectionMode: multiple ? SelectionMode.rowbox : SelectionMode.none
              }, tableProps).selectionMode;

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

              result = [];
              records = selectionMode === 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;
  }

  _createClass(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 === SearchAction.input) {
        return _get(_getPrototypeOf(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 && isString(searchMatcher)) {
          this.resetOptions(true);
          var textMatcher = text;

          if (isString(paramMatcher)) {
            textMatcher = text + paramMatcher;
          } else if (isFunction(paramMatcher)) {
            textMatcher = paramMatcher({
              record: record,
              text: text,
              textField: textField,
              valueField: valueField
            }) || text;
          }

          options.setQueryParameter(searchMatcher, textMatcher);

          if (this.props.searchAction === 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 = getLovPara(field, record);

        if (!isEqual(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.DOWN) {
        stopEvent(e);
        this.openModal();
      }

      if (e.keyCode === KeyCode.ENTER && this.props.searchAction === SearchAction.blur) {
        stopEvent(e);
        this.blur();
      }

      _get(_getPrototypeOf(Lov.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (this.modal) {
        e.preventDefault();
      }

      _get(_getPrototypeOf(Lov.prototype), "handleBlur", this).call(this, e);
    }
  }, {
    key: "getWrapperProps",
    value: function getWrapperProps() {
      return _get(_getPrototypeOf(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 !== ViewMode.button) {
        var hasRecord = false;

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

        if (searchAction === 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 {
          _get(_getPrototypeOf(Lov.prototype), "syncValueOnBlur", this).call(this, value);
        }
      }
    }
  }, {
    key: "getConfig",
    value: function getConfig() {
      var lovCode = this.lovCode;

      if (lovCode) {
        return lovStore.getConfig(lovCode);
      }
    }
  }, {
    key: "getPlaceholders",
    value: function getPlaceholders() {
      var placeholder = _get(_getPrototypeOf(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 _objectSpread({}, getConfig('lovModalProps'), {}, modalProps);
    }
  }, {
    key: "getTableProps",
    value: function getTableProps() {
      var tableProps = this.props.tableProps;
      return _objectSpread({}, 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 omit(_get(_getPrototypeOf(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 = _objectSpread({}, Button.defaultProps, {}, omit(this.getOtherProps(), ['name']), {
        dataSet: options,
        className: classNames(className, "".concat(this.prefixCls, "-lov")),
        type: type
      });

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

      return props;
    }
  }, {
    key: "getSuffix",
    value: function getSuffix() {
      var suffix = this.props.suffix;
      var icon = this.loading ? React.createElement(Spin, {
        className: "".concat(this.prefixCls, "-lov-spin")
      }) : React.createElement(Icon, {
        type: "search"
      });
      return this.wrapperSuffix(suffix || icon, {
        onClick: this.handleOpenModal()
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _get(_getPrototypeOf(Lov.prototype), "componentWillUnmount", this).call(this);

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

      if (mode !== ViewMode.button) {
        _get(_getPrototypeOf(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 === ViewMode.button) {
        var elements = [React.createElement(Button, _extends({
          key: "lov_button"
        }, this.getButtonProps(), {
          disabled: this.isDisabled(),
          onClick: function onClick() {
            return _this5.openModal();
          }
        }), children || this.getTextNode() || this.getPlaceholders()[0] || $l('Lov', 'choose'))];

        if (clearButton) {
          elements.push(React.createElement(Button, {
            key: "lov_clear_button",
            size: Size.small,
            funcType: FuncType.flat,
            icon: "close",
            onClick: this.handleClearButtonClick
          }));
        }

        return elements;
      }

      return _get(_getPrototypeOf(Lov.prototype), "renderWrapper", this).call(this);
    }
  }, {
    key: "searchMatcher",
    get: function get() {
      var searchMatcher = this.observableProps.searchMatcher;

      if (isString(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 = 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 = lovStore.getLovDataSet(lovCode, field);

        if (lovDataSet) {
          return lovDataSet;
        }
      }

      return new DataSet();
    }
  }, {
    key: "loading",
    get: function get() {
      var options = this.options,
          searchAction = this.props.searchAction;
      return (searchAction === SearchAction.blur || Boolean(this.autoSelectSingle)) && options.status === DataSetStatus.loading && !this.popup;
    }
  }]);

  return Lov;
}(Select);

Lov.displayName = 'Lov';
Lov.propTypes = _objectSpread({}, Select.propTypes, {}, Button.propTypes, {
  modalProps: PropTypes.object,
  tableProps: PropTypes.object,
  noCache: PropTypes.bool,
  fetchSingle: PropTypes.bool,
  autoSelectSingle: PropTypes.bool,

  /**
   * 触发查询变更的动作， default: input
   */
  searchAction: PropTypes.oneOf([SearchAction.blur, SearchAction.input])
});
Lov.defaultProps = _objectSpread({}, Select.defaultProps, {
  clearButton: true,
  checkValueOnOptionsChange: false,
  searchAction: SearchAction.input,
  fetchSingle: false
});

__decorate([observable], Lov.prototype, "filterText", void 0);

__decorate([computed], Lov.prototype, "searchMatcher", null);

__decorate([computed], Lov.prototype, "paramMatcher", null);

__decorate([computed], Lov.prototype, "searchable", null);

__decorate([computed], Lov.prototype, "lovCode", null);

__decorate([computed], Lov.prototype, "popup", null);

__decorate([autobind], Lov.prototype, "getPopupProps", null);

__decorate([autobind], Lov.prototype, "getPopupContent", null);

__decorate([computed], Lov.prototype, "options", null);

__decorate([action], Lov.prototype, "searchRemote", null);

__decorate([autobind], Lov.prototype, "handleKeyDown", null);

__decorate([autobind], Lov.prototype, "handleBlur", null);

__decorate([autobind], Lov.prototype, "selectSingle", null);

__decorate([autobind], Lov.prototype, "handleOpenModal", null);

__decorate([computed], Lov.prototype, "loading", null);

Lov = __decorate([observer], Lov);
export default Lov;
//# sourceMappingURL=Lov.js.map