feat: refactor helper configuration and enhance date formatting component

packages/core/client/src/schema-component/antd/variable/Helpers/HelperConfiguator.tsx

@@ -9,7 +9,7 @@
 import { createForm, onFormValuesChange } from '@formily/core';
 import { observer, useForm } from '@formily/react';
 import { dayjs, tval, uid } from '@nocobase/utils/client';
-import { Tag } from 'antd';
+import { Button, Card, Space, Tag } from 'antd';
 import { createMemoryHistory } from 'history';
 import debounce from 'lodash/debounce';
 import minimatch from 'minimatch';
@@ -72,8 +72,9 @@ const Configurator = observer(
     const { helpersObs, rawHelpersObs, removeHelper } = helperObservables;
     const helper = helpersObs.value[index];
     const rawHelper = rawHelpersObs.value[index];
-    const helperConfigs = app.jsonTemplateParser.filters;
+    const helperConfigs = app.jsonTemplateParser.helpers;
     const helperConfig = helperConfigs.find((item) => item.name === helper.name);
+    const HelperComponent = helperConfig.Component;
     const previousHelpers = helpersObs.value.slice(0, index);
     const inputValue = previousHelpers.reduce((value, helper) => {
       return helper.handler(value, ...helper.args);
@@ -184,7 +185,16 @@ const Configurator = observer(
       },
     };
 
-    return (
+    return HelperComponent ? (
+      <>
+        <HelperComponent
+          value={helper.argsMap}
+          onChange={(values) => (rawHelper.argsMap = values)}
+          inputValue={inputValue}
+        />
+        <MyButtons onDelete={() => removeHelper({ index: index })} onClose={close} />
+      </>
+    ) : (
       <SchemaComponent
         components={{ InputValue, OuputValue }}
         schema={schema}
@@ -201,6 +211,23 @@ const Configurator = observer(
   { displayName: 'Configurator' },
 );
 
+// Add a new component for custom delete and close buttons
+export const MyButtons = observer(
+  ({ onDelete, onClose }: { onDelete: () => void; onClose: () => void }) => {
+    const app = useApp();
+    const t = app.i18n.t;
+    return (
+      <Space style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
+        <Button type="primary" danger onClick={onDelete}>
+          {t('Delete', { ns: 'client' })}
+        </Button>
+        <Button onClick={onClose}>{t('Close', { ns: 'client' })}</Button>
+      </Space>
+    );
+  },
+  { displayName: 'MyButtons' },
+);
+
 const WithRouter = observer(
   ({ children }: { children: React.ReactNode }) => {
     const history = createMemoryHistory();

packages/core/client/src/schema-component/antd/variable/Helpers/observables/index.ts

@@ -22,7 +22,7 @@ type RawHelper = {
 
 const parser = createJSONTemplateParser();
 
-export const allHelpersConfigObs = observable<{ value: any[] }>({ value: parser.filters });
+export const allHelpersConfigObs = observable<{ value: any[] }>({ value: parser.helpers });
 
 export const createHelperObservables = () => {
   const rawHelpersObs = observable<{ value: RawHelper[] }>({ value: [] });
@@ -38,6 +38,7 @@ export const createHelperObservables = () => {
         config,
         args,
         handler: config.handler,
+        Component: config.Component,
       };
     });
   }) as { value: Helper[] };

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

@@ -10,21 +10,13 @@
 import { Liquid, TokenKind } from 'liquidjs';
 import { get } from 'lodash';
 import { escape, revertEscape } from '../escape';
+import { Helper } from '../types';
 type FilterGroup = {
   name: string;
   title: string;
   sort: number;
 };
 
-type Helper = {
-  name: string;
-  title: string;
-  handler: (...args: any[]) => any;
-  group: string;
-  uiSchema?: any;
-  sort: number;
-};
-
 type ScopeFnWrapperResult = {
   getValue: (params: { field: string[]; keys: string[] }) => any;
   afterApplyHelpers: (params: { field: string[]; keys: string[]; value: any }) => any;
@@ -48,7 +40,7 @@ export class JSONTemplateParser {
     this._filters = [];
   }
 
-  get filters(): Array<Helper> {
+  get helpers(): Array<Helper> {
     return this._filters;
   }
 

packages/core/json-template-parser/src/types.ts

@@ -18,5 +18,5 @@ export type Helper = {
   sort: number;
   args: string[];
   uiSchema?: any[];
-  Component?: React.FC<{ value: any; onChange: (value: any) => void }>;
+  Component?: React.FC<{ value: any; onChange: (value: any) => void; inputValue: any }>;
 };

packages/plugins/@nocobase/plugin-variable-helpers/src/client/components/DateFormatter.tsx

@@ -10,11 +10,11 @@
 import { css } from '@emotion/css';
 import { Checkbox, Input, Radio, Space } from 'antd';
 import dayjs from 'dayjs';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 // Component for displaying a date format preview
-const DateFormatPreview = ({ format }) => {
-  const content = format ? dayjs().format(format) : null;
+const DateFormatPreview = ({ format, date }) => {
+  const content = format ? date.format(format) : null;
 
   if (!content) return null;
 
@@ -38,16 +38,24 @@ const DateFormatPreview = ({ format }) => {
 const DateFormat = ({
   value,
   onChange,
+  inputValue,
   picker = 'date',
   showTimeToggle = true,
   defaultShowTime = false,
   timeFormat: initialTimeFormat = 'HH:mm:ss',
   dateFormat: initialDateFormat = 'YYYY-MM-DD',
 }) => {
-  const [selectedFormat, setSelectedFormat] = useState(value || initialDateFormat);
+  const [selectedFormat, setSelectedFormat] = useState(value.format || initialDateFormat);
   const [isCustom, setIsCustom] = useState(false);
   const [showTime, setShowTime] = useState(defaultShowTime);
   const [timeFormat, setTimeFormat] = useState(initialTimeFormat);
+  const date = dayjs.isDayjs(inputValue) ? inputValue : dayjs(inputValue);
+  const onFormatChange = useCallback(
+    (format) => {
+      onChange?.({ format });
+    },
+    [onChange],
+  );
 
   // Date format options
   const dateFormatOptions = [
@@ -55,7 +63,7 @@ const DateFormat = ({
       label: (
         <>
           <span>MMMM Do YYYY</span>
-          <DateFormatPreview format="MMMM Do YYYY" />
+          <DateFormatPreview date={date} format="MMMM Do YYYY" />
         </>
       ),
       value: 'MMMM Do YYYY',
@@ -64,7 +72,7 @@ const DateFormat = ({
       label: (
         <>
           <span>YYYY-MM-DD</span>
-          <DateFormatPreview format="YYYY-MM-DD" />
+          <DateFormatPreview date={date} format="YYYY-MM-DD" />
         </>
       ),
       value: 'YYYY-MM-DD',
@@ -73,7 +81,7 @@ const DateFormat = ({
       label: (
         <>
           <span>MM/DD/YY</span>
-          <DateFormatPreview format="MM/DD/YY" />
+          <DateFormatPreview date={date} format="MM/DD/YY" />
         </>
       ),
       value: 'MM/DD/YY',
@@ -82,7 +90,7 @@ const DateFormat = ({
       label: (
         <>
           <span>YYYY/MM/DD</span>
-          <DateFormatPreview format="YYYY/MM/DD" />
+          <DateFormatPreview date={date} format="YYYY/MM/DD" />
         </>
       ),
       value: 'YYYY/MM/DD',
@@ -91,7 +99,7 @@ const DateFormat = ({
       label: (
         <>
           <span>DD/MM/YYYY</span>
-          <DateFormatPreview format="DD/MM/YYYY" />
+          <DateFormatPreview date={date} format="DD/MM/YYYY" />
         </>
       ),
       value: 'DD/MM/YYYY',
@@ -105,7 +113,7 @@ const DateFormat = ({
       label: (
         <>
           <span>hh:mm:ss a</span>
-          <DateFormatPreview format="hh:mm:ss a" />
+          <DateFormatPreview date={date} format="hh:mm:ss a" />
         </>
       ),
       value: 'hh:mm:ss a',
@@ -114,7 +122,7 @@ const DateFormat = ({
       label: (
         <>
           <span>HH:mm:ss</span>
-          <DateFormatPreview format="HH:mm:ss" />
+          <DateFormatPreview date={date} format="HH:mm:ss" />
         </>
       ),
       value: 'HH:mm:ss',
@@ -143,10 +151,10 @@ const DateFormat = ({
     if (picker !== 'date') {
       const newFormat = getPickerFormat(picker);
       setSelectedFormat(newFormat);
-      onChange?.(newFormat);
+      onFormatChange(newFormat);
       setShowTime(false);
     }
-  }, [picker]);
+  }, [picker, onFormatChange]);
 
   // Update parent component with combined format
   useEffect(() => {
@@ -156,8 +164,8 @@ const DateFormat = ({
       finalFormat = `${selectedFormat} ${timeFormat}`;
     }
 
-    onChange?.(finalFormat);
-  }, [selectedFormat, showTime, timeFormat]);
+    onFormatChange(finalFormat);
+  }, [selectedFormat, showTime, timeFormat, onFormatChange, picker]);
 
   // Handle date format change
   const handleDateFormatChange = (e) => {
@@ -209,7 +217,7 @@ const DateFormat = ({
                       onChange={handleCustomFormatChange}
                       onClick={(e) => e.stopPropagation()}
                     />
-                    <DateFormatPreview format={selectedFormat} />
+                    <DateFormatPreview date={date} format={selectedFormat} />
                   </>
                 ) : (
                   option.label
@@ -251,7 +259,7 @@ const DateFormat = ({
                             onChange={(e) => setTimeFormat(e.target.value)}
                             onClick={(e) => e.stopPropagation()}
                           />
-                          <DateFormatPreview format={timeFormat} />
+                          <DateFormatPreview date={date} format={timeFormat} />
                         </>
                       ) : (
                         option.label

packages/plugins/@nocobase/plugin-variable-helpers/src/json-template-helpers/date.ts

@@ -77,8 +77,7 @@ export function dateOffset(initialValue: any, action: 'add' | 'subtract', number
       return dayjs.isDayjs(value) ? value.add(number, unit) : dayjs(value).add(number, unit);
     } else if (action === 'subtract') {
       return dayjs.isDayjs(value) ? value.subtract(number, unit) : dayjs(value).subtract(number, unit);
-    }
-    throw new Error('Invalid action');
+    } else return initialValue;
   };
   return handler(initialValue);
 }