@nocobase/client-v2 3.0.0-alpha.1 → 3.0.0-alpha.12

package/src/flow/components/field-value-variable/DateVariableEditor.tsx

@@ -0,0 +1,181 @@
+/**
+ * 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 { useFlowContext, type CtxDateExpressionConfig, type CtxDateRelativeUnit } from '@nocobase/flow-engine';
+import { AutoComplete, Input, InputNumber, Select, Space } from 'antd';
+import type { Dayjs } from 'dayjs';
+import React from 'react';
+import { FieldAssignExactDatePicker, type ExactDatePickerValue } from '../FieldAssignExactDatePicker';
+import { toExactPickerDisplayValue, type DateVariableComponentProps } from './dateValue';
+
+const DATE_FORMAT_OPTIONS = [
+  'YYYY-MM-DD',
+  'YYYY-MM-DD HH:mm:ss',
+  'YYYY/MM/DD',
+  'MM/DD/YYYY',
+  'DD/MM/YYYY',
+  'YYYYMMDD',
+].map((value) => ({ value }));
+
+const PRESET_LABELS: Record<string, string> = {
+  now: 'Now',
+  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',
+};
+
+export function getDefaultDateVariableFormat(config: CtxDateExpressionConfig): string {
+  return config.kind === 'preset' && config.preset === 'now' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+}
+
+export function serializeExactDatePickerValue(
+  value: ExactDatePickerValue,
+  showTime: boolean,
+): string | [string, string] {
+  const serialize = (item: Dayjs) => (showTime ? item.toISOString() : item.format('YYYY-MM-DD'));
+  if (Array.isArray(value)) {
+    return [serialize(value[0]), serialize(value[1])];
+  }
+  return value ? serialize(value) : '';
+}
+
+type DateVariableEditorProps = {
+  value?: CtxDateExpressionConfig;
+  onChange?: (value: CtxDateExpressionConfig) => void;
+  isDateLikeField: boolean;
+  dateComponentProps: DateVariableComponentProps;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+};
+
+const DateFormatEditor: React.FC<{
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}> = ({ value, placeholder, onChange, disabled }) => {
+  const ctx = useFlowContext();
+  return (
+    <Space.Compact style={{ width: '100%' }}>
+      <Input
+        value={ctx.t('Format')}
+        readOnly
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden
+        style={{ width: 88, pointerEvents: 'none' }}
+      />
+      <AutoComplete
+        value={value}
+        placeholder={placeholder}
+        options={DATE_FORMAT_OPTIONS}
+        onChange={(nextValue) => onChange(nextValue.slice(0, 128))}
+        disabled={disabled}
+        style={{ flex: 1, minWidth: 0 }}
+        aria-label={ctx.t('Format')}
+      />
+    </Space.Compact>
+  );
+};
+
+export const DateVariableEditor: React.FC<DateVariableEditorProps> = ({
+  value,
+  onChange,
+  isDateLikeField,
+  dateComponentProps,
+  style,
+  disabled = false,
+}) => {
+  const ctx = useFlowContext();
+  if (!value) return null;
+
+  const updateFormat = (format: string) => onChange?.({ ...value, format });
+  const format = value.format || '';
+
+  const renderValueEditor = () => {
+    if (value.kind === 'exact') {
+      const isRange = Array.isArray(value.value);
+      return (
+        <FieldAssignExactDatePicker
+          picker={dateComponentProps.picker}
+          showTime={dateComponentProps.showTime}
+          timeFormat={dateComponentProps.timeFormat}
+          format={dateComponentProps.format}
+          isRange={isRange}
+          value={toExactPickerDisplayValue(value.value, {
+            format: dateComponentProps.format,
+            isRange,
+          })}
+          onChange={(nextValue) => {
+            onChange?.({ ...value, value: serializeExactDatePickerValue(nextValue, dateComponentProps.showTime) });
+          }}
+          disabled={disabled}
+          style={{ width: '100%' }}
+        />
+      );
+    }
+
+    if (value.kind === 'relative') {
+      return (
+        <Space.Compact style={{ width: '100%' }}>
+          <InputNumber
+            min={1}
+            precision={0}
+            value={value.amount}
+            disabled={disabled}
+            onChange={(amount) => onChange?.({ ...value, amount: typeof amount === 'number' ? amount : 1 })}
+            aria-label={ctx.t(value.direction === 'past' ? 'Past' : 'Next')}
+            style={{ flex: '1 1 auto', minWidth: 80 }}
+          />
+          <Select
+            value={value.unit}
+            disabled={disabled}
+            onChange={(unit: CtxDateRelativeUnit) => onChange?.({ ...value, unit })}
+            aria-label={ctx.t('Unit')}
+            style={{ flex: '0 0 130px', minWidth: 130 }}
+            options={[
+              { value: 'day', label: ctx.t('Day') },
+              { value: 'week', label: ctx.t('Calendar week') },
+              { value: 'month', label: ctx.t('Calendar Month') },
+              { value: 'year', label: ctx.t('Calendar Year') },
+            ]}
+          />
+        </Space.Compact>
+      );
+    }
+
+    return <Input value={ctx.t(PRESET_LABELS[value.preset] || value.preset)} readOnly disabled={disabled} />;
+  };
+
+  return (
+    <div style={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 8, width: '100%', minWidth: 0, ...style }}>
+      {renderValueEditor()}
+      {!isDateLikeField && (
+        <DateFormatEditor
+          value={format}
+          placeholder={getDefaultDateVariableFormat(value)}
+          onChange={updateFormat}
+          disabled={disabled}
+        />
+      )}
+    </div>
+  );
+};

package/src/flow/components/field-value-variable/FieldValueVariableInput.tsx

@@ -0,0 +1,326 @@
+/**
+ * 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 {
+  isRunJSValue,
+  isVariableExpression,
+  parseCtxDateExpressionConfig,
+  parseValueToPath,
+  serializeCtxDateExpressionConfig,
+  tExpr,
+  VariableInput,
+  type CtxDateExpressionConfig,
+  type CtxDatePreset,
+  type MetaTreeNode,
+  type VariableInputProps,
+} from '@nocobase/flow-engine';
+import { dayjs } from '@nocobase/utils/client';
+import type { Dayjs } from 'dayjs';
+import React from 'react';
+import { DateVariableEditor, getDefaultDateVariableFormat } from './DateVariableEditor';
+import { normalizeDateVariableExactValue, type DateVariableComponentProps } from './dateValue';
+
+const DATE_PRESET_NODES: Array<{ name: CtxDatePreset; title: string }> = [
+  { name: 'now', title: 'Now' },
+  { name: 'today', title: 'Today' },
+  { name: 'yesterday', title: 'Yesterday' },
+  { name: 'tomorrow', title: 'Tomorrow' },
+  { name: 'thisWeek', title: 'This Week' },
+  { name: 'lastWeek', title: 'Last Week' },
+  { name: 'nextWeek', title: 'Next Week' },
+  { name: 'thisMonth', title: 'This Month' },
+  { name: 'lastMonth', title: 'Last Month' },
+  { name: 'nextMonth', title: 'Next Month' },
+  { name: 'thisQuarter', title: 'This Quarter' },
+  { name: 'lastQuarter', title: 'Last Quarter' },
+  { name: 'nextQuarter', title: 'Next Quarter' },
+  { name: 'thisYear', title: 'This Year' },
+  { name: 'lastYear', title: 'Last Year' },
+  { name: 'nextYear', title: 'Next Year' },
+];
+
+type ValueEditorComponent = React.ComponentType<{
+  value?: unknown;
+  onChange?: (value: unknown) => void;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+}>;
+
+const DATE_VARIABLE_CONFIG_MARK = Symbol('field-value-date-variable-config');
+
+type DateVariableEditConfig = CtxDateExpressionConfig & {
+  [DATE_VARIABLE_CONFIG_MARK]: 'editable' | 'restored';
+};
+
+export type FieldValueVariableInputProps = Omit<
+  VariableInputProps,
+  'value' | 'onChange' | 'metaTree' | 'converters'
+> & {
+  value?: unknown;
+  onChange: (value: unknown) => void;
+  baseMetaTree: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  constantComponent: ValueEditorComponent;
+  nullComponent: ValueEditorComponent;
+  runJSComponent: ValueEditorComponent;
+  isDateLikeField: boolean;
+  dateComponentProps: DateVariableComponentProps;
+  allowRunJS?: boolean;
+  converters?: VariableInputProps['converters'];
+};
+
+function createDateVariableEditConfig(
+  config: CtxDateExpressionConfig,
+  source: DateVariableEditConfig[typeof DATE_VARIABLE_CONFIG_MARK] = 'editable',
+): DateVariableEditConfig {
+  return { ...config, [DATE_VARIABLE_CONFIG_MARK]: source } as DateVariableEditConfig;
+}
+
+function isDateVariableEditConfig(value: unknown): value is DateVariableEditConfig {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const source = (value as Partial<DateVariableEditConfig>)[DATE_VARIABLE_CONFIG_MARK];
+  return source === 'editable' || source === 'restored';
+}
+
+function getDateNodeName(config: CtxDateExpressionConfig): string {
+  if (config.kind === 'exact') return 'exact';
+  if (config.kind === 'relative') return config.direction;
+  return config.preset;
+}
+
+function isDayjsValue(value: unknown): value is Dayjs {
+  return dayjs.isDayjs(value);
+}
+
+function createInitialDateConfig(
+  nodeName: string,
+  isDateLikeField: boolean,
+  componentProps: DateVariableComponentProps,
+): DateVariableEditConfig | undefined {
+  let config: CtxDateExpressionConfig | undefined;
+
+  if (nodeName === 'exact') {
+    const normalized = normalizeDateVariableExactValue(dayjs(), componentProps);
+    const value = isDayjsValue(normalized) ? normalized.format('YYYY-MM-DD') : String(normalized || '');
+    config = { kind: 'exact', value };
+  } else if (nodeName === 'past' || nodeName === 'next') {
+    config = { kind: 'relative', direction: nodeName, amount: 1, unit: 'day' };
+  } else if (
+    DATE_PRESET_NODES.some((item) => item.name === nodeName) &&
+    !(nodeName === 'now' && componentProps.exactNormalizeMode === 'date')
+  ) {
+    config = { kind: 'preset', preset: nodeName as CtxDatePreset };
+  }
+
+  if (!config) return undefined;
+  const initialConfig = isDateLikeField ? config : { ...config, format: getDefaultDateVariableFormat(config) };
+  return createDateVariableEditConfig(initialConfig);
+}
+
+function normalizeDateConfigForStore(
+  config: CtxDateExpressionConfig,
+  componentProps: DateVariableComponentProps,
+  omitFormat: boolean,
+): CtxDateExpressionConfig {
+  const rawFormat = typeof config.format === 'string' ? config.format : '';
+  const normalizedConfig = omitFormat
+    ? { ...config, format: undefined }
+    : { ...config, format: rawFormat.trim() ? rawFormat : getDefaultDateVariableFormat(config) };
+  if (normalizedConfig.kind !== 'exact') return normalizedConfig;
+  const normalized = normalizeDateVariableExactValue(normalizedConfig.value, componentProps);
+  if (Array.isArray(normalized)) {
+    return { ...normalizedConfig, value: [String(normalized[0]), String(normalized[1])] };
+  }
+  return { ...normalizedConfig, value: String(normalized || '') };
+}
+
+export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = ({
+  value,
+  onChange,
+  baseMetaTree,
+  constantComponent: ConstantComponent,
+  nullComponent: NullComponent,
+  runJSComponent: RunJSComponent,
+  isDateLikeField,
+  dateComponentProps,
+  allowRunJS = true,
+  converters,
+  clearValue = '',
+  disabled = false,
+  ...variableInputProps
+}) => {
+  const DateEditor = React.useMemo<ValueEditorComponent>(() => {
+    const Component: ValueEditorComponent = (props) => (
+      <DateVariableEditor
+        value={isDateVariableEditConfig(props.value) ? props.value : undefined}
+        onChange={(nextConfig) => props.onChange?.(createDateVariableEditConfig(nextConfig))}
+        isDateLikeField={isDateLikeField}
+        dateComponentProps={dateComponentProps}
+        style={props.style}
+        disabled={props.disabled}
+      />
+    );
+    return Component;
+  }, [dateComponentProps, isDateLikeField]);
+
+  const parsedDateConfig = parseCtxDateExpressionConfig(value);
+  const restoreLegacyNowForPureDate =
+    dateComponentProps.exactNormalizeMode === 'date' &&
+    parsedDateConfig?.kind === 'preset' &&
+    parsedDateConfig.preset === 'now';
+
+  const metaTree = React.useMemo<() => Promise<MetaTreeNode[]>>(() => {
+    return async () => {
+      const base = typeof baseMetaTree === 'function' ? await baseMetaTree() : baseMetaTree;
+      const presetNodes =
+        dateComponentProps.exactNormalizeMode === 'date' && !restoreLegacyNowForPureDate
+          ? DATE_PRESET_NODES.filter((item) => item.name !== 'now')
+          : DATE_PRESET_NODES;
+      const dateChildren: MetaTreeNode[] = [
+        {
+          title: tExpr('Exact day'),
+          name: 'exact',
+          type: 'date',
+          paths: ['date', 'exact'],
+          render: (props) => <DateEditor {...props} />,
+        },
+        {
+          title: tExpr('Past'),
+          name: 'past',
+          type: 'date',
+          paths: ['date', 'past'],
+          render: (props) => <DateEditor {...props} />,
+        },
+        {
+          title: tExpr('Next'),
+          name: 'next',
+          type: 'date',
+          paths: ['date', 'next'],
+          render: (props) => <DateEditor {...props} />,
+        },
+        ...presetNodes.map<MetaTreeNode>(({ name, title }) => ({
+          title: tExpr(title),
+          name,
+          type: 'date',
+          paths: ['date', name],
+          ...(name === 'now' && dateComponentProps.exactNormalizeMode === 'date'
+            ? { disabled: true, selectable: false }
+            : {}),
+          render: (props) => <DateEditor {...props} />,
+        })),
+      ];
+
+      const specialNodes: MetaTreeNode[] = [
+        {
+          title: tExpr('Constant'),
+          name: 'constant',
+          type: 'string',
+          paths: ['constant'],
+          render: (props) => <ConstantComponent {...props} />,
+        },
+        {
+          title: tExpr('Null'),
+          name: 'null',
+          type: 'object',
+          paths: ['null'],
+          render: (props) => <NullComponent {...props} />,
+        },
+        {
+          title: tExpr('Date'),
+          name: 'date',
+          type: 'date',
+          paths: ['date'],
+          selectable: false,
+          children: dateChildren,
+        },
+        ...(allowRunJS
+          ? [
+              {
+                title: tExpr('RunJS'),
+                name: 'runjs',
+                type: 'object',
+                paths: ['runjs'],
+                render: (props) => <RunJSComponent {...props} />,
+              } satisfies MetaTreeNode,
+            ]
+          : []),
+      ];
+      return [...specialNodes, ...(Array.isArray(base) ? base : [])];
+    };
+  }, [
+    ConstantComponent,
+    DateEditor,
+    NullComponent,
+    RunJSComponent,
+    allowRunJS,
+    baseMetaTree,
+    dateComponentProps.exactNormalizeMode,
+    restoreLegacyNowForPureDate,
+  ]);
+
+  const displayValue = parsedDateConfig ? createDateVariableEditConfig(parsedDateConfig, 'restored') : value;
+
+  const handleChange = React.useCallback(
+    (nextValue: unknown) => {
+      if (disabled) return;
+      if (!isDateVariableEditConfig(nextValue)) {
+        onChange(nextValue);
+        return;
+      }
+      if (nextValue[DATE_VARIABLE_CONFIG_MARK] === 'restored') return;
+      const normalized = normalizeDateConfigForStore(nextValue, dateComponentProps, isDateLikeField);
+      onChange(serializeCtxDateExpressionConfig(normalized) || '');
+    },
+    [dateComponentProps, disabled, isDateLikeField, onChange],
+  );
+
+  return (
+    <VariableInput
+      {...variableInputProps}
+      value={displayValue}
+      onChange={handleChange}
+      metaTree={metaTree}
+      clearValue={clearValue}
+      disabled={disabled}
+      converters={{
+        renderInputComponent: (meta) => {
+          const external = converters?.renderInputComponent?.(meta ?? null);
+          if (external) return external;
+          const firstPath = meta?.paths?.[0];
+          if (firstPath === 'constant') return ConstantComponent;
+          if (firstPath === 'null') return NullComponent;
+          if (firstPath === 'date') return DateEditor;
+          if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
+          return null;
+        },
+        resolveValueFromPath: (item) => {
+          const external = converters?.resolveValueFromPath?.(item);
+          if (external !== undefined) return external;
+          const firstPath = item?.paths?.[0];
+          if (firstPath === 'constant') return '';
+          if (firstPath === 'null') return null;
+          if (firstPath === 'date') {
+            return createInitialDateConfig(item.paths[1], isDateLikeField, dateComponentProps);
+          }
+          if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
+          return undefined;
+        },
+        resolvePathFromValue: (currentValue) => {
+          const external = converters?.resolvePathFromValue?.(currentValue);
+          if (external !== undefined) return external;
+          if (currentValue === null) return ['null'];
+          if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
+          if (isDateVariableEditConfig(currentValue)) return ['date', getDateNodeName(currentValue)];
+          return typeof currentValue === 'string' && isVariableExpression(currentValue)
+            ? parseValueToPath(currentValue)
+            : ['constant'];
+        },
+      }}
+    />
+  );
+};