tntd 2.8.0-beta.3 → 3.0.0-beta

package/lib/query-form/Field/Composition/index.less

@@ -0,0 +1,106 @@
+@import '../../../style/themes/index';
+@import '../../../style/mixins/index';
+@import '../../../input/style/mixin';
+
+.tnt-queryform-composition-input {
+  // width: 100%;
+  margin-right: @padding-md;
+  max-height: 162px;
+  overflow-x: hidden;
+  cursor: text;
+  padding: 0 @padding-xl;
+  position: relative;
+  box-sizing: border-box;
+  background-color: @select-background;
+  border: @border-width-base @border-style-base @select-border-color;
+  border-top-width: calc(@border-width-base + 0.02px);
+  border-radius: @border-radius-base;
+  outline: none;
+  transition: all 0.3s @ease-in-out;
+  user-select: none;
+
+  &-prefix {
+    position: absolute;
+    left: @padding-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    i.anticon {
+      color: tint(@bg-color-spotilight, 50%);
+    }
+  }
+
+  &-width {
+    height: 0;
+    opacity: 0;
+    width: auto;
+    position: absolute;
+    max-width: 100%;
+  }
+
+  &-items {
+    float: left;
+    padding: 0;
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    &-item {
+      padding: 3px 0;
+    }
+    li {
+      float: left;
+      line-height: 1;
+    }
+    &-input {
+      .inputClass {
+        background: none;
+        border: none;
+        outline: none;
+        box-shadow: none !important;
+        width: 150px;
+        height: 26px;
+        line-height: 26px;
+        padding: 0;
+        textarea {
+          padding: 0;
+        }
+      }
+      .inputClass-with-placeholder {
+        min-width: 398px !important;
+      }
+    }
+    
+  }
+  &-clear {
+    position: absolute;
+    right: @margin-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
+    i.anticon {
+      color: tint(@bg-color-spotilight, 50%);
+    }
+    &:hover {
+      .anticon {
+        color: @text-color-secondary !important;
+      }
+    }
+  }
+  &:hover {
+    border-color: @blue-6;
+    outline: 0;
+    .tnt-queryform-composition-input-clear {
+      display: block;
+    }
+    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
+  }
+  &:focus, &:active {
+    border-color: @blue-5;
+    outline: 0;
+    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
+  }
+  .ant-tag {
+    padding: 0 @padding-xs;
+    border: none;
+    background: @fill-color-tertiary;
+  }
+}

package/lib/query-form/Field/Composition/utils.d.ts

@@ -0,0 +1,6 @@
+export function highlightSubstring(str: any, substring: any): any;
+export function getLabelFromOptions(key: any, options: any, fieldNames?: {
+    label: string;
+    value: string;
+}): any;
+//# sourceMappingURL=utils.d.ts.map

package/lib/query-form/Field/Composition/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/query-form/Field/Composition/utils.js"],"names":[],"mappings":"AAAA,kEAGC;AAED;;;QAkBC"}

package/lib/query-form/Field/Composition/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelFromOptions = getLabelFromOptions;
+exports.highlightSubstring = highlightSubstring;
+function highlightSubstring(str, substring) {
+  var highlighted = "<span class=\"tnt-highlight\">".concat(substring, "</span>");
+  return str.replace(new RegExp(substring, 'g'), highlighted);
+}
+function getLabelFromOptions(key, options) {
+  var fieldNames = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    label: 'label',
+    value: 'value'
+  };
+  var labelValue = key;
+  if (options) {
+    var target = options === null || options === void 0 ? void 0 : options.find(function (item) {
+      var valueKey = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value;
+      var itemValue = item instanceof Object ? item[valueKey] : item;
+      return itemValue === key;
+    });
+    labelValue = target instanceof Object ? target === null || target === void 0 ? void 0 : target[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label] : target;
+  }
+  return labelValue;
+}

