@nocobase/client-v2 2.2.0-beta.9 → 2.2.0

package/src/components/form/filter/__tests__/useFilterActionProps.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine, FlowEngineProvider, type Collection } from '@nocobase/flow-engine';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { useFilterActionProps } from '../useFilterActionProps';
+
+vi.mock('../../../flow/components/filter/useFilterOptions', () => ({
+  useFilterOptions: () => [],
+}));
+
+vi.mock('../CollectionFilterItem', () => ({
+  createCollectionFilterItem: () => undefined,
+}));
+
+function makeCollection(): Collection {
+  return {
+    getFields: () => [{ name: 'title' }, { name: 'type' }],
+  } as unknown as Collection;
+}
+
+function makeWrapper() {
+  const engine = new FlowEngine();
+  const Wrapper: React.FC = ({ children }) => <FlowEngineProvider engine={engine}>{children}</FlowEngineProvider>;
+  return Wrapper;
+}
+
+describe('useFilterActionProps', () => {
+  it('seeds the editable group from defaultValue when initialValue is missing', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+  });
+
+  it('reset restores defaultValue and emits its compiled filter', () => {
+    const onApply = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          initialValue: { $and: [{ title: { $includes: 'abc' } }] },
+          onApply,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    result.current.onReset();
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+    expect(onApply).toHaveBeenCalledWith(undefined, 'reset');
+  });
+
+  it('counts only effective compiled conditions, so empty default rows do not highlight the button', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.conditionCount).toBe(0);
+  });
+});

package/src/components/form/filter/index.ts

@@ -11,5 +11,7 @@
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
 export { CollectionFilterPanel } from './CollectionFilterPanel';
+export { CollectionFilterItem } from './CollectionFilterItem';
+export type { CollectionFilterItemValue } from './CollectionFilterItem';
 export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

package/src/components/form/filter/useFilterActionProps.ts

@@ -43,6 +43,14 @@ const isCondition = (item: FilterGroupItem): item is CollectionFilterItemValue =
   typeof (item as CollectionFilterItemValue).path === 'string' &&
   Object.prototype.hasOwnProperty.call(item, 'operator');
 
+const cloneFilterGroupItem = (item: FilterGroupItem): FilterGroupItem =>
+  isGroup(item) ? { logic: item.logic, items: item.items.map((child) => cloneFilterGroupItem(child)) } : { ...item };
+
+const cloneFilterGroup = (group: FilterGroupValue): FilterGroupValue => ({
+  logic: group.logic,
+  items: group.items.map((item) => cloneFilterGroupItem(item)),
+});
+
 /**
  * `true` when the rhs of a condition is "no real value yet" — covers `undefined` / `null` / empty string / empty array / empty plain object. Mirrors v1's `removeNullCondition` `isEmpty` predicate so half-filled rows ("Locked time → is → (no date picked yet)") get dropped on Submit instead of being sent to the server as `{lockedTs:{}}` and triggering a 500.
  */
@@ -164,6 +172,8 @@ export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /**
    * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
    */
