choerodon-ui/pro/es/table/query-bar/FilterSelect.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React, { cloneElement } from 'react';
import omit from 'lodash/omit';
import isPlainObject from 'lodash/isPlainObject';
import isNil from 'lodash/isNil';
import defer from 'lodash/defer';
import noop from 'lodash/noop';
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
import isString from 'lodash/isString';
import { observer } from 'mobx-react';
import { isMoment } from 'moment';
import { action, computed, isArrayLike, observable, reaction, runInAction, toJS } from 'mobx';
import { pxToRem } from '../../../../es/_util/UnitConvertor';
import KeyCode from '../../../../es/_util/KeyCode';
import Icon from '../../icon';
import { TextField } from '../../text-field/TextField';
import autobind from '../../_util/autobind';
import { getEditorByField } from '../utils';
import ObserverSelect from '../../select/Select';
import Option from '../../option/Option';
import isSameLike from '../../_util/isSameLike';
import { DataSetEvents, FieldType } from '../../data-set/enum';
import { processFieldValue, toRangeValue, processValue } from '../../field/utils';

var FilterSelect = /*#__PURE__*/function (_TextField) {
  _inherits(FilterSelect, _TextField);

  var _super = _createSuper(FilterSelect);

  function FilterSelect(props, context) {
    var _this;

    _classCallCheck(this, FilterSelect);

    _this = _super.call(this, props, context);
    _this.setFilterText = debounce(action(function (text) {
      _this.filterText = text;
    }), 500);
    _this.doQuery = throttle(function () {
      var _this$props$onQuery = _this.props.onQuery,
          onQuery = _this$props$onQuery === void 0 ? noop : _this$props$onQuery;
      var optionDataSet = _this.observableProps.optionDataSet;
      optionDataSet.query();
      onQuery();
    }, 500);

    var _assertThisInitialize = _assertThisInitialized(_this),
        observableProps = _assertThisInitialize.observableProps;

    _this.on(observableProps.queryDataSet);

    _this.reaction = reaction(function () {
      return observableProps.queryDataSet;
    }, _this.on);
    return _this;
  }

  _createClass(FilterSelect, [{
    key: "getPrefix",
    value: function getPrefix() {
      var _this$props$prefix = this.props.prefix,
          prefix = _this$props$prefix === void 0 ? /*#__PURE__*/React.createElement(Icon, {
        type: "filter_list"
      }) : _this$props$prefix;

      if (prefix) {
        return this.wrapperPrefix(prefix);
      }
    }
  }, {
    key: "value",
    get: function get() {
      var filter = this.props.filter;
      var _this$observableProps = this.observableProps,
          value = _this$observableProps.value,
          queryDataSet = _this$observableProps.queryDataSet;

      if (value) {
        return filter ? value.filter(filter) : value;
      }

      var paramName = this.props.paramName;

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

        if (current) {
          var result = [];
          var keys = queryDataSet.fields.keys();
          (paramName ? _toConsumableArray(new Set([].concat(_toConsumableArray(keys), [paramName]))) : _toConsumableArray(keys)).forEach(function (key) {
            if (key && (!filter || filter(key))) {
              var values = current.get(key);

              if (isArrayLike(values)) {
                var field = current.getField(key);

                if (field && field.get('multiple', current)) {
                  values.forEach(function (item) {
                    return !isNil(item) && result.push(key);
                  });
                } else if (values.some(function (item) {
                  return !isNil(item);
                })) {
                  result.push(key);
                }
              } else if (!isNil(values)) {
                result.push(key);
              }
            }
          });
          return result;
        }
      }

      return undefined;
    },
    set: function set(value) {
      var _this2 = this;

      runInAction(function () {
        _this2.observableProps.value = value;
      });
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(FilterSelect.prototype), "getObservableProps", this).call(this, props, context)), {}, {
        optionDataSet: props.optionDataSet,
        queryDataSet: props.queryDataSet
      });
    }
  }, {
    key: "on",
    value: function on(ds) {
      this.off();

      if (ds) {
        ds.addEventListener(DataSetEvents.update, this.handleDataSetUpdate);
        ds.addEventListener(DataSetEvents.reset, this.handleDataSetReset);
      }

      this.queryDataSet = ds;
    }
  }, {
    key: "off",
    value: function off() {
      var queryDataSet = this.queryDataSet;

      if (queryDataSet) {
        queryDataSet.removeEventListener(DataSetEvents.update, this.handleDataSetUpdate);
        queryDataSet.removeEventListener(DataSetEvents.reset, this.handleDataSetReset);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _get(_getPrototypeOf(FilterSelect.prototype), "componentWillUnmount", this).call(this);

      this.setFilterText.cancel();
      this.off();
      this.reaction();
    }
  }, {
    key: "setText",
    value: function setText(text) {
      _get(_getPrototypeOf(FilterSelect.prototype), "setText", this).call(this, text);

      this.setFilterText(text);
    }
  }, {
    key: "getPlaceholders",
    value: function getPlaceholders() {
      if (!this.selectField) {
        return _get(_getPrototypeOf(FilterSelect.prototype), "getPlaceholders", this).call(this);
      }

      return [];
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(FilterSelect.prototype), "getOmitPropsKeys", this).call(this).concat(['paramName', 'optionDataSet', 'queryDataSet', 'dropdownMenuStyle', 'hiddenIfNone', 'editable', 'filter']);
    }
  }, {
    key: "getRootDomNode",
    value: function getRootDomNode() {
      return this.element;
    }
  }, {
    key: "defaultRenderer",
    value: function defaultRenderer(_ref) {
      var _this3 = this;

      var value = _ref.value,
          _ref$repeat = _ref.repeat,
          repeat = _ref$repeat === void 0 ? 0 : _ref$repeat;
      var paramName = this.props.paramName;
      var queryDataSet = this.observableProps.queryDataSet;

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

        if (current) {
          var fieldValue = current.get(value);

          if (value === paramName) {
            return fieldValue;
          }

          var field = queryDataSet.getField(value);

          if (field) {
            var range = field.get('range', current);

            if (field.get('multiple', current)) {
              fieldValue = (fieldValue || [])[repeat];
            }

            var showInvalidDate = this.getContextConfig('showInvalidDate');
            var processValueOptions = {
              dateFormat: this.getDateFormat(field),
              showInvalidDate: showInvalidDate,
              isNumber: [FieldType.number, FieldType.currency, FieldType.bigNumber].includes(field.get('type', current)),
              precision: field && field.get('precision', current),
              useZeroFilledDecimal: this.getContextConfig('useZeroFilledDecimal')
            };

            if (range) {
              return "".concat(this.getFieldLabel(field, current), ": ").concat(toRangeValue(fieldValue, range).map(function (v) {
                return processFieldValue(isPlainObject(v) ? v : processValue(v, processValueOptions), field, {
                  getProp: function getProp(name) {
                    return _this3.getProp(name);
                  },
                  getValue: function getValue() {
                    return _this3.getValue();
                  },
                  lang: _this3.lang,
                  getDisplayProp: function getDisplayProp(name) {
                    return _this3.getDisplayProp(name);
                  }
                }, undefined, current, _this3.getContextConfig);
              }).join(this.rangeSeparator));
            }

            if (field.get('bind', current) || isNil(fieldValue)) return;
            var text = this.processText(isNil(fieldValue) ? processValue(value, processValueOptions) : isMoment(fieldValue) ? processValue(fieldValue, processValueOptions) : fieldValue);
            return "".concat(this.getFieldLabel(field, current), ": ").concat(processFieldValue(isPlainObject(fieldValue) ? fieldValue : text, field, {
              getProp: function getProp(name) {
                return _this3.getProp(name);
              },
              getValue: function getValue() {
                return _this3.getValue();
              },
              lang: this.lang,
              getDisplayProp: function getDisplayProp(name) {
                return _this3.getDisplayProp(name);
              }
            }, undefined, current, this.getContextConfig));
          }

          return value;
        }
      }
    }
  }, {
    key: "getQueryRecord",
    value: function getQueryRecord() {
      var queryDataSet = this.observableProps.queryDataSet;

      if (queryDataSet) {
        return queryDataSet.current;
      }
    }
  }, {
    key: "getQueryField",
    value: function getQueryField(fieldName) {
      var queryDataSet = this.observableProps.queryDataSet;

      if (queryDataSet) {
        return queryDataSet.getField(fieldName);
      }
    }
  }, {
    key: "addQueryParams",
    value: function addQueryParams(value) {
      var paramName = this.props.paramName;

      if (paramName) {
        this.setQueryValue(paramName, value);
      }
    }
  }, {
    key: "afterRemoveValue",
    value: function afterRemoveValue(value, repeat) {
      var values = this.getQueryValues(value);

      if (repeat === -1) {
        values.pop();
      } else {
        values.splice(repeat, 1);
      }

      var multiple = this.getQueryFieldMultiple(value);
      this.setQueryValue(value, multiple ? values : values[0]);
    }
  }, {
    key: "getQueryFieldMultiple",
    value: function getQueryFieldMultiple(value) {
      var paramName = this.props.paramName;

      if (paramName !== value) {
        var field = this.getQueryField(value);

        if (field && field.get('multiple', this.getQueryRecord())) {
          return true;
        }
      }

      return false;
    }
  }, {
    key: "handleDataSetReset",
    value: function handleDataSetReset() {
      var _this$props$onReset = this.props.onReset,
          onReset = _this$props$onReset === void 0 ? noop : _this$props$onReset;
      this.setValue(undefined);
      onReset();
    }
  }, {
    key: "handleDataSetUpdate",
    value: function handleDataSetUpdate(_ref2) {
      var name = _ref2.name,
          value = _ref2.value,
          record = _ref2.record;
      var values = this.getValues();

      if (isArrayLike(value)) {
        var length = value.length;

        if (length) {
          var field = record.getField(name);

          if (field && field.get('multiple', record)) {
            var repeat = 0;
            var filtered = values.filter(function (item) {
              if (item === name) {
                repeat += 1;

                if (repeat > length) {
                  return false;
                }
              }

              return true;
            });

            for (var i = 0, n = length - repeat; i < n; i += 1) {
              filtered.push(name);
            }

            this.setValue(filtered);
          } else if (values.indexOf(name) === -1) {
            values.push(name);
            this.setValue(values);
          }
        } else {
          this.setValue(values.filter(function (item) {
            return item !== name;
          }));
        }
      } else if (isNil(value)) {
        this.setValue(values.filter(function (item) {
          return item !== name;
        }));
      } else {
        if (values.indexOf(name) === -1) {
          values.push(name);
        }

        this.setValue(values);
      }

      if (!this.isDoClear) {
        this.doQuery();
      }
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      _get(_getPrototypeOf(FilterSelect.prototype), "handleBlur", this).call(this, e);

      if (!e.isDefaultPrevented()) {
        this.setSelectField(undefined);
      }
    }
  }, {
    key: "isEditorReadOnly",
    value: function isEditorReadOnly() {
      var _this$props = this.props,
          paramName = _this$props.paramName,
          editable = _this$props.editable;
      return this.getQueryValues(paramName).length > 0 && !this.selectField || !editable;
    }
  }, {
    key: "handleFieldChange",
    value: function handleFieldChange(value) {
      var selectField = this.selectField;

      if (selectField) {
        var name = selectField.name;
        this.setQueryValue(name, value);
      } else if (isString(value)) {
        this.addQueryParams(value);

        if (this.isFocused) {
          this.element.expand();
        }
      } else {
        this.setSelectField(value);
      }
    }
  }, {
    key: "handleInput",
    value: function handleInput(e) {
      this.setText(e.target.value);
    }
  }, {
    key: "handleFieldEnterDown",
    value: function handleFieldEnterDown() {
      var _this4 = this;

      defer(function () {
        return _this4.focus();
      });
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (this.selectField) {
        if (e.keyCode === KeyCode.BACKSPACE && !this.text) {
          this.setSelectField(undefined);
        }
      } else {
        _get(_getPrototypeOf(FilterSelect.prototype), "handleKeyDown", this).call(this, e);
      }
    }
  }, {
    key: "handleEnterDown",
    value: function handleEnterDown() {// noop
    }
  }, {
    key: "setSelectField",
    value: function setSelectField(value) {
      this.selectField = value;
      this.setFilterText(undefined);
    }
  }, {
    key: "getQueryValues",
    value: function getQueryValues(fieldName) {
      var current = this.getQueryRecord();
      var field = this.getQueryField(fieldName);
      var range = field && field.get('range', current);

      if (current) {
        var value = toJS(current.get(fieldName)) || [];
        return [].concat(!range ? value : [value]);
      }

      return [];
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur() {// noop
    }
  }, {
    key: "setQueryValue",
    value: function setQueryValue(fieldName, value) {
      var current = this.getQueryRecord();

      if (current) {
        current.set(fieldName, value);
      }

      this.setSelectField(undefined);
    }
  }, {
    key: "getFieldLabel",
    value: function getFieldLabel(field, record) {
      return field.get('label', record) || field.name;
    }
  }, {
    key: "multipleFieldExistsValue",
    value: function multipleFieldExistsValue(field, current) {
      if (field.get('multiple', current)) {
        var options = field.getOptions(current);

        if (options && current) {
          var values = current.get(field.name);
          var valueField = field.get('valueField', current);
          return options.some(function (r) {
            return !values.some(function (value) {
              return isSameLike(r.get(valueField), value);
            });
          });
        }
      }

      return false;
    }
  }, {
    key: "getInputFilterOptions",
    value: function getInputFilterOptions(filterText) {
      var _this$observableProps2 = this.observableProps,
          optionDataSet = _this$observableProps2.optionDataSet,
          fields = _this$observableProps2.optionDataSet.fields;
      var values = new Set();
      optionDataSet.forEach(function (record) {
        fields.forEach(function (_, key) {
          var value = record.get(key);

          if (isString(value) && value.toLowerCase().indexOf(filterText.toLowerCase()) !== -1) {
            values.add(value);
          }
        });
      });
      return _toConsumableArray(values).map(function (value) {
        return /*#__PURE__*/React.createElement(Option, {
          key: value,
          value: value
        }, value);
      });
    }
  }, {
    key: "getFieldSelectOptions",
    value: function getFieldSelectOptions() {
      var _this5 = this;

      var paramName = this.props.paramName;
      var queryDataSet = this.observableProps.queryDataSet;
      var data = [];

      if (queryDataSet) {
        var current = queryDataSet.current;
        queryDataSet.fields.forEach(function (field, key) {
          if (key !== paramName && (_this5.getValues().indexOf(key) === -1 || _this5.multipleFieldExistsValue(field, current)) && !field.get('bind', current)) {
            data.push( /*#__PURE__*/React.createElement(Option, {
              key: String(key),
              value: field
            }, _this5.getFieldLabel(field, current)));
          }
        });
      }

      return data;
    }
  }, {
    key: "getFieldEditor",
    value: function getFieldEditor(props, selectField) {
      var current = this.queryDataSet ? this.queryDataSet.current : undefined;
      var editor = getEditorByField(selectField, current, true);
      var record = this.getQueryRecord();
      var _this$props$editorPro = this.props.editorProps,
          editorProps = _this$props$editorPro === void 0 ? noop : _this$props$editorPro;
      var editorFunProps = editorProps({
        name: selectField.name,
        record: record,
        editor: editor
      });

      var editorMergeProps = _objectSpread(_objectSpread(_objectSpread({}, editorFunProps), props), {}, {
        key: 'value',
        record: record,
        name: selectField.name,
        autoFocus: true,
        onInput: this.handleInput,
        onEnterDown: this.handleFieldEnterDown,
        renderer: noop,
        isFlat: true
      });

      if (editor.type.__PRO_SELECT) {
        editorMergeProps.dropdownMenuStyle = this.props.dropdownMenuStyle;
        editorMergeProps.dropdownMatchSelectWidth = false;
      }

      return /*#__PURE__*/cloneElement(editor, editorMergeProps);
    }
  }, {
    key: "getFieldSelect",
    value: function getFieldSelect(props) {
      var filterText = this.filterText,
          dropdownMenuStyle = this.props.dropdownMenuStyle;
      var editable = !this.isEditorReadOnly();
      var options = editable && filterText ? this.getInputFilterOptions(filterText) : this.getFieldSelectOptions();
      return /*#__PURE__*/React.createElement(ObserverSelect, _extends({}, props, {
        key: "key",
        combo: editable,
        searchable: editable,
        value: null,
        onInput: this.handleInput,
        onEnterDown: this.handleFieldEnterDown,
        autoFocus: this.isFocused,
        dropdownMenuStyle: dropdownMenuStyle,
        dropdownMatchSelectWidth: false
      }), options);
    }
  }, {
    key: "clear",
    value: function clear() {
      var record = this.getQueryRecord();
      this.isDoClear = true;

      if (record) {
        record.clear();
        this.doQuery();
      }

      this.setValue(undefined);
      this.setSelectField(undefined);
      this.element.text = undefined;
      this.isDoClear = false;
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var hiddenIfNone = this.props.hiddenIfNone;

      if (this.isEmpty() && hiddenIfNone) {
        return null;
      }

      return _get(_getPrototypeOf(FilterSelect.prototype), "renderWrapper", this).call(this);
    }
  }, {
    key: "renderMultipleEditor",
    value: function renderMultipleEditor(props) {
      var selectField = this.selectField,
          prefixCls = this.prefixCls;

      var editorProps = _objectSpread(_objectSpread({}, omit(props, ['multiple', 'prefixCls'])), {}, {
        clearButton: false,
        prefix: null,
        suffix: null,
        elementClassName: "".concat(prefixCls, "-inner-editor"),
        onChange: this.handleFieldChange
      });

      editorProps.style = {
        width: 'auto'
      };
      return /*#__PURE__*/React.createElement("li", {
        key: "text"
      }, selectField ? /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-select-field")
      }, this.getFieldLabel(selectField, this.getQueryRecord()), ":") : null, selectField ? this.getFieldEditor(editorProps, selectField) : this.getFieldSelect(editorProps));
    }
  }, {
    key: "handleMouseDown",
    value: function handleMouseDown(e) {
      if (e.target !== this.element) {
        if (!this.isFocused) {
          this.focus();
        }
      }
    }
  }]);

  return FilterSelect;
}(TextField);

