Merge pull request #165 from alitajs/feat-filterItems

feat: filterItems支持value控制下拉回显
alitajs · May 22, 2024 · 650653f · 650653f
2 parents e6e666e + 5d99150
commit 650653f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 25 deletions.
diff --git a/packages/antd-mobile-plus/src/FilterItems/PropsType.ts b/packages/antd-mobile-plus/src/FilterItems/PropsType.ts
@@ -55,10 +55,21 @@ export interface FilterItemsProps {
    */
   aliasObj: AliasProps;
   /**
-  * @description 初始的文字,一般在该值不在数据当中使用
-  * @default 数组中的第一个
-  */
-   defaultText?: string;
+   * @description 初始的文字,一般在该值不在数据当中使用
+   * @default 数组中的第一个
+   */
+  defaultText?: string;
+
+  /**
+   * 值
+   */
+  value?: string;
+
+  /**
+   * @description 筛选的数据
+   * @default []
+   */
+  data: any[];
 }
 
 export interface FilterProps {
@@ -81,9 +92,13 @@ export interface FilterProps {
    */
   onItemChange: (data: any) => void;
   /**
-  * @description 页面区域滚动节点，一般用于`type`为relative时使用
-  * @default document.documentElement
-  */
+   * @description 页面区域滚动节点，一般用于`type`为relative时使用
+   * @default document.documentElement
+   */
   scrollElement?: HTMLElement;
 
+  /**
+   * 每一项的值
+   */
+  value?: Record<string, string>;
 }
diff --git a/packages/antd-mobile-plus/src/FilterItems/component/FilterItem/index.tsx b/packages/antd-mobile-plus/src/FilterItems/component/FilterItem/index.tsx
@@ -1,20 +1,22 @@
-import * as React from "react";
-import classnames from "classnames";
-import { FilterItemsProps } from "../../PropsType";
-import "./index.less";
+import * as React from 'react';
+import classnames from 'classnames';
+import { FilterItemsProps } from '../../PropsType';
+import './index.less';
 
-const prefixCls = "alita-filter-item";
+const prefixCls = 'alita-filter-item';
 
 export const FilterItem: React.FC<FilterItemsProps> = (props) => {
   const {
-    openFlag = "up",
+    openFlag = 'up',
     onClick,
     selectObj = {},
-    aliasObj = { label: "label", id: "id" },
+    aliasObj = { label: 'label', id: 'id' },
     activeFilterId,
     filterId,
     initObj = {},
     defaultText,
+    value,
+    data = [],
   } = props;
   const [status, updateStatus] = React.useState(openFlag);
   const [currentObj, updateCurrentObj] = React.useState(initObj);
@@ -23,24 +25,36 @@ export const FilterItem: React.FC<FilterItemsProps> = (props) => {
   React.useEffect(() => {
     updateStatus(openFlag);
     if (activeFilterId === filterId) {
-      if (JSON.stringify(selectObj) !== "{}") {
-        updateText("");
+      if (JSON.stringify(selectObj) !== '{}') {
+        updateText('');
         updateCurrentObj(selectObj);
       }
     }
   }, [openFlag]);
 
+  React.useEffect(() => {
+    const chooseItem = data.find((row: any) => {
+      if (aliasObj.id) {
+        return row[aliasObj.id] === value;
+      }
+      return false;
+    });
+    if (chooseItem) {
+      updateCurrentObj(chooseItem);
+    }
+  }, [value]);
+
   return (
     <div className={`${prefixCls}`}>
       <div
         className={`${prefixCls}-content`}
         onClick={() => {
-          if (status === "up") {
-            updateStatus("down");
-            onClick("down", currentObj);
+          if (status === 'up') {
+            updateStatus('down');
+            onClick('down', currentObj);
           } else {
-            updateStatus("up");
-            onClick("up", currentObj);
+            updateStatus('up');
+            onClick('up', currentObj);
           }
         }}
       >
@@ -49,8 +63,8 @@ export const FilterItem: React.FC<FilterItemsProps> = (props) => {
         </div>
         <i
           className={classnames({
-            [`${prefixCls}-icon-down`]: status === "down",
-            [`${prefixCls}-icon-up`]: status === "up",
+            [`${prefixCls}-icon-down`]: status === 'down',
+            [`${prefixCls}-icon-up`]: status === 'up',
             [`${prefixCls}-noraml-icon`]: true,
           })}
         ></i>
@@ -59,5 +73,5 @@ export const FilterItem: React.FC<FilterItemsProps> = (props) => {
   );
 };
 
-FilterItem.displayName = "FilterItem";
+FilterItem.displayName = 'FilterItem';
 export default FilterItem;
diff --git a/packages/antd-mobile-plus/src/FilterItems/index.tsx b/packages/antd-mobile-plus/src/FilterItems/index.tsx
@@ -15,6 +15,7 @@ export const FilterItems: FC<FilterProps> = (props) => {
     alias = { label: "label", id: "id" },
     onItemChange,
     scrollElement,
+    value = {},
   } = props;
   const [activeIndex, updateActiveIndex] = useState(-1);
   const [drawOpen, updateDrawOpen] = useState("up");
@@ -46,7 +47,9 @@ export const FilterItems: FC<FilterProps> = (props) => {
               filterId={filterId}
               aliasObj={aliasObj}
               selectObj={activeObj}
-              initObj={item.data[defaultSelect]}
+              value={value[filterId]}
+              data={item.data}
+              initObj={item.data?.[defaultSelect]}
               openFlag={index === activeIndex ? "down" : "up"}
               onClick={(options: string, selectObj) => {
                 log(options);