@@ -216,12 +226,23 @@ export interface UseFilterActionPropsResult {
  * ```
  */
 export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
-  const { collection, initialValue, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
+  const {
+    collection,
+    initialValue,
+    defaultValue,
+    onApply,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+  } = args;
+  const seedValue = initialValue ?? defaultValue;
+  const defaultGroup = decompileFilterGroup(defaultValue) || createEmptyGroup();
 
   // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
   const valueRef = useRef<FilterGroupValue>();
   if (!valueRef.current) {
-    valueRef.current = observable(decompileFilterGroup(initialValue) || createEmptyGroup()) as FilterGroupValue;
+    valueRef.current = observable(decompileFilterGroup(seedValue) || createEmptyGroup()) as FilterGroupValue;
   }
   const value = valueRef.current;
 
@@ -240,9 +261,10 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   });
 
   const onReset = useMemoizedFn(() => {
-    value.logic = '$and';
-    value.items = [];
-    onApply(undefined, 'reset');
+    const next = cloneFilterGroup(defaultGroup);
+    value.logic = next.logic;
+    value.items = next.items;
+    onApply(compileFilterGroup(value), 'reset');
   });
 
   const translate = useMemoizedFn((key: string) => (t ? t(key) : key));
@@ -261,7 +283,16 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   );
 
   // Re-read on each render so `observer`-wrapped hosts re-render when the reactive `items` array length changes. No useMemo needed — the `value` object's identity is stable (held in a ref), but its observable `items.length` is what we actually care about, and the eslint exhaustive-deps rule rightly complains about depending on a mutable property of a stable ref.
-  const conditionCount = value.items.length;
+  const conditionCount = (() => {
+    const compiled = compileFilterGroup(value);
+    if (compiled?.$and && Array.isArray(compiled.$and)) {
+      return compiled.$and.length;
+    }
+    if (compiled?.$or && Array.isArray(compiled.$or)) {
+      return compiled.$or.length;
+    }
+    return 0;
+  })();
 
   return { value, options, FilterItem, ctx, onSubmit, onReset, conditionCount };
 }

package/src/components/form/table/Table.tsx

@@ -9,11 +9,11 @@
 
 import { DragOverlay, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { cx } from '@emotion/css';
+import { css, cx, injectGlobal } from '@emotion/css';
 import { DndProvider } from '@nocobase/flow-engine';
 import { useMemoizedFn } from 'ahooks';
-import { Table as AntdTable, type TableProps as AntdTableProps } from 'antd';
-import type { ColumnsType, ColumnType, GetRowKey } from 'antd/es/table/interface';
+import { Table as AntdTable, theme, type TableProps as AntdTableProps } from 'antd';
+import type { ColumnsType, ColumnGroupType, ColumnType, GetRowKey } from 'antd/es/table/interface';
 import type { RenderedCell } from 'rc-table/lib/interface';
 import React, { useMemo, useState } from 'react';
 import { SortableRow, SortHandle } from './dnd/SortableRow';
@@ -24,6 +24,20 @@ import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './
 
 type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
 
+const DEFAULT_COLUMN_CONTENT_CLASS_NAME = 'nb-table-default-column-content';
+const DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY = '--nb-table-default-column-content-max-width';
+
+// Zero specificity lets caller classes remain authoritative regardless of stylesheet insertion order. The max-width
+// value itself comes from a token-derived private CSS variable set by each Table instance.
+injectGlobal`
+  :where(.${DEFAULT_COLUMN_CONTENT_CLASS_NAME}) {
+    max-width: var(${DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY});
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+`;
+
 /**
  * Default initial page size for `Table`. Exposed so consumers can seed their
  * controlled `pageSize` state with the same value the component would use if
@@ -50,6 +64,54 @@ function isRenderedCell<RecordType>(value: unknown): value is RenderedCell<Recor
   return typeof value === 'object' && value !== null && !React.isValidElement(value) && 'children' in value;
 }
 
+function isColumnGroup<RecordType>(
+  column: ColumnGroupType<RecordType> | ColumnType<RecordType>,
+): column is ColumnGroupType<RecordType> {
+  return 'children' in column && Array.isArray(column.children) && column.children.length > 0;
+}
+
+function addDefaultColumnContentClassName<RecordType>(
+  columns: ColumnsType<RecordType>,
+  defaultClassName: string,
+): ColumnsType<RecordType> {
+  return columns.map((column) => {
+    if (column === AntdTable.EXPAND_COLUMN || column === AntdTable.SELECTION_COLUMN) {
+      return column;
+    }
+
+    if (isColumnGroup(column)) {
+      return {
+        ...column,
+        children: addDefaultColumnContentClassName(column.children, defaultClassName),
+      };
+    }
+
+    if (column.width !== undefined || column.ellipsis || column.fixed) {
+      return column;
+    }
+
+    const originalOnCell = column.onCell;
+    const originalOnHeaderCell = column.onHeaderCell;
+    return {
+      ...column,
+      onCell: (record, index) => {
+        const cellProps = originalOnCell?.(record, index) ?? {};
+        return {
+          ...cellProps,
+          className: cx(defaultClassName, cellProps.className),
+        };
+      },
+      onHeaderCell: (headerColumn) => {
+        const cellProps = originalOnHeaderCell?.(headerColumn) ?? {};
+        return {
+          ...cellProps,
+          className: cx(defaultClassName, cellProps.className),
+        };
+      },
+    };
+  });
+}
+
 export interface TableProps<RecordType extends object = any> extends AntdTableProps<RecordType> {
   /**
    * Required so drag-sort, hover-swap and row identity work. Accepts the same
@@ -108,6 +170,7 @@ export interface TableProps<RecordType extends object = any> extends AntdTablePr
  * plus the index swap, so it is safe as the default table on any page.
  */
 export function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
+  const { token } = theme.useToken();
   const {
     rowKey,
     showIndex = true,
@@ -143,6 +206,17 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
   const showHandleInSelection = isDraggable && showSortHandle && !!rowSelection;
   const showStandaloneHandleColumn = isDraggable && showSortHandle && !rowSelection;
 
+  const defaultColumnContentClassName = useMemo(
+    () =>
+      cx(
+        DEFAULT_COLUMN_CONTENT_CLASS_NAME,
+        css`
+          ${DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY}: ${token.screenXS - token.paddingXL * 3 + token.padding * 2}px;
+        `,
+      ),
+    [token.padding, token.paddingXL, token.screenXS],
+  );
+
   const itemKeys = useMemo<string[]>(() => {
     if (!isDraggable || !dataSource) return [];
     return dataSource
@@ -191,15 +265,16 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
   // selection cell — see `augmentedRowSelection` below.
   const augmentedColumns = useMemo<ColumnsType<RecordType>>(() => {
     const baseColumns: ColumnsType<RecordType> = columns ?? [];
-    if (!showStandaloneHandleColumn) return baseColumns;
+    const styledColumns = addDefaultColumnContentClassName(baseColumns, defaultColumnContentClassName);
+    if (!showStandaloneHandleColumn) return styledColumns;
     const handleColumn: ColumnType<RecordType> = {
       key: '__sort__',
       width: sortHandleColumnWidth,
       align: 'center',
       render: () => <SortHandle />,
     };
-    return [handleColumn, ...baseColumns];
-  }, [columns, showStandaloneHandleColumn, sortHandleColumnWidth]);
+    return [handleColumn, ...styledColumns];
+  }, [columns, defaultColumnContentClassName, showStandaloneHandleColumn, sortHandleColumnWidth]);
 
   const augmentedRowSelection = useMemo(() => {
     if (!rowSelection) return rowSelection;