@arim-aisdc/public-components 2.3.21 → 2.3.23

package/dist/components/CenterModal/CenterModal.js

@@ -42,7 +42,7 @@ var CenterModal = function CenterModal(_ref) {
     _ref$confirmLoading = _ref.confirmLoading,
     confirmLoading = _ref$confirmLoading === void 0 ? false : _ref$confirmLoading,
     _ref$maskClosable = _ref.maskClosable,
-    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
+    maskClosable = _ref$maskClosable === void 0 ? false : _ref$maskClosable,
     _ref$bodyStyle = _ref.bodyStyle,
     bodyStyle = _ref$bodyStyle === void 0 ? {
       position: 'relative'

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

@@ -57,6 +57,23 @@ var Filter = function Filter(_ref) {
     setColumnFilterValue(newValue);
     column.setFilterValue(newValue);
   };
+  // 修改表格SingleSelect 筛选参数
+  var handleChangeSelectFilterValue = function handleChangeSelectFilterValue(value, inputSearchValue) {
+    var newValue = value;
+    if (value === null || Array.isArray(value) && value.length === 0) {
+      // 值为null或空数组时，清除过滤条件。
+      newValue = undefined;
+    }
+    // console.log('handleChangeFilterValue :>> ', newValue);
+    setColumnFilterValue(!value ? undefined : {
+      filterValue: newValue,
+      optionsParam: inputSearchValue
+    });
+    column.setFilterValue(!value ? undefined : {
+      filterValue: newValue,
+      optionsParam: inputSearchValue
+    });
+  };
 
   // 修改表格筛选参数（防抖）
   var changeFilterValueWithDebounce = useCallback(debounce(function (value) {
@@ -148,7 +165,9 @@ var Filter = function Filter(_ref) {
   useEffect(function () {
     if ([FilterType.MultiSelect, FilterType.SingleSelect].includes(filterType)) {
       // 打开后自动获取可选值
-      fetchOptions('');
+      var _ref3 = columnFilterValue || {},
+        optionsParam = _ref3.optionsParam;
+      fetchOptions(optionsParam);
     }
   }, []);
   var filterComponent = function filterComponent(type) {
@@ -252,7 +271,7 @@ var Filter = function Filter(_ref) {
       case FilterType.SingleSelect:
         return /*#__PURE__*/_jsx(SingleSelect, {
           value: columnFilterValue,
-          onChange: handleChangeFilterValue,
+          onChange: handleChangeSelectFilterValue,
           onSearch: onSearch,
           options: options,
           isFrontSearch: isFilterOptionsFrontSearch,

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

@@ -92,7 +92,8 @@ var MultipleSelect = function MultipleSelect(_ref) {
       className: "tableMax-filter-multipleSelect-header",
       children: /*#__PURE__*/_jsx(Input, {
         placeholder: t('global.placeholder.input'),
-        onChange: handleInputChange
+        onChange: handleInputChange,
+        allowClear: true
       })
     }), /*#__PURE__*/_jsx("div", {
       className: "tableMax-filter-multipleSelect-body",

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

@@ -1,8 +1,11 @@
 import './index.less';
 interface IProps {
-    value: string | number | undefined;
+    value: {
+        filterValue?: string;
+        optionsParam?: string;
+    } | undefined;
     options: any[];
-    onChange: (value: string | number | undefined) => void;
+    onChange: (value: string | number | undefined, inputValue?: string) => void;
     onSearch: (value: string) => void;
     isFrontSearch: boolean;
     loading: boolean;

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

@@ -5,9 +5,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { useTranslation } from "../../../../../hooks/useTranslation";
-import { useUpdateEffect } from 'ahooks';
 import { Button, Input, Spin } from 'antd';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,64 +19,104 @@ var SingleSelect = function SingleSelect(_ref) {
     isFrontSearch = _ref.isFrontSearch,
     loading = _ref.loading,
     onCloseFilterPanel = _ref.onCloseFilterPanel;
-  // 内部state
-  var _useState = useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    innerValue = _useState2[0],
-    setInnerValue = _useState2[1];
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-
-  // 前端搜索输入值
-  var _useState3 = useState(''),
+  var _ref2 = value || {},
+    filterValue = _ref2.filterValue,
+    optionsParam = _ref2.optionsParam;
+  // 列筛选 最终筛选值
+  var _useState = useState(filterValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  // 列筛选可选值列表的筛选参数
+  var _useState3 = useState(optionsParam),
     _useState4 = _slicedToArray(_useState3, 2),
-    frontendSearchValue = _useState4[0],
-    setFrontendSearchValue = _useState4[1];
+    inputSearchValue = _useState4[0],
+    setInputSearchValue = _useState4[1];
+  // 列筛选-前端筛选可选值列表
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    frontendOptions = _useState6[0],
+    setFrontendOptions = _useState6[1];
+  var isFirstScroll = useRef(true);
   var handleClick = function handleClick(changedValue) {
     console.log('changedValue :>> ', changedValue);
     setInnerValue(changedValue);
   };
   var handleConfirm = function handleConfirm() {
-    onChange(innerValue);
+    onChange(innerValue, inputSearchValue);
     onCloseFilterPanel();
   };
   var handleReset = function handleReset() {
     setInnerValue(undefined);
-    onChange(undefined);
+    setInputSearchValue(undefined);
+    onChange(undefined, undefined);
   };
-  useUpdateEffect(function () {
-    // console.log('value :>> ', value);
-    setInnerValue(value);
+  useEffect(function () {
+    console.log('value :>> ', value);
+    var _ref3 = value || {},
+      filterValue = _ref3.filterValue,
+      optionsParam = _ref3.optionsParam;
+    setInnerValue(filterValue);
+    setInputSearchValue(optionsParam);
+    if (!isFrontSearch) {
+      onSearch(optionsParam);
+    }
   }, [value]);
   var handleInputChange = function handleInputChange(e) {
     var value = e.target.value;
+    setInputSearchValue(value);
     if (!isFrontSearch) {
       onSearch(value);
-    } else {
-      setFrontendSearchValue(value);
     }
   };
+  // 首次加载，已选item滚动到可视区
+  useEffect(function () {
+    if (!value || !value.filterValue || !options || Array.isArray(options) && options.length === 0 || !isFirstScroll.current) return;
+    // 滚动到选中的项目
+    function scrollToSelectedItem() {
+      var selectedElement = document.querySelector(".item[data-id=".concat(value.filterValue, "]"));
+      if (!selectedElement) return;
+      isFirstScroll.current = false;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    }
+    var timer = setTimeout(function () {
+      return scrollToSelectedItem();
+    }, 100);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [options, value]);
 
   // 最终的可选值
   var finalOptions = useMemo(function () {
     if (!isFrontSearch) {
       return options;
     }
-    var input = (frontendSearchValue !== null && frontendSearchValue !== void 0 ? frontendSearchValue : '').toUpperCase().trim();
+    var input = (inputSearchValue !== null && inputSearchValue !== void 0 ? inputSearchValue : '').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]);
+  }, [options, inputSearchValue]);
   return /*#__PURE__*/_jsxs("div", {
     className: "tableMax-filter-singleSelect",
     children: [/*#__PURE__*/_jsx("div", {
       className: "tableMax-filter-singleSelect-header",
       children: /*#__PURE__*/_jsx(Input, {
+        defaultValue: inputSearchValue,
+        value: inputSearchValue,
         placeholder: t('global.placeholder.input'),
-        onChange: handleInputChange
+        onChange: handleInputChange,
+        allowClear: true
       })
     }), /*#__PURE__*/_jsx("div", {
       className: "tableMax-filter-singleSelect-body",
@@ -87,6 +126,7 @@ var SingleSelect = function SingleSelect(_ref) {
       }) : finalOptions.map(function (option) {
         var _option$label2;
         return /*#__PURE__*/_jsx("div", {
+          "data-id": option.value,
           className: "item ".concat(innerValue === option.value ? 'selected' : ''),
           onClick: function onClick() {
             return handleClick(option.value);

package/package.json

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