package/lib/query-form/Field/Composition/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/query-form/Field/Composition/utils.js"],"names":[],"mappings":";;;AAAA,SAAgB,kBAAkB,CAAC,GAAG,EAAE,SAAS;IAC/C,MAAM,WAAW,GAAG,+BAA+B,SAAS,SAAS,CAAA;IACrE,OAAO,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,WAAW,CAAC,CAAA;AAC7D,CAAC;AAHD,gDAGC;AAED,SAAgB,mBAAmB,CACjC,GAAG,EACH,OAAO,EACP,UAAU,GAAG;IACX,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACf;IAED,IAAI,UAAU,GAAG,GAAG,CAAA;IACpB,IAAI,OAAO,EAAE;QACX,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YACpC,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAA;YAClC,MAAM,SAAS,GAAG,IAAI,YAAY,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;YAChE,OAAO,SAAS,KAAK,GAAG,CAAA;QAC1B,CAAC,CAAC,CAAA;QACF,UAAU,GAAG,MAAM,YAAY,MAAM,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;KAC7E;IACD,OAAO,UAAU,CAAA;AACnB,CAAC;AAlBD,kDAkBC","sourcesContent":["export function highlightSubstring(str, substring) {\n  const highlighted = `<span class=\"tnt-highlight\">${substring}</span>`\n  return str.replace(new RegExp(substring, 'g'), highlighted)\n}\n\nexport function getLabelFromOptions(\n  key,\n  options,\n  fieldNames = {\n    label: 'label',\n    value: 'value',\n  }\n) {\n  let labelValue = key\n  if (options) {\n    const target = options?.find((item) => {\n      const valueKey = fieldNames?.value\n      const itemValue = item instanceof Object ? item[valueKey] : item\n      return itemValue === key\n    })\n    labelValue = target instanceof Object ? target?.[fieldNames?.label] : target\n  }\n  return labelValue\n}\n"]}

package/lib/query-form/index.d.ts

@@ -2,13 +2,11 @@ export default QueryForm;
 declare class QueryForm extends React.PureComponent<any, any, any> {
     constructor(props: any);
     state: {
-        showMore: boolean;
-        expanded: boolean;
-        drawerVisible: boolean;
-        drawerFieldsValueCount: number;
+        actionWidth: number;
     };
     fieldsRef: React.RefObject<any>;
     formBoxRef: React.RefObject<any>;
+    actionRef: React.RefObject<any>;
     form: any;
     render(): React.JSX.Element;
     getText(key: any): any;
@@ -18,14 +16,13 @@ declare class QueryForm extends React.PureComponent<any, any, any> {
     search: (params: any) => void;
     onSearch: () => void;
     onReset: () => void;
-    onToggleExpand: () => void;
-    onShowDrawer: () => void;
     onFieldChange: (name: any, value: any, ...rest: any[]) => void;
-    updateDrawerFieldsValueCount: () => void;
+    onCompositionFieldChange: (value: any, deleteKeys: any, ...rest: any[]) => void;
     addResizeListener: () => (() => void) | undefined;
     componentDidMount(): void;
     removeResizeListener: (() => void) | undefined;
     componentWillUnmount(): void;
+    renderFields(children: any, initialValues: any, showFieldCount: any, actionWidth: any): React.JSX.Element;
 }
 declare namespace QueryForm {
     export { Field };

package/lib/query-form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/query-form/index.js"],"names":[],"mappings":";AAkBA;IACE,wBAeC;IAZC;;;;;MAKC;IACD,gCAA4B;IAC5B,iCAA6B;IAE7B,UAAmC;IAKrC,4BAmGC;IAED,uBAEC;IAED,iCAoBC;IAED,0BA4BC;IAED,2DAUM;IAEN,8BAKC;IAED,qBAEC;IAED,oBAMC;IAED,2BAKC;IAED,yBAEC;IAED,+DAaC;IAED,yCAkBC;IAED,kDAcC;IAED,0BA2BC;IANG,+CAAoD;IAQxD,6BAKC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/query-form/index.js"],"names":[],"mappings":";AAgBA;IACE,wBAaC;IAVC;;MAEC;IACD,gCAA4B;IAC5B,iCAA6B;IAC7B,gCAA4B;IAE5B,UAAmC;IAKrC,4BA6CC;IAED,uBAEC;IAED,iCAoBC;IAED,0BA4BC;IAED,2DASM;IAEN,8BAKC;IAED,qBAEC;IAED,oBAKC;IAED,+DAYC;IACD,gFAuBC;IAED,kDAcC;IAED,0BAoBC;IAFG,+CAAoD;IAIxD,6BAKC;IAED,0GAkDC;CACF"}

package/lib/query-form/index.js

@@ -6,17 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
-var _classnames3 = _interopRequireDefault(require("classnames"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _createActions = _interopRequireDefault(require("./createActions"));
 var _Field = _interopRequireDefault(require("./Field"));
+var _Composition = _interopRequireDefault(require("./Field/Composition"));
 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; }
@@ -45,14 +43,14 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
       configurable: true,
       writable: true,
       value: (0, _debounce2["default"])(function () {
-        var current = _this.fieldsRef.current;
-        if (current) {
-          setTimeout(function () {
-            _this.setState({
-              showMore: _this.isFieldsWidthOverflow()
-            });
-          }, 25);
-        }
+        // const { current } = this.fieldsRef
+        // if (current) {
+        //   setTimeout(() => {
+        //     this.setState({
+        //       showMore: this.isFieldsWidthOverflow(),
+        //     })
+        //   }, 25)
+        // }
       }, 50)
     });
     Object.defineProperty(_this, "search", {
@@ -81,32 +79,9 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
           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,
@@ -125,31 +100,39 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
           rest[_key - 2] = arguments[_key];
         }
         onChange && onChange.apply(void 0, [newValues, changedInfo].concat(rest));
-        _this.updateDrawerFieldsValueCount(newValues);
       }
     });
