@rainbow-oh/yee-c 0.12.1 → 0.13.0

package/package.json

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

package/src/Form/style/index.less

@@ -99,6 +99,7 @@
     &&-error {
       --yee-input-border-color: var(--yee-color-error);
       --yee-input-hover-border-color: var(--yee-color-error-hover);
+      --yee-input-focus-border-color: var(--yee-color-error-hover);
       --yee-input-focus-bs-color: var(--yee-color-error-border);
       --yee-checkbox-border-color: var(--yee-color-error);
     }
@@ -106,6 +107,7 @@
     &&-warning {
       --yee-input-border-color: var(--yee-color-warning);
       --yee-input-hover-border-color: var(--yee-color-warning-hover);
+      --yee-input-focus-border-color: var(--yee-color-warning-hover);
       --yee-input-focus-bs-color: var(--yee-color-warning-border);
       --yee-checkbox-border-color: var(--yee-color-warning);
     }
@@ -113,6 +115,7 @@
     &&-success {
       --yee-input-border-color: var(--yee-color-success);
       --yee-input-hover-border-color: var(--yee-color-success-hover);
+      --yee-input-focus-border-color: var(--yee-color-success-hover);
       --yee-input-focus-bs-color: var(--yee-color-success-border);
       --yee-checkbox-border-color: var(--yee-color-success);
     }
@@ -120,6 +123,7 @@
     &&-info {
       --yee-input-border-color: var(--yee-color-info);
       --yee-input-hover-border-color: var(--yee-color-info-hover);
+      --yee-input-focus-border-color: var(--yee-color-info-hover);
       --yee-input-focus-bs-color: var(--yee-color-info-border);
       --yee-checkbox-border-color: var(--yee-color-info);
     }

package/src/Input/style/index.less

@@ -20,7 +20,7 @@
   }
 
   &:not(@{pls}-disabled):not(@{pls}-borderless):focus-within {
-    border-color: var(--yee-input-hover-border-color);
+    border-color: var(--yee-input-focus-border-color);
     box-shadow: 0 0 0 2px var(--yee-input-focus-bs-color);
   }
 

package/src/InputNumber/style/index.less

@@ -20,7 +20,7 @@
 
   &:not(@{pls}-disabled):not(@{pls}-borderless)&-focused {
     box-shadow: 0 0 0 2px var(--yee-input-focus-bs-color);
-    border-color: var(--yee-input-hover-border-color);
+    border-color: var(--yee-input-focus-border-color);
   }
 
   &-prefix {

package/src/Search/style/index.less

@@ -21,7 +21,7 @@
   }
 
   &:focus-within {
-    border-color: var(--yee-input-content-focus-border-color);
+    border-color: var(--yee-input-focus-border-color);
     box-shadow: var(--yee-search-focus-box-shadow);
   }
 

package/src/Selector/style/index.less

@@ -22,7 +22,7 @@
   }
 
   &:not(@{pls}-disabled):focus-within {
-    border-color: var(--yee-input-hover-border-color);
+    border-color: var(--yee-input-focus-border-color);
     box-shadow: 0 0 0 2px var(--yee-input-focus-bs-color);
   }
 

package/src/Table/demo/controlled-filter.tsx

