@flowgram.ai/form-antd-materials 0.1.8

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

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { useMemo } from 'react';
+
+import { VariableSelector } from '../variable-selector';
+import { DynamicValueInput } from '../dynamic-value-input';
+import { UIInput } from '../constant-input/styles';
+import { JsonSchemaBasicType } from '../../typings';
+import { ConditionRowValueType, Op } from './types';
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import { useRule } from './hooks/useRule';
+import { useOp } from './hooks/useOp';
+
+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,
+                },
+              })
+            }
+            allowClear={true}
+          />
+        </UILeft>
+        <UIRight>
+          {targetSchema ? (
+            <DynamicValueInput
+              readonly={readonly || !rule}
+              value={right}
+              schema={targetSchema}
+              onChange={(v) => onChange({ ...value, right: v })}
+            />
+          ) : (
+            <UIInput size="small" disabled value={opConfig?.rightDisplay || 'Empty'} />
+          )}
+        </UIRight>
+      </UIValues>
+    </UIContainer>
+  );
+}
+
+export type { ConditionRowValueType, Op, VariableSelector };

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": []
+}

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

@@ -0,0 +1,83 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
+
+import { PropsType, Strategy } from './types';
+import { UIInput, UIInputNumber, UISelect } from './styles';
+
+const defaultStrategies: Strategy[] = [
+  {
+    hit: (schema) => schema?.type === 'string',
+    Renderer: (props) => (
+      <UIInput
+        placeholder="Please Input String"
+        size="small"
+        disabled={props.readonly}
+        {...props}
+      />
+    ),
+  },
+  {
+    hit: (schema) => schema?.type === 'number',
+    Renderer: (props) => (
+      <UIInputNumber
+        placeholder="Please Input Number"
+        size="small"
+        disabled={props.readonly}
+        {...props}
+      />
+    ),
+  },
+  {
+    hit: (schema) => schema?.type === 'integer',
+    Renderer: (props) => (
+      <UIInputNumber
+        placeholder="Please Input Integer"
+        size="small"
+        disabled={props.readonly}
+        precision={0}
+        {...props}
+      />
+    ),
+  },
+  {
+    hit: (schema) => schema?.type === 'boolean',
+    Renderer: (props) => {
+      const { value, onChange, ...rest } = props;
+      return (
+        <UISelect
+          placeholder="Please Select Boolean"
+          size="small"
+          disabled={props.readonly}
+          options={[
+            { 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 <UIInput size="small" disabled placeholder="Unsupported type" />;
+  }
+
+  return <Renderer value={value} onChange={onChange} readonly={readonly} {...rest} />;
+}

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import type { SelectProps } from 'antd/es/select';
+import type { InputNumberProps } from 'antd/es/input-number';
+import { Input, InputNumber, Select } from 'antd';
+
+const commonStyle = `
+  width: 100%;
+  height: 22px;
+  border-radius: 6px;
+  padding: 4px 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const UIInput = styled(Input)`
+  ${commonStyle}
+`;
+export const UIInputNumber: React.ComponentType<InputNumberProps> = styled(InputNumber)`
+  ${commonStyle}
+  padding: 4px 4px;
+`;
+export const UISelect: React.ComponentType<SelectProps> = styled(Select)`
+  ${commonStyle}
+`;

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": ["styled-components"]
+}

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

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+
+import { theme } from 'antd';
+import { SettingFilled } from '@ant-design/icons';
+
+import { VariableSelector } from '../variable-selector';
+import { Strategy } from '../constant-input/types';
+import { ConstantInput } from '../constant-input';
+import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IJsonSchema } from '../../typings';
+import { UIContainer, UIMain, UITrigger } from './styles';
+
+const { useToken } = theme;
+
+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) {
+  const { token } = useToken();
+
+  // 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
+          style={{ width: '100%' }}
+          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={() => <SettingFilled style={{ color: token.colorPrimary }} />}
+    />
+  );
+
+  return (
+    <UIContainer style={style}>
+      <UIMain>{renderMain()}</UIMain>
+      <UITrigger>{renderTrigger()}</UITrigger>
+    </UIContainer>
+  );
+}

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

@@ -0,0 +1,29 @@
+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;
+`;
+
+export const UITrigger = styled.div`
+  outline: none;
+  height: 22px;
+  min-height: 22px;
+  line-height: 22px;
+
+  & .ant-select-selection-wrap {
+    display: none;
+  }
+
+  & .ant-select-arrow {
+    right: 6px;
+    & > .anticon {
+      pointer-events: none !important;
+    }
+  }
+`;

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,21 @@
+import React, { useEffect, useState } from 'react';
+
+import { Input, InputProps } from 'antd';
+
+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 as any).target?.value || '');
+      }}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,133 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+import { Button, Tooltip, theme } from 'antd';
+import { CodeOutlined } from '@ant-design/icons';
+
+import { ConstantInput } from '../constant-input';
+import { IJsonSchema } from '../../typings';
+import { getValueType } from './utils';
+import {
+  ConstantInputWrapper,
+  JSONHeader,
+  JSONHeaderLeft,
+  JSONHeaderRight,
+  JSONViewerWrapper,
+} from './styles';
+
+const { useToken } = theme;
+
+/**
+ * 根据不同的数据类型渲染对应的默认值输入组件。
+ * @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 { token } = useToken();
+  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // TODO add JsonViewer
+  // 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 title={jsonFormatText ?? 'Format'}>
+            <Button
+              icon={<CodeOutlined style={{ color: token.colorPrimary }} />}
+              size="small"
+              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>
+  );
+}