@nocobase/client-v2 2.2.0-beta.2 → 2.2.0-beta.5

package/src/flow/models/fields/TextareaFieldModel.tsx

@@ -8,15 +8,61 @@
  */
 
 import { Input } from 'antd';
-import React from 'react';
-import _ from 'lodash';
+import type { TextAreaProps } from 'antd/es/input';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+import React, { useEffect, useRef } from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
 import { FieldModel } from '../base/FieldModel';
 
+function IMESafeTextArea(props: TextAreaProps) {
+  const { value, onChange, onCompositionStart, onCompositionEnd, ...rest } = props;
+  const textAreaRef = useRef<TextAreaRef>(null);
+  const previousValueRef = useRef(value);
+  const defaultValue = typeof value === 'bigint' ? String(value) : value;
+
+  useEffect(() => {
+    if (Object.is(previousValueRef.current, value)) {
+      return;
+    }
+    previousValueRef.current = value;
+
+    const textArea = textAreaRef.current?.resizableTextArea?.textArea;
+    if (textArea) {
+      const nextValue = value == null ? '' : String(value);
+      if (textArea.value !== nextValue) {
+        textArea.value = nextValue;
+      }
+    }
+  }, [value]);
+
+  const getEventValue = (event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>) =>
+    event.currentTarget.value;
+
+  return (
+    <Input.TextArea
+      {...rest}
+      ref={textAreaRef}
+      defaultValue={defaultValue}
+      onChange={(event) => {
+        previousValueRef.current = getEventValue(event);
+        onChange?.(event);
+      }}
+      onCompositionStart={(event) => {
+        previousValueRef.current = getEventValue(event);
+        onCompositionStart?.(event);
+      }}
+      onCompositionEnd={(event) => {
+        previousValueRef.current = getEventValue(event);
+        onCompositionEnd?.(event);
+      }}
+    />
+  );
+}
+
 @largeField()
 export class TextareaFieldModel extends FieldModel {
   render() {
-    return <Input.TextArea {...this.props} />;
+    return <IMESafeTextArea {...this.props} />;
   }
 }
 

package/src/flow/models/fields/__tests__/DisplayDateTimeFieldModel.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { DisplayDateTimeFieldModel } from '../DisplayDateTimeFieldModel';
+
+describe('DisplayDateTimeFieldModel', () => {
+  it('uses dateFormat, showTime, and timeFormat when rendering read pretty datetime text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15 13:05:06')).toBeInTheDocument();
+  });
+
+  it('does not reuse a time-only format when rendering datetime text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-stale-time-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        format: 'HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15 13:05:06')).toBeInTheDocument();
+    expect(screen.queryByText('13:05:06')).not.toBeInTheDocument();
+  });
+
+  it('keeps an existing complete datetime format when no split format props are configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-complete-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        format: 'YYYY/MM/DD HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026/06/15 13:05:06')).toBeInTheDocument();
+  });
+
+  it('renders only the date for date-only fields even when a datetime format remains', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-date-only',
+      props: {
+        value: '2026-06-15 13:05:06',
+        dateOnly: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: false,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15')).toBeInTheDocument();
+    expect(screen.queryByText('2026-06-15 13:05:06')).not.toBeInTheDocument();
+  });
+});

package/src/flow/models/fields/__tests__/InputFieldModel.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { FlowEngine } from '@nocobase/flow-engine';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { InputFieldModel } from '../InputFieldModel';
@@ -43,6 +43,105 @@ describe('InputFieldModel', () => {
     consoleError.mockRestore();
   });
 
