@flowgram.ai/form-materials 0.1.31 → 0.2.0

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/hooks.tsx

@@ -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;
@@ -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/type-selector/index.tsx

@@ -8,6 +8,8 @@ import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constan
 interface PropTypes {
   value?: Partial<JsonSchema>;
   onChange: (value?: Partial<JsonSchema>) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
 }
 
 export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | undefined => {
@@ -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>
       )}

package/src/components/type-selector/types.ts

@@ -1,19 +1,5 @@
-export type BasicType = 'boolean' | 'string' | 'integer' | 'number' | 'object' | 'array';
+import { VarJSONSchema } from '@flowgram.ai/editor';
 
-export interface JsonSchema<T = string> {
-  type?: T;
-  default?: any;
-  title?: string;
-  description?: string;
-  enum?: (string | number)[];
-  properties?: Record<string, JsonSchema>;
-  additionalProperties?: JsonSchema;
-  items?: JsonSchema;
-  required?: string[];
-  $ref?: string;
-  extra?: {
-    order?: number;
-    literal?: boolean; // is literal type
-    formComponent?: string; // Set the render component
-  };
-}
+export type BasicType = VarJSONSchema.BasicType;
+
+export type JsonSchema = VarJSONSchema.ISchema;

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

@@ -1,5 +1,5 @@
 {
   "name": "variable-selector",
   "depMaterials": ["type-selector"],
-  "depPackages": ["@douyinfe/semi-ui"]
+  "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 { VarJSONSchema } from '@flowgram.ai/editor';
+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 { 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?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+  excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
   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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useScopeAvailable, ASTMatch, BaseVariableField } from '@flowgram.ai/editor';
+import { useScopeAvailable, ASTMatch, BaseVariableField, VarJSONSchema } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
@@ -8,11 +8,16 @@ import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
-export function useVariableTree(): TreeNodeData[] {
+export function useVariableTree(params: {
+  includeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+  excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+}): 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 +49,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 +65,27 @@ 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 ? type.isEqualWithJSONSchema(includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? type.isEqualWithJSONSchema(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 @@
+export * from './flow-value';

package/src/utils/format-legacy-refs/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "format-legacy-ref",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/utils/format-legacy-refs/index.ts

@@ -0,0 +1,153 @@
+import { isObject } from 'lodash';
+
+interface LegacyFlowRefValueSchema {
+  type: 'ref';
+  content: string;
+}
+
+interface NewFlowRefValueSchema {
+  type: 'ref';
+  content: string[];
+}
+
+/**
+ * In flowgram 0.2.0, for introducing Loop variable functionality,
+ * the FlowRefValueSchema type definition is updated:
+ *
+ * interface LegacyFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string;
+ * }
+ *
+ * interface NewFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string[];
+ * }
+ *
+ *
+ * For making sure backend json will not be changed, we provide format legacy ref utils for updating the formData
+ *
+ * How to use:
+ *
+ * 1. Call formatLegacyRefOnSubmit on the formData before submitting
+ * 2. Call formatLegacyRefOnInit on the formData after submitting
+ *
+ * Example:
+ * import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+ * formMeta: {
+ *  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+ *  formatOnInit: (data) => formatLegacyRefOnInit(data),
+ * }
+ */
+export function formatLegacyRefOnSubmit(value: any): any {
+  if (isObject(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value]: [string, any]) => [
+        key,
+        formatLegacyRefOnSubmit(value),
+      ])
+    );
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+
+  return value;
+}
+
+/**
+ * In flowgram 0.2.0, for introducing Loop variable functionality,
+ * the FlowRefValueSchema type definition is updated:
+ *
+ * interface LegacyFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string;
+ * }
+ *
+ * interface NewFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string[];
+ * }
+ *
+ *
+ * For making sure backend json will not be changed, we provide format legacy ref utils for updating the formData
+ *
+ * How to use:
+ *
+ * 1. Call formatLegacyRefOnSubmit on the formData before submitting
+ * 2. Call formatLegacyRefOnInit on the formData after submitting
+ *
+ * Example:
+ * import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+ *
+ * formMeta: {
+ *  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+ *  formatOnInit: (data) => formatLegacyRefOnInit(data),
+ * }
+ */
+export function formatLegacyRefOnInit(value: any): any {
+  if (isObject(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value]: [string, any]) => [
+        key,
+        formatLegacyRefOnInit(value),
+      ])
+    );
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+
+  return value;
+}
+
+export function isLegacyFlowRefValueSchema(value: any): value is LegacyFlowRefValueSchema {
+  return (
+    isObject(value) &&
+    Object.keys(value).length === 2 &&
+    (value as any).type === 'ref' &&
+    typeof (value as any).content === 'string'
+  );
+}
+
+export function isNewFlowRefValueSchema(value: any): value is NewFlowRefValueSchema {
+  return (
+    isObject(value) &&
+    Object.keys(value).length === 2 &&
+    (value as any).type === 'ref' &&
+    Array.isArray((value as any).content)
+  );
+}
+
+export function formatLegacyRefToNewRef(value: LegacyFlowRefValueSchema) {
+  const keyPath = value.content.split('.');
+
+  if (keyPath[1] === 'outputs') {
+    return {
+      type: 'ref',
+      content: [`${keyPath[0]}.${keyPath[1]}`, ...(keyPath.length > 2 ? keyPath.slice(2) : [])],
+    };
+  }
+
+  return {
+    type: 'ref',
+    content: keyPath,
+  };
+}
+
+export function formatNewRefToLegacyRef(value: NewFlowRefValueSchema) {
+  return {
+    type: 'ref',
+    content: value.content.join('.'),
+  };
+}