@arim-aisdc/public-components 2.2.8-alpha.0 → 2.2.8-alpha.1

package/dist/components/TableMax/components/ColumnFilterV2/Filter.js

@@ -251,7 +251,9 @@ var Filter = function Filter(_ref) {
           onChange: handleChangeFilterValue,
           onSearch: onSearch,
           options: options,
-          isRemoteSearch: !!getFilterOptionsFn
+          isRemoteSearch: !!getFilterOptionsFn,
+          onCloseFilterPanel: onCloseFilterPanel,
+          loading: apiLoading
         });
       case FilterType.MultiSelect:
       default:

package/dist/components/TableMax/components/ColumnFilterV2/MultipleSelect/index.less

@@ -1,7 +1,7 @@
 .tableMax-filter-multipleSelect {
   width: 212px;
   .header {
-    border-bottom: 1px solid #d9d9d9;
+    border-bottom: 1px solid @tableColor7;
     padding: 8px 12px;
   }
   .body {
@@ -24,7 +24,7 @@
     }
   }
   .footer {
-    border-top: 1px solid #d9d9d9;
+    border-top: 1px solid @tableColor7;
     padding: 8px 12px;
     display: flex;
     justify-content: space-between;

package/dist/components/TableMax/components/ColumnFilterV2/SingleSelect/index.d.ts

@@ -1,10 +1,12 @@
 import './index.less';
 interface IProps {
-    value: string;
+    value: string | number | undefined;
     options: any[];
-    onChange: (value: string) => void;
+    onChange: (value: string | number | undefined) => void;
     onSearch: (value: string) => void;
     isRemoteSearch: boolean;
+    loading: boolean;
+    onCloseFilterPanel: () => void;
 }
-declare const SingleSelect: ({ value, onChange, options, onSearch, isRemoteSearch }: IProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ value, onChange, options, onSearch, isRemoteSearch, loading, onCloseFilterPanel, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/TableMax/components/ColumnFilterV2/SingleSelect/index.js

@@ -1,32 +1,107 @@
-import { Select } from 'antd';
-import { filterOptions } from "../../../utils";
+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; }
+import { useUpdateEffect } from 'ahooks';
+import { Button, Input, Spin } from 'antd';
+import { useMemo, useState } from 'react';
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var SingleSelect = function SingleSelect(_ref) {
-  var value = _ref.value,
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? undefined : _ref$value,
     onChange = _ref.onChange,
     options = _ref.options,
     onSearch = _ref.onSearch,
-    isRemoteSearch = _ref.isRemoteSearch;
-  var handleClear = function handleClear() {
-    onChange('');
+    isRemoteSearch = _ref.isRemoteSearch,
+    loading = _ref.loading,
+    onCloseFilterPanel = _ref.onCloseFilterPanel;
+  // 内部state
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+
+  // 前端搜索输入值
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    frontendSearchValue = _useState4[0],
+    setFrontendSearchValue = _useState4[1];
+  var handleClick = function handleClick(changedValue) {
+    console.log('changedValue :>> ', changedValue);
+    setInnerValue(changedValue);
   };
-  return /*#__PURE__*/_jsx("div", {
+  var handleConfirm = function handleConfirm() {
+    onChange(innerValue);
+    onCloseFilterPanel();
+  };
+  var handleReset = function handleReset() {
+    setInnerValue(undefined);
+    onChange(undefined);
+  };
+  useUpdateEffect(function () {
+    // console.log('value :>> ', value);
+    setInnerValue(value);
+  }, [value]);
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+    if (isRemoteSearch) {
+      onSearch(value);
+    } else {
+      setFrontendSearchValue(value);
+    }
+  };
+
+  // 最终的可选值
+  var finalOptions = useMemo(function () {
+    if (isRemoteSearch) {
+      return options;
+    }
+    var input = (frontendSearchValue !== null && frontendSearchValue !== void 0 ? frontendSearchValue : '').toUpperCase().trim();
+    return options.filter(function (option) {
+      var _option$label;
+      var optionFilterString = ('' + ((_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.children)).toUpperCase().trim();
+      return optionFilterString.indexOf(input) !== -1;
+    });
+  }, [options, frontendSearchValue]);
+  return /*#__PURE__*/_jsxs("div", {
     className: "tableMax-filter-singleSelect",
-    children: /*#__PURE__*/_jsx(Select, {
-      showSearch: true,
-      allowClear: true,
-      value: value,
-      suffixIcon: null,
-      options: options,
-      onChange: onChange,
-      onClear: handleClear,
-      onSearch: onSearch,
-      style: {
-        width: '100%'
-      },
-      filterOption: isRemoteSearch ? false : filterOptions
-    })
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "header",
+      children: /*#__PURE__*/_jsx(Input, {
+        placeholder: "\u8F93\u5165\u641C\u7D22",
+        onChange: handleInputChange
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "body",
+      children: loading ? /*#__PURE__*/_jsx("div", {
+        className: "loading",
+        children: /*#__PURE__*/_jsx(Spin, {})
+      }) : finalOptions.map(function (option) {
+        var _option$label2;
+        return /*#__PURE__*/_jsx("div", {
+          className: "item ".concat(innerValue === option.value ? 'selected' : ''),
+          onClick: function onClick() {
+            return handleClick(option.value);
+          },
+          children: (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.children
+        }, option.value);
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "footer",
+      children: [/*#__PURE__*/_jsx(Button, {
+        type: "text",
+        onClick: handleReset,
+        children: "\u91CD\u7F6E"
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        onClick: handleConfirm,
+        children: "\u786E\u5B9A"
+      })]
+    })]
   });
 };
 export default SingleSelect;

package/dist/components/TableMax/components/ColumnFilterV2/SingleSelect/index.less

@@ -1,9 +1,43 @@
 .tableMax-filter-singleSelect {
-  width: 188px;
-  border-radius: 2px;
-  overflow: hidden;
-  padding: 8px 12px;
-  .ant-select-selection-item {
-    flex: none !important;
+  box-sizing: border-box;
+  width: 212px;
+  .header {
+    border-bottom: 1px solid @tableColor7;
+    padding: 8px 12px;
+  }
+  .body {
+    height: 220px;
+    overflow-y: auto;
+    padding: 4px 12px;
+    .loading {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .item {
+      padding: 2px 4px;
+      cursor: pointer;
+      border-radius: 2px;
+      height: 20px;
+      font-size: 14px;
+      line-height: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .item:hover {
+      background-color: @tableColor8;
+    }
+    .selected {
+      background-color: @tableColor8;
+    }
+  }
+  .footer {
+    border-top: 1px solid @tableColor7;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
   }
 }

package/dist/components/TableMax/components/ColumnFilterV2/index.js

@@ -71,6 +71,7 @@ export function ColumnFilter(_ref) {
   // 点击空白处关闭弹层
   useEffect(function () {
     var clickHandler = function clickHandler() {
+      // console.log('close :>> ');
       setFilterPanelVisible(false);
     };
     if (filterPanelVisible) {
@@ -99,12 +100,12 @@ export function ColumnFilter(_ref) {
         filterPanelWrapperRef.current.style.top = "".concat(top - height - btnHeight, "px");
       }
       // 处理左右位置
-      if (right > window.innerWidth && left >= width) {
+      if (right > window.innerWidth) {
         // 如果弹层右侧被遮挡，不能完整展示 & 左侧可完整展示弹层 就把弹层展示到设置按钮左侧
-        filterPanelWrapperRef.current.style.right = "0px";
-      } else if (left < 0 && right >= width) {
+        filterPanelWrapperRef.current.style.left = "".concat(window.innerWidth - 10, "px");
+      } else if (left < 0) {
         // 如果弹层在设置按钮左侧被遮挡，不能完整展示，将弹层向右移动
-        filterPanelWrapperRef.current.style.left = "0px";
+        filterPanelWrapperRef.current.style.left = "".concat(width + 10, "px");
       }
     }
   }, [filterPanelVisible]);
@@ -117,17 +118,16 @@ export function ColumnFilter(_ref) {
       configRectBottom = _ref2.bottom;
     setColumnConfigStyle({
       left: configRectRight,
-      top: configRectBottom
+      top: configRectBottom + 9
     });
-    setFilterPanelVisible(!filterPanelVisible);
+    setTimeout(function () {
+      setFilterPanelVisible(!filterPanelVisible);
+    }, 0);
   };
   var handleClosePanel = useCallback(function () {
     setFilterPanelVisible(false);
   }, []);
   return /*#__PURE__*/_jsxs("div", {
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
     children: [/*#__PURE__*/_jsx("i", {
       className: "iconfont-table icon-table-filter filter-icon ".concat(!!column.getFilterValue() ? 'height-light-filter' : ''),
       onClick: onFilterIconClick
@@ -135,6 +135,9 @@ export function ColumnFilter(_ref) {
       ref: filterPanelWrapperRef,
       className: "filter-panel-wrapper",
       style: columnConfigStyle,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
       children: /*#__PURE__*/_jsx(Filter, {
         column: column,
         onCloseFilterPanel: handleClosePanel

package/dist/components/TableMax/utils.d.ts

@@ -19,6 +19,16 @@ export declare const setInitColumnsSize: (tableColumns: any, columnsMap: any, de
     tableColumns: any;
 };
 export declare const getFormatFilters: (columns: TableMaxColumnType[], originFilters: ColumnFiltersState) => {};
+/**
+ * 不同filterType组件的查询格式：
+ * 1. DateRange/NumberRange：
+ *  1.1 只输入开始：Ge
+ *  1.2 只输入结束：Le
+ *  1.3 都输入：Between
+ * 2. MultiSelect没有填filterType：In
+ * 3. Input/AutoComplete：Contains
+ * 4. SingleDate/SingleNumber/SingleSelect：Eq
+ */
 export declare const getFormatFiltersV2: (columns: TableMaxColumnType[], originFilters: ColumnFiltersState) => FormatFilterType[];
 export declare const getFormatSorting: (columns: TableMaxColumnType[], originSorting: SortingState) => {
     id: string;

package/dist/components/TableMax/utils.js

@@ -134,6 +134,16 @@ export var getFormatFilters = function getFormatFilters(columns, originFilters)
 };
 
 // 动态化查询格式：https://arim-jyzx.coding.net/p/infra/wiki/3252
+/**
+ * 不同filterType组件的查询格式：
+ * 1. DateRange/NumberRange：
+ *  1.1 只输入开始：Ge
+ *  1.2 只输入结束：Le
+ *  1.3 都输入：Between
+ * 2. MultiSelect没有填filterType：In
+ * 3. Input/AutoComplete：Contains
+ * 4. SingleDate/SingleNumber/SingleSelect：Eq
+ */
 export var getFormatFiltersV2 = function getFormatFiltersV2(columns, originFilters) {
   // console.log('getFormatFilters :>> ', columns, originFilters);
   var formatFilters = [];
@@ -183,12 +193,12 @@ export var getFormatFiltersV2 = function getFormatFiltersV2(columns, originFilte
       // 多选组件
       res.operator = FilterOperator.In;
       res.value = value;
-    } else if (filterType === FilterType.Input) {
+    } else if (filterType === FilterType.Input || filterType === FilterType.AutoComplete) {
       // Input组件
       res.operator = FilterOperator.Contains;
       res.value = value;
     } else {
-      // 其他组件: SingleDate/SingleNumber/AutoComplete/SingleSelect
+      // 其他组件: SingleDate/SingleNumber/SingleSelect
       res.operator = FilterOperator.Eq;
       res.value = value;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "2.2.8-alpha.0",
+  "version": "2.2.8-alpha.1",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",