feat: improve

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 (
       <>
-        <HelperComponent
-          value={helper.argsMap}
-          onChange={(values) => (rawHelper.argsMap = values)}
-          inputValue={inputValue}
-        />
+        {HelperComponent ? (
+          <HelperComponent
+            value={helper.argsMap}
+            onChange={(values) => (rawHelper.argsMap = values)}
+            inputValue={inputValue}
+          />
+        ) : (
+          <SchemaComponent
+            components={{ InputValue, OuputValue }}
+            schema={schema}
+            scope={{
+              t: app.i18n.t,
+              useFormBlockProps,
+              useDeleteActionProps,
+              useCloseActionProps,
+            }}
+            basePath={['']}
+          />
+        )}
         <MyButtons onDelete={() => removeHelper({ index: index })} onClose={close} />
       </>
-    ) : (
-      <SchemaComponent
-        components={{ InputValue, OuputValue }}
-        schema={schema}
-        scope={{
-          t: app.i18n.t,
-          useFormBlockProps,
-          useDeleteActionProps,
-          useCloseActionProps,
-        }}
-        basePath={['']}
-      />
     );
   },
   { displayName: 'Configurator' },

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',

packages/core/client/src/schema-component/antd/variable/demos/format-configuator.tsx

@@ -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 (
-    <span
-      style={{
-        display: 'inline-block',
-        background: '#f5f5f5',
-        marginLeft: 8,
-        lineHeight: '1',
-        padding: 4,
-        borderRadius: 4,
-      }}
-    >
-      {content}
-    </span>
-  );
-};
-
-// 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: (
-        <>
-          <span>MMMM Do YYYY</span>
-          <DateFormatPreview format="MMMM Do YYYY" />
-        </>
-      ),
-      value: 'MMMM Do YYYY',
-    },
-    {
-      label: (
-        <>
-          <span>YYYY-MM-DD</span>
-          <DateFormatPreview format="YYYY-MM-DD" />
-        </>
-      ),
-      value: 'YYYY-MM-DD',
-    },
-    {
-      label: (
-        <>
-          <span>MM/DD/YY</span>
-          <DateFormatPreview format="MM/DD/YY" />
-        </>
-      ),
-      value: 'MM/DD/YY',
-    },
-    {
-      label: (
-        <>
-          <span>YYYY/MM/DD</span>
-          <DateFormatPreview format="YYYY/MM/DD" />
-        </>
-      ),
-      value: 'YYYY/MM/DD',
-    },
-    {
-      label: (
-        <>
-          <span>DD/MM/YYYY</span>
-          <DateFormatPreview format="DD/MM/YYYY" />
-        </>
-      ),
-      value: 'DD/MM/YYYY',
-    },
-    { label: 'Custom', value: 'custom' },
-  ];
-
-  // Time format options
-  const timeFormatOptions = [
-    {
-      label: (
-        <>
-          <span>hh:mm:ss a</span>
-          <DateFormatPreview format="hh:mm:ss a" />
-        </>
-      ),
-      value: 'hh:mm:ss a',
-    },
-    {
-      label: (
-        <>
-          <span>HH:mm:ss</span>
-          <DateFormatPreview format="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 (
-    <div>
-      <div
-        className={css`
-          .ant-radio-wrapper {
-            display: flex;
-            margin: 5px 0;
-            align-items: center;
-          }
-        `}
-      >
-        <Radio.Group value={isCustom ? 'custom' : selectedFormat} onChange={handleDateFormatChange}>
-          <Space direction="vertical">
-            {dateFormatOptions.map((option) => (
-              <Radio key={option.value} value={option.value}>
-                {option.value === 'custom' ? (
-                  <>
-                    <Input
-                      style={{ width: 150, marginRight: 8 }}
-                      value={selectedFormat}
-                      onChange={handleCustomFormatChange}
-                      onClick={(e) => e.stopPropagation()}
-                    />
-                    <DateFormatPreview format={selectedFormat} />
-                  </>
-                ) : (
-                  option.label
-                )}
-              </Radio>
-            ))}
-          </Space>
-        </Radio.Group>
-      </div>
-
-      {showTimeToggle && picker === 'date' && (
-        <>
-          <div style={{ margin: '12px 0' }}>
-            <Checkbox checked={showTime} onChange={handleShowTimeChange}>
-              Show time
-            </Checkbox>
-          </div>
-
-          {showTime && (
-            <div
-              className={css`
-                .ant-radio-wrapper {
-                  display: flex;
-                  margin: 5px 0;
-                  align-items: center;
-                }
-              `}
-            >
-              <div style={{ marginBottom: 8 }}>Time format</div>
-              <Radio.Group value={timeFormat} onChange={handleTimeFormatChange}>
-                <Space direction="vertical">
-                  {timeFormatOptions.map((option) => (
-                    <Radio key={option.value} value={option.value}>
-                      {option.value === 'custom' ? (
-                        <>
-                          <Input
-                            style={{ width: 150, marginRight: 8 }}
-                            value={timeFormat}
-                            onChange={(e) => setTimeFormat(e.target.value)}
-                            onClick={(e) => e.stopPropagation()}
-                          />
-                          <DateFormatPreview format={timeFormat} />
-                        </>
-                      ) : (
-                        option.label
-                      )}
-                    </Radio>
-                  ))}
-                </Space>
-              </Radio.Group>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
-
-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();

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. 数据范围
 <code src="./demos/data-scope-demo.tsx"></code>
 
-### dateFormat 组件优化
-<code src="./demos/format-configuator.tsx"></code>
 ### 变量禁用状态
 当变量被禁用时，已选中的变量值仍然保持显示。下面的示例展示了 `now` 变量被禁用的情况：
 

packages/core/json-template-parser/src/filters/array.ts

@@ -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;
-}

packages/core/json-template-parser/src/filters/date.ts

@@ -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);
-}

packages/core/json-template-parser/src/filters/index.ts

@@ -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 },
-];

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';