@@ -0,0 +1,107 @@
+import { Button, message, Space, Table } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+import type { ColumnProps } from '@rainbow-oh/yee-c';
+
+interface RecordType {
+  key: string;
+  name: string;
+  age: number;
+  gender: string;
+}
+
+const allData: RecordType[] = [
+  { key: '1', name: 'John Brown', age: 32, gender: 'male' },
+  { key: '2', name: 'Jim Green', age: 42, gender: 'male' },
+  { key: '3', name: 'Joe Black', age: 32, gender: 'male' },
+  { key: '4', name: 'Jon Snow', age: 42, gender: 'female' },
+  { key: '5', name: 'Arya Stark', age: 16, gender: 'female' },
+];
+
+export default () => {
+  const { messageApi, messageHolder } = message.useMessage();
+
+  // Server-side search: keep the keyword controlled, refetch in onChange.
+  const [nameKeyword, setNameKeyword] = useState<string>('');
+
+  // Controlled local filter: the tree selection lives in the parent state.
+  const [genders, setGenders] = useState<string[]>([]);
+
+  const columns: ColumnProps[] = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      filter: {
+        searchable: true,
+        // No onFilter: no local matching, the search hits the "server".
+        filteredValue: nameKeyword,
+      },
+    },
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: 'Gender',
+      dataIndex: 'gender',
+      key: 'gender',
+      filter: {
+        filterMode: 'tree',
+        items: [
+          { label: 'Male', key: 'male' },
+          { label: 'Female', key: 'female' },
+        ],
+        filteredValue: genders,
+        onFilter: (value, record) => value === record.gender,
+      },
+    },
+  ];
+
+  const handleChange: React.ComponentProps<typeof Table>['onChange'] = (
+    info,
+  ) => {
+    if (info.action !== 'filter') return;
+
+    const filters = (info.filters ?? {}) as {
+      name?: string;
+      gender?: string[];
+    };
+
+    // The committing column's key is always present in the payload — with its
+    // empty value on clear — so both setting and clearing are mirrored here.
+    const name = filters.name ?? '';
+    if (name !== nameKeyword) {
+      // Pretend to refetch with ?name=<keyword>.
+      messageApi.info(`Fetch: /api/users?name=${name}`);
+      setNameKeyword(name);
+    }
+
+    setGenders(filters.gender ?? []);
+  };
+
+  const data = allData.filter((item) => {
+    const matchName = nameKeyword
+      ? item.name.toLowerCase().includes(nameKeyword.toLowerCase())
+      : true;
+    const matchGender = genders.length ? genders.includes(item.gender) : true;
+    return matchName && matchGender;
+  });
+
+  return (
+    <>
+      {messageHolder}
+      <Space block style={{ marginBottom: 16 }}>
+        <Button onClick={() => setNameKeyword('')}>Reset name search</Button>
+        <Button onClick={() => setGenders([])}>Reset gender filter</Button>
+      </Space>
+      <Table
+        columns={columns}
+        dataSource={data}
+        onChange={handleChange}
+        pagination={false}
+      />
+    </>
+  );
+};

package/src/Table/hooks/useFilter.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ColumnProps, FilterValue } from '../interface';
 
 type FilterInput = FilterValue | FilterValue[];
