@flowgram.ai/form-materials 0.1.31 → 0.2.1

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const UIContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export const UIMain = styled.div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
+
+export const UITrigger = styled.div``;

package/src/components/index.ts

@@ -1,3 +1,6 @@
-export { VariableSelector } from './variable-selector';
-export { TypeSelector, JsonSchema, VariableTypeIcons, ArrayIcons } from './type-selector';
-export { JsonSchemaEditor } from './json-schema-editor';
+export * from './variable-selector';
+export * from './type-selector';
+export * from './json-schema-editor';
+export * from './batch-variable-selector';
+export * from './constant-input';
+export * from './dynamic-value-input';

package/src/components/json-schema-editor/config.json

@@ -1,5 +1,5 @@
 {
   "name": "json-schema-editor",
-  "depMaterials": ["type-selector"],
+  "depMaterials": ["type-selector", "typings/json-schema"],
   "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons", "styled-components"]
 }

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { IJsonSchema } from '../../typings';
 import { PropertyValueType } from './types';
-import { JsonSchema } from '../type-selector';
 
 let _id = 0;
 function genId() {
@@ -36,15 +36,21 @@ export function usePropertiesEdit(
   const initPropertyList = useMemo(
     () =>
       isDrilldownObject
-        ? Object.entries(drilldown.schema?.properties || {}).map(
-            ([name, _value]) =>
-              ({
-                key: genId(),
-                name,
-                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                ..._value,
-              } as PropertyValueType)
-          )
+        ? 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]
   );
@@ -65,23 +71,25 @@ export function usePropertiesEdit(
             nameMap.set(_property.name, _property);
           }
         }
-        return Object.entries(drilldown.schema?.properties || {}).map(([name, _value]) => {
-          const _property = nameMap.get(name);
-          if (_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: _property.key,
+              key: genId(),
               name,
               isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
               ..._value,
             };
-          }
-          return {
-            key: genId(),
-            name,
-            isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-            ..._value,
-          };
-        });
+          });
       });
     }
     mountRef.current = true;
