tntd 3.0.0-beta → 3.0.0-beta.1

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

@@ -1,96 +1,89 @@
 "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
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _LocaleReceiver = _interopRequireDefault(require("antd/lib/locale-provider/LocaleReceiver"));
-var _icon = _interopRequireDefault(require("../../../icon"));
-var _tag = _interopRequireDefault(require("../../../tag"));
-var _input = _interopRequireDefault(require("../../../input"));
-var _FieldPopover = _interopRequireDefault(require("./FieldPopover"));
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const LocaleReceiver_1 = __importDefault(require("antd/es/locale-provider/LocaleReceiver"));
+const icon_1 = __importDefault(require("../../../icon"));
+const tag_1 = __importDefault(require("../../../tag"));
+const input_1 = __importDefault(require("../../../input"));
+const FieldPopover_1 = __importDefault(require("./FieldPopover"));
 require("./index.less");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var parseObjectToArray = function parseObjectToArray(value, data) {
-  var _a, _b;
-  return (_b = (_a = Object.keys(value)) === null || _a === void 0 ? void 0 : _a.map(function (key) {
-    var _a, _b, _c;
-    var target = data === null || data === void 0 ? void 0 : data.find(function (item) {
-      var _a;
-      return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.name) === key;
-    });
-    if (!target) return null;
-    var dataItem = (target === null || target === void 0 ? void 0 : target.props) || {};
-    var _ref = dataItem || {},
-      type = _ref.type,
-      component = _ref.component,
-      setLabel = _ref.setLabel,
-      fieldProps = _ref.props,
-      propsTitle = _ref.propsTitle,
-      title = _ref.title,
-      name = _ref.name;
-    var _propsTitle = propsTitle || title || name;
-    var _ref2 = fieldProps || {},
-      options = _ref2.options;
-    var fieldNames = ((_a = dataItem === null || dataItem === void 0 ? void 0 : dataItem.props) === null || _a === void 0 ? void 0 : _a.fieldNames) || {
-      label: 'label',
-      value: 'value'
-    };
-    var labelValue = value[key];
-    if (!type && component) {
-      if (!setLabel) {
-        console.error('自定义组件需要传入setLabel()方法');
-      }
-    } else if (options) {
-      if (type === 'selectInput') {
-        var selectKey = (_b = Object.keys(labelValue)) === null || _b === void 0 ? void 0 : _b[0];
-        var inputValue = labelValue[selectKey];
-        var selectLabel = (_c = options === null || options === void 0 ? void 0 : options.find(function (v) {
-          return v.value === selectKey;
-        })) === null || _c === void 0 ? void 0 : _c.label;
+const parseObjectToArray = (value, data) => {
+    var _a, _b;
+    return (_b = (_a = Object.keys(value)) === null || _a === void 0 ? void 0 : _a.map((key) => {
+        var _a, _b, _c;
+        const target = data === null || data === void 0 ? void 0 : data.find((item) => { var _a; return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.name) === key; });
+        if (!target)
+            return null;
+        const dataItem = (target === null || target === void 0 ? void 0 : target.props) || {};
+        const { type, component, setLabel, props: fieldProps, propsTitle, title, name, } = dataItem || {};
+        const _propsTitle = propsTitle || title || name;
+        const { options } = fieldProps || {};
+        const fieldNames = ((_a = dataItem === null || dataItem === void 0 ? void 0 : dataItem.props) === null || _a === void 0 ? void 0 : _a.fieldNames) || {
+            label: 'label',
+            value: 'value',
+        };
+        let labelValue = value[key];
+        if (!type && component) {
+            if (!setLabel) {
+                console.error('自定义组件需要传入setLabel()方法');
+            }
+        }
+        else if (options) {
+            if (type === 'selectInput') {
+                const selectKey = (_b = Object.keys(labelValue)) === null || _b === void 0 ? void 0 : _b[0];
+                const inputValue = labelValue[selectKey];
+                const selectLabel = (_c = options === null || options === void 0 ? void 0 : options.find((v) => v.value === selectKey)) === null || _c === void 0 ? void 0 : _c.label;
+                return {
+                    key,
+                    value: value[key],
+                    label: selectLabel + ':' + inputValue,
+                };
+            }
+            const target = options === null || options === void 0 ? void 0 : options.find((item) => {
+                const valueKey = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value;
+                const itemValue = item instanceof Object ? item[valueKey] : item;
+                return itemValue === value[key];
+            });
+            labelValue = target instanceof Object ? target === null || target === void 0 ? void 0 : target[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label] : target;
+        }
+        // setLabel: 对于自定义组件，无法控制label的显示，可以通过setLabel方法控制
         return {
-          key: key,
-          value: value[key],
-          label: selectLabel + ':' + inputValue
+            key,
+            value: value[key],
+            label: setLabel ? setLabel(labelValue) : _propsTitle + ':' + labelValue,
         };
-      }
-      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 === value[key];
-      });
-      labelValue = _target instanceof Object ? _target === null || _target === void 0 ? void 0 : _target[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label] : _target;
-    }
-    // setLabel: 对于自定义组件，无法控制label的显示，可以通过setLabel方法控制
-    return {
-      key: key,
-      value: value[key],
-      label: setLabel ? setLabel(labelValue) : _propsTitle + ':' + labelValue
-    };
-  })) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
-    return !!item;
-  });
+    })) === null || _b === void 0 ? void 0 : _b.filter((item) => !!item);
 };
