@rainbow-oh/yee-c 0.8.10 → 0.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Table/hooks/useFilter.ts

@@ -1,15 +1,24 @@
 import { useMemo, useState } from 'react';
 
+type FilterValue = string | number;
+type FilterInput = FilterValue | FilterValue[];
+
 type FilterOptions = {
   dataIndex: string;
-  value: string;
+  value: FilterInput;
 };
 
 type FilterRecord = {
-  value: string;
+  value: FilterInput;
   dataIndex: string;
 };
 
+const isEmptyFilterValue = (value: FilterInput) =>
+  value === '' || (Array.isArray(value) && value.length === 0);
+
+const normalizeValue = (value: unknown) =>
+  value === null || value === undefined ? '' : String(value).toLowerCase();
+
 export default function useFilter({
   data,
 }: {
@@ -18,7 +27,7 @@ export default function useFilter({
   const [filterRecords, setFilterRecords] = useState<Array<FilterRecord>>([]);
   const onFilter = ({ value, dataIndex }: FilterOptions) => {
     let newFilterMap = [...filterRecords];
-    if (!value || (Array.isArray(value) && !value.length)) {
+    if (isEmptyFilterValue(value)) {
       newFilterMap = newFilterMap.filter(
         (item) => item.dataIndex !== dataIndex,
       );
@@ -40,23 +49,23 @@ export default function useFilter({
 
   const filtered = useMemo(() => {
     const handled = filterRecords.filter(
-      (item) => item.dataIndex && item.value,
+      ({ dataIndex, value }) =>
+        Boolean(dataIndex) && !isEmptyFilterValue(value),
     );
     if (!handled.length) {
       return data;
     }
     return data.filter((item) => {
-      return handled.find((o) => {
-        if (Array.isArray(o.value)) {
-          return o.value.some((v) => {
-            const t = item[o.dataIndex] || '';
-            return (t as string).toLowerCase() === v.toLowerCase();
-          });
-        } else {
-          const v = o.value.toLowerCase();
-          const t = item[o.dataIndex] || '';
-          return (t as string).toLowerCase().includes(v);
+      return handled.some(({ dataIndex, value }) => {
+        const targetValue = normalizeValue(item[dataIndex]);
+
+        if (Array.isArray(value)) {
+          return value.some(
+            (filterValue) => targetValue === normalizeValue(filterValue),
+          );
         }
+
+        return targetValue.includes(normalizeValue(value));
       });
     });
   }, [data, filterRecords]);

package/src/Table/style/index.less

@@ -72,14 +72,13 @@
   }
 
   &-filter {
+    max-height: var(--yee-table-filter-popup-height);
+    background-color: var(--yee-table-filter-list-bg-color);
+
     &-trigger {
       display: inline-flex;
       cursor: pointer;
     }
-
-    &-popup {
-      background-color: var(--yee-table-filter-list-bg-color);
-    }
   }
 
   &-content {

package/src/Table/theader/filter.tsx

@@ -189,7 +189,7 @@ const HeaderFilter = React.memo((props: any) => {
     <Popover
       trigger="click"
       placement="bottomRight"
-      popupClassName={clsx(`${prefixCls}-filter`)}
+      className={`${prefixCls}-filter`}
       content={popup}
       arrow
       open={open}

package/src/style/size.css

@@ -403,6 +403,7 @@
   --yee-popover-header-line-height: 24px;
   --yee-popover-arrow-width: var(--yee-popup-arrow-width);
   --yee-popover-arrow-height: var(--yee-popup-arrow-height);
+  --yee-table-filter-popup-height: 400px;
 
   /* --Progress-- */
   --yee-progress-text-width: 48px;

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.10";
+export const version = "0.8.12";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;