+  it('keeps IME composition text visible before the parent value is committed', () => {
+    const onChange = vi.fn();
+    const onCompositionStart = vi.fn();
+    const onCompositionEnd = vi.fn();
+    const model = createInputFieldModel({
+      value: '',
+      onChange,
+      onCompositionStart,
+      onCompositionEnd,
+    });
+
+    render(<>{model.render()}</>);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 'ni' }, nativeEvent: { isComposing: true } });
+
+    expect(input.value).toBe('ni');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onCompositionStart).toHaveBeenCalledTimes(1);
+
+    fireEvent.compositionEnd(input, { target: { value: '你' } });
+
+    expect(input.value).toBe('你');
+    expect(onCompositionEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns to the committed parent value after IME composition is submitted', () => {
+    const onChange = vi.fn();
+    const onCompositionEnd = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+        onCompositionEnd,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 'ni' }, nativeEvent: { isComposing: true } });
+    fireEvent.compositionEnd(input, { target: { value: '你' } });
+
+    expect(input.value).toBe('你');
+
+    rerender(<>{createModel('你').render()}</>);
+
+    expect(input.value).toBe('你');
+  });
+
+  it('does not overwrite in-progress DOM input with a stale parent value', async () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'té' } });
+    rerender(<>{createModel('').render()}</>);
+
+    expect(input.value).toBe('té');
+
+    rerender(<>{createModel('reset').render()}</>);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('reset');
+    });
+  });
+
+  it('keeps replacement-style Vietnamese IME edits in the DOM', () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createInputFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'te' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(input.value).toBe('te');
+
+    fireEvent.change(input, { target: { value: 'té' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(input.value).toBe('té');
+
+    fireEvent.change(input, { target: { value: 'tét' } });
+    rerender(<>{createModel('té').render()}</>);
+    expect(input.value).toBe('tét');
+  });
+
   it('renders ScanInput when scan input is enabled', () => {
     const model = createInputFieldModel({ enableScan: true });
 

package/src/flow/models/fields/__tests__/SelectFieldModel.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it } from 'vitest';
+import { SelectFieldModel } from '../SelectFieldModel';
+
+function mockT(text: string) {
+  if (text === '{{t("Yes")}}') return '是';
+  if (text === '{{t("No")}}') return '否';
+  return text;
+}
+
+describe('SelectFieldModel', () => {
+  it('translates enum fallback labels for selected values', () => {
+    const model = {
+      props: {
+        value: true,
+      },
+      context: {
+        collectionField: {
+          uiSchema: {
+            enum: [
+              { label: '{{t("Yes")}}', value: true },
+              { label: '{{t("No")}}', value: false },
+            ],
+          },
+        },
+      },
+      translate: mockT,
+    } as unknown as SelectFieldModel;
+
+    const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+    expect(element.props.value).toEqual({ label: '是', value: true });
+  });
+});

package/src/flow/models/fields/__tests__/TextareaFieldModel.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * 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 } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { TextareaFieldModel } from '../TextareaFieldModel';
+
+function createTextareaFieldModel(props?: Record<string, unknown>) {
+  const engine = new FlowEngine();
+  return new TextareaFieldModel({
+    uid: 'textarea-field-model-test',
+    flowEngine: engine,
+    props,
+  });
+}
+
+describe('TextareaFieldModel', () => {
+  it('keeps IME composition text visible before the parent value is committed', () => {
+    const onChange = vi.fn();
+    const onCompositionStart = vi.fn();
+    const onCompositionEnd = vi.fn();
+    const model = createTextareaFieldModel({
+      value: '',
+      onChange,
+      onCompositionStart,
+      onCompositionEnd,
+    });
+
+    render(<>{model.render()}</>);
+
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
+
+    fireEvent.compositionStart(textarea);
+    fireEvent.change(textarea, { target: { value: 'ni' }, nativeEvent: { isComposing: true } });
+
+    expect(textarea.value).toBe('ni');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onCompositionStart).toHaveBeenCalledTimes(1);
+
+    fireEvent.compositionEnd(textarea, { target: { value: '你' } });
+
+    expect(textarea.value).toBe('你');
+    expect(onCompositionEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not overwrite in-progress DOM input with a stale parent value', async () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createTextareaFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: 'té' } });
+    rerender(<>{createModel('').render()}</>);
+
+    expect(textarea.value).toBe('té');
+
+    rerender(<>{createModel('reset').render()}</>);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe('reset');
+    });
+  });
+
+  it('keeps replacement-style Vietnamese IME edits in the DOM', () => {
+    const onChange = vi.fn();
+    const createModel = (value: string) =>
+      createTextareaFieldModel({
+        value,
+        onChange,
+      });
+
+    const { rerender } = render(<>{createModel('').render()}</>);
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: 'te' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(textarea.value).toBe('te');
+
+    fireEvent.change(textarea, { target: { value: 'té' } });
+    rerender(<>{createModel('te').render()}</>);
+    expect(textarea.value).toBe('té');
+
+    fireEvent.change(textarea, { target: { value: 'tét' } });
+    rerender(<>{createModel('té').render()}</>);
+    expect(textarea.value).toBe('tét');
+  });
+});

