@nocobase/client-v2 3.0.0-alpha.6 → 3.0.0-alpha.8

package/src/flow/components/FieldAssignValueInput.tsx

@@ -8,21 +8,12 @@
  */
 
 import React from 'react';
-import { css } from '@emotion/css';
-import { Divider, Input, InputNumber, Select, Space, theme } from 'antd';
-import { dayjs } from '@nocobase/utils/client';
+import { Input } from 'antd';
 import {
   FlowModelRenderer,
-  VariableInput,
-  tExpr,
-  isVariableExpression,
-  parseValueToPath,
-  isRunJSValue,
-  isCtxDateExpression,
-  parseCtxDateExpression,
-  serializeCtxDateValue,
   type CollectionField,
   type MetaTreeNode,
+  type VariableInputProps,
   useFlowContext,
   EditableItemModel,
   FlowModelContext,
@@ -39,289 +30,21 @@ import { RunJSValueEditor } from './RunJSValueEditor';
 import { pickOperatorStyle as pickStyle, resolveOperatorComponent } from '../internal/utils/operatorSchemaHelper';
 import { InputFieldModel } from '../models/fields/InputFieldModel';
 import { normalizeFilterValueByOperator } from '../models/blocks/filter-form/valueNormalization';
-import { FieldAssignExactDatePicker, type ExactDatePickerMode } from './FieldAssignExactDatePicker';
 import { limitAssociationMetaTree } from './filter/metaTreeAssociationDepth';
-
-type VariableInputConverters = {
-  renderInputComponent?: (metaTreeNode: MetaTreeNode | null) => React.ComponentType<any> | null;
-  resolvePathFromValue?: (value: any) => string[] | undefined;
-  resolveValueFromPath?: (metaTreeNode: MetaTreeNode) => any;
-};
-
-const DATE_FIELD_INTERFACES = new Set(['date', 'datetime', 'datetimeNoTz', 'createdAt', 'updatedAt', 'unixTimestamp']);
-
-const TZ_AWARE_DATE_INTERFACES = new Set(['datetime', 'createdAt', 'updatedAt', 'unixTimestamp']);
-
-const DATE_ONLY_OUTPUT_FORMAT = 'YYYY-MM-DD';
-const DATETIME_NO_TZ_OUTPUT_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-
-export type DateVariableExactNormalizeMode = 'none' | 'date' | 'datetimeNoTz' | 'iso';
-
-const DATE_DYNAMIC_OPTION_KEYS = [
-  'exact',
-  'past',
-  'next',
-  'today',
-  'yesterday',
-  'tomorrow',
-  'thisWeek',
-  'lastWeek',
-  'nextWeek',
-  'thisMonth',
-  'lastMonth',
-  'nextMonth',
-  'thisQuarter',
-  'lastQuarter',
-  'nextQuarter',
-  'thisYear',
-  'lastYear',
-  'nextYear',
-] as const;
-
-type DateDynamicOptionValue = (typeof DATE_DYNAMIC_OPTION_KEYS)[number] | 'now';
-
-const DATE_DYNAMIC_OPTION_LABELS: Record<(typeof DATE_DYNAMIC_OPTION_KEYS)[number], string> = {
-  exact: 'Exact day',
-  past: 'Past',
-  next: 'Next',
-  today: 'Today',
-  yesterday: 'Yesterday',
-  tomorrow: 'Tomorrow',
-  thisWeek: 'This Week',
-  lastWeek: 'Last Week',
-  nextWeek: 'Next Week',
-  thisMonth: 'This Month',
-  lastMonth: 'Last Month',
-  nextMonth: 'Next Month',
-  thisQuarter: 'This Quarter',
-  lastQuarter: 'Last Quarter',
-  nextQuarter: 'Next Quarter',
-  thisYear: 'This Year',
-  lastYear: 'Last Year',
-  nextYear: 'Next Year',
-};
-
-function buildDateDynamicOptions(t?: (key: string) => string, includeNow = false) {
-  const options: Array<{ value: DateDynamicOptionValue; label: string }> = DATE_DYNAMIC_OPTION_KEYS.map((key) => ({
-    value: key,
-    label: t?.(DATE_DYNAMIC_OPTION_LABELS[key]) ?? DATE_DYNAMIC_OPTION_LABELS[key],
-  }));
-
-  if (includeNow) {
-    options.splice(3, 0, { value: 'now', label: t?.('Now') ?? 'Now' });
-  }
-
-  return options;
-}
-
-function parseDateByFormat(value: string, format: string): dayjs.Dayjs | null {
-  const raw = String(value || '').trim();
-  if (!raw) return null;
-
-  const hasTimezone = /(?:Z|[+-]\d{2}:\d{2})$/i.test(raw);
-  if (hasTimezone) {
-    const parsed = dayjs(raw);
-    if (parsed.isValid()) {
-      return parsed;
-    }
-  }
-
-  if (format) {
-    const strict = dayjs(raw, format, true);
-    if (strict.isValid()) {
-      return strict;
-    }
-  }
-
-  const fallback = dayjs(raw);
-  if (fallback.isValid()) {
-    return fallback;
-  }
-
-  if (format) {
-    const loose = dayjs(raw, format);
-    if (loose.isValid()) {
-      return loose;
-    }
-  }
-
-  return null;
-}
-
-function parseDateFromRawValue(value: unknown, format: string): dayjs.Dayjs | null {
-  if (dayjs.isDayjs(value)) {
-    return value;
-  }
-
-  if (value instanceof Date) {
-    const parsedDate = dayjs(value);
-    return parsedDate.isValid() ? parsedDate : null;
-  }
-
-  if (typeof value === 'string') {
-    return parseDateByFormat(value, format);
-  }
-
-  return null;
-}
-
-function normalizeExactDateValue(
-  value: unknown,
-  options: {
-    format: string;
-    showTime: boolean;
-    exactNormalizeMode: DateVariableExactNormalizeMode;
-  },
-): unknown {
-  const parsed = parseDateFromRawValue(value, options.format);
-  if (!parsed?.isValid()) {
-    return value;
-  }
-
-  switch (options.exactNormalizeMode) {
-    case 'date':
-      return parsed.format(DATE_ONLY_OUTPUT_FORMAT);
-    case 'datetimeNoTz':
-      return parsed.format(options.showTime ? DATETIME_NO_TZ_OUTPUT_FORMAT : DATE_ONLY_OUTPUT_FORMAT);
-    case 'iso':
-      return parsed.toISOString();
-    default:
-      return value;
-  }
-}
-
-function toExactPickerSingleValue(rawValue: unknown, format: string): dayjs.Dayjs | null {
-  const parsed = parseDateFromRawValue(rawValue, format);
-  return parsed?.isValid() ? parsed : null;
-}
-
-function toExactPickerRangeValue(rawValue: unknown, format: string): [dayjs.Dayjs, dayjs.Dayjs] | null {
-  if (!Array.isArray(rawValue)) return null;
-  const left = toExactPickerSingleValue(rawValue[0], format);
-  const right = toExactPickerSingleValue(rawValue[1], format);
-  if (!left || !right) return null;
-  return [left, right];
-}
-
-export function toExactPickerDisplayValue(
-  rawValue: unknown,
-  options: {
-    format: string;
-    isRange: boolean;
-  },
-): dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs] | null {
-  if (options.isRange) {
-    return toExactPickerRangeValue(rawValue, options.format);
-  }
-  return toExactPickerSingleValue(rawValue, options.format);
-}
-
-function getDateVariableExactNormalizeMode(fieldInterface: string): DateVariableExactNormalizeMode {
-  if (fieldInterface === 'date') {
-    return 'date';
-  }
-
-  if (fieldInterface === 'datetimeNoTz') {
-    return 'datetimeNoTz';
-  }
-
-  if (TZ_AWARE_DATE_INTERFACES.has(fieldInterface)) {
-    return 'iso';
-  }
-
-  return 'none';
-}
-
-export function normalizeDateVariableExactValue(
-  rawValue: any,
-  options: {
-    exactNormalizeMode: DateVariableExactNormalizeMode;
-    format: string;
-    showTime: boolean;
-  },
-): any {
-  if (options.exactNormalizeMode === 'none') {
-    return rawValue;
-  }
-
-  if (typeof rawValue === 'string') {
-    return normalizeExactDateValue(rawValue, options);
-  }
-
-  if (dayjs.isDayjs(rawValue) || rawValue instanceof Date) {
-    return normalizeExactDateValue(rawValue, options);
-  }
-
-  if (Array.isArray(rawValue)) {
-    return rawValue.map((item) => {
-      if (typeof item === 'string' || dayjs.isDayjs(item) || item instanceof Date) {
-        return normalizeExactDateValue(item, options);
-      }
-      return item;
-    });
-  }
-
-  return rawValue;
-}
-
-type DateVariableComponentProps = {
-  picker: ExactDatePickerMode;
-  showTime: boolean;
-  timeFormat: string;
-  format: string;
-  exactNormalizeMode: DateVariableExactNormalizeMode;
-};
-
-function normalizeExactDatePickerMode(value: unknown): ExactDatePickerMode {
-  if (value === 'year' || value === 'quarter' || value === 'month' || value === 'date') {
-    return value;
-  }
-
-  return 'date';
-}
-
-const DEFAULT_DATE_VARIABLE_COMPONENT_PROPS: DateVariableComponentProps = {
-  picker: 'date',
-  showTime: false,
-  timeFormat: 'HH:mm:ss',
-  format: 'YYYY-MM-DD',
-  exactNormalizeMode: 'none',
-};
-
-function getFieldInterface(field: any): string {
-  return typeof field?.interface === 'string' ? field.interface : '';
-}
-
-function getFieldComponentProps(field: any): Record<string, any> {
-  return (
-    (typeof field?.getComponentProps === 'function' ? field.getComponentProps() : null) ||
-    field?.uiSchema?.['x-component-props'] ||
-    {}
-  );
-}
-
-export function normalizeDateVariableOutput(rawValue: any, options: DateVariableComponentProps): any {
-  if (rawValue === null || isRunJSValue(rawValue)) {
-    return rawValue;
-  }
-
-  if (typeof rawValue === 'string' && isVariableExpression(rawValue) && !isCtxDateExpression(rawValue)) {
-    return rawValue;
-  }
-
-  if (rawValue === '' || typeof rawValue === 'undefined') {
-    return '';
-  }
-
-  const normalized = normalizeDateVariableExactValue(rawValue, {
-    exactNormalizeMode: options.exactNormalizeMode,
-    format: options.format || 'YYYY-MM-DD HH:mm:ss',
-    showTime: options.showTime,
-  });
-
-  const serialized = serializeCtxDateValue(normalized);
-  return serialized || normalized;
-}
+import {
+  DEFAULT_DATE_VARIABLE_COMPONENT_PROPS,
+  FieldValueVariableInput,
+  getFieldInterface,
+  isDateLikeField as isDateLikeCollectionField,
+  resolveDateVariableComponentProps,
+} from './field-value-variable';
+
+export {
+  normalizeDateVariableExactValue,
+  normalizeDateVariableOutput,
+  toExactPickerDisplayValue,
+  type DateVariableExactNormalizeMode,
+} from './field-value-variable';
 
 interface Props {
   /** 赋值目标路径，例如 `title` / `users.nickname` / `user.name` */
@@ -343,15 +66,14 @@ interface Props {
     value?: string;
   };
   /**
-   * 在日期字段场景下，用日期变量编辑器替换 Constant 位。
-   * 默认 false，保持历史行为。
+   * @deprecated Date 已作为独立一级变量提供，此参数仅为调用兼容保留。
    */
   enableDateVariableAsConstant?: boolean;
   /** 是否允许在变量选择器中使用 RunJS。默认 true，保持历史行为。 */
   allowRunJS?: boolean;
   maxAssociationFieldDepth?: number;
   disabled?: boolean;
-  variableConverters?: VariableInputConverters;
+  variableConverters?: VariableInputProps['converters'];
 }
 
 type ResolvedFieldContext = {
@@ -721,7 +443,6 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   operatorMetaList,
   preferFormItemFieldModel,
   associationFieldNamesOverride,
-  enableDateVariableAsConstant = false,
   allowRunJS = true,
   maxAssociationFieldDepth = 2,
   disabled = false,
@@ -905,69 +626,18 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   }, [cf, currentAllowMultiple, itemCollectionField]);
 
   const isDateLikeField = React.useMemo(() => {
-    if (sourceInterface && DATE_FIELD_INTERFACES.has(sourceInterface)) {
-      return true;
-    }
-
     const leaf =
       (typeof fieldName === 'string' && fieldName) ||
       (typeof targetPath === 'string' ? targetPath.split('.').filter(Boolean).slice(-1)[0] : '');
 
-    return leaf === 'createdAt' || leaf === 'updatedAt';
-  }, [fieldName, sourceInterface, targetPath]);
-
-  const useDateVariableConstant = enableDateVariableAsConstant && isDateLikeField;
+    return isDateLikeCollectionField(sourceCollectionField, leaf, sourceInterface);
+  }, [fieldName, sourceCollectionField, sourceInterface, targetPath]);
 
   const dateVariableComponentProps = React.useMemo(() => {
-    if (!useDateVariableConstant) {
-      return DEFAULT_DATE_VARIABLE_COMPONENT_PROPS;
-    }
-
-    const componentProps = getFieldComponentProps(sourceCollectionField);
-
-    const picker = normalizeExactDatePickerMode(componentProps?.picker);
-    const inferredShowTime = ['datetime', 'datetimeNoTz', 'createdAt', 'updatedAt', 'unixTimestamp'].includes(
-      sourceInterface,
-    );
-    const showTime = typeof componentProps?.showTime === 'boolean' ? componentProps.showTime : inferredShowTime;
-
-    const dateFormat =
-      typeof componentProps?.dateFormat === 'string' && componentProps.dateFormat
-        ? componentProps.dateFormat
-        : typeof componentProps?.format === 'string' && componentProps.format
-          ? componentProps.format.split(' ')[0]
-          : 'YYYY-MM-DD';
-    const timeFormat =
-      typeof componentProps?.timeFormat === 'string' && componentProps.timeFormat
-        ? componentProps.timeFormat
-        : 'HH:mm:ss';
-
-    const format =
-      typeof componentProps?.format === 'string' && componentProps.format
-        ? componentProps.format
-        : showTime
-          ? `${dateFormat} ${timeFormat}`
-          : dateFormat;
-
-    return {
-      picker,
-      showTime,
-      timeFormat,
-      format,
-      exactNormalizeMode: getDateVariableExactNormalizeMode(sourceInterface),
-    };
-  }, [sourceCollectionField, sourceInterface, useDateVariableConstant]);
-
-  const dateVariableDisplayProps = React.useMemo(() => {
-    const { exactNormalizeMode, ...rest } = dateVariableComponentProps;
-    return rest;
-  }, [dateVariableComponentProps]);
-
-  const dateVariableDisplayPropsRef = React.useRef(dateVariableDisplayProps);
-  dateVariableDisplayPropsRef.current = dateVariableDisplayProps;
-
-  const dateVariableTranslateRef = React.useRef(flowCtx.t);
-  dateVariableTranslateRef.current = flowCtx.t;
+    return isDateLikeField
+      ? resolveDateVariableComponentProps(sourceCollectionField, sourceInterface)
+      : DEFAULT_DATE_VARIABLE_COMPONENT_PROPS;
+  }, [isDateLikeField, sourceCollectionField, sourceInterface]);
 
   const coerceEmptyValueForRenderer = React.useCallback(
     (v: any) => {
@@ -1255,182 +925,6 @@ export const FieldAssignValueInput: React.FC<Props> = ({
     return C;
   }, [placeholder, tempRoot, coerceEmptyValueForRenderer, normalizeEventValue, operator]);
 
-  const DateVariableConstantEditor = React.useMemo(() => {
-    const C: React.FC<any> = (inputProps) => {
-      const wrapperStyle = pickStyle(inputProps?.style);
-      const raw = inputProps?.value;
-      const isDisabled = Boolean(inputProps?.disabled);
-      const parsed = isCtxDateExpression(raw) ? parseCtxDateExpression(raw) : raw;
-      const parsedValue = typeof parsed === 'undefined' ? undefined : parsed;
-      const { token } = theme.useToken();
-      const [open, setOpen] = React.useState(false);
-      const t = dateVariableTranslateRef.current;
-      const datePickerProps = dateVariableDisplayPropsRef.current;
-      const options = React.useMemo(() => buildDateDynamicOptions(t, true), [t]);
-
-      const dynamicType =
-        parsedValue && typeof parsedValue === 'object' && !Array.isArray(parsedValue)
-          ? (parsedValue as any)?.type
-          : undefined;
-      const selectedType = typeof dynamicType === 'string' && dynamicType ? dynamicType : 'exact';
-      const isRange = Array.isArray(parsedValue);
-      const exactSingleValue = toExactPickerDisplayValue(parsedValue, {
-        format: datePickerProps.format,
-        isRange: false,
-      });
-      const exactRangeValue = toExactPickerDisplayValue(parsedValue, {
-        format: datePickerProps.format,
-        isRange: true,
-      });
-
-      const handleSelect = (val: string) => {
-        if (isDisabled) {
-          return;
-        }
-        setOpen(false);
-        if (val === 'exact') {
-          inputProps?.onChange?.('');
-          return;
-        }
-        const next: any = { type: val };
-        if (val === 'past' || val === 'next') {
-          next.number = 1;
-          next.unit = 'day';
-        }
-        inputProps?.onChange?.(next);
-      };
-
-      const handleExactSingleChange = (nextValue: any) => {
-        if (isDisabled) {
-          return;
-        }
-        inputProps?.onChange?.(nextValue || '');
-      };
-
-      const handleExactRangeChange = (nextValue: any) => {
-        if (isDisabled) {
-          return;
-        }
-        inputProps?.onChange?.(nextValue || '');
-      };
-
-      const dropdownRender = () => {
-        const firstPart = options.slice(0, 3);
-        const secondPart = options.slice(3);
-        const optionStyle = css`
-          padding: 3px 10px;
-          cursor: pointer;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          &:hover {
-            background-color: ${token.colorFillSecondary};
-          }
-        `;
-        return (
-          <div style={{ maxHeight: 300, overflowY: 'auto' }}>
-            {firstPart.map((opt) => (
-              <div key={opt.value} role="option" onClick={() => handleSelect(opt.value)} className={optionStyle}>
-                {opt.label}
-              </div>
-            ))}
-            <Divider style={{ margin: '4px 0' }} />
-            {secondPart.map((opt) => (
-              <div
-                key={opt.value}
-                role="option"
-                className={optionStyle}
-                onClick={() => handleSelect(opt.value)}
-                title={opt.label}
-              >
-                {opt.label}
-              </div>
-            ))}
-          </div>
-        );
-      };
-
-      return (
-        <Space.Compact style={withFullWidthStyle(wrapperStyle)}>
-          <Select
-            options={options}
-            open={open}
-            onDropdownVisibleChange={(nextOpen) => {
-              if (!isDisabled) {
-                setOpen(nextOpen);
-              }
-            }}
-            allowClear={false}
-            style={{
-              width: '100%',
-              minWidth: 100,
-              maxWidth: ['past', 'next', 'exact', undefined].includes(dynamicType) ? 100 : null,
-            }}
-            value={selectedType}
-            onChange={handleSelect}
-            dropdownRender={dropdownRender}
-            disabled={isDisabled}
-          />
-          {['past', 'next'].includes(selectedType) && [
-            <InputNumber
-              key="number"
-              style={{ flex: 1 }}
-              value={(parsedValue as any)?.number}
-              disabled={isDisabled}
-              onChange={(nextNumber) => {
-                if (isDisabled) {
-                  return;
-                }
-                inputProps?.onChange?.({
-                  ...(parsedValue as any),
-                  type: selectedType,
-                  number: nextNumber,
-                  unit: (parsedValue as any)?.unit || 'day',
-                });
-              }}
-            />,
-            <Select
-              key="unit"
-              value={(parsedValue as any)?.unit}
-              style={{ minWidth: 130, maxWidth: 140 }}
-              disabled={isDisabled}
-              onChange={(nextUnit) => {
-                if (isDisabled) {
-                  return;
-                }
-                inputProps?.onChange?.({
-                  ...(parsedValue as any),
-                  type: selectedType,
-                  unit: nextUnit,
-                  number: (parsedValue as any)?.number || 1,
-                });
-              }}
-              options={[
-                { value: 'day', label: t?.('Day') ?? 'Day' },
-                { value: 'week', label: t?.('Calendar week') ?? 'Calendar week' },
-                { value: 'month', label: t?.('Calendar Month') ?? 'Calendar Month' },
-                { value: 'year', label: t?.('Calendar Year') ?? 'Calendar Year' },
-              ]}
-              popupMatchSelectWidth
-            />,
-          ]}
-          {(selectedType === 'exact' || !selectedType) && (
-            <FieldAssignExactDatePicker
-              {...datePickerProps}
-              isRange={isRange}
-              value={isRange ? exactRangeValue : exactSingleValue}
-              onChange={isRange ? handleExactRangeChange : handleExactSingleChange}
-              disabled={isDisabled}
-              style={{ flex: 1 }}
-            />
-          )}
-        </Space.Compact>
-      );
-    };
-
-    return C;
-  }, []);
-
   const NullComponent = React.useMemo(() => {
     const N: React.FC = () => (
       <Input placeholder={`<${flowCtx.t?.('Null') ?? 'Null'}>`} readOnly style={{ width: '100%' }} />
@@ -1450,60 +944,15 @@ export const FieldAssignValueInput: React.FC<Props> = ({
     return C;
   }, [flowCtx]);
 
-  const ConstantEditor = useDateVariableConstant ? DateVariableConstantEditor : ConstantValueEditor;
-
-  const metaTree = React.useMemo<() => Promise<any[]>>(() => {
+  const baseMetaTree = React.useMemo<() => Promise<MetaTreeNode[]>>(() => {
     return async () => {
       const base = (await flowCtx.getPropertyMetaTree?.()) || [];
       const extra = extraMetaTreeRef.current;
       const extraTree = Array.isArray(extra) ? extra : [];
       const mergedBase = mergeItemMetaTreeForAssignValue(base as MetaTreeNode[], extraTree as MetaTreeNode[]);
-      const limitedBase = limitAssociationMetaTree(mergedBase, { maxAssociationDepth: maxAssociationFieldDepth });
-      return [
-        {
-          title: tExpr('Constant'),
-          name: 'constant',
-          type: 'string',
-          paths: ['constant'],
-          render: ConstantEditor,
-        },
-        { title: tExpr('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
-        ...(allowRunJS
-          ? [{ title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent }]
-          : []),
-        ...limitedBase,
-      ];
+      return limitAssociationMetaTree(mergedBase, { maxAssociationDepth: maxAssociationFieldDepth });
     };
-  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, allowRunJS, maxAssociationFieldDepth]);
-
-  const displayValue = React.useMemo(() => {
-    if (!useDateVariableConstant) {
-      return value;
-    }
-
-    if (isCtxDateExpression(value)) {
-      const parsed = parseCtxDateExpression(value);
-      return typeof parsed === 'undefined' ? '' : parsed;
-    }
-
-    return value;
-  }, [useDateVariableConstant, value]);
-
-  const handleVariableInputChange = React.useCallback(
-    (nextValue: any) => {
-      if (disabled) {
-        return;
-      }
-
-      if (!useDateVariableConstant) {
-        onChange(nextValue);
-        return;
-      }
-
-      onChange(normalizeDateVariableOutput(nextValue, dateVariableComponentProps));
-    },
-    [dateVariableComponentProps, disabled, onChange, useDateVariableConstant],
-  );
+  }, [flowCtx, maxAssociationFieldDepth]);
 
   if (!fieldPath) {
     // 不可用占位
@@ -1511,52 +960,20 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   }
 
   return (
-    <VariableInput
-      value={displayValue}
-      onChange={handleVariableInputChange}
-      metaTree={metaTree}
+    <FieldValueVariableInput
+      value={value}
+      onChange={onChange}
+      baseMetaTree={baseMetaTree}
+      constantComponent={ConstantValueEditor}
+      nullComponent={NullComponent}
+      runJSComponent={RunJSComponent}
+      isDateLikeField={isDateLikeField}
+      dateComponentProps={dateVariableComponentProps}
       style={{ width: '100%' }}
       clearValue={''}
+      allowRunJS={allowRunJS}
       disabled={disabled}
-      converters={{
-        ...variableConverters,
-        renderInputComponent: (meta) => {
-          const external = variableConverters?.renderInputComponent?.(meta ?? null);
-          if (external) {
-            return external;
-          }
-          const firstPath = meta?.paths?.[0];
-          if (firstPath === 'constant') return ConstantEditor;
-          if (firstPath === 'null') return NullComponent;
-          if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
-          return null;
-        },
-        resolveValueFromPath: (item) => {
-          const external = variableConverters?.resolveValueFromPath?.(item);
-          if (external !== undefined) {
-            return external;
-          }
-          const firstPath = item?.paths?.[0];
-          if (firstPath === 'constant') {
-            return useDateVariableConstant ? { type: 'today' } : '';
-          }
-          if (firstPath === 'null') return null;
-          if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
-          return undefined;
-        },
-        resolvePathFromValue: (currentValue) => {
-          const external = variableConverters?.resolvePathFromValue?.(currentValue);
-          if (external !== undefined) {
-            return external;
-          }
-          if (currentValue === null) return ['null'];
-          if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
-          if (useDateVariableConstant && isCtxDateExpression(currentValue)) {
-            return ['constant'];
-          }
-          return isVariableExpression(currentValue) ? parseValueToPath(currentValue) : ['constant'];
-        },
-      }}
+      converters={variableConverters}
     />
   );
 };