-var parseArrayToObject = function parseArrayToObject(value) {
-  return value === null || value === void 0 ? void 0 : value.reduce(function (acc, v) {
+const parseArrayToObject = (value) => value === null || value === void 0 ? void 0 : value.reduce((acc, v) => {
     acc[v.key] = v.value;
     return acc;
-  }, {});
-};
+}, {});
 // import './index.less';
 /**
  *
@@ -106,232 +99,161 @@ var parseArrayToObject = function parseArrayToObject(value) {
  * @param {*} ref
  * @returns
  */
-var CompositionInput = function CompositionInput(_ref3, ref) {
-  var _value = _ref3.value,
-    data = _ref3.data,
-    initialValues = _ref3.initialValues,
-    onChange = _ref3.onChange,
-    placeholder = _ref3.placeholder,
-    disabled = _ref3.disabled,
-    form = _ref3.form,
-    style = _ref3.style,
-    clsPrefix = _ref3.clsPrefix;
-  var prefix = "".concat(clsPrefix, "-composition-input");
-  var _useState = (0, _react.useState)([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tempItem = _useState4[0],
-    setTempItem = _useState4[1];
-  var _useState5 = (0, _react.useState)(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchText = _useState6[0],
-    setSearchText = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    searchTarget = _useState10[0],
-    setSearchTarget = _useState10[1];
-  var inputRef = (0, _react.useRef)(null);
-  var widthRef = (0, _react.useRef)(null);
-  var handleFocus = function handleFocus(e) {
-    var _a;
-    e.preventDefault();
-    (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    if (!visible) {
-      setVisible(true);
-    }
-  };
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      changeVal: function changeVal() {
-        return value;
-      }
+const CompositionInput = ({ value: _value, data, initialValues, onChange, placeholder, disabled, form, style, clsPrefix }, ref) => {
+    const prefix = `${clsPrefix}-composition-input`;
+    const [value, setValue] = (0, react_1.useState)([]);
+    const [tempItem, setTempItem] = (0, react_1.useState)();
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [searchTarget, setSearchTarget] = (0, react_1.useState)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const widthRef = (0, react_1.useRef)(null);
+    const handleFocus = (e) => {
+        var _a;
+        e.preventDefault();
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (!visible) {
+            setVisible(true);
+        }
     };
-  });
-  (0, _react.useEffect)(function () {
-    form.on('setValue', updateValue);
-    form.on('setValues', onFormChange);
-    return function () {
-      form.off('setValue', updateValue);
-      form.off('setValues', onFormChange);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        changeVal: () => {
+            return value;
+        },
+    }));
+    (0, react_1.useEffect)(() => {
+        form.on('setValue', updateValue);
+        form.on('setValues', onFormChange);
+        return () => {
+            form.off('setValue', updateValue);
+            form.off('setValues', onFormChange);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (initialValues) {
+            setValue(parseObjectToArray(initialValues, data));
+        }
+    }, [initialValues, data]);
+    (0, react_1.useEffect)(() => {
+        if (!visible) {
+            const newValues = value === null || value === void 0 ? void 0 : value.filter((v) => !!(v === null || v === void 0 ? void 0 : v.value));
+            if (newValues.length !== (value === null || value === void 0 ? void 0 : value.length)) {
+                setValue(newValues);
+            }
+        }
+    }, [visible, value]);
+    (0, react_1.useLayoutEffect)(() => {
+        const target = document.querySelector(`.${prefix} .inputClass`);
+        if (!target)
+            return;
+        if (searchText && widthRef.current.clientWidth > 50) {
+            target.style.width = widthRef.current.clientWidth + 10 + 'px';
+        }
+        else if (!(value === null || value === void 0 ? void 0 : value.length)) {
+            target.style.width = '300px';
+        }
+        else {
+            target.style.width = '100px';
+        }
+    }, [searchText, value]);
+    const updateValue = (name, value) => {
+        // if (name === this.props.name) {
+        //   this.setState({ value })
+        //   this.props.onChange(name, value)
+        // }
     };
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (initialValues) {
-      setValue(parseObjectToArray(initialValues, data));
-    }
-  }, [initialValues, data]);
-  (0, _react.useEffect)(function () {
-    if (!visible) {
-      var newValues = value === null || value === void 0 ? void 0 : value.filter(function (v) {
-        return !!(v === null || v === void 0 ? void 0 : v.value);
-      });
-      if (newValues.length !== (value === null || value === void 0 ? void 0 : value.length)) {
-        setValue(newValues);
-      }
-    }
-  }, [visible, value]);
-  (0, _react.useLayoutEffect)(function () {
-    var target = document.querySelector(".".concat(prefix, " .inputClass"));
-    if (!target) return;
-    if (searchText && widthRef.current.clientWidth > 50) {
-      target.style.width = widthRef.current.clientWidth + 10 + 'px';
-    } else if (!(value === null || value === void 0 ? void 0 : value.length)) {
-      target.style.width = '300px';
-    } else {
-      target.style.width = '100px';
-    }
-  }, [searchText, value]);
-  var updateValue = function updateValue(name, value) {
-    // if (name === this.props.name) {
-    //   this.setState({ value })
-    //   this.props.onChange(name, value)
-    // }
-  };
-  var onFormChange = function onFormChange(formData) {
-    setValue(parseObjectToArray(formData, data));
-  };
-  var onClear = function onClear(e) {
-    e.stopPropagation();
-    var deleteKeys = value === null || value === void 0 ? void 0 : value.map(function (_ref4) {
-      var key = _ref4.key;
-      return key;
-    });
-    setValue([]);
-    onChange([], deleteKeys);
-  };
-  var onDelete = function onDelete(key, e) {
-    e.preventDefault();
-    if (value.length > 0) {
-      var newValue = value.filter(function (v) {
-        return v.key !== key;
-      });
-      setValue(newValue);
-      var deleteKeys = [key];
-      onChange(parseArrayToObject(newValue), deleteKeys);
-    }
-  };
-  var handleFieldChange = function handleFieldChange(value, isInput, hasValue) {
-    if (isInput) {
-      setSearchText(value === null || value === void 0 ? void 0 : value.label);
-      setTempItem(value);
-      return;
-    }
-    setValue(value);
-    setSearchText('');
-    setTempItem();
-    console.log('*****value****', value);
-    if (hasValue) onChange(parseArrayToObject(value));
-  };
-  var onInputChange = function onInputChange(value) {
-    if (tempItem) {
-      var regex = /^.+:.*$/;
-      if (regex.test(value)) {
-        // 有输入值
-        setSearchText(value);
-      } else {
-        // 没有输入值, 清空选择的属性类型重新显示属性列表
+    const onFormChange = (formData) => {
+        setValue(parseObjectToArray(formData, data));
+    };
+    const onClear = (e) => {
+        e.stopPropagation();
+        const deleteKeys = value === null || value === void 0 ? void 0 : value.map(({ key }) => key);
+        setValue([]);
+        onChange([], deleteKeys);
+    };
+    const onDelete = (key, e) => {
+        e.preventDefault();
+        if (value.length > 0) {
+            const newValue = value.filter((v) => v.key !== key);
+            setValue(newValue);
+            const deleteKeys = [key];
+            onChange(parseArrayToObject(newValue), deleteKeys);
+        }
+    };
+    const handleFieldChange = (value, isInput, hasValue) => {
+        if (isInput) {
+            setSearchText(value === null || value === void 0 ? void 0 : value.label);
+            setTempItem(value);
+            return;
+        }
+        setValue(value);
         setSearchText('');
         setTempItem();
-        setVisible(true);
-      }
-    } else {
-      setSearchText(value);
-    }
-  };
-  var onPressEnter = function onPressEnter(e) {
-    var _a;
-    var inputValue = ((_a = searchText === null || searchText === void 0 ? void 0 : searchText.match(/[^:]+:(.*)/)) === null || _a === void 0 ? void 0 : _a[1]) || null;
-    if (tempItem && inputValue) {
-      setVisible(false);
-      tempItem.label = searchText;
-      tempItem.value = inputValue; // 得到输入值
-      if (!(value === null || value === void 0 ? void 0 : value.find(function (v) {
-        return v.key === tempItem.key;
-      }))) {
-        var newValue = [].concat(_toConsumableArray(value), [tempItem]);
-        setValue(newValue);
-        onChange(parseArrayToObject(newValue));
-      } else {
-        var _newValue = value.map(function (v) {
-          return v.key === tempItem.key ? tempItem : v;
-        });
-        setValue(_newValue);
-        onChange(parseArrayToObject(_newValue));
-      }
-      setTempItem();
-      setSearchText('');
-    }
-    if (searchText && !searchTarget) {
-      setSearchText('');
-    }
-  };
-  return _react["default"].createElement(_LocaleReceiver["default"], {
-    componentName: "QueryForm"
-  }, function (locale) {
-    return _react["default"].createElement("div", {
-      className: prefix,
-      style: style,
-      onClick: handleFocus
-    }, _react["default"].createElement("span", {
-      className: "".concat(prefix, "-width"),
-      ref: widthRef
-    }, searchText), _react["default"].createElement("ul", {
-      className: "".concat(prefix, "-items")
-    }, value && value.map(function (item, index) {
-      return _react["default"].createElement("li", {
-        key: index,
-        className: "".concat(prefix, "-items-item")
-      }, _react["default"].createElement(_tag["default"], {
-        closable: !disabled,
-        onClose: function onClose(e) {
-          return onDelete(item.key, e);
+        console.log('*****value****', value);
+        if (hasValue)
+            onChange(parseArrayToObject(value));
+    };
+    const onInputChange = (value) => {
+        if (tempItem) {
+            const regex = /^.+:.*$/;
+            if (regex.test(value)) {
+                // 有输入值
+                setSearchText(value);
+            }
+            else {
+                // 没有输入值, 清空选择的属性类型重新显示属性列表
+                setSearchText('');
+                setTempItem();
+                setVisible(true);
+            }
+        }
+        else {
+            setSearchText(value);
         }
-      }, item === null || item === void 0 ? void 0 : item.label));
-    }), _react["default"].createElement("li", {
-      className: "".concat(prefix, "-items-input")
-    }, _react["default"].createElement(_FieldPopover["default"], {
-      onChange: handleFieldChange,
-      clsPrefix: clsPrefix,
-      options: data,
-      trigger: "click",
-      visible: visible,
-      value: value,
-      setVisible: setVisible,
-      searchText: !tempItem && searchText ? searchText : null,
-      locale: locale,
-      searchTarget: searchTarget,
-      setSearchTarget: setSearchTarget
-    }, _react["default"].createElement(_input["default"]
-    // onKeyDown={keyDown}
-    , {
-      // onKeyDown={keyDown}
-      ref: inputRef,
-      value: searchText,
-      className: "inputClass",
-      onPressEnter: onPressEnter,
-      onChange: function onChange(e) {
-        return onInputChange(e.target.value);
-      },
-      placeholder: !(value === null || value === void 0 ? void 0 : value.length) ? placeholder || locale.placeholder : undefined,
-      disabled: disabled
-    })))), _react["default"].createElement("div", {
-      className: "".concat(prefix, "-prefix")
-    }, _react["default"].createElement(_icon["default"], {
-      type: "filter"
-    })), _react["default"].createElement("div", {
-      className: "".concat(prefix, "-clear")
-    }, _react["default"].createElement(_icon["default"], {
-      onClick: onClear,
-      type: "close-circle",
-      theme: "filled"
-    })));
-  });
+    };
+    const onPressEnter = (e) => {
+        var _a;
+        const inputValue = ((_a = searchText === null || searchText === void 0 ? void 0 : searchText.match(/[^:]+:(.*)/)) === null || _a === void 0 ? void 0 : _a[1]) || null;
+        if (tempItem && inputValue) {
+            setVisible(false);
+            tempItem.label = searchText;
+            tempItem.value = inputValue; // 得到输入值
+            if (!(value === null || value === void 0 ? void 0 : value.find((v) => v.key === tempItem.key))) {
+                const newValue = [...value, tempItem];
+                setValue(newValue);
+                onChange(parseArrayToObject(newValue));
+            }
+            else {
+                const newValue = value.map((v) => (v.key === tempItem.key ? tempItem : v));
+                setValue(newValue);
+                onChange(parseArrayToObject(newValue));
+            }
+            setTempItem();
+            setSearchText('');
+        }
+        if (searchText && !searchTarget) {
+            setSearchText('');
+        }
+    };
+    return (react_1.default.createElement(LocaleReceiver_1.default, { componentName: "QueryForm" }, (locale) => {
+        return (react_1.default.createElement("div", { className: prefix, style: style, onClick: handleFocus },
+            react_1.default.createElement("span", { className: `${prefix}-width`, ref: widthRef }, searchText),
+            react_1.default.createElement("ul", { className: `${prefix}-items` },
+                value &&
+                    value.map((item, index) => (react_1.default.createElement("li", { key: index, className: `${prefix}-items-item` },
+                        react_1.default.createElement(tag_1.default, { closable: !disabled, onClose: (e) => onDelete(item.key, e) }, item === null || item === void 0 ? void 0 : item.label)))),
+                react_1.default.createElement("li", { className: `${prefix}-items-input` },
+                    react_1.default.createElement(FieldPopover_1.default, { onChange: handleFieldChange, clsPrefix: clsPrefix, options: data, trigger: "click", visible: visible, value: value, setVisible: setVisible, searchText: !tempItem && searchText ? searchText : null, locale: locale, searchTarget: searchTarget, setSearchTarget: setSearchTarget },
+                        react_1.default.createElement(input_1.default
+                        // onKeyDown={keyDown}
+                        , { 
+                            // onKeyDown={keyDown}
+                            ref: inputRef, value: searchText, className: "inputClass", onPressEnter: onPressEnter, onChange: (e) => onInputChange(e.target.value), placeholder: !(value === null || value === void 0 ? void 0 : value.length) ? placeholder || locale.placeholder : undefined, disabled: disabled })))),
+            react_1.default.createElement("div", { className: `${prefix}-prefix` },
+                react_1.default.createElement(icon_1.default, { type: "filter" })),
+            react_1.default.createElement("div", { className: `${prefix}-clear` },
+                react_1.default.createElement(icon_1.default, { onClick: onClear, type: "close-circle", theme: "filled" }))));
+    }));
 };
-var _default = exports["default"] = (0, _react.forwardRef)(CompositionInput);
+exports.default = (0, react_1.forwardRef)(CompositionInput);
+//# sourceMappingURL=index.js.map