tntd 3.0.0-beta.1 → 3.0.0-beta.2

package/es/query-form/Field/Composition/FieldPopover.js

@@ -1,210 +1,284 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import _get from "lodash/get";
+import _cloneDeep from "lodash/cloneDeep";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import React, { useEffect, useState } from 'react';
-import { cloneDeep } from 'lodash';
 import Popover from '../../../popover';
 import SelectOpt from './Select';
 import { highlightSubstring, getLabelFromOptions } from './utils';
-import { get } from 'lodash';
 import fieldsMap, { getFieldWidth } from '../fieldsMap';
 import './FieldPopover.less';
-const isInput = (type) => ['input', 'string', 'search', 'number', 'inputNumber'].includes(type);
-export default (_a) => {
-    var { visible, setVisible, searchText, children, value, onChange, options, locale, searchTarget, setSearchTarget, clsPrefix } = _a, props = __rest(_a, ["visible", "setVisible", "searchText", "children", "value", "onChange", "options", "locale", "searchTarget", "setSearchTarget", "clsPrefix"]);
-    const [dataItem, setDataItem] = useState(null);
-    const onPropsClick = (propItem) => {
-        const copyValue = cloneDeep(value);
-        if (!(copyValue === null || copyValue === void 0 ? void 0 : copyValue.find((v) => v.key === propItem.name))) {
-            copyValue.push({
-                key: propItem.name,
-                value: propItem.type === 'array' ? [] : '',
-                label: (propItem.propsTitle || propItem.title || propItem.name) + ':',
-            });
-        }
-        if (isInput(propItem.type)) {
-            const target = copyValue.find((v) => v.key === propItem.name);
-            onChange(target, true);
-            close();
-            return;
-        }
-        setDataItem(propItem);
-        onChange(copyValue);
-    };
-    const onSelectChange = (v, isMultiple) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const copyValue = cloneDeep(value || []);
-        let index;
-        if (v.dataItem) {
-            const _index = copyValue.findIndex((vv) => { var _a; return vv.key === ((_a = v.dataItem) === null || _a === void 0 ? void 0 : _a.name); });
-            if (_index > -1) {
-                index = _index;
-            }
-            else {
-                copyValue.push({
-                    key: (_a = v.dataItem) === null || _a === void 0 ? void 0 : _a.name,
-                    value: isMultiple ? [] : '',
-                    label: (((_b = v.dataItem) === null || _b === void 0 ? void 0 : _b.propsTitle) || ((_c = v.dataItem) === null || _c === void 0 ? void 0 : _c.title) || ((_d = v.dataItem) === null || _d === void 0 ? void 0 : _d.name)) + ':',
-                });
-                index = copyValue.length - 1;
-            }
-        }
-        else {
-            index = copyValue.findIndex((v) => v.key === (dataItem === null || dataItem === void 0 ? void 0 : dataItem.name));
-        }
-        if (isMultiple) {
-            if (!((_f = (_e = copyValue[index]) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length)) {
-                copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + (v === null || v === void 0 ? void 0 : v.label);
-                copyValue[index].value = [v === null || v === void 0 ? void 0 : v.value];
-            }
-            else {
-                if (((_g = copyValue[index].value) === null || _g === void 0 ? void 0 : _g.indexOf(v.value)) > -1) {
-                    copyValue[index].value = copyValue[index].value.filter((val) => val !== v.value);
-                    const regex = new RegExp(`\\|?${v.label}`, 'g'); //new RegExp(`\\|?${variable}`, 'g')
-                    const result = copyValue[index].label.replace(regex, '');
-                    copyValue[index].label = result;
-                }
-                else {
-                    copyValue[index].value.push(v.value);
-                    copyValue[index].label += '|' + (v === null || v === void 0 ? void 0 : v.label);
-                }
-            }
-        }
-        else {
-            copyValue[index].value = v === null || v === void 0 ? void 0 : v.value;
-            copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + (v === null || v === void 0 ? void 0 : v.label);
-            close();
-        }
-        onChange(copyValue, false, true);
-    };
-    const onFieldChange = (...args) => {
-        var _a, _b;
-        const { type, component, props: fieldProps, setLabel } = dataItem || {};
-        const { onChange: onChangeCustom, options } = fieldProps || {};
-        onChangeCustom && onChangeCustom(...args);
-        const copyValue = cloneDeep(value);
-        const index = copyValue.findIndex((v) => v.key === (dataItem === null || dataItem === void 0 ? void 0 : dataItem.name));
-        copyValue[index].value = args[0];
-        if (type === 'date') {
-            copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + args[1];
-            close();
-        }
-        else if (type === 'dateRange') {
-            copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + ((_a = args[1]) === null || _a === void 0 ? void 0 : _a.join('~'));
-            if ((_b = args[1]) === null || _b === void 0 ? void 0 : _b[1]) {
-                close();
-            }
+const isInput = type => ['input', 'string', 'search', 'number', 'inputNumber'].includes(type);
+export default (_a => {
+  var {
+      visible,
+      setVisible,
+      searchText,
+      children,
+      value,
+      onChange,
+      options,
+      locale,
+      searchTarget,
+      setSearchTarget,
+      clsPrefix
+    } = _a,
+    props = __rest(_a, ["visible", "setVisible", "searchText", "children", "value", "onChange", "options", "locale", "searchTarget", "setSearchTarget", "clsPrefix"]);
+  const [dataItem, setDataItem] = useState(null);
+  const onPropsClick = propItem => {
+    const copyValue = _cloneDeep(value);
+    if (!(copyValue === null || copyValue === void 0 ? void 0 : copyValue.find(v => v.key === propItem.name))) {
+      copyValue.push({
+        key: propItem.name,
+        value: propItem.type === 'array' ? [] : '',
+        label: (propItem.propsTitle || propItem.title || propItem.name) + ':'
+      });
+    }
+    if (isInput(propItem.type)) {
+      const target = copyValue.find(v => v.key === propItem.name);
+      onChange(target, true);
+      close();
+      return;
+    }
+    setDataItem(propItem);
+    onChange(copyValue);
+  };
+  const onSelectChange = (v, isMultiple) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const copyValue = _cloneDeep(value || []);
+    let index;
+    if (v.dataItem) {
+      const _index = copyValue.findIndex(vv => {
+        var _a;
+        return vv.key === ((_a = v.dataItem) === null || _a === void 0 ? void 0 : _a.name);
+      });
+      if (_index > -1) {
+        index = _index;
+      } else {
+        copyValue.push({
+          key: (_a = v.dataItem) === null || _a === void 0 ? void 0 : _a.name,
+          value: isMultiple ? [] : '',
+          label: (((_b = v.dataItem) === null || _b === void 0 ? void 0 : _b.propsTitle) || ((_c = v.dataItem) === null || _c === void 0 ? void 0 : _c.title) || ((_d = v.dataItem) === null || _d === void 0 ? void 0 : _d.name)) + ':'
+        });
+        index = copyValue.length - 1;
+      }
+    } else {
+      index = copyValue.findIndex(v => v.key === (dataItem === null || dataItem === void 0 ? void 0 : dataItem.name));
+    }
+    if (isMultiple) {
+      if (!((_f = (_e = copyValue[index]) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length)) {
+        copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + (v === null || v === void 0 ? void 0 : v.label);
+        copyValue[index].value = [v === null || v === void 0 ? void 0 : v.value];
+      } else {
+        if (((_g = copyValue[index].value) === null || _g === void 0 ? void 0 : _g.indexOf(v.value)) > -1) {
+          copyValue[index].value = copyValue[index].value.filter(val => val !== v.value);
+          const regex = new RegExp(`\\|?${v.label}`, 'g'); //new RegExp(`\\|?${variable}`, 'g')
+          const result = copyValue[index].label.replace(regex, '');
+          copyValue[index].label = result;
+        } else {
+          copyValue[index].value.push(v.value);
+          copyValue[index].label += '|' + (v === null || v === void 0 ? void 0 : v.label);
         }
-        else if (type === 'selectInput') {
-            const key = get(Object.keys(args[0]), '0');
-            const val = get(args[0], key);
-            const label = getLabelFromOptions(key, options);
-            copyValue[index].label = `${label}: ${val}`;
+      }
+    } else {
+      copyValue[index].value = v === null || v === void 0 ? void 0 : v.value;
+      copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + (v === null || v === void 0 ? void 0 : v.label);
+      close();
+    }
+    onChange(copyValue, false, true);
+  };
+  const onFieldChange = (...args) => {
+    var _a, _b;
+    const {
+      type,
+      component,
+      props: fieldProps,
+      setLabel
+    } = dataItem || {};
+    const {
+      onChange: onChangeCustom,
+      options
+    } = fieldProps || {};
+    onChangeCustom && onChangeCustom(...args);
+    const copyValue = _cloneDeep(value);
+    const index = copyValue.findIndex(v => v.key === (dataItem === null || dataItem === void 0 ? void 0 : dataItem.name));
+    copyValue[index].value = args[0];
+    if (type === 'date') {
+      copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + args[1];
+      close();
+    } else if (type === 'dateRange') {
+      copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + ((_a = args[1]) === null || _a === void 0 ? void 0 : _a.join('~'));
+      if ((_b = args[1]) === null || _b === void 0 ? void 0 : _b[1]) {
+        close();
+      }
+    } else if (type === 'selectInput') {
+      const key = _get(Object.keys(args[0]), '0');
+      const val = _get(args[0], key);
+      const label = getLabelFromOptions(key, options);
+      copyValue[index].label = `${label}: ${val}`;
+    } else if (type === 'checkbox') {
+      copyValue[index].label = `${copyValue[index].label.match(/(.*:)/)[0]} ${args[0] ? local.Yes : local.No}`;
+      close();
+    } else if (!type && component) {
+      if (setLabel) {
+        // setLabel: 对于自定义组件，无法控制label的显示，可以通过setLabel方法控制
+        copyValue[index].label = setLabel(args[0]);
+      } else {
+        copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + (args[1] || args[0]);
+      }
+      close();
+    }
+    onChange(copyValue, false, true);
+    // close()
+  };
+  const close = () => {
+    setVisible(false);
+  };
+  const handleVisibleChange = visible => {
+    setVisible(visible);
+  };
+  useEffect(() => {
+    setDataItem(null);
+  }, [visible]);
+  useEffect(() => {
+    let bool1 = false,
+      bool2 = false;
+    if (searchText) {
+      options === null || options === void 0 ? void 0 : options.forEach(v => {
+        const {
+          name,
+          propsTitle,
+          title,
+          type,
+          props
+        } = v.props || {};
+        const _propsTitle = propsTitle || title || name;
+        if ((_propsTitle === null || _propsTitle === void 0 ? void 0 : _propsTitle.indexOf(searchText)) > -1) {
+          bool1 = true;
         }
-        else if (type === 'checkbox') {
-            copyValue[index].label = `${copyValue[index].label.match(/(.*:)/)[0]} ${args[0] ? local.Yes : local.No}`;
-            close();
+        const sOptions = type !== 'select' ? [] : (props === null || props === void 0 ? void 0 : props.options) || [];
+        const fieldNames = props === null || props === void 0 ? void 0 : props.fieldNames;
+        const target = sOptions === null || sOptions === void 0 ? void 0 : sOptions.find(item => {
+          const labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label';
+          const label = item instanceof Object ? item[labelKey] : item;
+          return (label === null || label === void 0 ? void 0 : label.indexOf(searchText)) > -1;
+        });
+        if (target) {
+          bool2 = true;
         }
-        else if (!type && component) {
-            if (setLabel) {
-                // setLabel: 对于自定义组件，无法控制label的显示，可以通过setLabel方法控制
-                copyValue[index].label = setLabel(args[0]);
+      });
+      setSearchTarget(!bool2 && !bool1 ? null : {
+        propsTitle: bool1,
+        propsValue: bool2
+      });
+    } else {
+      setSearchTarget(null);
+    }
+  }, [options, searchText]);
+  const renderFirstOptions = menu => {
+    return React.createElement("div", null, (!searchText || (searchTarget === null || searchTarget === void 0 ? void 0 : searchTarget.propsTitle)) && React.createElement("label", null, locale.propTitle), React.createElement("ul", {
+      className: "ant-select-dropdown-menu"
+    }, options === null || options === void 0 ? void 0 : options.map(v => {
+      const {
+        name,
+        propsTitle,
+        title,
+        type,
+        props
+      } = v.props || {};
+      const _propsTitle = propsTitle || title || name;
+      if (searchText) {
+        if ((_propsTitle === null || _propsTitle === void 0 ? void 0 : _propsTitle.indexOf(searchText)) > -1) {
+          return React.createElement("li", {
+            className: "ant-select-dropdown-menu-item",
+            key: name,
+            value: name,
+            onMouseDown: e => e.preventDefault(),
+            onClick: () => {
+              onPropsClick(v.props);
             }
-            else {
-                copyValue[index].label = copyValue[index].label.match(/(.*:)/)[0] + (args[1] || args[0]);
+          }, React.createElement("span", {
+            dangerouslySetInnerHTML: {
+              __html: highlightSubstring(_propsTitle, searchText)
             }
-            close();
-        }
-        onChange(copyValue, false, true);
-        // close()
-    };
-    const close = () => {
-        setVisible(false);
-    };
-    const handleVisibleChange = (visible) => {
-        setVisible(visible);
-    };
-    useEffect(() => {
-        setDataItem(null);
-    }, [visible]);
-    useEffect(() => {
-        let bool1 = false, bool2 = false;
-        if (searchText) {
-            options === null || options === void 0 ? void 0 : options.forEach((v) => {
-                const { name, propsTitle, title, type, props } = v.props || {};
-                const _propsTitle = propsTitle || title || name;
-                if ((_propsTitle === null || _propsTitle === void 0 ? void 0 : _propsTitle.indexOf(searchText)) > -1) {
-                    bool1 = true;
-                }
-                const sOptions = type !== 'select' ? [] : (props === null || props === void 0 ? void 0 : props.options) || [];
-                const fieldNames = props === null || props === void 0 ? void 0 : props.fieldNames;
-                const target = sOptions === null || sOptions === void 0 ? void 0 : sOptions.find((item) => {
-                    const labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label';
-                    const label = item instanceof Object ? item[labelKey] : item;
-                    return (label === null || label === void 0 ? void 0 : label.indexOf(searchText)) > -1;
-                });
-                if (target) {
-                    bool2 = true;
-                }
-            });
-            setSearchTarget(!bool2 && !bool1 ? null : { propsTitle: bool1, propsValue: bool2 });
+          }));
         }
-        else {
-            setSearchTarget(null);
+        return '';
+      }
+      return React.createElement("li", {
+        className: "ant-select-dropdown-menu-item",
+        key: name,
+        value: name,
+        onMouseDown: e => e.preventDefault(),
+        onClick: () => {
+          onPropsClick(v.props);
         }
-    }, [options, searchText]);
-    const renderFirstOptions = (menu) => {
-        return (React.createElement("div", null,
-            (!searchText || (searchTarget === null || searchTarget === void 0 ? void 0 : searchTarget.propsTitle)) && React.createElement("label", null, locale.propTitle),
-            React.createElement("ul", { className: "ant-select-dropdown-menu" }, options === null || options === void 0 ? void 0 : options.map((v) => {
-                const { name, propsTitle, title, type, props } = v.props || {};
-                const _propsTitle = propsTitle || title || name;
-                if (searchText) {
-                    if ((_propsTitle === null || _propsTitle === void 0 ? void 0 : _propsTitle.indexOf(searchText)) > -1) {
-                        return (React.createElement("li", { className: "ant-select-dropdown-menu-item", key: name, value: name, onMouseDown: (e) => e.preventDefault(), onClick: () => {
-                                onPropsClick(v.props);
-                            } },
-                            React.createElement("span", { dangerouslySetInnerHTML: {
-                                    __html: highlightSubstring(_propsTitle, searchText),
-                                } })));
-                    }
-                    return '';
-                }
-                return (React.createElement("li", { className: "ant-select-dropdown-menu-item", key: name, value: name, onMouseDown: (e) => e.preventDefault(), onClick: () => {
-                        onPropsClick(v.props);
-                    } }, _propsTitle));
-            })),
-            searchText && (React.createElement("div", null,
-                (searchTarget === null || searchTarget === void 0 ? void 0 : searchTarget.propsValue) && React.createElement("label", null, locale.propValue),
-                React.createElement("ul", { className: "ant-select-dropdown-menu" }, options === null || options === void 0 ? void 0 : options.map((v) => {
-                    const { name, propsTitle, type, props } = v.props || {};
-                    const target = value === null || value === void 0 ? void 0 : value.find((v) => v.key === name);
-                    if (type === 'select' && props && props.options && props.options.length > 0) {
-                        return (React.createElement(SelectOpt, Object.assign({}, props, { searchText: searchText, onChange: onSelectChange, value: target === null || target === void 0 ? void 0 : target.value, dataItem: v.props })));
-                    }
-                    return;
-                }))))));
-    };
-    const renderSecondOptions = () => {
-        var _a;
-        const { name, propsTitle, title, type, className, component, props: fieldProps, } = dataItem || {};
-        const target = value === null || value === void 0 ? void 0 : value.find((v) => v.key === name);
-        const Field = component || fieldsMap[type];
-        return (React.createElement("div", { onClick: (e) => e.stopPropagation(), className: className },
-            React.createElement("label", null, propsTitle || title || name),
-            type === 'select' ? (React.createElement(SelectOpt, Object.assign({}, fieldProps, { onChange: onSelectChange, value: target === null || target === void 0 ? void 0 : target.value }))) : (React.createElement("div", { className: `${clsPrefix}-field-popover-content`, onClick: (e) => e.stopPropagation() },
-                React.createElement(Field, Object.assign({ value: target === null || target === void 0 ? void 0 : target.value }, fieldProps, { style: Object.assign(Object.assign({}, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style), { width: ((_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style) === null || _a === void 0 ? void 0 : _a.width) || getFieldWidth(type) }), onChange: onFieldChange }))))));
-    };
-    return (React.createElement(Popover, Object.assign({ trigger: "click", 
-        // onClick={(e) =>  e.stopPropagation()}
-        visible: visible, placement: "bottom", overlayClassName: `${clsPrefix}-field-popover`, content: !dataItem ? renderFirstOptions() : renderSecondOptions(), onVisibleChange: handleVisibleChange }, props), children));
-};
-//# sourceMappingURL=FieldPopover.js.map
+      }, _propsTitle);
+    })), searchText && React.createElement("div", null, (searchTarget === null || searchTarget === void 0 ? void 0 : searchTarget.propsValue) && React.createElement("label", null, locale.propValue), React.createElement("ul", {
+      className: "ant-select-dropdown-menu"
+    }, options === null || options === void 0 ? void 0 : options.map(v => {
+      const {
+        name,
+        propsTitle,
+        type,
+        props
+      } = v.props || {};
+      const target = value === null || value === void 0 ? void 0 : value.find(v => v.key === name);
+      if (type === 'select' && props && props.options && props.options.length > 0) {
+        return React.createElement(SelectOpt, Object.assign({}, props, {
+          searchText: searchText,
+          onChange: onSelectChange,
+          value: target === null || target === void 0 ? void 0 : target.value,
+          dataItem: v.props
+        }));
+      }
+      return;
+    }))));
+  };
+  const renderSecondOptions = () => {
+    var _a;
+    const {
+      name,
+      propsTitle,
+      title,
+      type,
+      className,
+      component,
+      props: fieldProps
+    } = dataItem || {};
+    const target = value === null || value === void 0 ? void 0 : value.find(v => v.key === name);
+    const Field = component || fieldsMap[type];
+    return React.createElement("div", {
+      onClick: e => e.stopPropagation(),
+      className: className
+    }, React.createElement("label", null, propsTitle || title || name), type === 'select' ? React.createElement(SelectOpt, Object.assign({}, fieldProps, {
+      onChange: onSelectChange,
+      value: target === null || target === void 0 ? void 0 : target.value
+    })) : React.createElement("div", {
+      className: `${clsPrefix}-field-popover-content`,
+      onClick: e => e.stopPropagation()
+    }, React.createElement(Field, Object.assign({
+      value: target === null || target === void 0 ? void 0 : target.value
+    }, fieldProps, {
+      style: Object.assign(Object.assign({}, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style), {
+        width: ((_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style) === null || _a === void 0 ? void 0 : _a.width) || getFieldWidth(type)
+      }),
+      onChange: onFieldChange
+    }))));
+  };
+  return React.createElement(Popover, Object.assign({
+    trigger: "click",
+    // onClick={(e) =>  e.stopPropagation()}
+    visible: visible,
+    placement: "bottom",
+    overlayClassName: `${clsPrefix}-field-popover`,
+    content: !dataItem ? renderFirstOptions() : renderSecondOptions(),
+    onVisibleChange: handleVisibleChange
+  }, props), children);
+});