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

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

@@ -6,79 +6,35 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 
-import { Input, InputNumber, Select } from '@douyinfe/semi-ui';
+import { Input } from '@douyinfe/semi-ui';
 
-import { PropsType, Strategy } from './types';
-
-const defaultStrategies: Strategy[] = [
-  {
-    hit: (schema) => schema?.type === 'string',
-    Renderer: (props) => (
-      <Input placeholder="Please Input String" size="small" disabled={props.readonly} {...props} />
-    ),
-  },
-  {
-    hit: (schema) => schema?.type === 'number',
-    Renderer: (props) => (
-      <InputNumber
-        placeholder="Please Input Number"
-        size="small"
-        disabled={props.readonly}
-        hideButtons
-        {...props}
-      />
-    ),
-  },
-  {
-    hit: (schema) => schema?.type === 'integer',
-    Renderer: (props) => (
-      <InputNumber
-        placeholder="Please Input Integer"
-        size="small"
-        disabled={props.readonly}
-        hideButtons
-        precision={0}
-        {...props}
-      />
-    ),
-  },
-  {
-    hit: (schema) => schema?.type === 'boolean',
-    Renderer: (props) => {
-      const { value, onChange, ...rest } = props;
-      return (
-        <Select
-          placeholder="Please Select Boolean"
-          size="small"
-          disabled={props.readonly}
-          optionList={[
-            { label: 'True', value: 1 },
-            { label: 'False', value: 0 },
-          ]}
-          value={value ? 1 : 0}
-          onChange={(value) => onChange?.(!!value)}
-          {...rest}
-        />
-      );
-    },
-  },
-];
+import { useTypeManager } from '../../plugins';
+import { PropsType } from './types';
 
 export function ConstantInput(props: PropsType) {
-  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
 
-  const strategies = useMemo(
-    () => [...defaultStrategies, ...(extraStrategies || [])],
-    [extraStrategies]
-  );
+  const typeManager = useTypeManager();
 
   const Renderer = useMemo(() => {
-    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+    const strategy = (strategies || []).find((_strategy) => _strategy.hit(schema));
+
+    if (!strategy) {
+      return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
+    }
 
     return strategy?.Renderer;
   }, [strategies, schema]);
 
   if (!Renderer) {
+    if (fallbackRenderer) {
+      return React.createElement(fallbackRenderer, {
+        value,
+        onChange,
+        readonly,
+        ...rest,
+      });
+    }
     return <Input size="small" disabled placeholder="Unsupported type" />;
   }
 

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

@@ -3,21 +3,18 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IJsonSchema } from '../../typings';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+import { ConstantRendererProps } from '../../plugins';
 
 export interface Strategy<Value = any> {
   hit: (schema: IJsonSchema) => boolean;
-  Renderer: React.FC<RendererProps<Value>>;
-}
-
-export interface RendererProps<Value = any> {
-  value?: Value;
-  onChange?: (value: Value) => void;
-  readonly?: boolean;
+  Renderer: React.FC<ConstantRendererProps<Value>>;
 }
 
-export interface PropsType extends RendererProps {
+export interface PropsType extends ConstantRendererProps {
   schema: IJsonSchema;
   strategies?: Strategy[];
+  fallbackRenderer?: React.FC<ConstantRendererProps>;
   [key: string]: any;
 }

package/src/components/display-flow-value/config.json

@@ -0,0 +1,8 @@
+{
+  "name": "display-flow-value",
+  "depMaterials": [
+    "components/display-schema-tag",
+    "typings/flow-value"
+  ],
+  "depPackages": []
+}

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

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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';
+
+interface PropsType {
+  value?: IFlowValue;
+  title?: JSX.Element | string;
+  showIconInTree?: boolean;
+  typeManager?: JsonSchemaTypeManager;
+}
+
+export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
+  const available = useScopeAvailable();
+
+  const variable = value?.type === 'ref' ? available.getByKeyPath(value?.content) : undefined;
+
+  const schema = useMemo(() => {
+    if (value?.type === 'ref') {
+      return JsonSchemaUtils.astToSchema(variable?.type);
+    }
+    if (value?.type === 'template') {
+      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 { type: 'unknown' };
+  }, [value, variable?.hash]);
+
+  return (
+    <DisplaySchemaTag
+      title={title}
+      value={schema}
+      showIconInTree={showIconInTree}
+      warning={value?.type === 'ref' && !variable}
+    />
+  );
+}

package/src/components/display-inputs-values/config.json

@@ -0,0 +1,9 @@
+{
+  "name": "display-outputs",
+  "depMaterials": [
+    "components/display-schema-tag"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui"
+  ]
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { DisplayFlowValue } from '../display-flow-value';
+import { IFlowValue } from '../../typings';
+import { DisplayInputsWrapper } from './styles';
+
+interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  showIconInTree?: boolean;
+}
+
+export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
+  const childEntries = Object.entries(value || {});
+
+  return (
+    <DisplayInputsWrapper>
+      {childEntries.map(([key, value]) => (
+        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+      ))}
+    </DisplayInputsWrapper>
+  );
+}