package/src/flow/utils/__tests__/dateTimeFormat.test.ts

@@ -48,6 +48,264 @@ describe('dateTimeFormat', () => {
     });
   });
 
+  it('uses the association title field when deciding the format schema', () => {
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsTime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsTime'
+                  ? {
+                      type: 'time',
+                      interface: 'time',
+                    }
+                  : null,
+            },
+          },
+        },
+      },
+    };
+
+    expect(Object.keys(dateTimeFormat.uiSchema(ctx))).toEqual(['timeFormat']);
+  });
+
+  it('saves association title time field format as a time format', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsTime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsTime'
+                  ? {
+                      type: 'time',
+                      interface: 'time',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, { timeFormat: 'hh:mm:ss a' });
+
+    expect(setProps).toHaveBeenCalledWith({
+      timeFormat: 'hh:mm:ss a',
+      format: 'hh:mm:ss a',
+    });
+  });
+
+  it('applies and persists date time format params when settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDatetime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDatetime'
+                  ? {
+                      type: 'datetime',
+                      interface: 'datetime',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+        save,
+      },
+    };
+
+    await dateTimeFormat.beforeParamsSave(ctx, {
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+    });
+
+    expect(setProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+      format: 'YYYY-MM-DD hh:mm:ss a',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
+  it('syncs table association column props when title date time format settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const setParentProps = vi.fn();
+    const model = {
+      props: {
+        titleField: 'shipmentsDatetime',
+      },
+      context: {
+        collectionField: {
+          type: 'belongsTo',
+          targetCollection: {
+            getField: (name) =>
+              name === 'shipmentsDatetime'
+                ? {
+                    type: 'datetime',
+                    interface: 'datetime',
+                  }
+                : null,
+          },
+        },
+      },
+      setProps,
+      save,
+      parent: {
+        use: 'TableColumnModel',
+        collectionField: {
+          isAssociationField: () => true,
+        },
+        setProps: setParentProps,
+      },
+    };
+    model.parent['subModels'] = {
+      field: model,
+    };
+
+    await dateTimeFormat.beforeParamsSave(
+      { model },
+      {
+        picker: 'date',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'hh:mm:ss a',
+      },
+    );
+
+    expect(setParentProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+      format: 'YYYY-MM-DD hh:mm:ss a',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
+  it('hides time format for association title date-only fields', () => {
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDateOnly',
+          showTime: true,
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDateOnly'
+                  ? {
+                      type: 'dateOnly',
+                      interface: 'date',
+                      getComponentProps: () => ({
+                        dateOnly: true,
+                        showTime: false,
+                      }),
+                    }
+                  : null,
+            },
+          },
+        },
+      },
+    };
+    const schema = dateTimeFormat.uiSchema(ctx);
+    const timeFormatField: any = schema.timeFormat;
+    const showTimeField: any = schema.showTime;
+    const timeFormatState = {
+      hidden: false,
+      form: {
+        values: {
+          picker: 'date',
+          showTime: true,
+        },
+      },
+    };
+    const showTimeState = {
+      hidden: false,
+      value: true,
+      form: {
+        values: {
+          picker: 'date',
+        },
+      },
+    };
+
+    timeFormatField['x-reactions'][0](timeFormatState);
+    showTimeField['x-reactions'][1](showTimeState);
+
+    expect(timeFormatState.hidden).toBe(true);
+    expect(showTimeState.hidden).toBe(true);
+    expect(showTimeState.value).toBe(false);
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      showTime: false,
+    });
+  });
+
+  it('saves association title date-only field format without time even when params contain showTime', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDateOnly',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDateOnly'
+                  ? {
+                      type: 'dateOnly',
+                      interface: 'date',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, {
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'HH:mm:ss',
+    });
+
+    expect(setProps).toHaveBeenCalledWith({
+      dateFormat: 'YYYY-MM-DD',
+      showTime: false,
+      timeFormat: 'HH:mm:ss',
+      format: 'YYYY-MM-DD',
+    });
+  });
+
   it('uses format as the default time format when timeFormat is missing', () => {
     const ctx = {
       model: {