@@ -92,7 +100,7 @@ export function usePropertiesEdit(
       const next = updater(_list);
 
       // onChange to parent
-      const nextProperties: Record<string, JsonSchema> = {};
+      const nextProperties: Record<string, IJsonSchema> = {};
       const nextRequired: string[] = [];
 
       for (const _property of next) {
@@ -121,7 +129,10 @@ export function usePropertiesEdit(
   };
 
   const onAddProperty = () => {
-    updatePropertyList((_list) => [..._list, { key: genId(), name: '', type: 'string' }]);
+    updatePropertyList((_list) => [
+      ..._list,
+      { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
+    ]);
   };
 
   const onRemoveProperty = (key: number) => {

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

@@ -10,8 +10,8 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { JsonSchema } from '../type-selector/types';
 import { TypeSelector } from '../type-selector';
+import { IJsonSchema } from '../../typings';
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -33,8 +33,8 @@ import { UIRow } from './styles';
 import { usePropertiesEdit } from './hooks';
 
 export function JsonSchemaEditor(props: {
-  value?: JsonSchema;
-  onChange?: (value: JsonSchema) => void;
+  value?: IJsonSchema;
+  onChange?: (value: IJsonSchema) => void;
   config?: ConfigType;
 }) {
   const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;

package/src/components/json-schema-editor/types.ts

@@ -1,6 +1,6 @@
-import { JsonSchema } from '../type-selector/types';
+import { IJsonSchema } from '../../typings';
 
-export interface PropertyValueType extends JsonSchema {
+export interface PropertyValueType extends IJsonSchema {
   name?: string;
   key?: number;
   isPropertyRequired?: boolean;
@@ -8,7 +8,7 @@ export interface PropertyValueType extends JsonSchema {
 
 export type PropertiesValueType = Pick<PropertyValueType, 'properties' | 'required'>;
 
-export type JsonSchemaProperties = JsonSchema['properties'];
+export type JsonSchemaProperties = IJsonSchema['properties'];
 
 export interface ConfigType {
   placeholder?: string;

package/src/components/type-selector/config.json

@@ -1,5 +1,5 @@
 {
   "name": "type-selector",
-  "depMaterials": [],
+  "depMaterials": ["typings/json-schema"],
   "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons"]
 }

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { CascaderData } from '@douyinfe/semi-ui/lib/es/cascader';
 import Icon from '@douyinfe/semi-icons';
 
-import { JsonSchema } from './types';
+import { IJsonSchema } from '../../typings';
 
 export const VariableTypeIcons: { [key: string]: React.ReactNode } = {
   custom: (
@@ -271,7 +271,7 @@ export const ArrayIcons: { [key: string]: React.ReactNode } = {
   ),
 };
 
-export const getSchemaIcon = (value?: Partial<JsonSchema>) => {
+export const getSchemaIcon = (value?: Partial<IJsonSchema>) => {
   if (value?.type === 'array') {
     return ArrayIcons[value.items?.type || 'object'];
   }

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

@@ -2,15 +2,17 @@ import React, { useMemo } from 'react';
 
 import { Button, Cascader } from '@douyinfe/semi-ui';
 
-import { JsonSchema } from './types';
+import { IJsonSchema } from '../../typings';
 import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
 
 interface PropTypes {
-  value?: Partial<JsonSchema>;
-  onChange: (value?: Partial<JsonSchema>) => void;
+  value?: Partial<IJsonSchema>;
+  onChange: (value?: Partial<IJsonSchema>) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
 }
 
-export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | undefined => {
+export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
   }
@@ -18,7 +20,7 @@ export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | unde
   return value?.type ? [value.type] : undefined;
 };
 
-export const parseTypeSelectValue = (value?: string[]): Partial<JsonSchema> | undefined => {
+export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | undefined => {
   const [type, ...subTypes] = value || [];
 
   if (type === 'array') {
@@ -29,15 +31,16 @@ export const parseTypeSelectValue = (value?: string[]): Partial<JsonSchema> | un
 };
 
 export function TypeSelector(props: PropTypes) {
-  const { value, onChange } = props;
+  const { value, onChange, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
   return (
     <Cascader
+      disabled={disabled}
       size="small"
       triggerRender={() => (
-        <Button size="small" style={{ width: 50 }}>
+        <Button size="small" style={style}>
           {getSchemaIcon(value)}
         </Button>
       )}
@@ -51,4 +54,4 @@ export function TypeSelector(props: PropTypes) {
   );
 }
 
-export { JsonSchema, VariableTypeIcons, ArrayIcons, getSchemaIcon };
+export { VariableTypeIcons, ArrayIcons, getSchemaIcon };

package/src/components/variable-selector/config.json

@@ -1,5 +1,5 @@
 {
   "name": "variable-selector",
-  "depMaterials": ["type-selector"],
-  "depPackages": ["@douyinfe/semi-ui"]
+  "depMaterials": ["type-selector", "utils/json-schema", "typings/json-schema"],
+  "depPackages": ["@douyinfe/semi-ui", "styled-components"]
 }

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

@@ -1,47 +1,107 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { TreeSelect } from '@douyinfe/semi-ui';
+import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
+import { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
+import { UIRootTitle, UITag, UITreeSelect } from './styles';
 
-export interface PropTypes {
-  value?: string;
-  config: {
+interface PropTypes {
+  value?: string[];
+  config?: {
     placeholder?: string;
+    notFoundContent?: string;
   };
-  onChange: (value?: string) => void;
+  onChange: (value?: string[]) => void;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
   readonly?: boolean;
   hasError?: boolean;
   style?: React.CSSProperties;
+  triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
+export type VariableSelectorProps = PropTypes;
+
 export const VariableSelector = ({
   value,
   config,
   onChange,
   style,
   readonly = false,
+  includeSchema,
+  excludeSchema,
   hasError,
+  triggerRender,
 }: PropTypes) => {
-  const treeData = useVariableTree();
+  const treeData = useVariableTree({ includeSchema, excludeSchema });
+
+  const treeValue = useMemo(() => {
+    if (typeof value === 'string') {
+      console.warn(
+        'The Value of VariableSelector is a string, it should be an ARRAY. \n',
+        'Please check the value of VariableSelector \n'
+      );
+      return value;
+    }
+    return value?.join('.');
+  }, [value]);
+
+  const renderIcon = (icon: string | JSX.Element) => {
+    if (typeof icon === 'string') {
+      return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;
+    }
+
+    return icon;
+  };
 
   return (
     <>
-      <TreeSelect
+      <UITreeSelect
         dropdownMatchSelectWidth={false}
         disabled={readonly}
         treeData={treeData}
         size="small"
-        value={value}
-        style={{
-          ...style,
-          outline: hasError ? '1px solid red' : undefined,
-        }}
+        value={treeValue}
+        clearIcon={null}
+        $error={hasError}
+        style={style}
         validateStatus={hasError ? 'error' : undefined}
-        onChange={(option) => {
-          onChange(option as string);
+        onChange={(_, _config) => {
+          onChange((_config as TreeNodeData).keyPath as string[]);
+        }}
+        renderSelectedItem={(_option: TreeNodeData) => {
+          if (!_option?.keyPath) {
+            return (
+              <UITag
+                prefixIcon={<IconIssueStroked />}
+                color="amber"
+                closable={!readonly}
+                onClose={() => onChange(undefined)}
+              >
+                {config?.notFoundContent ?? 'Undefined'}
+              </UITag>
+            );
+          }
+
+          return (
+            <UITag
+              prefixIcon={renderIcon(_option.rootMeta?.icon || _option?.icon)}
+              closable={!readonly}
+              onClose={() => onChange(undefined)}
+            >
+              <UIRootTitle>
+                {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
+              </UIRootTitle>
+              {_option.label}
+            </UITag>
+          );
         }}
-        showClear
+        showClear={false}
+        arrowIcon={value ? null : <IconChevronDownStroked size="small" />}
+        triggerRender={triggerRender}
         placeholder={config?.placeholder ?? 'Select Variable...'}
       />
     </>

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

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { Tag, TreeSelect } from '@douyinfe/semi-ui';
+
+export const UIRootTitle = styled.span`
+  margin-right: 4px;
+  color: var(--semi-color-text-2);
+`;
+
+export const UITag = styled(Tag)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0;
+  }
+`;
+
+export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
+  outline: ${({ $error }) => ($error ? '1px solid red' : 'none')};
+
+  height: 22px;
+  min-height: 22px;
+  line-height: 22px;
+
+  & .semi-tree-select-selection {
+    padding: 0 2px;
+    height: 22px;
+  }
+
+  & .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  & .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+`;

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

@@ -5,14 +5,21 @@ import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
 import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
+import { JsonSchemaUtils } from '../../utils/json-schema';
+import { IJsonSchema } from '../../typings/json-schema';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
-export function useVariableTree(): TreeNodeData[] {
+export function useVariableTree(params: {
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+}): TreeNodeData[] {
+  const { includeSchema, excludeSchema } = params;
+
   const available = useScopeAvailable();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {
-    if (variable.meta.icon) {
+    if (variable.meta?.icon) {
       if (typeof variable.meta.icon === 'string') {
         return <img style={{ marginRight: 8 }} width={12} height={12} src={variable.meta.icon} />;
       }
@@ -44,6 +51,10 @@ export function useVariableTree(): TreeNodeData[] {
   ): TreeNodeData | null => {
     let type = variable?.type;
 
+    if (!type) {
+      return null;
+    }
+
     let children: TreeNodeData[] | undefined;
 
     if (ASTMatch.isObject(type)) {
@@ -56,14 +67,31 @@ export function useVariableTree(): TreeNodeData[] {
       }
     }
 
-    const currPath = [...parentFields.map((_field) => _field.key), variable.key].join('.');
+    const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
+    const key = keyPath.join('.');
+
+    const isSchemaInclude = includeSchema
+      ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema)
+      : true;
+    const isSchemaExclude = excludeSchema
+      ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
+      : false;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+
+    // If not match, and no children, return null
+    if (!isSchemaMatch && !children?.length) {
+      return null;
+    }
 
     return {
-      key: currPath,
-      label: variable.meta.title || variable.key,
-      value: currPath,
+      key: key,
+      label: variable.meta?.title || variable.key,
+      value: key,
+      keyPath,
       icon: getVariableTypeIcon(variable),
       children,
+      disabled: !isSchemaMatch,
+      rootMeta: parentFields[0]?.meta,
     };
   };
 

package/src/effects/index.ts

@@ -0,0 +1,2 @@
+export * from './provide-batch-input';
+export * from './provide-batch-outputs';

package/src/effects/provide-batch-input/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "provide-batch-input",
+  "depMaterials": ["flow-value"],
+  "depPackages": []
+}

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

@@ -0,0 +1,38 @@
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
+  private: true,
+  parse: (value: IFlowRefValue, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: [
+          ASTFactory.createProperty({
+            key: 'item',
+            initializer: ASTFactory.createEnumerateExpression({
+              enumerateFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          }),
+          ASTFactory.createProperty({
+            key: 'index',
+            type: ASTFactory.createNumber(),
+          }),
+        ],
+      }),
+    }),
+  ],
+});

package/src/effects/provide-batch-outputs/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "provide-batch-outputs",
+  "depMaterials": ["flow-value"],
+  "depPackages": []
+}

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

@@ -0,0 +1,34 @@
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
+  private: true,
+  parse: (value: Record<string, IFlowRefValue>, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: Object.entries(value).map(([_key, value]) =>
+          ASTFactory.createProperty({
+            key: _key,
+            initializer: ASTFactory.createWrapArrayExpression({
+              wrapFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          })
+        ),
+      }),
+    }),
+  ],
+});

package/src/index.ts

@@ -1 +1,4 @@
 export * from './components';
+export * from './effects';
+export * from './utils';
+export * from './typings';

package/src/typings/flow-value/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "flow-value",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/typings/flow-value/index.ts

@@ -0,0 +1,27 @@
+export interface IFlowConstantValue {
+  type: 'constant';
+  content?: string | number | boolean;
+}
+
+export interface IFlowRefValue {
+  type: 'ref';
+  content?: string[];
+}
+
+export interface IFlowExpressionValue {
+  type: 'expression';
+  content?: string;
+}
+
+export interface IFlowTemplateValue {
+  type: 'template';
+  content?: string;
+}
+
+export type IFlowValue =
+  | IFlowConstantValue
+  | IFlowRefValue
+  | IFlowExpressionValue
+  | IFlowTemplateValue;
+
+export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;

package/src/typings/index.ts

@@ -0,0 +1,2 @@
+export * from './flow-value';
+export * from './json-schema';

package/src/typings/json-schema/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "json-schema",
+  "depMaterials": [],
+  "depPackages": []
+}