@flowgram.ai/form-materials 0.1.0-alpha.12 → 0.1.0-alpha.14

package/src/components/condition-row/constants.ts

@@ -5,7 +5,7 @@
 
 import { IRules, Op, OpConfigs } from './types';
 
-export const rules: IRules = {
+export const defaultRules: IRules = {
   string: {
     [Op.EQ]: 'string',
     [Op.NEQ]: 'string',
@@ -60,9 +60,17 @@ export const rules: IRules = {
     [Op.IS_EMPTY]: null,
     [Op.IS_NOT_EMPTY]: null,
   },
+  ['date-time']: {
+    [Op.EQ]: 'date-time',
+    [Op.NEQ]: 'date-time',
+    [Op.GT]: 'date-time',
+    [Op.GTE]: 'date-time',
+    [Op.LT]: 'date-time',
+    [Op.LTE]: 'date-time',
+  },
 };
 
-export const opConfigs: OpConfigs = {
+export const defaultOpConfigs: OpConfigs = {
   [Op.EQ]: {
     label: 'Equal',
     abbreviation: '=',

package/src/components/condition-row/hooks/useOp.tsx

@@ -5,30 +5,34 @@
 
 import React, { useMemo } from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Select } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked } from '@douyinfe/semi-icons';
 
-import { IRule, Op } from '../types';
-import { opConfigs } from '../constants';
+import { IRule, OpConfigs } from '../types';
+import { defaultOpConfigs } from '../constants';
 
 interface HookParams {
   rule?: IRule;
-  op?: Op;
-  onChange: (op: Op) => void;
+  op?: string;
+  onChange: (op: string) => void;
   readonly?: boolean;
+  userOps?: OpConfigs;
 }
 
-export function useOp({ rule, op, onChange, readonly }: HookParams) {
+export function useOp({ rule, op, onChange, readonly, userOps }: HookParams) {
   const options = useMemo(
     () =>
       Object.keys(rule || {}).map((_op) => ({
-        ...(opConfigs[_op as Op] || {}),
+        ...(defaultOpConfigs[_op] || {}),
+        ...(userOps?.[_op] || {}),
         value: _op,
+        label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label),
       })),
-    [rule]
+    [rule, userOps]
   );
 
-  const opConfig = useMemo(() => opConfigs[op as Op], [op]);
+  const opConfig = useMemo(() => defaultOpConfigs[op as string], [op]);
 
   const renderOpSelect = () => (
     <Select
@@ -38,7 +42,7 @@ export function useOp({ rule, op, onChange, readonly }: HookParams) {
       value={op}
       optionList={options}
       onChange={(v) => {
-        onChange(v as Op);
+        onChange(v as string);
       }}
       triggerRender={({ value }) => (
         <Button size="small" disabled={!rule}>

package/src/components/condition-row/hooks/useRule.ts

@@ -8,12 +8,16 @@ import { useMemo } from 'react';
 import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { rules } from '../constants';
-import { IFlowRefValue } from '../../../typings';
+import { IFlowRefValue } from '@/typings';
 
-export function useRule(left?: IFlowRefValue) {
+import { IRules } from '../types';
+import { defaultRules } from '../constants';
+
+export function useRule(left?: IFlowRefValue, userRules?: IRules) {
   const available = useScopeAvailable();
 
+  const rules = useMemo(() => ({ ...defaultRules, ...(userRules || {}) }), [userRules]);
+
   const variable = useMemo(() => {
     if (!left) return undefined;
     return available.getByKeyPath(left.content);
@@ -25,7 +29,7 @@ export function useRule(left?: IFlowRefValue) {
     const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
 
     return rules[schema?.type as JsonSchemaBasicType];
-  }, [variable?.type]);
+  }, [variable?.type, rules]);
 
   return { rule };
 }

package/src/components/condition-row/index.tsx

@@ -5,35 +5,53 @@
 
 import React, { useMemo } from 'react';
 
-import { JsonSchemaBasicType } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
 import { Input } from '@douyinfe/semi-ui';
 
-import { ConditionRowValueType, Op } from './types';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
+import { ConditionRowValueType, IRules, OpConfigs } from './types';
 import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
 import { useRule } from './hooks/useRule';
 import { useOp } from './hooks/useOp';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
+import { defaultOpConfigs, defaultRules } from './constants';
 
 interface PropTypes {
   value?: ConditionRowValueType;
   onChange: (value?: ConditionRowValueType) => void;
   style?: React.CSSProperties;
   readonly?: boolean;
+  ruleConfig?: {
+    ops?: OpConfigs;
+    rules?: IRules;
+  };
 }
 
-export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
+const defaultRuleConfig = {
+  ops: {},
+  rules: {},
+};
+
+export function ConditionRow({
+  style,
+  value,
+  onChange,
+  readonly,
+  ruleConfig = defaultRuleConfig,
+}: PropTypes) {
   const { left, operator, right } = value || {};
-  const { rule } = useRule(left);
+  const { rule } = useRule(left, ruleConfig.rules);
   const { renderOpSelect, opConfig } = useOp({
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
     readonly,
+    userOps: ruleConfig.ops,
   });
 
   const targetSchema = useMemo(() => {
-    const targetType: JsonSchemaBasicType | null = rule?.[operator as Op] || null;
+    const targetType: string | null = rule?.[operator || ''] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
 
@@ -42,7 +60,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
       <UIOperator>{renderOpSelect()}</UIOperator>
       <UIValues>
         <UILeft>
-          <VariableSelector
+          <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
             value={left?.content}
@@ -59,7 +77,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
         </UILeft>
         <UIRight>
           {targetSchema ? (
-            <DynamicValueInput
+            <InjectDynamicValueInput
               readonly={readonly || !rule}
               value={right}
               schema={targetSchema}
@@ -70,7 +88,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
               size="small"
               disabled
               style={{ pointerEvents: 'none' }}
-              value={opConfig?.rightDisplay || 'Empty'}
+              value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
         </UIRight>
@@ -79,4 +97,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
   );
 }
 
+ConditionRow.defaultRules = defaultRules;
+ConditionRow.defaultOpConfigs = defaultOpConfigs;
+
 export { type ConditionRowValueType };

package/src/components/condition-row/types.ts

@@ -3,9 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { JsonSchemaBasicType } from '@flowgram.ai/json-schema';
-
-import { IFlowConstantRefValue, IFlowRefValue } from '../../typings';
+import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
 
 export enum Op {
   EQ = 'eq',
@@ -31,14 +29,14 @@ export interface OpConfig {
   rightDisplay?: string;
 }
 
-export type OpConfigs = Record<Op, OpConfig>;
+export type OpConfigs = Record<string, OpConfig>;
 
-export type IRule = Partial<Record<Op, JsonSchemaBasicType | null>>;
+export type IRule = Partial<Record<string, string | null>>;
 
-export type IRules = Record<JsonSchemaBasicType, IRule>;
+export type IRules = Record<string, IRule>;
 
 export interface ConditionRowValueType {
   left?: IFlowRefValue;
-  operator?: Op;
+  operator?: string;
   right?: IFlowConstantRefValue;
 }

package/src/components/constant-input/index.tsx

@@ -8,8 +8,11 @@ import React, { useMemo } from 'react';
 
 import { Input } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
-import { PropsType } from './types';
+import { useTypeManager } from '@/plugins';
+
+import { PropsType, Strategy as ConstantInputStrategy } from './types';
+
+export { ConstantInputStrategy };
 
 export function ConstantInput(props: PropsType) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;

package/src/components/constant-input/types.ts

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { ConstantRendererProps } from '../../plugins';
+import { ConstantRendererProps } from '@/plugins';
 
 export interface Strategy<Value = any> {
   hit: (schema: IJsonSchema) => boolean;

package/src/components/db-condition-row/hooks/use-left.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo } from 'react';
+import React from 'react';
+
+import { JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
+import { Icon } from '@douyinfe/semi-ui';
+
+import { ConditionRow } from '@/components';
+
+import { DBConditionOptionType, IRules } from '../types';
+import { UIOptionLabel, UISelect } from '../styles';
+
+const defaultRules = ConditionRow.defaultRules;
+
+interface HookParams {
+  left?: string;
+  options?: DBConditionOptionType[];
+  userRules?: IRules;
+  readonly?: boolean;
+  onChange: (leftKey: string) => void;
+}
+
+export function useLeft({ left, options, userRules, readonly, onChange }: HookParams) {
+  const rules = useMemo(() => ({ ...defaultRules, ...(userRules || {}) }), [userRules]);
+
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
+  const rule = useMemo(() => {
+    if (!left) return undefined;
+
+    const option = options?.find((item) => item.value === left);
+
+    if (!option?.schema?.type) {
+      return undefined;
+    }
+
+    return rules[option.schema.type];
+  }, [left, options, rules]);
+
+  const renderDBOptionSelect = () => (
+    <UISelect
+      disabled={readonly}
+      size="small"
+      style={{ width: '100%' }}
+      value={left}
+      onChange={(v) => onChange(v as string)}
+      optionList={
+        options?.map((item) => ({
+          label: (
+            <UIOptionLabel>
+              <Icon size="small" svg={typeManager.getDisplayIcon(item.schema)} />
+              {item.label}
+            </UIOptionLabel>
+          ),
+          value: item.value,
+        })) || []
+      }
+    />
+  );
+
+  return { rule, renderDBOptionSelect };
+}

package/src/components/db-condition-row/hooks/use-op.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { Button, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
+
+import { ConditionRow } from '@/components';
+
+import { IRule, OpConfigs } from '../types';
+
+const defaultOpConfigs = ConditionRow.defaultOpConfigs;
+
+interface HookParams {
+  rule?: IRule;
+  op?: string;
+  onChange: (op: string) => void;
+  readonly?: boolean;
+  userOps?: OpConfigs;
+}
+
+export function useOp({ rule, op, onChange, readonly, userOps }: HookParams) {
+  const options = useMemo(
+    () =>
+      Object.keys(rule || {}).map((_op) => ({
+        ...(defaultOpConfigs[_op] || {}),
+        ...(userOps?.[_op] || {}),
+        value: _op,
+        label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label),
+      })),
+    [rule, userOps]
+  );
+
+  const opConfig = useMemo(() => defaultOpConfigs[op as string], [op]);
+
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      disabled={readonly}
+      size="small"
+      value={op}
+      optionList={options}
+      onChange={(v) => {
+        onChange(v as string);
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
+
+  return { renderOpSelect, opConfig };
+}

package/src/components/db-condition-row/index.tsx

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { Input } from '@douyinfe/semi-ui';
+
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
+import { DBConditionOptionType, DBConditionRowValueType, IRules, OpConfigs } from './types';
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import { useOp } from './hooks/use-op';
+import { useLeft } from './hooks/use-left';
+
+interface PropTypes {
+  value?: DBConditionRowValueType;
+  onChange: (value?: DBConditionRowValueType) => void;
+  style?: React.CSSProperties;
+  options?: DBConditionOptionType[];
+  readonly?: boolean;
+  ruleConfig?: {
+    ops?: OpConfigs;
+    rules?: IRules;
+  };
+}
+
+const defaultRuleConfig = {
+  ops: {},
+  rules: {},
+};
+
+export function DBConditionRow({
+  style,
+  value,
+  onChange,
+  readonly,
+  options,
+  ruleConfig = defaultRuleConfig,
+}: PropTypes) {
+  const { left, operator, right } = value || {};
+
+  const { rule, renderDBOptionSelect } = useLeft({
+    left,
+    options,
+    onChange: (leftKey) => onChange({ ...value, left: leftKey }),
+    readonly,
+    userRules: ruleConfig.rules,
+  });
+
+  const { renderOpSelect, opConfig } = useOp({
+    rule,
+    op: operator,
+    onChange: (v) => onChange({ ...value, operator: v }),
+    readonly,
+    userOps: ruleConfig.ops,
+  });
+
+  const targetSchema = useMemo(() => {
+    const targetType: string | null = rule?.[operator || ''] || null;
+    return targetType ? { type: targetType, extra: { weak: true } } : null;
+  }, [rule, opConfig]);
+
+  return (
+    <UIContainer style={style}>
+      <UIOperator>{renderOpSelect()}</UIOperator>
+      <UIValues>
+        <UILeft>{renderDBOptionSelect()}</UILeft>
+        <UIRight>
+          {targetSchema ? (
+            <InjectDynamicValueInput
+              readonly={readonly || !rule}
+              value={right}
+              schema={targetSchema}
+              onChange={(v) => onChange({ ...value, right: v })}
+            />
+          ) : (
+            <Input
+              size="small"
+              disabled
+              style={{ pointerEvents: 'none' }}
+              value={opConfig?.rightDisplay || I18n.t('Empty')}
+            />
+          )}
+        </UIRight>
+      </UIValues>
+    </UIContainer>
+  );
+}
+
+export { type DBConditionRowValueType, type DBConditionOptionType };

package/src/components/db-condition-row/styles.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+import { Select } from '@douyinfe/semi-ui';
+
+export const UIContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const UIOperator = styled.div``;
+
+export const UILeft = styled.div`
+  width: 100%;
+`;
+
+export const UIRight = styled.div`
+  width: 100%;
+`;
+
+export const UIValues = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const UIOptionLabel = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const UISelect = styled(Select)`
+  & .semi-select-selection {
+    margin-left: 5px;
+  }
+`;

package/src/components/db-condition-row/types.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+import { IFlowConstantRefValue } from '@/typings';
+
+export interface OpConfig {
+  label: string;
+  abbreviation: string;
+  // When right is not a value, display this text
+  rightDisplay?: string;
+}
+
+export type OpConfigs = Record<string, OpConfig>;
+
+export type IRule = Partial<Record<string, string | null>>;
+
+export type IRules = Record<string, IRule>;
+
+export interface DBConditionRowValueType {
+  left?: string;
+  schema?: IJsonSchema;
+  operator?: string;
+  right?: IFlowConstantRefValue;
+}
+
+export interface DBConditionOptionType {
+  label: string | JSX.Element;
+  value: string;
+  schema: IJsonSchema;
+}

package/src/components/display-flow-value/index.tsx

@@ -8,8 +8,9 @@ import React, { useMemo } from 'react';
 import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { DisplaySchemaTag } from '../display-schema-tag';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
   value?: IFlowValue;
@@ -31,18 +32,7 @@ export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
       return { type: 'string' };
     }
     if (value?.type === 'constant') {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === 'string') {
-        return { type: 'string' };
-      }
-      if (typeof value?.content === 'number') {
-        return { type: 'number' };
-      }
-      if (typeof value?.content === 'boolean') {
-        return { type: 'boolean' };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
 
     return { type: 'unknown' };

package/src/components/display-inputs-values/index.tsx

@@ -3,14 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { isPlainObject } from 'lodash-es';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { FlowValueUtils } from '@/shared';
+import { DisplayFlowValue } from '@/components/display-flow-value';
 
-import { DisplayFlowValue } from '../display-flow-value';
-import { IFlowValue } from '../../typings';
 import { DisplayInputsWrapper } from './styles';
+import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: Record<string, IFlowValue | undefined>;
+  value?: any;
   showIconInTree?: boolean;
 }
 
@@ -19,9 +24,43 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
   return (
     <DisplayInputsWrapper>
-      {childEntries.map(([key, value]) => (
-        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
-      ))}
+      {childEntries.map(([key, value]) => {
+        if (FlowValueUtils.isFlowValue(value)) {
+          return (
+            <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+          );
+        }
+
+        if (isPlainObject(value)) {
+          return (
+            <DisplayInputsValueAllInTag
+              key={key}
+              title={key}
+              value={value}
+              showIconInTree={showIconInTree}
+            />
+          );
+        }
+
+        return null;
+      })}
     </DisplayInputsWrapper>
   );
 }
+
+export function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree,
+}: PropsType & {
+  title: string;
+}) {
+  const available = useScopeAvailable();
+
+  const schema = useMemo(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+
+  return <DisplaySchemaTag title={title} value={schema} showIconInTree={showIconInTree} />;
+}

package/src/components/display-outputs/index.tsx

@@ -8,7 +8,8 @@ import React, { useEffect } from 'react';
 import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
 
-import { DisplaySchemaTag } from '../display-schema-tag';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
+
 import { DisplayOutputsWrapper } from './styles';
 
 interface PropsType {

package/src/components/display-schema-tag/index.tsx

@@ -8,8 +8,9 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Popover } from '@douyinfe/semi-ui';
 
-import { DisplaySchemaTree } from '../display-schema-tree';
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+import { DisplaySchemaTree } from '@/components/display-schema-tree';
+
 import { PopoverContent, StyledTag, TitleSpan } from './styles';
 
 interface PropsType {