tntd/lib/query-form/index.js

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

"use strict";

function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
var _classnames3 = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _createActions = _interopRequireDefault(require("./createActions"));
var _Field = _interopRequireDefault(require("./Field"));
var _useForm = _interopRequireDefault(require("./useForm"));
var _badge = _interopRequireDefault(require("../badge"));
var _button = _interopRequireDefault(require("../button"));
var _drawer = _interopRequireDefault(require("../drawer"));
var _form = _interopRequireDefault(require("../form"));
var _prevLocale = require("../prev-locale");
var _tntdIcon = _interopRequireDefault(require("../tntd-icon"));
require("./index.less");
function _getRequireWildcardCache(e) {
  if ("function" != typeof WeakMap) return null;
  var r = new WeakMap(),
    t = new WeakMap();
  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
    return e ? t : r;
  })(e);
}
function _interopRequireWildcard(e, r) {
  if (!r && e && e.__esModule) return e;
  if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
    "default": e
  };
  var t = _getRequireWildcardCache(r);
  if (t && t.has(e)) return t.get(e);
  var n = {
      __proto__: null
    },
    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
  }
  return n["default"] = e, t && t.set(e, n), n;
}
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : {
    "default": e
  };
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}
function _classCallCheck(a, n) {
  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
  for (var t = 0; t < r.length; t++) {
    var o = r[t];
    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
  }
}
function _createClass(e, r, t) {
  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
    writable: !1
  }), e;
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != _typeof(t) || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != _typeof(i)) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
function _callSuper(t, o, e) {
  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _possibleConstructorReturn(t, e) {
  if (e && ("object" == _typeof(e) || "function" == typeof e)) return e;
  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
  return _assertThisInitialized(t);
}
function _assertThisInitialized(e) {
  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return e;
}
function _isNativeReflectConstruct() {
  try {
    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
  } catch (t) {}
  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
    return !!t;
  })();
}
function _getPrototypeOf(t) {
  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
    return t.__proto__ || Object.getPrototypeOf(t);
  }, _getPrototypeOf(t);
}
function _inherits(t, e) {
  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
  t.prototype = Object.create(e && e.prototype, {
    constructor: {
      value: t,
      writable: !0,
      configurable: !0
    }
  }), Object.defineProperty(t, "prototype", {
    writable: !1
  }), e && _setPrototypeOf(t, e);
}
function _setPrototypeOf(t, e) {
  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
    return t.__proto__ = e, t;
  }, _setPrototypeOf(t, e);
}
var clsPrefix = 'tnt-queryform';
var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
  function QueryForm(props) {
    var _this;
    _classCallCheck(this, QueryForm);
    _this = _callSuper(this, QueryForm, [props]);
    Object.defineProperty(_this, "onWindowResize", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: (0, _debounce2["default"])(function () {
        var current = _this.fieldsRef.current;
        if (current) {
          setTimeout(function () {
            _this.setState({
              showMore: _this.isFieldsWidthOverflow()
            });
          }, 25);
        }
      }, 50)
    });
    Object.defineProperty(_this, "search", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value(params) {
        _this.props.onSearch(Object.assign(Object.assign({}, _this.form.getValues()), params));
      }
    });
    Object.defineProperty(_this, "onSearch", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value() {
        var _a, _b;
        (_b = (_a = _this.props).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, _this.form.getValues());
      }
    });
    Object.defineProperty(_this, "onReset", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value() {
        var _this$props = _this.props,
          initialValues = _this$props.initialValues,
          onReset = _this$props.onReset;
        _this.form.setValues(Object.assign({}, initialValues));
        _this.updateDrawerFieldsValueCount();
        onReset === null || onReset === void 0 ? void 0 : onReset(initialValues);
      }
    });
    Object.defineProperty(_this, "onToggleExpand", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value() {
        var _a, _b;
        _this.setState({
          expanded: !_this.state.expanded
        });
        (_b = (_a = _this.props).onToggleExpand) === null || _b === void 0 ? void 0 : _b.call(_a, !_this.state.expanded);
      }
    });
    Object.defineProperty(_this, "onShowDrawer", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value() {
        _this.setState({
          drawerVisible: true
        });
      }
    });
    Object.defineProperty(_this, "onFieldChange", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value(name, _value) {
        var values = _this.form.getValues();
        var newValues = Object.assign(Object.assign({}, values), _defineProperty({}, name, _value));
        var changedInfo = {
          name: name,
          value: _value,
          preValue: values === null || values === void 0 ? void 0 : values[name]
        };
        var onChange = _this.props.onChange;
        _this.form.setData('values', newValues);
        for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
          rest[_key - 2] = arguments[_key];
        }
        onChange && onChange.apply(void 0, [newValues, changedInfo].concat(rest));
        _this.updateDrawerFieldsValueCount(newValues);
      }
    });
    Object.defineProperty(_this, "updateDrawerFieldsValueCount", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value() {
        var values = _this.form.getValues();
        var _this$props2 = _this.props,
          showFieldCount = _this$props2.showFieldCount,
          children = _this$props2.children;
        if (showFieldCount) {
          var drawerFieldsValueCount = children.reduce(function (acc, cur, index) {
            var _a;
            if (index >= showFieldCount && (values === null || values === void 0 ? void 0 : values[(_a = cur === null || cur === void 0 ? void 0 : cur.props) === null || _a === void 0 ? void 0 : _a.name])) {
              acc++;
            }
            return acc;
          }, 0);
          if (drawerFieldsValueCount !== _this.state.drawerFieldsValueCount) {
            _this.setState({
              drawerFieldsValueCount: drawerFieldsValueCount
            });
          }
        }
      }
    });
    Object.defineProperty(_this, "addResizeListener", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: function value() {
        if ('ResizeObserver' in window) {
          var current = _this.fieldsRef.current;
          if (current) {
            var observer = new ResizeObserver(_this.onWindowResize);
            observer.observe(current);
            return function () {
              return observer.disconnect();
            };
          }
        } else {
          window.addEventListener('resize', _this.onWindowResize);
          return function () {
            return window.removeEventListener('resize', _this.onWindowResize);
          };
        }
      }
    });
    var form = props.form,
      initialValues = props.initialValues,
      _props$showExpand = props.showExpand,
      showExpand = _props$showExpand === void 0 ? true : _props$showExpand,
      renderActions = props.renderActions,
      defaultExpanded = props.defaultExpanded;
    _this.state = {
      showMore: false,
      expanded: defaultExpanded || !showExpand || renderActions ? true : false,
      drawerVisible: false,
      drawerFieldsValueCount: 0
    };
    _this.fieldsRef = (0, _react.createRef)();
    _this.formBoxRef = (0, _react.createRef)();
    _this.form = form || (0, _createActions["default"])();
    _this.form.setData('initialValues', initialValues);
    _this.form.setData('values', Object.assign({}, initialValues));
    return _this;
  }
  _inherits(QueryForm, _React$PureComponent);
  return _createClass(QueryForm, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props3 = this.props,
        children = _this$props3.children,
        _this$props3$classNam = _this$props3.className,
        className = _this$props3$classNam === void 0 ? '' : _this$props3$classNam,
        _this$props3$initialV = _this$props3.initialValues,
        initialValues = _this$props3$initialV === void 0 ? {} : _this$props3$initialV,
        renderActions = _this$props3.renderActions,
        _this$props3$showSear = _this$props3.showSearch,
        showSearch = _this$props3$showSear === void 0 ? true : _this$props3$showSear,
        _this$props3$showRese = _this$props3.showReset,
        showReset = _this$props3$showRese === void 0 ? true : _this$props3$showRese,
        showFieldCount = _this$props3.showFieldCount,
        _this$props3$drawerPr = _this$props3.drawerProps,
        drawerProps = _this$props3$drawerPr === void 0 ? {} : _this$props3$drawerPr,
        size = _this$props3.size;
      var extraActions = this.props.extraActions;
      var _this$state = this.state,
        expanded = _this$state.expanded,
        showMore = _this$state.showMore,
        drawerVisible = _this$state.drawerVisible,
        drawerFieldsValueCount = _this$state.drawerFieldsValueCount;
      var renderFormActions = renderActions || function () {
        return _react["default"].createElement(_react["default"].Fragment, null, showFieldCount && _react["default"].createElement(_badge["default"], {
          count: drawerFieldsValueCount
        }, _react["default"].createElement(_button["default"], {
          onClick: _this2.onShowDrawer
        }, _react["default"].createElement(_tntdIcon["default"], {
          type: "filter"
        }), _this2.getText('moreFiltering'))), showSearch && _react["default"].createElement(_button["default"], {
          type: "primary",
          onClick: _this2.onSearch
        }, _this2.getText('search')), showReset && _react["default"].createElement(_button["default"], {
          onClick: _this2.onReset
        }, _this2.getText('reset')), showMore && !showFieldCount && _react["default"].createElement(_button["default"], {
          className: "expand-link",
          type: "link",
          onClick: _this2.onToggleExpand
        }, _this2.getText(expanded ? 'collapse' : 'expand')), _react["default"].Children.map(children, function (child) {
          var _a;
          return child && ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.align) === 'right' && _react["default"].cloneElement(child);
        }));
      };
      return _react["default"].createElement("div", {
        ref: this.formBoxRef,
        className: (0, _classnames3["default"])(clsPrefix, _defineProperty({}, className, className))
      }, _react["default"].createElement(_form["default"], {
        layout: "inline",
        className: (0, _classnames3["default"])({
          expanded: !showMore || expanded,
          showMore: showMore
        })
      }, _react["default"].createElement("div", {
        ref: this.fieldsRef
      }, _react["default"].Children.map(children, function (child, index) {
        var _a, _b;
        return child && ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.align) !== 'right' && (!showFieldCount || showFieldCount > index) && _react["default"].cloneElement(child, {
          form: _this2.form,
          initialValue: initialValues === null || initialValues === void 0 ? void 0 : initialValues[(_b = child.props) === null || _b === void 0 ? void 0 : _b.name],
          onChange: _this2.onFieldChange
        });
      })), _react["default"].createElement("div", {
        className: "".concat(clsPrefix, "-actions")
      }, renderFormActions()), showFieldCount && _react["default"].createElement(_drawer["default"], Object.assign({
        title: this.getText('moreFiltering'),
        visible: drawerVisible,
        onClose: function onClose() {
          return _this2.setState({
            drawerVisible: false
          });
        },
        width: 300,
        size: size,
        getContainer: false
      }, drawerProps, {
        className: (0, _classnames3["default"])("".concat(clsPrefix, "-drawer"), _defineProperty({
          'large-size': size === 'large'
        }, className, className))
      }), _react["default"].Children.map(children, function (child, index) {
        return child && index >= showFieldCount && _react["default"].cloneElement(child, {
          form: _this2.form,
          isFieldInDrawer: true,
          initialValue: initialValues === null || initialValues === void 0 ? void 0 : initialValues[child.props.name],
          onChange: _this2.onFieldChange,
          onSearch: _this2.onSearch
        });
      }), _react["default"].createElement(_button["default"], {
        type: "primary",
        onClick: this.onSearch
      }, this.getText('search')), _react["default"].createElement(_button["default"], {
        onClick: this.onReset
      }, this.getText('reset')))), extraActions && _react["default"].createElement("div", {
        className: "".concat(clsPrefix, "-extra")
      }, extraActions));
    }
  }, {
    key: "getText",
    value: function getText(key) {
      return (0, _prevLocale.getText)(key, this.props.language || (0, _prevLocale.getLanguage)());
    }
  }, {
    key: "isFieldsWidthOverflow",
    value: function isFieldsWidthOverflow() {
      var current = this.fieldsRef.current;
      if (current) {
        return parseFloat(window.getComputedStyle(current).width, 10) < [].reduce.call(current.children, function (acc, cur) {
          var _window$getComputedSt = window.getComputedStyle(cur),
            margin = _window$getComputedSt.margin,
            width = _window$getComputedSt.width;
          var marginArray = margin.split(' ').map(function (str) {
            return parseFloat(str, 10);
          });
          acc += parseFloat(width, 10) + marginArray[1];
          return acc;
        }, 0);
      }
      return false;
    }
  }, {
    key: "updateFieldHeight",
    value: function updateFieldHeight() {
      var _a, _b, _c;
      var formBoxRef = this.formBoxRef,
        fieldsRef = this.fieldsRef;
      var getFieldHeight = function getFieldHeight() {
        var _a;
        var current = fieldsRef.current;
        var height = '32px';
        if (current && ((_a = current.children) === null || _a === void 0 ? void 0 : _a[0])) {
          height = window.getComputedStyle(current.children[0]).height;
        }
        return height;
      };
      var queryFormActionsDom = (_a = formBoxRef === null || formBoxRef === void 0 ? void 0 : formBoxRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(clsPrefix, "-actions"));
      var queryFormExtraDom = (_b = formBoxRef === null || formBoxRef === void 0 ? void 0 : formBoxRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(".".concat(clsPrefix, "-extra"));
      var formItemsDomList = (_c = fieldsRef === null || fieldsRef === void 0 ? void 0 : fieldsRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.ant-form-item-control');
      var fieldHeight = getFieldHeight();
      fieldsRef.current.style.height = fieldHeight;
      [queryFormActionsDom, queryFormExtraDom].forEach(function (item) {
        item && Object.assign(item.style, {
          height: fieldHeight,
          lineHeight: fieldHeight
        });
      });
      [].forEach.call(formItemsDomList, function (item) {
        item.style.lineHeight = fieldHeight;
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var current = this.fieldsRef.current;
      var _this$props4 = this.props,
        showFieldCount = _this$props4.showFieldCount,
        _this$props4$showExpa = _this$props4.showExpand,
        showExpand = _this$props4$showExpa === void 0 ? true : _this$props4$showExpa;
      this.updateFieldHeight();
      this.form.on('search', this.search);
      // 未设置第一行显示数量且禁止了展开操作 或 自定义了操作区域，则不需要处理展开计算逻辑
      // || renderActions
      if (!showFieldCount && !showExpand) {
        return;
      }
      if (!showFieldCount) {
        if (current && this.isFieldsWidthOverflow()) {
          this.setState({
            showMore: true
          });
        }
        this.removeResizeListener = this.addResizeListener();
      } else {
        this.updateDrawerFieldsValueCount();
        this.form.on('setValues', this.updateDrawerFieldsValueCount);
        this.form.on('setValue', this.updateDrawerFieldsValueCount);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _a;
      (_a = this.removeResizeListener) === null || _a === void 0 ? void 0 : _a.call(this);
      this.form.off('setValues', this.updateDrawerFieldsValueCount);
      this.form.off('setValue', this.updateDrawerFieldsValueCount);
      this.form.off('search', this.search);
    }
  }]);
}(_react["default"].PureComponent);
QueryForm.Field = _Field["default"];
QueryForm.useForm = _useForm["default"];
QueryForm.createForm = _createActions["default"];
var _default = exports["default"] = QueryForm;