@rainbow-oh/yee-c 0.8.12 → 0.8.14

package/package.json

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

package/src/Pagination/style/index.less

@@ -30,6 +30,10 @@
     margin-right: 0;
   }
 
+  &-total {
+    white-space: nowrap;
+  }
+
   &-prev,
   &-next {
     // border: var(--yee-pagination-item-border-width) solid var(--yee-pagination-item-border-color);

package/src/Spin/demo/types.tsx

@@ -5,17 +5,17 @@ export default () => {
   return (
     <Space direction="vertical">
       <Space>
-        <Spin variant="dot" />
+        <Spin variant="dot" color="error"/>
         <span>dot</span>
       </Space>
 
       <Space>
-        <Spin variant="ring" />
+        <Spin variant="ring" color="error"/>
         <span>ring</span>
       </Space>
 
       <Space>
-        <Spin variant="spokes" />
+        <Spin variant="spokes" color="error"/>
         <span>spokes</span>
       </Space>
     </Space>

package/src/Spin/index.en-US.md

@@ -52,12 +52,6 @@ Used for page and block loading status.
 
 | Type | Description |
 | --- | --- |
-| blank | Blank type |
-| balls | Balls type |
-| bars | Bars type |
-| bubbles | Bubbles type |
-| cubes | Cubes type |
-| cylon | Cylon type |
-| spin | Spin type |
-| spinningBubbles | Spinning bubbles type |
+| dot | dot circle |
+| ring | rotating circle |
 | spokes | Spokes type |

package/src/Spin/index.zh-CN.md

@@ -52,12 +52,6 @@ toc: 'content'
 
 | 类型 | 描述 |
 | --- | --- |
-| blank | 空白类型 |
-| balls | 小球类型 |
-| bars | 条形类型 |
-| bubbles | 气泡类型 |
-| cubes | 方块类型 |
-| cylon | 赛隆类型 |
-| spin | 旋转类型 |
-| spinningBubbles | 旋转气泡类型 |
+| dot | 原点旋转 |
+| ring | 圆环转圈 |
 | spokes | 辐条类型 |

package/src/Spin/indicator.tsx

@@ -60,6 +60,7 @@ const SpokesSpinner: React.FC<SpinProps> = (props) => {
     styles,
     width,
     height,
+    color
   } = props;
 
   const containerSize = sizeMap[size];
@@ -86,6 +87,7 @@ const SpokesSpinner: React.FC<SpinProps> = (props) => {
             style={{
               transform: `rotate(${i * (360 / count)}deg)`,
               animationDelay: `${(i * 1) / count}s`,
+              backgroundColor: color,
             }}
           />
         ))}

package/src/Spin/style/index.less

@@ -43,10 +43,7 @@
         display: block;
         border-style: solid;
         border-color: var(--yee-color-bg-layout, rgba(0, 0, 0, 8%));
-        border-top-color: var(
-          --yee-spin-default-color,
-          var(--yee-color-primary, #1677ff)
-        );
+        border-top-color: var(--m-indicator-dot-bg-color);
         border-radius: 50%;
         animation: yee-spin-ring-rotate 0.8s linear infinite;
       }
@@ -67,10 +64,7 @@
         height: 40%;
         margin-left: -1px;
         transform-origin: center bottom;
-        background-color: var(
-          --yee-spin-default-color,
-          var(--yee-color-primary, #1677ff)
-        );
+        background-color: var(--m-indicator-dot-bg-color);
         border-radius: 1px;
         animation: yee-spin-spokes-fade 1.2s linear infinite;
       }

package/src/Table/col-group.tsx

@@ -39,4 +39,4 @@ const ColGroup = React.memo(({ columns }: TableColGroupProps) => {
 
 ColGroup.displayName = 'ColGroup';
 
-export default React.memo(ColGroup);
+export default ColGroup;

package/src/Table/demo/sorter-callback.tsx

@@ -23,8 +23,9 @@ export default () => {
       title: 'Score',
       dataIndex: 'score',
       key: 'score',
-      sorter: true,
-      defaultSortOrder: 'descend' as const,
+      sorter: {
+        defaultSortOrder: 'descend' as const,
+      },
     },
     {
       title: 'Address',

package/src/Table/demo/sorter.tsx

@@ -13,8 +13,9 @@ export default () => {
       title: 'Age',
       dataIndex: 'age',
       key: 'age',
-      sorter: true,
-      defaultSortOrder: 'descend' as const,
+      sorter: {
+        defaultSortOrder: 'descend' as const,
+      },
     },
     {
       title: 'Address',

package/src/Table/hooks/useExpand.ts

@@ -1,10 +1,10 @@
 import useMergedState from '../../hooks/useMergedState';
-import { ExpandableType } from '../interface';
+import { ExpandableType, SelectionKeyType } from '../interface';
 
 export default function useExpand(
   expandable: ExpandableType | undefined,
-  allKeys: string[],
-  getRowKey: (record: Record<string, any>) => string,
+  allKeys: SelectionKeyType[],
+  getRowKey: (record: Record<string, any>) => SelectionKeyType,
 ) {
   const {
     expandedRowKeys, // keys

package/src/Table/hooks/useFilter.ts

@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { ColumnProps, FilterValue } from '../interface';
 
-type FilterValue = string | number;
 type FilterInput = FilterValue | FilterValue[];
 
 type FilterOptions = {
@@ -21,42 +21,65 @@ const normalizeValue = (value: unknown) =>
 
 export default function useFilter({
   data,
+  columns,
 }: {
   data: Array<Record<string, unknown>>;
+  columns: ColumnProps[];
 }) {
   const [filterRecords, setFilterRecords] = useState<Array<FilterRecord>>([]);
+  const columnMap = useMemo(
+    () =>
+      new Map(
+        columns.flatMap((column) =>
+          column.dataIndex ? [[column.dataIndex, column] as const] : [],
+        ),
+      ),
+    [columns],
+  );
+
+  useEffect(() => {
+    setFilterRecords((current) => {
+      const next = current.filter(({ dataIndex }) => columnMap.has(dataIndex));
+      return next.length === current.length ? current : next;
+    });
+  }, [columnMap]);
+
   const onFilter = ({ value, dataIndex }: FilterOptions) => {
-    let newFilterMap = [...filterRecords];
-    if (isEmptyFilterValue(value)) {
-      newFilterMap = newFilterMap.filter(
-        (item) => item.dataIndex !== dataIndex,
-      );
-    } else {
-      let exited = false;
-      newFilterMap = newFilterMap.map((item) => {
-        if (item.dataIndex === dataIndex) {
-          exited = true;
-          return { ...item, value };
-        }
-        return item;
-      });
-      if (!exited) {
-        newFilterMap.push({ dataIndex, value });
+    setFilterRecords((current) => {
+      if (isEmptyFilterValue(value)) {
+        return current.filter((item) => item.dataIndex !== dataIndex);
       }
-    }
-    setFilterRecords(newFilterMap);
+
+      const index = current.findIndex((item) => item.dataIndex === dataIndex);
+      if (index === -1) {
+        return [...current, { dataIndex, value }];
+      }
+
+      return current.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, value } : item,
+      );
+    });
   };
 
   const filtered = useMemo(() => {
     const handled = filterRecords.filter(
       ({ dataIndex, value }) =>
-        Boolean(dataIndex) && !isEmptyFilterValue(value),
+        Boolean(dataIndex) &&
+        columnMap.has(dataIndex) &&
+        !isEmptyFilterValue(value),
     );
     if (!handled.length) {
       return data;
     }
     return data.filter((item) => {
-      return handled.some(({ dataIndex, value }) => {
+      return handled.every(({ dataIndex, value }) => {
+        const customFilter = columnMap.get(dataIndex)?.filter?.onFilter;
+        if (customFilter) {
+          return Array.isArray(value)
+            ? value.some((filterValue) => customFilter(filterValue, item))
+            : customFilter(value, item);
+        }
+
         const targetValue = normalizeValue(item[dataIndex]);
 
         if (Array.isArray(value)) {
@@ -68,10 +91,11 @@ export default function useFilter({
         return targetValue.includes(normalizeValue(value));
       });
     });
-  }, [data, filterRecords]);
+  }, [columnMap, data, filterRecords]);
 
   return {
     data: filtered,
+    filterRecords,
     onFilter,
   };
 }

package/src/Table/hooks/usePagination.ts

@@ -81,16 +81,6 @@ export default function usePagination({
     });
   };
 
-  if (pagination === false) {
-    return {
-      pageData: data,
-      current: 1,
-      pageSize: data.length,
-      pagination: false,
-    };
-  }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const pageData = useMemo(() => {
     const total = data.length;
     if (total <= mergedPageSize) return data;
@@ -103,6 +93,15 @@ export default function usePagination({
     return data.slice(start, start + mergedPageSize);
   }, [data, meregdCurrent, mergedPageSize]);
 
+  if (pagination === false) {
+    return {
+      pageData: data,
+      current: 1,
+      pageSize: data.length,
+      pagination: false,
+    };
+  }
+
   return {
     pageData,
     current: meregdCurrent,

package/src/Table/hooks/useSelection.ts

@@ -11,7 +11,7 @@ export default function useSelection({
 }: {
   pageData: Array<Record<string, unknown>>;
   dataSource: Array<Record<string, unknown>>;
-  getRowKey: (record: Record<string, unknown>) => string;
+  getRowKey: (record: Record<string, unknown>) => SelectionKeyType;
   allKeys: Array<SelectionKeyType>;
   rowSelection?: RowSelectionType;
 }) {
@@ -43,29 +43,25 @@ export default function useSelection({
     onChange?.(rowKeys as any, rowRecords);
   };
 
-  const getDisabledKeys = () => {
+  const getDisabledKeys = (): SelectionKeyType[] => {
+    if (disabled === true) {
+      return pageData.map((record) => getRowKey(record));
+    }
     if (Array.isArray(disabled)) {
-      return disabled;
+      return pageData
+        .filter((_, index) => disabled[index])
+        .map((record) => getRowKey(record));
     }
     if (typeof disabled === 'function') {
-      return (
-        Array.isArray(pageData) &&
-        pageData
-          .filter((record, index) => disabled(record, index))
-          .map((record) => getRowKey(record))
-      );
+      return pageData
+        .filter((record, index) => disabled(record, index))
+        .map((record) => getRowKey(record));
     }
     return [];
   };
 
-  const getPageDataRowKeys = () => {
-    return (
-      Array.isArray(pageData) && pageData.map((record) => getRowKey(record))
-    );
-  };
-
-  const disabledKeys = getDisabledKeys() as Array<string>;
-  const pageDataRowKeys = getPageDataRowKeys() as Array<string>;
+  const disabledKeys = getDisabledKeys();
+  const pageDataRowKeys = pageData.map((record) => getRowKey(record));
 
   const isCheckedAll = () => {
     const filtered = pageDataRowKeys.filter(
@@ -109,7 +105,7 @@ export default function useSelection({
     setMergedSelectedRowKeys(rowKeys);
 
     onChange?.(rowKeys, rowRecords);
-    onSelectAll?.(rowKeys as any, rowRecords as any, checked);
+    onSelectAll?.(checked, rowKeys, rowRecords);
   };
 
   const onRadioCheck = (checked: boolean, key: number | string) => {
@@ -118,8 +114,10 @@ export default function useSelection({
     onChange?.([key as any], record as any);
   };
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const key = event.target.value;
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    key: SelectionKeyType,
+  ) => {
     const checked = event.target.checked;
     if (type === 'checkbox') {
       onCheck(checked, key);