@@ -16,9 +16,81 @@ type FilterRecord = {
 const isEmptyFilterValue = (value: FilterInput) =>
   value === '' || (Array.isArray(value) && value.length === 0);
 
+export const isControlledFilter = (column?: ColumnProps) =>
+  column?.filter?.filteredValue !== undefined;
+
 const normalizeValue = (value: unknown) =>
   value === null || value === undefined ? '' : String(value).toLowerCase();
 
+// Controlled columns (`filteredValue` defined) always take their value from
+// the prop; internal records for them are ignored entirely — a commit on a
+// controlled column must not leak into the merged state while the parent has
+// not (yet) applied the new prop value.
+const mergeRecords = (
+  internalRecords: Array<FilterRecord>,
+  columnMap: Map<string, ColumnProps>,
+): Array<FilterRecord> => {
+  const controlled: Array<FilterRecord> = [];
+  columnMap.forEach((column, dataIndex) => {
+    if (!isControlledFilter(column)) return;
+    const value = column.filter?.filteredValue as FilterInput;
+    if (!isEmptyFilterValue(value)) {
+      controlled.push({ dataIndex, value });
+    }
+  });
+  const merged = internalRecords.filter(
+    (record) => !isControlledFilter(columnMap.get(record.dataIndex)),
+  );
+  if (!controlled.length && merged.length === internalRecords.length) {
+    return internalRecords;
+  }
+  return [...merged, ...controlled];
+};
+
+const applyFilters = (
+  data: Array<Record<string, unknown>>,
+  records: Array<FilterRecord>,
+  columnMap: Map<string, ColumnProps>,
+) => {
+  const handled = records.filter(
+    ({ dataIndex, value }) =>
+      Boolean(dataIndex) &&
+      columnMap.has(dataIndex) &&
+      !isEmptyFilterValue(value),
+  );
+  if (!handled.length) {
+    return data;
+  }
+  return data.filter((item) => {
+    return handled.every(({ dataIndex, value }) => {
+      const column = columnMap.get(dataIndex);
+
+      // Controlled column without `onFilter` is server-side: the data the
+      // consumer renders is already filtered upstream, pass it through.
+      if (isControlledFilter(column) && !column?.filter?.onFilter) {
+        return true;
+      }
+
+      const customFilter = column?.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)) {
+        return value.some(
+          (filterValue) => targetValue === normalizeValue(filterValue),
+        );
+      }
+
+      return targetValue.includes(normalizeValue(value));
+    });
+  });
+};
+
 export default function useFilter({
   data,
   columns,
@@ -26,7 +98,9 @@ export default function useFilter({
   data: Array<Record<string, unknown>>;
   columns: ColumnProps[];
 }) {
-  const [filterRecords, setFilterRecords] = useState<Array<FilterRecord>>([]);
+  const [internalRecords, setInternalRecords] = useState<Array<FilterRecord>>(
+    [],
+  );
   const columnMap = useMemo(
     () =>
       new Map(
@@ -38,64 +112,48 @@ export default function useFilter({
   );
 
   useEffect(() => {
-    setFilterRecords((current) => {
+    setInternalRecords((current) => {
       const next = current.filter(({ dataIndex }) => columnMap.has(dataIndex));
       return next.length === current.length ? current : next;
     });
   }, [columnMap]);
 
-  const onFilter = ({ value, dataIndex }: FilterOptions) => {
-    setFilterRecords((current) => {
-      if (isEmptyFilterValue(value)) {
-        return current.filter((item) => item.dataIndex !== dataIndex);
-      }
+  const activeRecords = useMemo(
+    () => mergeRecords(internalRecords, columnMap),
+    [internalRecords, columnMap],
+  );
 
-      const index = current.findIndex((item) => item.dataIndex === dataIndex);
-      if (index === -1) {
-        return [...current, { dataIndex, value }];
-      }
+  const filtered = useMemo(
+    () => applyFilters(data, activeRecords, columnMap),
+    [columnMap, data, activeRecords],
+  );
 
-      return current.map((item, itemIndex) =>
-        itemIndex === index ? { ...item, value } : item,
-      );
-    });
-  };
+  // Mirrors useSorter.onSort: computes the next state synchronously and
+  // returns it, so callers can emit onChange with the result in the same tick.
+  const onFilter = useCallback(
+    ({ value, dataIndex }: FilterOptions) => {
+      const nextInternal = isEmptyFilterValue(value)
+        ? internalRecords.filter((item) => item.dataIndex !== dataIndex)
+        : internalRecords.some((item) => item.dataIndex === dataIndex)
+          ? internalRecords.map((item) =>
+              item.dataIndex === dataIndex ? { ...item, value } : item,
+            )
+          : [...internalRecords, { dataIndex, value }];
 
-  const filtered = useMemo(() => {
-    const handled = filterRecords.filter(
-      ({ dataIndex, value }) =>
-        Boolean(dataIndex) &&
-        columnMap.has(dataIndex) &&
-        !isEmptyFilterValue(value),
-    );
-    if (!handled.length) {
-      return data;
-    }
-    return data.filter((item) => {
-      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)) {
-          return value.some(
-            (filterValue) => targetValue === normalizeValue(filterValue),
-          );
-        }
-
-        return targetValue.includes(normalizeValue(value));
-      });
-    });
-  }, [columnMap, data, filterRecords]);
+      setInternalRecords(nextInternal);
+
+      const nextActive = mergeRecords(nextInternal, columnMap);
+      return {
+        data: applyFilters(data, nextActive, columnMap),
+        filterRecords: nextActive,
+      };
+    },
+    [internalRecords, columnMap, data],
+  );
 
   return {
     data: filtered,
-    filterRecords,
+    filterRecords: activeRecords,
     onFilter,
   };
 }

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

@@ -22,6 +22,7 @@ A table displays rows of data.
 <code src="./demo/expand.tsx" title="Expandable" description="Expandable rows"></code>
 <code src="./demo/pagination.tsx" title="Pagination" description="Table with pagination"></code>
 <code src="./demo/column-filter.tsx" title="column filter" description="Table column filter"></code>
+<code src="./demo/controlled-filter.tsx" title="controlled filter" description="Controlled filtering with filteredValue: server-side search and programmatic reset"></code>
 <code src="./demo/grouping.tsx" title="Grouping" description="Multi-level header"></code>
 <code src="./demo/fixed.tsx" title="Fixed Columns" description="Fix columns on both sides and scroll horizontally to see the effect"></code>
 <code src="./demo/resizable.tsx" title="Resizable Columns" description="Drag the right edge of a header cell to resize it; arrow keys work too"></code>
@@ -77,7 +78,7 @@ A table displays rows of data.
 | styles | `Partial<Record<ColumnSemanticType, React.CSSProperties>>` | Column semantic styles | - |
 | align | `'left' \| 'right' \| 'center'` | Alignment | - |
 | fixed | `'left' \| 'right' \| true` | Fixed column | - |
-| filter | `object` | Filter configuration | - |
+| filter | `object` | Filter configuration, see [ColumnFilter](#columnfilter) below | - |
 | sorter | `boolean \| object` | Sorter configuration | - |
 | dataIndex | `string` | Data index | - |
 | key | `string \| number` | Unique key | - |
@@ -92,6 +93,26 @@ A table displays rows of data.
 | onHeaderCell | `(column: ColumnProps) => object` | Header cell props | - |
 | render | `(record: object, rowIndex: number) => React.ReactNode` | Custom render | - |
 
+### ColumnFilter
+
+Filter configuration of `ColumnProps.filter`.
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| filterMode | `'tree' \| 'menu'` | Filter menu mode (effective when `items` is set) | `menu` |
+| items | `Array<Record<string, any>>` | Filter menu items; renders a checkable tree panel when set | - |
+| searchable | `boolean` | Whether searchable; renders a search input when `items` is unset | `true` |
+| filterOnClose | `boolean` | Whether to apply the filter when the panel closes | `true` |
+| icon | `(filtered: boolean) => React.ReactNode` | Custom filter icon | - |
+| render | `() => React.ReactNode` | Custom filter panel content | - |
+| onFilter | `(value: FilterValue, record: object) => boolean` | Local filter function; falls back to default string-includes matching when unset | - |
+| filtered | `boolean` | Force the filter icon highlight (takes precedence over `filteredValue`) | - |
+| filteredValue | `FilterValue \| FilterValue[]` | (Controlled) Filter value. When set, the column's filter state is fully controlled: panel echo, icon highlight and the `filters` in `onChange` all derive from it; reset with `''` / `[]` | - |
+
+> **Controlled + server-side filtering**: with `filteredValue` set and no `onFilter`, no local matching happens at all — whether the data is filtered is decided by refetching in your `onChange` handler (see the controlled filter demo below).
+>
+> When `action === 'filter'`, the key of the column that was just committed is always present in `filters` (with `''` / `[]` on clear), so parents can mirror filter state from the payload alone.
+
 ### RowSelectionType
 
 | Property | Type | Description | Default |

package/src/Table/index.ts

@@ -5,6 +5,7 @@ import Head from './theader';
 
 export type {
   ColumnProps,
+  FilterValue,
   HeaderCell,
   PaginationType,
   RowSelectionType,

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

@@ -29,6 +29,7 @@ toc: 'content'
 <code src="./demo/summary.tsx" title="统计" description="表格的统计行"></code>
 <code src="./demo/filter.tsx" title="筛选" description="表格的筛选功能"></code>
 <code src="./demo/column-filter.tsx" title="列筛选" description="表格的列筛选功能"></code>
+<code src="./demo/controlled-filter.tsx" title="受控筛选" description="filteredValue 受控筛选，支持服务端搜索与程序化重置"></code>
 <code src="./demo/components-override.tsx" title="自定义表格元素" description="可被外部（如 dnd-kit）接管的 tbody / 行渲染"></code>
 
 ## API
@@ -82,7 +83,7 @@ toc: 'content'
 | styles       | `Partial<Record<ColumnSemanticType, React.CSSProperties>>`           | 列结构化样式                   | -      |
 | align        | `'left' \| 'right' \| 'center'`                                      | 对齐方式                       | -      |
 | fixed        | `'left' \| 'right' \| true`                                          | 固定列                         | -      |
-| filter       | `object`                                                             | 过滤配置                       | -      |
+| filter       | `object`                                                             | 过滤配置，见下方 [ColumnFilter](#columnfilter) | -      |
 | sorter       | `boolean \| object`                                                  | 排序配置                       | -      |
 | dataIndex    | `string`                                                             | 行数据索引                     | -      |
 | key          | `string \| number`                                                   | 唯一key                        | -      |
@@ -97,6 +98,26 @@ toc: 'content'
 | onHeaderCell | `(column: ColumnProps) => object`                                    | 设置表头单元格属性             | -      |
 | render       | `(record: Record<string, any>, rowIndex: number) => React.ReactNode` | 自定义渲染函数                 | -      |
 
+### ColumnFilter
+
+`ColumnProps.filter` 的过滤配置。
+
+| 属性名        | 类型                                        | 描述                                                                                                  | 默认值 |
+| ------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------ |
+| filterMode    | `'tree' \| 'menu'`                          | 筛选菜单模式（配置 `items` 时生效）                                                                   | `menu` |
+| items         | `Array<Record<string, any>>`                | 筛选菜单项，配置后渲染树形多选面板                                                                    | -      |
+| searchable    | `boolean`                                   | 是否可搜索；未配置 `items` 时渲染搜索输入框                                                           | `true` |
+| filterOnClose | `boolean`                                   | 关闭筛选面板时是否自动应用筛选                                                                        | `true` |
+| icon          | `(filtered: boolean) => React.ReactNode`    | 自定义筛选图标                                                                                        | -      |
+| render        | `() => React.ReactNode`                     | 自定义筛选面板内容                                                                                    | -      |
+| onFilter      | `(value: FilterValue, record: object) => boolean` | 本地过滤函数；不配置时使用默认的字符串包含匹配                                                  | -      |
+| filtered      | `boolean`                                   | 强制筛选图标高亮（优先级高于由 `filteredValue` 派生的高亮）                                          | -      |
+| filteredValue | `FilterValue \| FilterValue[]`              | （受控）筛选值。配置后该列筛选状态完全受控：面板回显、图标高亮、`onChange` 的 `filters` 均以其为准；重置传 `''` / `[]` | -      |
+
+> **受控 + 服务端过滤**：列配置 `filteredValue` 且不配置 `onFilter` 时，不做任何本地过滤，数据是否过滤由你在 `onChange` 里重新请求决定，适合后台搜索场景（见下方「受控筛选」示例）。
+>
+> `action === 'filter'` 时，本次操作的列的 key 必在 `filters` 中（清空时值为 `''` / `[]`），父组件可直接据此镜像筛选状态。
+
 ### RowSelectionType
 
 | 属性名                 | 类型                                                                                         | 描述                        | 默认值 |

package/src/Table/interface.ts

@@ -68,9 +68,13 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
   tableActionBarShowOnHover?: boolean;
   sorters?: { [prop: string]: number };
   showSorterTooltip?: boolean;
-  internalFilters?: { [dataIndex: string]: boolean }; // Whether this column is filtered
   onSort?: (dataIndex: string, sorter: any) => void;
-  onInternalFilter?: (dataIndex: string, value: string) => void;
+  onInternalFilter?: (options: {
+    dataIndex: string;
+    value: FilterValue | FilterValue[];
+    type?: 'filter' | 'search';
+    column: WrapedColumnProps;
+  }) => void;
   /**
    * `resizeKey` of the column currently being dragged, if any
    */
@@ -215,6 +219,14 @@ export interface ColumnProps {
      * Whether searchable, when items is undefined, it acts as a search component
      */
     searchable?: boolean;
+    /**
+     * Controlled filter state. When defined, this column's filter state is
+     * controlled: the dropdown echo, icon highlight and the `filters` in
+     * onChange all derive from it. With no `onFilter`, local matching is
+     * skipped entirely (server mode — filter in your onChange handler).
+     * Reset with `[]` / `''`.
+     */
+    filteredValue?: FilterValue | FilterValue[];
     /**
      * Filter icon
      */