package/src/components/display-inputs-values/styles.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const DisplayInputsWrapper = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;

package/src/components/display-outputs/config.json

@@ -0,0 +1,10 @@
+{
+  "name": "display-outputs",
+  "depMaterials": [
+    "components/display-flow-value"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components"
+  ]
+}

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

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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 { DisplayOutputsWrapper } from './styles';
+
+interface PropsType {
+  value?: IJsonSchema;
+  showIconInTree?: boolean;
+  displayFromScope?: boolean;
+  typeManager?: JsonSchemaTypeManager;
+}
+
+export function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType) {
+  const scope = useCurrentScope();
+  const refresh = useRefresh();
+
+  useEffect(() => {
+    if (!displayFromScope) {
+      return () => null;
+    }
+
+    const disposable = scope.output.onListOrAnyVarChange(() => {
+      refresh();
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  }, [displayFromScope]);
+
+  const properties: IJsonSchema['properties'] = displayFromScope
+    ? scope.output.variables?.reduce((acm, curr) => {
+        acm = {
+          ...acm,
+          ...(JsonSchemaUtils.astToSchema(curr.type)?.properties || {}),
+        };
+        return acm;
+      }, {})
+    : value?.properties || {};
+
+  const childEntries = Object.entries(properties || {});
+
+  return (
+    <DisplayOutputsWrapper>
+      {childEntries.map(([key, schema]) => (
+        <DisplaySchemaTag
+          key={key}
+          title={key}
+          value={schema}
+          showIconInTree={showIconInTree}
+          warning={!schema}
+        />
+      ))}
+    </DisplayOutputsWrapper>
+  );
+}

package/src/components/display-outputs/styles.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const DisplayOutputsWrapper = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;

package/src/components/display-schema-tag/config.json

@@ -0,0 +1,10 @@
+{
+  "name": "display-schema-tag",
+  "depMaterials": [
+    "components/display-schema-tree"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components"
+  ]
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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 { PopoverContent, StyledTag, TitleSpan } from './styles';
+
+interface PropsType {
+  title?: JSX.Element | string;
+  value?: IJsonSchema;
+  showIconInTree?: boolean;
+  warning?: boolean;
+}
+
+export function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }: PropsType) {
+  const typeManager = useTypeManager();
+  const icon =
+    typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({ type: 'unknown' });
+
+  return (
+    <Popover
+      content={
+        <PopoverContent>
+          <DisplaySchemaTree value={value} typeManager={typeManager} showIcon={showIconInTree} />
+        </PopoverContent>
+      }
+    >
+      <StyledTag color={warning ? 'amber' : 'white'}>
+        {icon &&
+          React.cloneElement(icon, {
+            className: 'tag-icon',
+          })}
+        {title && <TitleSpan>{title}</TitleSpan>}
+      </StyledTag>
+    </Popover>
+  );
+}

package/src/components/display-schema-tag/styles.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+import { Tag } from '@douyinfe/semi-ui';
+
+export const PopoverContent = styled.div`
+  padding: 10px;
+`;
+
+export const StyledTag = styled(Tag)`
+  padding: 4px;
+
+  .tag-icon {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+export const TitleSpan = styled.span`
+  display: inline-block;
+  margin-left: 4px;
+  margin-top: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/src/components/display-schema-tree/config.json

@@ -0,0 +1,11 @@
+{
+  "name": "display-schema-tree",
+  "depMaterials": [
+    "plugins/json-schema-preset"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+
+import { useTypeManager } from '../../plugins';
+import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
+
+interface PropsType {
+  value?: IJsonSchema;
+  parentKey?: string;
+  depth?: number;
+  drilldown?: boolean;
+  showIcon?: boolean;
+  typeManager?: JsonSchemaTypeManager;
+}
+
+export function DisplaySchemaTree(props: Omit<PropsType, 'parentKey' | 'depth'>) {
+  return <SchemaTree {...props} />;
+}
+
+function SchemaTree(props: PropsType) {
+  const {
+    value: schema = {},
+    drilldown = true,
+    depth = 0,
+    showIcon = true,
+    parentKey = '',
+  } = props || {};
+
+  const typeManager = useTypeManager();
+
+  const config = typeManager.getTypeBySchema(schema);
+  const title = typeManager.getComplexText(schema);
+  const icon = typeManager?.getDisplayIcon(schema);
+  let properties: IJsonSchema['properties'] =
+    drilldown && config ? config.getTypeSchemaProperties(schema) : {};
+  const childEntries = Object.entries(properties || {});
+
+  return (
+    <TreeItem depth={depth} key={parentKey || 'root'}>
+      <TreeRow>
+        {depth !== 0 && <HorizontalLine />}
+        {showIcon &&
+          icon &&
+          React.cloneElement(icon, {
+            className: 'tree-icon',
+          })}
+        <TreeTitle>
+          {parentKey ? (
+            <>
+              {`${parentKey} (`}
+              {title}
+              {')'}
+            </>
+          ) : (
+            title
+          )}
+        </TreeTitle>
+      </TreeRow>
+      {childEntries?.length ? (
+        <TreeLevel>
+          {childEntries.map(([key, value]) => (
+            <SchemaTree key={key} {...props} parentKey={key} value={value} depth={depth + 1} />
+          ))}
+        </TreeLevel>
+      ) : null}
+    </TreeItem>
+  );
+}

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

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled, { css } from 'styled-components';
+
+export const TreeRow = styled.div`
+  display: flex;
+  align-items: center;
+
+  .tree-icon {
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+  }
+
+  height: 27px;
+  white-space: nowrap;
+`;
+
+export const HorizontalLine = styled.div`
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &::after {
+    top: 0px;
+    right: 6px;
+    width: 15px;
+    height: 1px;
+  }
+`;
+
+export const TreeTitle = styled.div`
+  // overflow: hidden;
+  // text-overflow: ellipsis;
+`;
+
+export const TreeLevel = styled.div`
+  padding-left: 30px;
+  position: relative;
+
+  /* &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+    top: 0px;
+    bottom: 0px;
+    left: -22px;
+    width: 1px;
+  } */
+`;
+
+export const TreeItem = styled.div<{ depth: number }>`
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &:not(:last-child)::before {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: -22px;
+  }
+
+  &:last-child::before {
+    width: 1px;
+    top: 0;
+    height: 14px;
+    left: -22px;
+  }
+
+  ${(props) =>
+    props.depth === 0 &&
+    css`
+      &::before {
+        width: 0px !important;
+      }
+    `}
+`;

package/src/components/dynamic-value-input/config.json

@@ -1,5 +1,14 @@
 {
   "name": "dynamic-value-input",
-  "depMaterials": ["flow-value", "constant-input", "variable-selector"],
-  "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons", "styled-components"]
+  "depMaterials": [
+    "flow-value",
+    "constant-input",
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "styled-components",
+    "@flowgram.ai/json-schema"
+  ]
 }

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

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo, useState } from 'react';
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { IFlowConstantRefValue } from '../../typings/flow-value';
+
+export function useRefVariable(value?: IFlowConstantRefValue) {
+  const available = useScopeAvailable();
+  const refVariable = useMemo(() => {
+    if (value?.type === 'ref') {
+      return available.getByKeyPath(value.content);
+    }
+  }, [value, available]);
+
+  return refVariable;
+}
+
+export function useSelectSchema(
+  schemaFromProps?: IJsonSchema,
+  constantProps?: {
+    schema?: IJsonSchema;
+  },
+  value?: IFlowConstantRefValue
+) {
+  let defaultSelectSchema = schemaFromProps || constantProps?.schema || { type: 'string' };
+  if (value?.type === 'constant') {
+    defaultSelectSchema = value?.schema || defaultSelectSchema;
+  }
+
+  const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
+
+  return [selectSchema, setSelectSchema] as const;
+}
+
+export function useIncludeSchema(schemaFromProps?: IJsonSchema) {
+  const includeSchema = useMemo(() => {
+    if (!schemaFromProps) {
+      return;
+    }
+    if (schemaFromProps?.type === 'number') {
+      return [schemaFromProps, { type: 'integer' }];
+    }
+    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+  }, [schemaFromProps]);
+
+  return includeSchema;
+}