-    Object.defineProperty(_this, "updateDrawerFieldsValueCount", {
+    Object.defineProperty(_this, "onCompositionFieldChange", {
       enumerable: true,
       configurable: true,
       writable: true,
-      value: function value() {
+      value: function value(_value2, deleteKeys) {
+        for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+          rest[_key2 - 2] = arguments[_key2];
+        }
+        var _a;
         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++;
+        var newValues = Object.assign(Object.assign({}, values), _value2);
+        if (deleteKeys === null || deleteKeys === void 0 ? void 0 : deleteKeys.length) {
+          deleteKeys === null || deleteKeys === void 0 ? void 0 : deleteKeys.forEach(function (key) {
+            if (values === null || values === void 0 ? void 0 : values[key]) {
+              delete newValues[key];
             }
-            return acc;
-          }, 0);
-          if (drawerFieldsValueCount !== _this.state.drawerFieldsValueCount) {
-            _this.setState({
-              drawerFieldsValueCount: drawerFieldsValueCount
-            });
-          }
+          });
+        }
+        _this.form.setData('values', newValues);
+        var onChange = _this.props.onChange;
+        if (onChange) {
+          (_a = Object.keys(values)) === null || _a === void 0 ? void 0 : _a.forEach(function (key) {
+            if (JSON.stringify(_value2[key]) !== JSON.stringify(values[key] || '')) {
+              var changedInfo = {
+                name: key,
+                value: _value2[key],
+                preValue: values === null || values === void 0 ? void 0 : values[key]
+              };
+              onChange.apply(void 0, [newValues, changedInfo].concat(rest));
+            }
+          });
         }
       }
     });
@@ -179,16 +162,13 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
       initialValues = props.initialValues,
       _props$showExpand = props.showExpand,
       showExpand = _props$showExpand === void 0 ? true : _props$showExpand,
-      renderActions = props.renderActions,
-      defaultExpanded = props.defaultExpanded;
+      renderActions = props.renderActions;
     _this.state = {
-      showMore: false,
-      expanded: defaultExpanded || !showExpand || renderActions ? true : false,
-      drawerVisible: false,
-      drawerFieldsValueCount: 0
+      actionWidth: 0
     };
     _this.fieldsRef = (0, _react.createRef)();
     _this.formBoxRef = (0, _react.createRef)();
+    _this.actionRef = (0, _react.createRef)();
     _this.form = form || (0, _createActions["default"])();
     _this.form.setData('initialValues', initialValues);
     _this.form.setData('values', Object.assign({}, initialValues));
@@ -199,99 +179,54 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
     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 _this$props2 = this.props,
+        children = _this$props2.children,
+        _this$props2$classNam = _this$props2.className,
+        className = _this$props2$classNam === void 0 ? '' : _this$props2$classNam,
+        _this$props2$initialV = _this$props2.initialValues,
+        initialValues = _this$props2$initialV === void 0 ? {} : _this$props2$initialV,
+        renderActions = _this$props2.renderActions,
+        _this$props2$showSear = _this$props2.showSearch,
+        showSearch = _this$props2$showSear === void 0 ? true : _this$props2$showSear,
+        _this$props2$showRese = _this$props2.showReset,
+        showReset = _this$props2$showRese === void 0 ? true : _this$props2$showRese,
+        _this$props2$showFiel = _this$props2.showFieldCount,
+        showFieldCount = _this$props2$showFiel === void 0 ? 3 : _this$props2$showFiel,
+        _this$props2$drawerPr = _this$props2.drawerProps,
+        drawerProps = _this$props2$drawerPr === void 0 ? {} : _this$props2$drawerPr,
+        size = _this$props2.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 actionWidth = this.state.actionWidth;
       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"], {
