diff --git a/packages/core/client/src/schema-component/antd/variable/Helpers/HelperConfiguator.tsx b/packages/core/client/src/schema-component/antd/variable/Helpers/HelperConfiguator.tsx index 6332c66fef..cef20f6bb5 100644 --- a/packages/core/client/src/schema-component/antd/variable/Helpers/HelperConfiguator.tsx +++ b/packages/core/client/src/schema-component/antd/variable/Helpers/HelperConfiguator.tsx @@ -161,51 +161,34 @@ const Configurator = observer( 'x-decorator': 'FormItem', title: tval('Output value', { ns: 'client' }), }, - actions: { - type: 'void', - title: tval('Save'), - 'x-component': 'ActionBar', - properties: { - delete: { - type: 'void', - title: tval('Delete'), - 'x-component': 'Action', - 'x-use-component-props': 'useDeleteActionProps', - }, - close: { - type: 'void', - title: tval('Close'), - 'x-component': 'Action', - 'x-use-component-props': 'useCloseActionProps', - }, - }, - }, }, }, }, }; - return HelperComponent ? ( + return ( <> - (rawHelper.argsMap = values)} - inputValue={inputValue} - /> + {HelperComponent ? ( + (rawHelper.argsMap = values)} + inputValue={inputValue} + /> + ) : ( + + )} removeHelper({ index: index })} onClose={close} /> - ) : ( - ); }, { displayName: 'Configurator' }, diff --git a/packages/core/client/src/schema-component/antd/variable/demos/form-default-value.tsx b/packages/core/client/src/schema-component/antd/variable/demos/form-default-value.tsx index 6b0c925f20..93ed5f19e2 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/form-default-value.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/form-default-value.tsx @@ -96,7 +96,7 @@ const schema: ISchema = { }, datetime_withTZ: { type: 'string', - title: 'Nickname', + title: 'Datetime with Timezone', 'x-decorator': 'FormItem', 'x-component': 'Input', 'x-settings': 'simpleSettings', @@ -104,7 +104,7 @@ const schema: ISchema = { }, datetime_withoutTZ: { type: 'string', - title: 'Datetime without TZ', + title: 'Datetime without Timezone', 'x-decorator': 'FormItem', 'x-component': 'Input', 'x-settings': 'simpleSettings', diff --git a/packages/core/client/src/schema-component/antd/variable/demos/format-configuator.tsx b/packages/core/client/src/schema-component/antd/variable/demos/format-configuator.tsx deleted file mode 100644 index 2304ae385b..0000000000 --- a/packages/core/client/src/schema-component/antd/variable/demos/format-configuator.tsx +++ /dev/null @@ -1,295 +0,0 @@ -/** - * 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 { css } from '@emotion/css'; -import { - Filter, - ISchema, - Plugin, - SchemaComponent, - SchemaSettings, - SchemaSettingsDataScope, - SchemaSettingsModalItem, - TableBlockProvider, - useTableBlockProps, -} from '@nocobase/client'; -import { mockApp } from '@nocobase/client/demo-utils'; -import { Checkbox, Input, Radio, Space } from 'antd'; -import dayjs from 'dayjs'; -import React, { useEffect, useState } from 'react'; - -// Component for displaying a date format preview -const DateFormatPreview = ({ format }) => { - const content = format ? dayjs().format(format) : null; - - if (!content) return null; - - return ( - - {content} - - ); -}; - -// Main DateFormat component -const DateFormat = ({ - value, - onChange, - picker = 'date', - showTimeToggle = true, - defaultShowTime = false, - timeFormat: initialTimeFormat = 'HH:mm:ss', - dateFormat: initialDateFormat = 'YYYY-MM-DD', -}) => { - const [selectedFormat, setSelectedFormat] = useState(value || initialDateFormat); - const [isCustom, setIsCustom] = useState(false); - const [showTime, setShowTime] = useState(defaultShowTime); - const [timeFormat, setTimeFormat] = useState(initialTimeFormat); - - // Date format options - const dateFormatOptions = [ - { - label: ( - <> - MMMM Do YYYY - - - ), - value: 'MMMM Do YYYY', - }, - { - label: ( - <> - YYYY-MM-DD - - - ), - value: 'YYYY-MM-DD', - }, - { - label: ( - <> - MM/DD/YY - - - ), - value: 'MM/DD/YY', - }, - { - label: ( - <> - YYYY/MM/DD - - - ), - value: 'YYYY/MM/DD', - }, - { - label: ( - <> - DD/MM/YYYY - - - ), - value: 'DD/MM/YYYY', - }, - { label: 'Custom', value: 'custom' }, - ]; - - // Time format options - const timeFormatOptions = [ - { - label: ( - <> - hh:mm:ss a - - - ), - value: 'hh:mm:ss a', - }, - { - label: ( - <> - HH:mm:ss - - - ), - value: 'HH:mm:ss', - }, - { label: 'Custom', value: 'custom' }, - ]; - - // Get appropriate format for picker type - const getPickerFormat = (pickerType) => { - switch (pickerType) { - case 'week': - return 'YYYY[W]W'; - case 'month': - return 'YYYY-MM'; - case 'quarter': - return 'YYYY[Q]Q'; - case 'year': - return 'YYYY'; - default: - return 'YYYY-MM-DD'; - } - }; - - // Update format when picker changes - useEffect(() => { - if (picker !== 'date') { - const newFormat = getPickerFormat(picker); - setSelectedFormat(newFormat); - onChange?.(newFormat); - setShowTime(false); - } - }, [picker]); - - // Update parent component with combined format - useEffect(() => { - let finalFormat = selectedFormat; - - if (showTime && picker === 'date') { - finalFormat = `${selectedFormat} ${timeFormat}`; - } - - onChange?.(finalFormat); - }, [selectedFormat, showTime, timeFormat]); - - // Handle date format change - const handleDateFormatChange = (e) => { - const format = e.target.value; - - if (format === 'custom') { - setIsCustom(true); - } else { - setIsCustom(false); - setSelectedFormat(format); - } - }; - - // Handle custom format input - const handleCustomFormatChange = (e) => { - setSelectedFormat(e.target.value); - }; - - // Handle time format change - const handleTimeFormatChange = (e) => { - setTimeFormat(e.target.value); - }; - - // Handle show time toggle - const handleShowTimeChange = (e) => { - setShowTime(e.target.checked); - }; - - return ( -
-
- - - {dateFormatOptions.map((option) => ( - - {option.value === 'custom' ? ( - <> - e.stopPropagation()} - /> - - - ) : ( - option.label - )} - - ))} - - -
- - {showTimeToggle && picker === 'date' && ( - <> -
- - Show time - -
- - {showTime && ( -
-
Time format
- - - {timeFormatOptions.map((option) => ( - - {option.value === 'custom' ? ( - <> - setTimeFormat(e.target.value)} - onClick={(e) => e.stopPropagation()} - /> - - - ) : ( - option.label - )} - - ))} - - -
- )} - - )} -
- ); -}; - -class DemoPlugin extends Plugin { - async load() { - this.app.router.add('root', { path: '/', Component: DateFormat }); - } -} - -const app = mockApp({ - plugins: [DemoPlugin], - components: { - TableBlockProvider, - }, -}); - -export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/variable/index.md b/packages/core/client/src/schema-component/antd/variable/index.md index 721babdb32..4e824de686 100644 --- a/packages/core/client/src/schema-component/antd/variable/index.md +++ b/packages/core/client/src/schema-component/antd/variable/index.md @@ -12,8 +12,8 @@ Scope 用于定义变量的基本属性，包括： - `type`: 变量类型 变量的 `type` 属性会匹配对应的 helper 函数，用于对变量进行二次处理。目前内置了以下 helper： -- `date.format`: 日期格式化 -- `date.offset`: 日期偏移 +- `date.date_format`: 日期格式化 +- `date.date_offset`: 日期偏移 只有类型为 `date` 的变量才能匹配到对应的过滤器，其他类型或无类型的变量无法使用这些过滤器。 @@ -30,12 +30,12 @@ const scope = [ 目前支持两个内置的 helper 函数： -1. **date.format** +1. **date_format** - 用于格式化日期变量 - 支持常见的日期格式，如 'YYYY-MM-DD'、'YYYY-MM-DD HH:mm:ss' 等 - 示例：`{{$date.now | date.format 'YYYY-MM-DD'}}` -2. **date.offset** +2. **date_offset** - 用于对日期进行偏移计算 - 支持年、月、日、时、分、秒的偏移 - 示例：`{{$date.now | date.offset '1d'}}`（向后偏移1天） @@ -80,8 +80,6 @@ const scope = [ #### 2. 数据范围 -### dateFormat 组件优化 - ### 变量禁用状态 当变量被禁用时，已选中的变量值仍然保持显示。下面的示例展示了 `now` 变量被禁用的情况： diff --git a/packages/core/json-template-parser/src/filters/array.ts b/packages/core/json-template-parser/src/filters/array.ts deleted file mode 100644 index 9e51f77de8..0000000000 --- a/packages/core/json-template-parser/src/filters/array.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * 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. - */ - -export function first(initialValue: any) { - return Array.isArray(initialValue) ? initialValue[0] : initialValue; -} - -export function last(initialValue: any) { - return Array.isArray(initialValue) ? initialValue[initialValue.length - 1] : initialValue; -} diff --git a/packages/core/json-template-parser/src/filters/date.ts b/packages/core/json-template-parser/src/filters/date.ts deleted file mode 100644 index 8cae18cd1b..0000000000 --- a/packages/core/json-template-parser/src/filters/date.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * 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 dayjs from 'dayjs'; -import advancedFormat from 'dayjs/plugin/advancedFormat'; -import customParseFormat from 'dayjs/plugin/customParseFormat'; -import IsBetween from 'dayjs/plugin/isBetween'; -import IsSameOrAfter from 'dayjs/plugin/isSameOrAfter'; -import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; -import isoWeek from 'dayjs/plugin/isoWeek'; -import localeData from 'dayjs/plugin/localeData'; -import quarterOfYear from 'dayjs/plugin/quarterOfYear'; -import tz from 'dayjs/plugin/timezone'; -import utc from 'dayjs/plugin/utc'; -import weekOfYear from 'dayjs/plugin/weekOfYear'; -import weekYear from 'dayjs/plugin/weekYear'; -import weekday from 'dayjs/plugin/weekday'; - -dayjs.extend(weekday); -dayjs.extend(localeData); -dayjs.extend(tz); -dayjs.extend(utc); -dayjs.extend(quarterOfYear); -dayjs.extend(isoWeek); -dayjs.extend(IsBetween); -dayjs.extend(IsSameOrAfter); -dayjs.extend(isSameOrBefore); -dayjs.extend(weekOfYear); -dayjs.extend(weekYear); -dayjs.extend(customParseFormat); -dayjs.extend(advancedFormat); - -export function dateFormat(initialValue: any, format: string) { - return dayjs.isDayjs(initialValue) ? initialValue.format(format) : dayjs(initialValue).format(format); -} - -export function dateAdd(initialValue: any, number: number, unit: any) { - const value = dayjs.isDayjs(initialValue) ? initialValue : dayjs(initialValue); - return value.add(number, unit); -} - -export function dateSubtract(initialValue: any, number: number, unit: any) { - const value = dayjs.isDayjs(initialValue) ? initialValue : dayjs(initialValue); - return value.subtract(number, unit); -} diff --git a/packages/core/json-template-parser/src/filters/index.ts b/packages/core/json-template-parser/src/filters/index.ts deleted file mode 100644 index e28ada99c8..0000000000 --- a/packages/core/json-template-parser/src/filters/index.ts +++ /dev/null @@ -1,110 +0,0 @@ -/** - * 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 { dateFormat, dateAdd, dateSubtract } from './date'; -import { first, last } from './array'; -const NAMESPACE = 'json-templates'; -const tval = (key) => `{{t('${key}', { ns: '${NAMESPACE}', nsMode: 'fallback' })}}`; -export const variableFilters = [ - { - name: 'date_format', - title: 'format', - handler: dateFormat, - group: 'date', - sort: 1, - uiSchema: [ - { - name: 'format', - title: tval('Format'), - 'x-component': 'Input', - type: 'string', - required: true, - }, - ], - }, - { - name: 'date_add', - title: 'add', - handler: dateAdd, - group: 'date', - sort: 2, - uiSchema: [ - { - name: 'number', - title: tval('Number'), - type: 'number', - 'x-component': 'InputNumber', - required: true, - }, - { - name: 'unit', - title: tval('Unit'), - type: 'string', - required: true, - 'x-component': 'Select', - enum: [ - { label: tval('Year'), value: 'year' }, - { label: tval('Month'), value: 'month' }, - { label: tval('Day'), value: 'day' }, - ], - }, - ], - }, - { - name: 'date_subtract', - title: 'substract', - handler: dateSubtract, - group: 'date', - sort: 3, - uiSchema: [ - { - name: 'number', - title: tval('Number'), - type: 'number', - 'x-component': 'InputNumber', - required: true, - }, - { - name: 'unit', - title: tval('Unit'), - type: 'string', - required: true, - 'x-component': 'Select', - enum: [ - { label: tval('Year'), value: 'year' }, - { label: tval('Month'), value: 'month' }, - { label: tval('Day'), value: 'day' }, - ], - }, - ], - }, - { - name: 'array_first', - title: 'first', - handler: first, - sort: 4, - group: 'array', - }, - { - name: 'array_last', - title: 'last', - sort: 5, - handler: first, - group: 'array', - }, -]; - -export const filterGroups = [ - { - name: 'date', - title: "{{t('Date')}}", - sort: 1, - }, - { name: 'array', title: "{{t('Array')}}", sort: 2 }, -]; diff --git a/packages/core/json-template-parser/src/index.ts b/packages/core/json-template-parser/src/index.ts index 6d337eadef..b66fa6518a 100644 --- a/packages/core/json-template-parser/src/index.ts +++ b/packages/core/json-template-parser/src/index.ts @@ -8,7 +8,6 @@ */ export * from './escape'; -export * from './filters'; export * from './parser'; export * from './types'; export * from './utils';