FilterSelect.displayName = 'FilterSelect';
FilterSelect.defaultProps = _objectSpread(_objectSpread({}, TextField.defaultProps), {}, {
  multiple: true,
  clearButton: true,
  editable: true,
  dropdownMenuStyle: {
    minWidth: pxToRem(180)
  }
});

__decorate([observable], FilterSelect.prototype, "selectField", void 0);

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

__decorate([computed], FilterSelect.prototype, "value", null);

__decorate([autobind], FilterSelect.prototype, "on", null);

__decorate([action], FilterSelect.prototype, "setText", null);

__decorate([autobind], FilterSelect.prototype, "getRootDomNode", null);

__decorate([autobind], FilterSelect.prototype, "defaultRenderer", null);

__decorate([autobind], FilterSelect.prototype, "handleDataSetReset", null);

__decorate([autobind, action], FilterSelect.prototype, "handleDataSetUpdate", null);

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

__decorate([autobind], FilterSelect.prototype, "handleFieldChange", null);

__decorate([autobind], FilterSelect.prototype, "handleInput", null);

__decorate([autobind], FilterSelect.prototype, "handleFieldEnterDown", null);

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

__decorate([autobind], FilterSelect.prototype, "handleEnterDown", null);

__decorate([action], FilterSelect.prototype, "setSelectField", null);

__decorate([action], FilterSelect.prototype, "setQueryValue", null);

__decorate([action], FilterSelect.prototype, "clear", null);

__decorate([autobind], FilterSelect.prototype, "handleMouseDown", null);

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