@flowgram.ai/form-materials 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.3.3",
-    "@flowgram.ai/json-schema": "0.3.3"
+    "@flowgram.ai/editor": "0.3.5",
+    "@flowgram.ai/json-schema": "0.3.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -51,8 +51,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.3.3",
-    "@flowgram.ai/ts-config": "0.3.3"
+    "@flowgram.ai/eslint-config": "0.3.5",
+    "@flowgram.ai/ts-config": "0.3.5"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -9,11 +9,11 @@ import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue } from '@/typings';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 
 import { AssignRowProps } from './types';
 import { BlurInput } from './components/blur-input';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
 
 export function AssignRow(props: AssignRowProps) {
   const {
@@ -29,7 +29,7 @@ export function AssignRow(props: AssignRowProps) {
     <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
       <div style={{ width: 150, minWidth: 150, maxWidth: 150 }}>
         {value?.operator === 'assign' ? (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%', height: 26 }}
             value={value?.left?.content}
             config={{ placeholder: 'Select Left' }}
@@ -56,7 +56,7 @@ export function AssignRow(props: AssignRowProps) {
         )}
       </div>
       <div style={{ flexGrow: 1 }}>
-        <DynamicValueInput
+        <InjectDynamicValueInput
           readonly={readonly}
           value={value?.right as IFlowConstantRefValue | undefined}
           onChange={(v) =>

package/src/components/assign-rows/index.tsx

@@ -9,7 +9,7 @@ import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
-import { AssignRow, AssignValueType } from '../assign-row';
+import { AssignRow, AssignValueType } from '@/components/assign-row';
 
 interface AssignRowsProps {
   name: string;

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

@@ -8,9 +8,10 @@ import React from 'react';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { useObjectList } from '@/hooks';
+import { InjectVariableSelector } from '@/components/variable-selector';
+
 import { PropsType } from './types';
-import { VariableSelector } from '../variable-selector';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 
 export function BatchOutputs(props: PropsType) {
@@ -30,7 +31,7 @@ export function BatchOutputs(props: PropsType) {
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
             />
-            <VariableSelector
+            <InjectVariableSelector
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value?.content}

package/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

package/src/components/batch-variable-selector/index.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { PrivateScopeProvider } from '@flowgram.ai/editor';
 
-import { VariableSelector, VariableSelectorProps } from '../variable-selector';
+import { VariableSelector, VariableSelectorProps } from '@/components/variable-selector';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

package/src/components/code-editor-mini/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import { CodeEditor, CodeEditorPropsType } from '../code-editor';
+import { CodeEditor, CodeEditorPropsType } from '@/components/code-editor';
 
 const UIMini = styled.div`
   .ͼ1 .cm-content {

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',
@@ -62,7 +62,7 @@ export const rules: IRules = {
   },
 };
 
-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,52 @@
 
 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';
 
 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 +59,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 +76,7 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
         </UILeft>
         <UIRight>
           {targetSchema ? (
-            <DynamicValueInput
+            <InjectDynamicValueInput
               readonly={readonly || !rule}
               value={right}
               schema={targetSchema}
@@ -70,7 +87,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>

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/display-flow-value/index.tsx

@@ -8,8 +8,8 @@ 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 { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
   value?: IFlowValue;

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

@@ -5,8 +5,9 @@
 
 import React from 'react';
 
-import { DisplayFlowValue } from '../display-flow-value';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { DisplayFlowValue } from '@/components/display-flow-value';
+
 import { DisplayInputsWrapper } from './styles';
 
 interface PropsType {

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 {

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

@@ -7,7 +7,8 @@ import React from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+
 import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
 
 interface PropsType {

package/src/components/dynamic-value-input/hooks.ts

@@ -8,7 +8,7 @@ import { useMemo, useState } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();

package/src/components/dynamic-value-input/index.tsx

@@ -9,11 +9,12 @@ import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { VariableSelector } from '../variable-selector';
-import { TypeSelector } from '../type-selector';
-import { Strategy } from '../constant-input/types';
-import { ConstantInput } from '../constant-input';
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { createInjectMaterial } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { TypeSelector } from '@/components/type-selector';
+import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
+
 import { UIContainer, UIMain, UITrigger, UIType } from './styles';
 import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
@@ -25,7 +26,7 @@ interface PropsType {
   style?: React.CSSProperties;
   schema?: IJsonSchema;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     schema?: IJsonSchema; // set schema of constant input only
     [key: string]: any;
   };
@@ -88,7 +89,7 @@ export function DynamicValueInput({
     if (value?.type === 'ref') {
       // Display Variable Or Delete
       return (
-        <VariableSelector
+        <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
@@ -108,7 +109,7 @@ export function DynamicValueInput({
         readonly={readonly}
         strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%' }}
             onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
             includeSchema={includeSchema}
@@ -121,7 +122,7 @@ export function DynamicValueInput({
   };
 
   const renderTrigger = () => (
-    <VariableSelector
+    <InjectVariableSelector
       style={{ width: '100%' }}
       value={value?.type === 'ref' ? value?.content : undefined}
       onChange={(_v) => onChange({ type: 'ref', content: _v })}
@@ -141,3 +142,6 @@ export function DynamicValueInput({
     </UIContainer>
   );
 }
+
+DynamicValueInput.renderKey = 'dynamic-value-input-render-key';
+export const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);

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

@@ -5,13 +5,15 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { useObjectList } from '@/hooks';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
 import { PropsType } from './types';
-import { DynamicValueInput } from '../dynamic-value-input';
-import { IFlowConstantRefValue, IFlowValue } from '../../typings';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 import { BlurInput } from './components/blur-input';
 
@@ -41,9 +43,9 @@ export function InputsValues({
               size="small"
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
-              placeholder="Input Key"
+              placeholder={I18n.t('Input Key')}
             />
-            <DynamicValueInput
+            <InjectDynamicValueInput
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value as IFlowConstantRefValue}

package/src/components/inputs-values/types.ts

@@ -5,8 +5,8 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { Strategy } from '../constant-input/types';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {
   value?: Record<string, IFlowValue | undefined>;
@@ -16,7 +16,7 @@ export interface PropsType {
   schema?: IJsonSchema;
   style?: React.CSSProperties;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     [key: string]: any;
   };
 }

package/src/components/json-editor-with-variables/extensions/variable-tree.tsx

@@ -15,7 +15,7 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
-import { useVariableTree } from '../../variable-selector';
+import { useVariableTree } from '@/components/variable-selector';
 
 export function VariableTree() {
   const [posKey, setPosKey] = useState('');

package/src/components/json-editor-with-variables/index.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { transformerCreator } from '@coze-editor/editor/preset-code';
 import { Text } from '@coze-editor/editor/language-json';
 
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
-import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {