@flowgram.ai/form-materials 0.1.0-alpha.8

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

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+
+import { Input } from '@douyinfe/semi-ui';
+
+import { ConditionRowValueType, Op } 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';
+import { JsonSchemaBasicType } from '../../typings';
+
+interface PropTypes {
+  value?: ConditionRowValueType;
+  onChange: (value?: ConditionRowValueType) => void;
+  style?: React.CSSProperties;
+  readonly?: boolean;
+}
+
+export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
+  const { left, operator, right } = value || {};
+  const { rule } = useRule(left);
+  const { renderOpSelect, opConfig } = useOp({
+    rule,
+    op: operator,
+    onChange: (v) => onChange({ ...value, operator: v }),
+  });
+
+  const targetSchema = useMemo(() => {
+    const targetType: JsonSchemaBasicType | null = rule?.[operator as Op] || null;
+    return targetType ? { type: targetType, extra: { weak: true } } : null;
+  }, [rule, opConfig]);
+
+  return (
+    <UIContainer style={style}>
+      <UIOperator>{renderOpSelect()}</UIOperator>
+      <UIValues>
+        <UILeft>
+          <VariableSelector
+            readonly={readonly}
+            style={{ width: '100%' }}
+            value={left?.content}
+            onChange={(v) =>
+              onChange({
+                ...value,
+                left: {
+                  type: 'ref',
+                  content: v,
+                },
+              })
+            }
+          />
+        </UILeft>
+        <UIRight>
+          {targetSchema ? (
+            <DynamicValueInput
+              readonly={readonly || !rule}
+              value={right}
+              schema={targetSchema}
+              onChange={(v) => onChange({ ...value, right: v })}
+            />
+          ) : (
+            <Input size="small" disabled value={opConfig?.rightDisplay || 'Empty'} />
+          )}
+        </UIRight>
+      </UIValues>
+    </UIContainer>
+  );
+}
+
+export { ConditionRowValueType };

package/src/components/condition-row/styles.tsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const UIContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const UIOperator = styled.div``;
+
+export const UILeft = styled.div`
+  width: 100%;
+`;
+
+export const UIRight = styled.div`
+  width: 100%;
+`;
+
+export const UIValues = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;

package/src/components/condition-row/types.ts

@@ -0,0 +1,37 @@
+import { IFlowConstantRefValue, IFlowRefValue, JsonSchemaBasicType } from '../../typings';
+
+export enum Op {
+  EQ = 'eq',
+  NEQ = 'neq',
+  GT = 'gt',
+  GTE = 'gte',
+  LT = 'lt',
+  LTE = 'lte',
+  IN = 'in',
+  NIN = 'nin',
+  CONTAINS = 'contains',
+  NOT_CONTAINS = 'not_contains',
+  IS_EMPTY = 'is_empty',
+  IS_NOT_EMPTY = 'is_not_empty',
+  IS_TRUE = 'is_true',
+  IS_FALSE = 'is_false',
+}
+
+export interface OpConfig {
+  label: string;
+  abbreviation: string;
+  // When right is not a value, display this text
+  rightDisplay?: string;
+}
+
+export type OpConfigs = Record<Op, OpConfig>;
+
+export type IRule = Partial<Record<Op, JsonSchemaBasicType | null>>;
+
+export type IRules = Record<JsonSchemaBasicType, IRule>;
+
+export interface ConditionRowValueType {
+  left?: IFlowRefValue;
+  operator?: Op;
+  right?: IFlowConstantRefValue;
+}

package/src/components/constant-input/config.json

@@ -0,0 +1,6 @@
+
+{
+  "name": "constant-input",
+  "depMaterials": ["typings/json-schema"],
+  "depPackages": ["@douyinfe/semi-ui"]
+}

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

@@ -0,0 +1,81 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
+
+import { Input, InputNumber, Select } 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}
+        />
+      );
+    },
+  },
+];
+
+export function ConstantInput(props: PropsType) {
+  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+
+  const strategies = useMemo(
+    () => [...defaultStrategies, ...(extraStrategies || [])],
+    [extraStrategies]
+  );
+
+  const Renderer = useMemo(() => {
+    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+
+    return strategy?.Renderer;
+  }, [strategies, schema]);
+
+  if (!Renderer) {
+    return <Input size="small" disabled placeholder="Unsupported type" />;
+  }
+
+  return <Renderer value={value} onChange={onChange} readonly={readonly} {...rest} />;
+}

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

@@ -0,0 +1,18 @@
+import { IJsonSchema } from '../../typings';
+
+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;
+}
+
+export interface PropsType extends RendererProps {
+  schema: IJsonSchema;
+  strategies?: Strategy[];
+  [key: string]: any;
+}

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

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

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

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+
+import { IconButton } from '@douyinfe/semi-ui';
+import { IconSetting } from '@douyinfe/semi-icons';
+
+import { Strategy } from '../constant-input/types';
+import { ConstantInput } from '../constant-input';
+import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { UIContainer, UIMain, UITrigger } from './styles';
+import { VariableSelector } from '../variable-selector';
+import { IJsonSchema } from '../../typings';
+
+interface PropsType {
+  value?: IFlowConstantRefValue;
+  onChange: (value?: IFlowConstantRefValue) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+  schema?: IJsonSchema;
+  constantProps?: {
+    strategies?: Strategy[];
+    [key: string]: any;
+  };
+}
+
+export function DynamicValueInput({
+  value,
+  onChange,
+  readonly,
+  style,
+  schema,
+  constantProps,
+}: PropsType) {
+  // When is number type, include integer as well
+  const includeSchema = useMemo(() => {
+    if (schema?.type === 'number') {
+      return [schema, { type: 'integer' }];
+    }
+    return schema;
+  }, [schema]);
+
+  const renderMain = () => {
+    if (value?.type === 'ref') {
+      // Display Variable Or Delete
+      return (
+        <VariableSelector
+          value={value?.content}
+          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+          includeSchema={includeSchema}
+          readonly={readonly}
+        />
+      );
+    }
+
+    return (
+      <ConstantInput
+        value={value?.content}
+        onChange={(_v) => onChange({ type: 'constant', content: _v })}
+        schema={schema || { type: 'string' }}
+        readonly={readonly}
+        {...constantProps}
+      />
+    );
+  };
+
+  const renderTrigger = () => (
+    <VariableSelector
+      style={{ width: '100%' }}
+      value={value?.type === 'ref' ? value?.content : undefined}
+      onChange={(_v) => onChange({ type: 'ref', content: _v })}
+      includeSchema={includeSchema}
+      readonly={readonly}
+      triggerRender={() => (
+        <IconButton disabled={readonly} size="small" icon={<IconSetting size="small" />} />
+      )}
+    />
+  );
+
+  return (
+    <UIContainer style={style}>
+      <UIMain>{renderMain()}</UIMain>
+      <UITrigger>{renderTrigger()}</UITrigger>
+    </UIContainer>
+  );
+}

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

@@ -0,0 +1,7 @@
+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';
+export * from './condition-row';

package/src/components/json-schema-editor/components/blur-input.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+
+import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
+
+export function BlurInput(props: InputProps) {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(props.value as string);
+  }, [props.value]);
+
+  return (
+    <Input
+      {...props}
+      value={value}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      onBlur={(e) => props.onChange?.(value, e)}
+    />
+  );
+}

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

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

package/src/components/json-schema-editor/default-value.tsx