+        return _react["default"].createElement(_react["default"].Fragment, null, 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) {
+        }, _this2.getText('reset')), _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))
+        className: (0, _classnames2["default"])(clsPrefix, _defineProperty({}, className, className))
       }, _react["default"].createElement(_form["default"], {
         layout: "inline",
-        className: (0, _classnames3["default"])({
-          expanded: !showMore || expanded,
-          showMore: showMore
+        className: (0, _classnames2["default"])({
+          expanded: true
         })
       }, _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", {
+        ref: this.fieldsRef,
+        style: {
+          width: '100%'
+        }
+      }, this.renderFields(children, initialValues, showFieldCount, actionWidth)), _react["default"].createElement("div", {
+        ref: this.actionRef,
         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", {
+      }, renderFormActions(), extraActions && _react["default"].createElement("div", {
         className: "".concat(clsPrefix, "-extra")
-      }, extraActions));
+      }, extraActions))));
     }
   }, {
     key: "getText",
@@ -350,10 +285,16 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
     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;
+      var _this$props3 = this.props,
+        showFieldCount = _this$props3.showFieldCount,
+        _this$props3$showExpa = _this$props3.showExpand,
+        showExpand = _this$props3$showExpa === void 0 ? true : _this$props3$showExpa;
+      // 获取节点宽度
+      var width = this.actionRef.current.offsetWidth;
+      // 更新state
+      this.setState({
+        actionWidth: width
+      });
       this.updateFieldHeight();
       this.form.on('search', this.search);
       // 未设置第一行显示数量且禁止了展开操作 或 自定义了操作区域，则不需要处理展开计算逻辑
@@ -362,16 +303,7 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
         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);
       }
     }
   }, {
@@ -379,10 +311,66 @@ var QueryForm = /*#__PURE__*/function (_React$PureComponent) {
     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('setValues', this.updateDrawerFieldsValueCount)
+      // this.form.off('setValue', this.updateDrawerFieldsValueCount)
       this.form.off('search', this.search);
     }
+  }, {
+    key: "renderFields",
+    value: function renderFields(children, initialValues, showFieldCount, actionWidth) {
+      var _this3 = this;
+      var rest = [];
+      var size = _react["default"].Children.count(children);
+      var fields = null;
+      if (size <= showFieldCount) {
+        // 过滤器不超过3个
+        fields = _react["default"].Children.map(children, function (child, index) {
+          var _a, _b;
+          if (child && ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.align) !== 'right') {
+            return _react["default"].cloneElement(child, {
+              form: _this3.form,
+              initialValue: initialValues === null || initialValues === void 0 ? void 0 : initialValues[(_b = child.props) === null || _b === void 0 ? void 0 : _b.name],
+              onChange: _this3.onFieldChange
+            });
+          }
+          return;
+        });
+      } else {
+        fields = _react["default"].Children.map(children, function (child, index) {
+          var _a, _b;
+          if (child && ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.align) !== 'right') {
+            var _ref = child === null || child === void 0 ? void 0 : child.props,
+              _ref$isGroup = _ref.isGroup,
+              isGroup = _ref$isGroup === void 0 ? true : _ref$isGroup;
+            if (!isGroup) {
+              return _react["default"].cloneElement(child, {
+                form: _this3.form,
+                initialValue: initialValues === null || initialValues === void 0 ? void 0 : initialValues[(_b = child.props) === null || _b === void 0 ? void 0 : _b.name],
+                onChange: _this3.onFieldChange
+              });
+            } else {
+              rest.push(child);
+              console.log('child', index, child);
+            }
+          }
+          return;
+        });
+      }
+      return _react["default"].createElement("div", {
+        style: {
+          marginRight: actionWidth
+        }
+      }, fields, !!(rest === null || rest === void 0 ? void 0 : rest.length) && _react["default"].createElement(_Composition["default"], {
+        clsPrefix: clsPrefix,
+        data: rest,
+        initialValues: initialValues,
+        onChange: this.onCompositionFieldChange,
+        form: this.form,
+        style: {
+          marginRight: (fields === null || fields === void 0 ? void 0 : fields.length) > 0 ? 10 - actionWidth : 10
+        }
+      }));
+    }
   }]);
 }(_react["default"].PureComponent);
 QueryForm.Field = _Field["default"];