@flowgram.ai/form-materials 0.2.1 → 0.2.2

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

@@ -0,0 +1,123 @@
+import { IRules, Op, OpConfigs } from './types';
+
+export const rules: IRules = {
+  string: {
+    [Op.EQ]: 'string',
+    [Op.NEQ]: 'string',
+    [Op.CONTAINS]: 'string',
+    [Op.NOT_CONTAINS]: 'string',
+    [Op.IN]: 'array',
+    [Op.NIN]: 'array',
+    [Op.IS_EMPTY]: 'string',
+    [Op.IS_NOT_EMPTY]: 'string',
+  },
+  number: {
+    [Op.EQ]: 'number',
+    [Op.NEQ]: 'number',
+    [Op.GT]: 'number',
+    [Op.GTE]: 'number',
+    [Op.LT]: 'number',
+    [Op.LTE]: 'number',
+    [Op.IN]: 'array',
+    [Op.NIN]: 'array',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  integer: {
+    [Op.EQ]: 'number',
+    [Op.NEQ]: 'number',
+    [Op.GT]: 'number',
+    [Op.GTE]: 'number',
+    [Op.LT]: 'number',
+    [Op.LTE]: 'number',
+    [Op.IN]: 'array',
+    [Op.NIN]: 'array',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  boolean: {
+    [Op.EQ]: 'boolean',
+    [Op.NEQ]: 'boolean',
+    [Op.IS_TRUE]: null,
+    [Op.IS_FALSE]: null,
+    [Op.IN]: 'array',
+    [Op.NIN]: 'array',
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  object: {
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  array: {
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+  map: {
+    [Op.IS_EMPTY]: null,
+    [Op.IS_NOT_EMPTY]: null,
+  },
+};
+
+export const opConfigs: OpConfigs = {
+  [Op.EQ]: {
+    label: 'Equal',
+    abbreviation: '=',
+  },
+  [Op.NEQ]: {
+    label: 'Not Equal',
+    abbreviation: '≠',
+  },
+  [Op.GT]: {
+    label: 'Greater Than',
+    abbreviation: '>',
+  },
+  [Op.GTE]: {
+    label: 'Greater Than or Equal',
+    abbreviation: '>=',
+  },
+  [Op.LT]: {
+    label: 'Less Than',
+    abbreviation: '<',
+  },
+  [Op.LTE]: {
+    label: 'Less Than or Equal',
+    abbreviation: '<=',
+  },
+  [Op.IN]: {
+    label: 'In',
+    abbreviation: '∈',
+  },
+  [Op.NIN]: {
+    label: 'Not In',
+    abbreviation: '∉',
+  },
+  [Op.CONTAINS]: {
+    label: 'Contains',
+    abbreviation: '⊇',
+  },
+  [Op.NOT_CONTAINS]: {
+    label: 'Not Contains',
+    abbreviation: '⊉',
+  },
+  [Op.IS_EMPTY]: {
+    label: 'Is Empty',
+    abbreviation: '=',
+    rightDisplay: 'Empty',
+  },
+  [Op.IS_NOT_EMPTY]: {
+    label: 'Is Not Empty',
+    abbreviation: '≠',
+    rightDisplay: 'Empty',
+  },
+  [Op.IS_TRUE]: {
+    label: 'Is True',
+    abbreviation: '=',
+    rightDisplay: 'True',
+  },
+  [Op.IS_FALSE]: {
+    label: 'Is False',
+    abbreviation: '=',
+    rightDisplay: 'False',
+  },
+};

package/src/components/condition-row/hooks/useOp.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+
+import { Button, Select } from '@douyinfe/semi-ui';
+import { IconChevronDownStroked } from '@douyinfe/semi-icons';
+
+import { IRule, Op } from '../types';
+import { opConfigs } from '../constants';
+
+interface HookParams {
+  rule?: IRule;
+  op?: Op;
+  onChange: (op: Op) => void;
+}
+
+export function useOp({ rule, op, onChange }: HookParams) {
+  const options = useMemo(
+    () =>
+      Object.keys(rule || {}).map((_op) => ({
+        ...(opConfigs[_op as Op] || {}),
+        value: _op,
+      })),
+    [rule]
+  );
+
+  const opConfig = useMemo(() => opConfigs[op as Op], [op]);
+
+  const renderOpSelect = () => (
+    <Select
+      style={{ height: 22 }}
+      size="small"
+      value={op}
+      optionList={options}
+      onChange={(v) => {
+        onChange(v as Op);
+      }}
+      triggerRender={({ value }) => (
+        <Button size="small" disabled={!rule}>
+          {opConfig?.abbreviation || <IconChevronDownStroked size="small" />}
+        </Button>
+      )}
+    />
+  );
+
+  return { renderOpSelect, opConfig };
+}

package/src/components/condition-row/hooks/useRule.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { rules } from '../constants';
+import { JsonSchemaUtils } from '../../../utils';
+import { IFlowRefValue, JsonSchemaBasicType } from '../../../typings';
+
+export function useRule(left?: IFlowRefValue) {
+  const available = useScopeAvailable();
+
+  const variable = useMemo(() => {
+    if (!left) return undefined;
+    return available.getByKeyPath(left.content);
+  }, [available, left]);
+
+  const rule = useMemo(() => {
+    if (!variable) return undefined;
+
+    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+
+    return rules[schema?.type as JsonSchemaBasicType];
+  }, [variable?.type]);
+
+  return { rule };
+}

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/dynamic-value-input/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
@@ -31,6 +31,14 @@ export function DynamicValueInput({
   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
@@ -38,7 +46,7 @@ export function DynamicValueInput({
         <VariableSelector
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
-          includeSchema={schema}
+          includeSchema={includeSchema}
           readonly={readonly}
         />
       );
@@ -60,7 +68,7 @@ export function DynamicValueInput({
       style={{ width: '100%' }}
       value={value?.type === 'ref' ? value?.content : undefined}
       onChange={(_v) => onChange({ type: 'ref', content: _v })}
-      includeSchema={schema}
+      includeSchema={includeSchema}
       readonly={readonly}
       triggerRender={() => (
         <IconButton disabled={readonly} size="small" icon={<IconSetting size="small" />} />

package/src/components/index.ts

@@ -4,3 +4,4 @@ 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/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 
-import { Button, Checkbox, IconButton, Input } from '@douyinfe/semi-ui';
+import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
 import {
   IconExpand,
   IconShrink,
@@ -31,6 +31,7 @@ import {
 import { UIName } from './styles';
 import { UIRow } from './styles';
 import { usePropertiesEdit } from './hooks';
+import { BlurInput } from './components/blur-input';
 
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
@@ -109,7 +110,7 @@ function PropertyEdit(props: {
         <UIPropertyMain $expand={expand}>
           <UIRow>
             <UIName>
-              <Input
+              <BlurInput
                 placeholder={config?.placeholder ?? 'Input Variable Name'}
                 size="small"
                 value={name}
@@ -162,7 +163,7 @@ function PropertyEdit(props: {
           {expand && (
             <UIExpandDetail>
               <UILabel>{config?.descTitle ?? 'Description'}</UILabel>
-              <Input
+              <BlurInput
                 size="small"
                 value={description}
                 onChange={(value) => onChange('description', value)}

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

@@ -100,7 +100,7 @@ export const VariableSelector = ({
           );
         }}
         showClear={false}
-        arrowIcon={value ? null : <IconChevronDownStroked size="small" />}
+        arrowIcon={<IconChevronDownStroked size="small" />}
         triggerRender={triggerRender}
         placeholder={config?.placeholder ?? 'Select Variable...'}
       />

package/src/effects/auto-rename-ref/config.json

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

package/src/effects/auto-rename-ref/index.ts

@@ -0,0 +1,104 @@
+import { isArray, isObject } from 'lodash';
+import {
+  DataEvent,
+  Effect,
+  EffectOptions,
+  VariableFieldKeyRenameService,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+/**
+ * Auto rename ref when form item's key is renamed
+ *
+ * Example:
+ *
+ * formMeta: {
+ *  effects: {
+ *    "inputsValues": autoRenameRefEffect,
+ *  }
+ * }
+ */
+export const autoRenameRefEffect: EffectOptions[] = [
+  {
+    event: DataEvent.onValueInit,
+    effect: ((params) => {
+      const { context, form, name } = params;
+
+      const renameService = context.node.getService(VariableFieldKeyRenameService);
+
+      const disposable = renameService.onRename(({ before, after }) => {
+        const beforeKeyPath = [
+          ...before.parentFields.map((_field) => _field.key).reverse(),
+          before.key,
+        ];
+        const afterKeyPath = [
+          ...after.parentFields.map((_field) => _field.key).reverse(),
+          after.key,
+        ];
+
+        // traverse rename refs inside form item 'name'
+        traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
+          if (isRefMatch(_v, beforeKeyPath)) {
+            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+            form.setValueIn(_drilldownName, _v);
+          }
+        });
+      });
+
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];
+
+/**
+ * If ref value's keyPath is the under as targetKeyPath
+ * @param value
+ * @param targetKeyPath
+ * @returns
+ */
+function isRefMatch(value: IFlowRefValue, targetKeyPath: string[]) {
+  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+}
+
+/**
+ * If value is ref
+ * @param value
+ * @returns
+ */
+function isRef(value: any): value is IFlowRefValue {
+  return (
+    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
+  );
+}
+
+/**
+ * Traverse value to find ref
+ * @param value
+ * @param options
+ * @returns
+ */
+function traverseRef(name: string, value: any, cb: (name: string, _v: IFlowRefValue) => void) {
+  if (isObject(value)) {
+    if (isRef(value)) {
+      cb(name, value);
+      return;
+    }
+
+    Object.entries(value).forEach(([_key, _value]) => {
+      traverseRef(`${name}.${_key}`, _value, cb);
+    });
+    return;
+  }
+
+  if (isArray(value)) {
+    value.forEach((_value, idx) => {
+      traverseRef(`${name}[${idx}]`, _value, cb);
+    });
+    return;
+  }
+
+  return;
+}

package/src/effects/index.ts

@@ -1,2 +1,3 @@
 export * from './provide-batch-input';
 export * from './provide-batch-outputs';
+export * from './auto-rename-ref';

package/src/utils/json-schema/index.ts

@@ -74,7 +74,12 @@ export namespace JsonSchemaUtils {
    * @param typeAST
    * @returns
    */
-  export function astToSchema(typeAST: ASTNode): IJsonSchema | undefined {
+  export function astToSchema(
+    typeAST: ASTNode,
+    options?: { drilldown?: boolean }
+  ): IJsonSchema | undefined {
+    const { drilldown = true } = options || {};
+
     if (ASTMatch.isString(typeAST)) {
       return {
         type: 'string',
@@ -102,23 +107,25 @@ export namespace JsonSchemaUtils {
     if (ASTMatch.isObject(typeAST)) {
       return {
         type: 'object',
-        properties: Object.fromEntries(
-          Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)!])
-        ),
+        properties: drilldown
+          ? Object.fromEntries(
+              Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)!])
+            )
+          : {},
       };
     }
 
     if (ASTMatch.isArray(typeAST)) {
       return {
         type: 'array',
-        items: astToSchema(typeAST.items),
+        items: drilldown ? astToSchema(typeAST.items) : undefined,
       };
     }
 
     if (ASTMatch.isMap(typeAST)) {
       return {
         type: 'map',
-        items: astToSchema(typeAST.valueType),
+        items: drilldown ? astToSchema(typeAST.valueType) : undefined,
       };
     }