@flowgram.ai/form-materials 0.3.4 → 0.3.5

package/src/components/json-schema-editor/hooks.tsx

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { omit } from 'lodash';
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { difference, omit } from 'lodash';
+import { produce } from 'immer';
+import { IJsonSchema, type JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
 
 import { PropertyValueType } from './types';
 
@@ -15,92 +16,46 @@ function genId() {
   return _id++;
 }
 
-function getDrilldownSchema(
-  value?: PropertyValueType,
-  path?: (keyof PropertyValueType)[]
-): { schema?: PropertyValueType | null; path?: (keyof PropertyValueType)[] } {
-  if (!value) {
-    return {};
-  }
-
-  if (value.type === 'array' && value.items) {
-    return getDrilldownSchema(value.items, [...(path || []), 'items']);
-  }
-
-  return { schema: value, path };
-}
-
 export function usePropertiesEdit(
   value?: PropertyValueType,
   onChange?: (value: PropertyValueType) => void
 ) {
-  // Get drilldown (array.items.items...)
-  const drilldown = useMemo(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
-
-  const isDrilldownObject = drilldown.schema?.type === 'object';
-
-  // Generate Init Property List
-  const initPropertyList = useMemo(
-    () =>
-      isDrilldownObject
-        ? Object.entries(drilldown.schema?.properties || {})
-            .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-            .map(
-              ([name, _value], index) =>
-                ({
-                  key: genId(),
-                  name,
-                  isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                  ..._value,
-                  extra: {
-                    ...(_value.extra || {}),
-                    index,
-                  },
-                } as PropertyValueType)
-            )
-        : [],
-    [isDrilldownObject]
-  );
-
-  const [propertyList, setPropertyList] = useState<PropertyValueType[]>(initPropertyList);
-
-  const mountRef = useRef(false);
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
+  // Get drilldown properties (array.items.items.properties...)
+  const drilldownSchema = typeManager.getPropertiesParent(value || {});
+  const canAddField = typeManager.canAddField(value || {});
+
+  const [propertyList, setPropertyList] = useState<PropertyValueType[]>([]);
 
   useEffect(() => {
-    // If initRef is true, it means the component has been mounted
-    if (mountRef.current) {
-      // If the value is changed, update the property list
-      setPropertyList((_list) => {
-        const nameMap = new Map<string, PropertyValueType>();
-
-        for (const _property of _list) {
-          if (_property.name) {
-            nameMap.set(_property.name, _property);
-          }
-        }
-        return Object.entries(drilldown.schema?.properties || {})
-          .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-          .map(([name, _value]) => {
-            const _property = nameMap.get(name);
-            if (_property) {
-              return {
-                key: _property.key,
-                name,
-                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                ..._value,
-              };
-            }
-            return {
-              key: genId(),
-              name,
-              isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-              ..._value,
-            };
-          });
-      });
-    }
-    mountRef.current = true;
-  }, [drilldown.schema]);
+    // If the value is changed, update the property list
+    setPropertyList((_list) => {
+      const newNames = Object.entries(drilldownSchema?.properties || {})
+        .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+        .map(([key]) => key);
+
+      const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
+      const addNames = difference(newNames, oldNames);
+
+      return _list
+        .filter((item) => !item.name || newNames.includes(item.name))
+        .map((item) => ({
+          key: item.key,
+          name: item.name,
+          isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+          ...item,
+        }))
+        .concat(
+          addNames.map((_name) => ({
+            key: genId(),
+            name: _name,
+            isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+            ...(drilldownSchema?.properties?.[_name] || {}),
+          }))
+        );
+    });
+  }, [drilldownSchema]);
 
   const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
     setPropertyList((_list) => {
@@ -122,21 +77,25 @@ export function usePropertiesEdit(
         }
       }
 
-      let drilldownSchema = value || {};
-      if (drilldown.path) {
-        drilldownSchema = drilldown.path.reduce((acc, key) => acc[key], value || {});
-      }
-      drilldownSchema.properties = nextProperties;
-      drilldownSchema.required = nextRequired;
+      onChange?.(
+        produce(value || {}, (draft) => {
+          const propertiesParent = typeManager.getPropertiesParent(draft);
 
-      onChange?.(value || {});
+          if (propertiesParent) {
+            propertiesParent.properties = nextProperties;
+            propertiesParent.required = nextRequired;
+            return;
+          }
+        })
+      );
 
       return next;
     });
   };
 
   const onAddProperty = () => {
-    updatePropertyList((_list) => [
+    // set property list only, not trigger updatePropertyList
+    setPropertyList((_list) => [
       ..._list,
       { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
     ]);
@@ -153,14 +112,14 @@ export function usePropertiesEdit(
   };
 
   useEffect(() => {
-    if (!isDrilldownObject) {
+    if (!canAddField) {
       setPropertyList([]);
     }
-  }, [isDrilldownObject]);
+  }, [canAddField]);
 
   return {
     propertyList,
-    isDrilldownObject,
+    canAddField,
     onAddProperty,
     onRemoveProperty,
     onEditProperty,

package/src/components/json-schema-editor/index.tsx

@@ -17,7 +17,8 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { TypeSelector } from '../type-selector';
+import { InjectTypeSelector } from '@/components/type-selector';
+
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -40,6 +41,8 @@ import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
 import { BlurInput } from './components/blur-input';
 
+const DEFAULT = { type: 'object' };
+
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
   onChange?: (value: IJsonSchema) => void;
@@ -47,7 +50,7 @@ export function JsonSchemaEditor(props: {
   className?: string;
   readonly?: boolean;
 }) {
-  const { value = { type: 'object' }, config = {}, onChange: onChangeProps, readonly } = props;
+  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -79,7 +82,7 @@ export function JsonSchemaEditor(props: {
         icon={<IconPlus />}
         onClick={onAddProperty}
       >
-        {config?.addButtonText ?? 'Add'}
+        {config?.addButtonText ?? I18n.t('Add')}
       </Button>
     </UIContainer>
   );
@@ -121,7 +124,7 @@ function PropertyEdit(props: {
 
   const typeSelectorValue = useMemo(() => ({ type, items }), [type, items]);
 
-  const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } =
+  const { propertyList, canAddField, onAddProperty, onRemoveProperty, onEditProperty } =
     usePropertiesEdit(value, onChangeProps);
 
   const onChange = (key: string, _value: any) => {
@@ -131,7 +134,7 @@ function PropertyEdit(props: {
     });
   };
 
-  const showCollapse = isDrilldownObject && propertyList.length > 0;
+  const showCollapse = canAddField && propertyList.length > 0;
 
   return (
     <>
@@ -169,7 +172,7 @@ function PropertyEdit(props: {
               />
             </UIName>
             <UIType>
-              <TypeSelector
+              <InjectTypeSelector
                 value={typeSelectorValue}
                 readonly={readonly}
                 onChange={(_value) => {
@@ -197,7 +200,7 @@ function PropertyEdit(props: {
                   setExpand((_expand) => !_expand);
                 }}
               />
-              {isDrilldownObject && (
+              {canAddField && (
                 <IconButton
                   disabled={readonly}
                   size="small"
@@ -230,7 +233,7 @@ function PropertyEdit(props: {
                   config?.descPlaceholder ?? I18n.t('Help LLM to understand the property')
                 }
               />
-              {$level === 0 && type && type !== 'array' && (
+              {$level === 0 && (
                 <>
                   <UILabel style={{ marginTop: 10 }}>
                     {config?.defaultValueTitle ?? I18n.t('Default Value')}

package/src/components/json-schema-editor/styles.tsx

@@ -200,35 +200,6 @@ export const DefaultValueWrapper = styled.div`
   margin: 0;
 `;
 
-export const JSONViewerWrapper = styled.div`
-  padding: 0 0 24px;
-  &:first-child {
-    margin-top: 0px;
-  }
-`;
-
-export const JSONHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--semi-color-fill-0);
-  border-radius: 6px 6px 0 0;
-  height: 36px;
-  padding: 0 8px 0 12px;
-`;
-
-export const JSONHeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
-export const JSONHeaderRight = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
 export const ConstantInputWrapper = styled.div`
   flex-grow: 1;
 

package/src/components/prompt-editor/types.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { IFlowTemplateValue } from '../../typings';
+import { IFlowTemplateValue } from '@/typings';
 
 export type PropsType = React.PropsWithChildren<{
   value?: IFlowTemplateValue;

package/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx

@@ -15,8 +15,9 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
+import { IFlowValue } from '@/typings';
+
 import { InputsPicker } from '../inputs-picker';
-import { IFlowValue } from '../../../typings';
 
 export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {
   const [posKey, setPosKey] = useState('');

package/src/components/prompt-editor-with-inputs/index.tsx

@@ -5,9 +5,10 @@
 
 import React from 'react';
 
+import { IFlowValue } from '@/typings';
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
 import { InputsTree } from './extensions/inputs-tree';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
-import { IFlowValue } from '../../typings';
 
 interface PropsType extends PromptEditorPropsType {
   inputsValues: Record<string, IFlowValue>;

package/src/components/prompt-editor-with-inputs/inputs-picker.tsx

@@ -16,7 +16,7 @@ import {
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree } from '@douyinfe/semi-ui';
 
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 

package/src/components/prompt-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/prompt-editor-with-variables/index.tsx

@@ -5,9 +5,10 @@
 
 import React from 'react';
 
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
 
 export function PromptEditorWithVariables(props: PromptEditorPropsType) {
   return (

package/src/components/type-selector/index.tsx

@@ -8,9 +8,10 @@ import React, { useMemo } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
+import { createInjectMaterial } from '@/shared/inject-material';
+import { useTypeManager } from '@/plugins';
 
-interface PropTypes {
+export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
   onChange?: (value?: Partial<IJsonSchema>) => void;
   readonly?: boolean;
@@ -41,7 +42,7 @@ export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | u
   return { type };
 };
 
-export function TypeSelector(props: PropTypes) {
+export function TypeSelector(props: TypeSelectorProps) {
   const { value, onChange, readonly, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
@@ -101,3 +102,6 @@ export function TypeSelector(props: PropTypes) {
     />
   );
 }
+
+TypeSelector.renderKey = 'type-selector-render-key';
+export const InjectTypeSelector = createInjectMaterial(TypeSelector);

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

@@ -12,10 +12,12 @@ import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
+import { createInjectMaterial } from '@/shared';
+
 import { useVariableTree } from './use-variable-tree';
 import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
-interface PropTypes {
+export interface VariableSelectorProps {
   value?: string[];
   config?: {
     placeholder?: string;
@@ -30,8 +32,6 @@ interface PropTypes {
   triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
-export type VariableSelectorProps = PropTypes;
-
 export { useVariableTree };
 
 export const VariableSelector = ({
@@ -44,7 +44,7 @@ export const VariableSelector = ({
   excludeSchema,
   hasError,
   triggerRender,
-}: PropTypes) => {
+}: VariableSelectorProps) => {
   const treeData = useVariableTree({ includeSchema, excludeSchema });
 
   const treeValue = useMemo(() => {
@@ -136,3 +136,6 @@ export const VariableSelector = ({
     </>
   );
 };
+
+VariableSelector.renderKey = 'variable-selector-render-key';
+export const InjectVariableSelector = createInjectMaterial(VariableSelector);

package/src/components/variable-selector/use-variable-tree.tsx

@@ -10,7 +10,7 @@ import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
 
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;

package/src/effects/auto-rename-ref/index.ts

@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 /**
  * Auto rename ref when form item's key is renamed

package/src/effects/listen-ref-schema-change/index.ts

@@ -13,7 +13,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

package/src/effects/listen-ref-value-change/index.ts

@@ -12,7 +12,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

package/src/effects/provide-batch-input/index.ts

@@ -11,7 +11,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -17,7 +17,7 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -14,7 +14,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowValue } from '../../typings';
+import { IFlowRefValue, IFlowValue } from '@/typings';
 
 type AssignValueType =
   | {

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -12,7 +12,7 @@ import {
   Scope,
 } from '@flowgram.ai/editor';
 
-import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 interface InputConfig {
   sourceKey: string;

package/src/shared/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './format-legacy-refs';
+export * from './inject-material';