@@ -0,0 +1,130 @@
+import React, { useRef, useState, useCallback } from 'react';
+
+import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
+import { IconBrackets } from '@douyinfe/semi-icons';
+
+import { getValueType } from './utils';
+import {
+  ConstantInputWrapper,
+  JSONHeader,
+  JSONHeaderLeft,
+  JSONHeaderRight,
+  JSONViewerWrapper,
+} from './styles';
+import { ConstantInput } from '../constant-input';
+import { IJsonSchema } from '../../typings';
+
+/**
+ * 根据不同的数据类型渲染对应的默认值输入组件。
+ * @param props - 组件属性，包括 value, type, placeholder, onChange。
+ * @returns 返回对应类型的输入组件或 null。
+ */
+export function DefaultValue(props: {
+  value: any;
+  schema?: IJsonSchema;
+  name?: string;
+  type?: string;
+  placeholder?: string;
+  jsonFormatText?: string;
+  onChange: (value: any) => void;
+}) {
+  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const JsonViewerRef = useRef<JsonViewer>(null);
+
+  // 为 JsonViewer 添加状态管理
+  const [internalJsonValue, setInternalJsonValue] = useState<string>(
+    getValueType(value) === 'string' ? value : ''
+  );
+
+  // 使用 useCallback 创建稳定的回调函数
+  const handleJsonChange = useCallback((val: string) => {
+    // 只在值真正改变时才更新状态
+    if (val !== internalJsonValue) {
+      setInternalJsonValue(val);
+    }
+  }, []);
+
+  // 处理编辑完成事件
+  const handleEditComplete = useCallback(() => {
+    // 只有当存在key，编辑完成时才触发父组件的 onChange
+    onChange(internalJsonValue);
+    // 确保在更新后移除焦点
+    requestAnimationFrame(() => {
+      // JsonViewerRef.current?.format();
+      wrapperRef.current?.blur();
+    });
+    setJsonReadOnly(true);
+  }, [internalJsonValue, onChange]);
+
+  const [jsonReadOnly, setJsonReadOnly] = useState<boolean>(true);
+
+  const handleFormatJson = useCallback(() => {
+    try {
+      const parsed = JSON.parse(internalJsonValue);
+      const formatted = JSON.stringify(parsed, null, 4);
+      setInternalJsonValue(formatted);
+      onChange(formatted);
+    } catch (error) {
+      console.error('Invalid JSON:', error);
+    }
+  }, [internalJsonValue, onChange]);
+
+  return type === 'object' ? (
+    <>
+      <JSONHeader>
+        <JSONHeaderLeft>json</JSONHeaderLeft>
+        <JSONHeaderRight>
+          <Tooltip content={jsonFormatText ?? 'Format'}>
+            <IconButton
+              icon={<IconBrackets style={{ color: 'var(--semi-color-primary)' }} />}
+              size="small"
+              type="tertiary"
+              theme="borderless"
+              onClick={handleFormatJson}
+            />
+          </Tooltip>
+        </JSONHeaderRight>
+      </JSONHeader>
+
+      <JSONViewerWrapper
+        ref={wrapperRef}
+        tabIndex={-1}
+        onBlur={(e) => {
+          if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget as Node)) {
+            handleEditComplete();
+          }
+        }}
+        onClick={(e: React.MouseEvent) => {
+          setJsonReadOnly(false);
+        }}
+      >
+        <JsonViewer
+          ref={JsonViewerRef}
+          value={getValueType(value) === 'string' ? value : ''}
+          height={120}
+          width="100%"
+          showSearch={false}
+          options={{
+            readOnly: jsonReadOnly,
+            formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' },
+          }}
+          style={{
+            padding: 0,
+          }}
+          onChange={handleJsonChange}
+        />
+      </JSONViewerWrapper>
+    </>
+  ) : (
+    <ConstantInputWrapper>
+      <ConstantInput
+        value={value}
+        onChange={(_v) => onChange(_v)}
+        schema={schema || { type: 'string' }}
+        placeholder={placeholder ?? 'Default value if parameter is not provided'}
+      />
+    </ConstantInputWrapper>
+  );
+}

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

@@ -0,0 +1,161 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { IJsonSchema } from '../../typings';
+import { PropertyValueType } from './types';
+
+let _id = 0;
+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);
+
+  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]);
+
+  const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
+    setPropertyList((_list) => {
+      const next = updater(_list);
+
+      // onChange to parent
+      const nextProperties: Record<string, IJsonSchema> = {};
+      const nextRequired: string[] = [];
+
+      for (const _property of next) {
+        if (!_property.name) {
+          continue;
+        }
+
+        nextProperties[_property.name] = _property;
+
+        if (_property.isPropertyRequired) {
+          nextRequired.push(_property.name);
+        }
+      }
+
+      let drilldownSchema = value || {};
+      if (drilldown.path) {
+        drilldownSchema = drilldown.path.reduce((acc, key) => acc[key], value || {});
+      }
+      drilldownSchema.properties = nextProperties;
+      drilldownSchema.required = nextRequired;
+
+      onChange?.(value || {});
+
+      return next;
+    });
+  };
+
+  const onAddProperty = () => {
+    updatePropertyList((_list) => [
+      ..._list,
+      { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
+    ]);
+  };
+
+  const onRemoveProperty = (key: number) => {
+    updatePropertyList((_list) => _list.filter((_property) => _property.key !== key));
+  };
+
+  const onEditProperty = (key: number, nextValue: PropertyValueType) => {
+    updatePropertyList((_list) =>
+      _list.map((_property) => (_property.key === key ? nextValue : _property))
+    );
+  };
+
+  useEffect(() => {
+    if (!isDrilldownObject) {
+      setPropertyList([]);
+    }
+  }, [isDrilldownObject]);
+
+  return {
+    propertyList,
+    isDrilldownObject,
+    onAddProperty,
+    onRemoveProperty,
+    onEditProperty,
+  };
+}