@nocobase/client-v2 2.1.0-alpha.40 → 2.1.0-alpha.46

package/src/flow/models/fields/AssociationFieldModel/SubFormFieldModel.tsx

@@ -213,6 +213,7 @@ const ArrayNester = ({
   const isConfigMode = !!model.context.flowSettingsEnabled;
   const { t } = useTranslation();
   const rowIndex = model.context.fieldIndex || [];
+  const parentFieldPathArray = (model?.parent as any)?.context?.fieldPathArray || [];
   // 用来缓存每行的 fork，保证每行只创建一次
   const forksRef = useRef<Record<string, any>>({});
   const collectionName = model.context.collectionField.name;
@@ -251,7 +252,7 @@ const ArrayNester = ({
               {displayFields.map((field: any, index) => {
                 const { key, name: fieldName, isDefault } = field;
                 const fieldIndex = [...rowIndex, `${collectionName}:${index}`];
-
+                const fieldPathArray = parentFieldPathArray;
                 // 每行只创建一次 fork
                 if (!forksRef.current[key]) {
                   const fork = gridModel.createFork({ disabled });
@@ -268,6 +269,11 @@ const ArrayNester = ({
                   get: () => fieldIndex,
                   cache: false,
                 });
+                console.log(fieldPathArray);
+                currentFork.context.defineProperty('fieldPathArray', {
+                  get: () => fieldPathArray,
+                  cache: false,
+                });
 
                 const getRowItem = createItemChainGetter({
                   valueAccessor: () => currentFork.context.form.getFieldValue([name, fieldName]),

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -33,7 +33,7 @@ import React, { useRef, useMemo, useEffect } from 'react';
 import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
 import { DetailsItemModel } from '../../../blocks/details/DetailsItemModel';
-import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
+import { FieldDeletePlaceholder, CustomWidth, normalizeTableColumnWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
@@ -67,7 +67,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const { actionName } = fieldModel.forbidden || {};
   const messageValue = useMemo(() => {
     return t(
@@ -77,7 +77,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return (
     <Tooltip title={messageValue}>
       <LockOutlined style={{ opacity: '0.3' }} />
@@ -100,10 +100,9 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
     const handleChange = useMemo(
       () =>
         debounce((val) => {
-          if (props.onChange) props.onChange(val);
           if (onChange) onChange(val);
         }, 200),
-      [props.onChange, onChange],
+      [onChange],
     );
 
     return <FieldModelRenderer model={model} {...rest} onChange={handleChange} />;
@@ -149,7 +148,7 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
         </Space>
       );
     }
-  }, [collectionField.interface, defaultValue, fieldModel]);
+  }, [collectionField.interface, defaultValue, disabled, fieldModel]);
   return (
     <div
       ref={ref}
@@ -830,7 +829,7 @@ SubTableColumnModel.registerFlow({
         width: 200,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     aclCheck: {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -269,7 +269,7 @@ export function SubTableField(props) {
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-              minHeight: '20px',
+              minHeight: '36px',
             }}
           >
             <Space>

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/index.tsx

@@ -60,13 +60,13 @@ export class SubTableFieldModel extends AssociationFieldModel {
   setCurrentPage;
   currentPageSize;
 
-  getCurrentValue = () => {
+  getCurrentValue() {
     const fallback = Array.isArray(this.props.value) ? this.props.value : [];
-    const fieldPathArray = this.parent?.context?.fieldPathArray;
+    const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
     if (!Array.isArray(fieldPathArray) || !fieldPathArray.length) return fallback;
     const latest = this.context.blockModel?.context?.form?.getFieldValue?.(fieldPathArray as any);
     return Array.isArray(latest) ? latest : fallback;
-  };
+  }
 
   get collection() {
     return this.context.collection;
@@ -111,6 +111,7 @@ export class SubTableFieldModel extends AssociationFieldModel {
       },
     };
     const isConfigMode = !!this.context.flowSettingsEnabled;
+    const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
     return (
       <SubTableField
         {...this.props}
@@ -121,8 +122,8 @@ export class SubTableFieldModel extends AssociationFieldModel {
         parentItem={this.context.item}
         filterTargetKey={this.collection.filterTargetKey}
         formValuesChangeEmitter={this.context.blockModel?.emitter}
-        fieldPathArray={this.parent?.context?.fieldPathArray}
-        getCurrentValue={this.getCurrentValue}
+        fieldPathArray={fieldPathArray}
+        getCurrentValue={() => this.getCurrentValue()}
       />
     );
   }

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

@@ -191,7 +191,15 @@ export class ClickableFieldModel extends FieldModel {
   }
 
   renderInDisplayStyle(value, record?, isToMany?, wrap?) {
-    const { clickToOpen = false, displayStyle, titleField, overflowMode, disabled, ...restProps } = this.props;
+    const {
+      clickToOpen = false,
+      displayStyle,
+      titleField,
+      overflowMode,
+      disabled,
+      timeFormat,
+      ...restProps
+    } = this.props;
     const titleCollectionField = titleField
       ? this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField
       : this.context.collectionField;

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

@@ -38,6 +38,12 @@ const CollectionSelector = (props) => {
   );
 };
 
+function getConfiguredCollectionNames(collectionField) {
+  return (collectionField?.uiSchema?.enum || collectionField?.enum || [])
+    .map((item) => (item && typeof item === 'object' ? item.value : item))
+    .filter((value) => value !== null && typeof value !== 'undefined');
+}
+
 export class CollectionSelectorFieldModel extends FieldModel {
   render() {
     return <CollectionSelector {...this.props} />;
@@ -66,12 +72,12 @@ CollectionSelectorFieldModel.registerFlow({
           });
         } else {
           const collections = ctx.dataSourceManager.getDataSource('main').getCollections();
-          const defaultOptions = ctx.model.context.collectionField.enum || [];
+          const defaultOptions = getConfiguredCollectionNames(ctx.model.context.collectionField);
           const options = collections
             .filter((item: any) => !item.options.hidden)
             .filter((v) => {
               if (defaultOptions.length) {
-                return defaultOptions.find((c) => c.value === v.name);
+                return defaultOptions.includes(v.name);
               }
               return true;
             })

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

@@ -43,6 +43,12 @@ const fieldNames = {
   color: 'color',
 };
 
+function getConfiguredCollectionNames(collectionField) {
+  return (collectionField?.uiSchema?.enum || collectionField?.enum || [])
+    .map((item) => (item && typeof item === 'object' ? item.value : item))
+    .filter((value) => value !== null && typeof value !== 'undefined');
+}
+
 export class DisplayEnumFieldModel extends ClickableFieldModel {
   isEmpty(value: any) {
     return value === null || value === undefined || value === '';
@@ -134,12 +140,12 @@ DisplayEnumFieldModel.registerFlow({
             });
           } else {
             const collections = ctx.dataSourceManager.getDataSource('main').getCollections();
-            const defaultOptions = ctx.model.context.collectionField.enum || [];
+            const defaultOptions = getConfiguredCollectionNames(ctx.model.context.collectionField);
             const options = collections
               .filter((item: any) => !item.options.hidden)
               .filter((v) => {
                 if (defaultOptions.length) {
-                  return defaultOptions.find((c) => c.value === v.name);
+                  return defaultOptions.includes(v.name);
                 }
                 return true;
               })

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

@@ -15,7 +15,7 @@ import { ClickableFieldModel } from './ClickableFieldModel';
 export class DisplayTimeFieldModel extends ClickableFieldModel {
   public renderComponent(value) {
     const { prefix, suffix, style, className } = this.props;
-    const format = this.props['format'] || 'HH:mm:ss';
+    const format = this.props['timeFormat'] || this.props['format'] || 'HH:mm:ss';
     const result = value && dayjs(value, 'HH:mm:ss').format(format);
     return (
       <span className={className} style={style}>

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

@@ -15,7 +15,7 @@ import { FieldModel } from '../base/FieldModel';
 import { MobileTimePicker } from './mobile-components/MobileTimePicker';
 
 const TimePickerCom = (props) => {
-  const format = props['format'] || 'HH:mm:ss';
+  const format = props['timeFormat'] || props['format'] || 'HH:mm:ss';
   const onChange = props.onChange;
   const ctx = useFlowModelContext();
   const componentProps = {

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

@@ -0,0 +1,61 @@
+/**
+ * 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, FlowModelProvider } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import React from 'react';
+import { DisplayTimeFieldModel } from '../DisplayTimeFieldModel';
+import { TimeFieldModel } from '../TimeFieldModel';
+
+describe('TimeFieldModel', () => {
+  it('uses timeFormat before format when rendering the editable time picker', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TimeFieldModel });
+
+    const model = engine.createModel<TimeFieldModel>({
+      use: TimeFieldModel,
+      uid: 'time-field-format',
+      props: {
+        value: '13:05:06',
+        format: 'HH:mm:ss',
+        timeFormat: 'hh:mm:ss a',
+      },
+    });
+
+    render(
+      <FlowModelProvider model={model}>
+        <>{model.render()}</>
+      </FlowModelProvider>,
+    );
+
+    expect(screen.getByDisplayValue('01:05:06 pm')).toBeInTheDocument();
+  });
+});
+
+describe('DisplayTimeFieldModel', () => {
+  it('uses timeFormat before format when rendering read pretty time text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTimeFieldModel });
+
+    const model = engine.createModel<DisplayTimeFieldModel>({
+      use: DisplayTimeFieldModel,
+      uid: 'display-time-field-format',
+      props: {
+        value: '13:05:06',
+        format: 'HH:mm:ss',
+        timeFormat: 'hh:mm:ss a',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('01:05:06 pm')).toBeInTheDocument();
+  });
+});

package/src/flow/models/fields/mobile-components/MobileDatePicker.tsx

@@ -9,11 +9,26 @@
 
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { dayjs } from '@nocobase/utils/client';
+import type { Dayjs } from 'dayjs';
 import { DatePicker } from 'antd';
 import { DatePicker as AntdMobileDatePicker } from 'antd-mobile';
 import React from 'react';
 import { useCallback, useState } from 'react';
 
+type DateValue = string | number | Date | Dayjs | null | undefined;
+
+function toNativeDate(value: DateValue): Date | null {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  const parsed = dayjs.isDayjs(value) ? value : dayjs(value);
+  return parsed.isValid() ? parsed.toDate() : null;
+}
+
 export const MobileDatePicker = (props) => {
   const {
     value,
@@ -56,9 +71,9 @@ export const MobileDatePicker = (props) => {
         return data;
     }
   }, []);
-  // Convert dayjs min/max to native Date for Antd Mobile Picker
-  const minDate = min ? (min as any).toDate() : new Date(1950, 0, 1);
-  const maxDate = max ? (max as any).toDate() : new Date(2050, 11, 31);
+  const mobileValue = toNativeDate(value);
+  const minDate = toNativeDate(min) ?? new Date(1950, 0, 1);
+  const maxDate = toNativeDate(max) ?? new Date(2050, 11, 31);
 
   return (
     <>
@@ -78,6 +93,7 @@ export const MobileDatePicker = (props) => {
         cancelText={t('Cancel')}
         confirmText={t('Confirm')}
         visible={visible}
+        value={mobileValue}
         title={<a onClick={handleClear}>{t('Clear')}</a>}
         onClose={() => {
           setVisible(false);

package/src/flow/models/fields/mobile-components/MobileLazySelect.tsx

@@ -10,7 +10,7 @@
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { Select } from 'antd';
 import type { CSSProperties } from 'react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, CheckList, Popup, SearchBar, SpinLoading } from 'antd-mobile';
 import { css } from '@emotion/css';
 import {
@@ -51,7 +51,7 @@ function deriveRecordsFromValue(
 ) {
   if (isMultiple) {
     if (Array.isArray(value)) {
-      return (value.filter(Boolean) as any[]).map((item) => {
+      return (value.filter((item) => item !== null && item !== undefined) as any[]).map((item) => {
         if (valueMode === 'value') {
           return optionMap.get(item) ?? { [valueKey]: item };
         }
@@ -113,11 +113,13 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
   );
 
   const [selectedRecords, setSelectedRecords] = useState<AssociationOption[]>(() => derivedRecords);
+  const wasVisibleRef = useRef(visible);
 
   useEffect(() => {
-    if (visible) {
+    if (visible && !wasVisibleRef.current) {
       setSelectedRecords(derivedRecords);
     }
+    wasVisibleRef.current = visible;
   }, [derivedRecords, visible]);
 
   useEffect(() => {

package/src/flow/models/fields/mobile-components/__tests__/MobileDatePicker.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * 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 { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@nocobase/test/client';
+import { dayjs } from '@nocobase/utils/client';
+import { MobileDatePicker } from '../MobileDatePicker';
+
+type MockDatePickerProps = Record<string, unknown> & {
+  value?: unknown;
+  visible?: boolean;
+};
+
+const mockState = vi.hoisted(
+  (): {
+    antdDatePickerProps?: MockDatePickerProps;
+    mobileDatePickerProps?: MockDatePickerProps;
+  } => ({
+    antdDatePickerProps: undefined,
+    mobileDatePickerProps: undefined,
+  }),
+);
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
+  return {
+    ...actual,
+    useFlowModelContext: () => ({
+      t: (value: string) => value,
+    }),
+  };
+});
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<typeof import('antd')>('antd');
+  return {
+    ...actual,
+    DatePicker: (props: MockDatePickerProps) => {
+      mockState.antdDatePickerProps = props;
+      return <div data-testid="antd-date-picker" />;
+    },
+  };
+});
+
+vi.mock('antd-mobile', () => ({
+  DatePicker: (props: MockDatePickerProps) => {
+    mockState.mobileDatePickerProps = props;
+    return props.visible ? <div data-testid="mobile-date-picker" /> : null;
+  },
+}));
+
+describe('MobileDatePicker', () => {
+  beforeEach(() => {
+    mockState.antdDatePickerProps = undefined;
+    mockState.mobileDatePickerProps = undefined;
+  });
+
+  it('uses the form value as the mobile popup value', () => {
+    render(
+      <MobileDatePicker
+        value={dayjs('2037-03-06 12:34:56')}
+        showTime
+        picker="date"
+        timeFormat="HH:mm:ss"
+        onChange={vi.fn()}
+      />,
+    );
+
+    const trigger = screen.getByTestId('antd-date-picker').parentElement as HTMLElement;
+    act(() => {
+      fireEvent.click(trigger);
+    });
+
+    const popupValue = mockState.mobileDatePickerProps?.value;
+    expect(screen.getByTestId('mobile-date-picker')).toBeInTheDocument();
+    expect(popupValue).toBeInstanceOf(Date);
+    if (!(popupValue instanceof Date)) {
+      throw new Error('Expected popup value to be a Date');
+    }
+    expect(popupValue.getFullYear()).toBe(2037);
+    expect(popupValue.getMonth()).toBe(2);
+    expect(popupValue.getDate()).toBe(6);
+    expect(popupValue.getHours()).toBe(12);
+    expect(popupValue.getMinutes()).toBe(34);
+    expect(popupValue.getSeconds()).toBe(56);
+  });
+});

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@nocobase/test/client';
+import { MobileLazySelect } from '../MobileLazySelect';
 import { MobileSelect } from '../MobileSelect';
 
 const DEFAULT_OPTIONS = [
@@ -17,6 +18,11 @@ const DEFAULT_OPTIONS = [
   { label: 'Option B', value: 'b' },
 ];
 
+const RELATION_OPTIONS = [
+  { uuid: '05f6a3b4-bfb7-7943-578a-3819e2687a7e' },
+  { uuid: 'c7d99828-a1de-9e70-4c2d-b0139abdf02e' },
+];
+
 const mockState = vi.hoisted(() => ({
   selectProps: undefined as any,
   popupProps: undefined as any,
@@ -44,6 +50,13 @@ function openPopup() {
   expect(screen.getByTestId('popup')).toBeInTheDocument();
 }
 
+function openLazyPopup() {
+  act(() => {
+    mockState.selectProps?.onClick?.();
+  });
+  expect(screen.getByTestId('popup')).toBeInTheDocument();
+}
+
 function selectValues(values: string[]) {
   act(() => {
     mockState.checklistProps?.onChange?.(values);
@@ -73,6 +86,30 @@ function renderMobileSelect(props: Record<string, any> = {}) {
   return { onChange, onChangeComplete };
 }
 
+function renderMobileLazySelect(props: Record<string, any> = {}) {
+  const onChange = props.onChange ?? vi.fn();
+  const renderComponent = (nextProps: Record<string, any> = {}) => (
+    <MobileLazySelect
+      fieldNames={{ label: 'uuid', value: 'uuid' }}
+      value={[]}
+      multiple
+      allowMultiple
+      options={RELATION_OPTIONS}
+      {...props}
+      {...nextProps}
+      onChange={onChange}
+    />
+  );
+
+  const result = render(renderComponent());
+
+  return {
+    ...result,
+    onChange,
+    rerender: (nextProps: Record<string, any> = {}) => result.rerender(renderComponent(nextProps)),
+  };
+}
+
 vi.mock('@nocobase/flow-engine', async () => {
   const actual = await vi.importActual<any>('@nocobase/flow-engine');
   return {
@@ -80,6 +117,12 @@ vi.mock('@nocobase/flow-engine', async () => {
     useFlowModelContext: () => ({
       t: (value: string) => value,
     }),
+    useFlowModel: () => ({
+      context: {
+        collectionField: {},
+      },
+      subModels: {},
+    }),
   };
 });
 
@@ -240,3 +283,30 @@ describe('MobileSelect in SubForm/SubTable containers', () => {
     expect(onCommit).toHaveBeenNthCalledWith(2, ['a', 'b']);
   });
 });
+
+describe('MobileLazySelect', () => {
+  beforeEach(() => {
+    resetMockState();
+  });
+
+  it('keeps pending relation records selected until confirm', () => {
+    const { onChange, rerender } = renderMobileLazySelect();
+
+    openLazyPopup();
+    expect(mockState.checklistProps?.value).toEqual([]);
+
+    selectValues(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+    expect(mockState.checklistProps?.value).toEqual(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+
+    rerender({
+      options: RELATION_OPTIONS.map((item) => ({ ...item })),
+    });
+
+    expect(mockState.checklistProps?.value).toEqual(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+
+    confirmSelection();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([RELATION_OPTIONS[1]]);
+  });
+});

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -282,7 +282,7 @@ const UIEditorTopbarAction = observer(
     const { token } = theme.useToken();
     const customToken = token as CustomToken;
     const designable = !!flowEngine.context.flowSettingsEnabled;
-    const isMobileLayout = !!flowEngine.context.isMobileLayout;
+    const isMobileLayout = !!model.context.isMobileLayout;
 
     useHotkeys(
       'ctrl+shift+u',

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

@@ -0,0 +1,91 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { dateTimeFormat } from '../../actions/dateTimeFormat';
+
+describe('dateTimeFormat', () => {
+  it('only shows the time format schema for interface time fields', () => {
+    const ctx = {
+      model: {
+        context: {
+          collectionField: {
+            type: 'string',
+            interface: 'time',
+          },
+        },
+      },
+    };
+
+    expect(Object.keys(dateTimeFormat.uiSchema(ctx))).toEqual(['timeFormat']);
+  });
+
+  it('treats interface time fields as time fields', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        context: {
+          collectionField: {
+            type: 'string',
+            interface: 'time',
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, { timeFormat: 'hh:mm:ss a' });
+
+    expect(setProps).toHaveBeenCalledWith({
+      timeFormat: 'hh:mm:ss a',
+      format: 'hh:mm:ss a',
+    });
+  });
+
+  it('uses format as the default time format when timeFormat is missing', () => {
+    const ctx = {
+      model: {
+        props: {},
+        context: {
+          collectionField: {
+            interface: 'time',
+            getComponentProps: () => ({
+              format: 'hh:mm:ss a',
+            }),
+          },
+        },
+      },
+    };
+
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      timeFormat: 'hh:mm:ss a',
+    });
+  });
+
+  it('does not use datetime format as the default time format for non-time fields', () => {
+    const ctx = {
+      model: {
+        props: {},
+        context: {
+          collectionField: {
+            type: 'datetime',
+            interface: 'datetime',
+            getComponentProps: () => ({
+              format: 'YYYY-MM-DD hh:mm:ss a',
+            }),
+          },
+        },
+      },
+    };
+
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      timeFormat: 'HH:mm:ss',
+    });
+  });
+});