@flowgram.ai/form-materials 0.2.0 → 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/constant-input/config.json

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

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

@@ -1,7 +1,7 @@
-import { VarJSONSchema } from '@flowgram.ai/editor';
+import { IJsonSchema } from '../../typings';
 
 export interface Strategy<Value = any> {
-  hit: (schema: VarJSONSchema.ISchema) => boolean;
+  hit: (schema: IJsonSchema) => boolean;
   Renderer: React.FC<RendererProps<Value>>;
 }
 
@@ -12,7 +12,7 @@ export interface RendererProps<Value = any> {
 }
 
 export interface PropsType extends RendererProps {
-  schema: VarJSONSchema.ISchema;
+  schema: IJsonSchema;
   strategies?: Strategy[];
   [key: string]: any;
 }

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

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { VarJSONSchema } from '@flowgram.ai/editor';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
@@ -9,6 +8,7 @@ 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;
@@ -16,7 +16,7 @@ interface PropsType {
   readonly?: boolean;
   hasError?: boolean;
   style?: React.CSSProperties;
-  schema?: VarJSONSchema.ISchema;
+  schema?: IJsonSchema;
   constantProps?: {
     strategies?: Strategy[];
     [key: string]: any;
@@ -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/config.json

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

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { IJsonSchema } from '../../typings';
 import { PropertyValueType } from './types';
-import { JsonSchema } from '../type-selector';
 
 let _id = 0;
 function genId() {
@@ -100,7 +100,7 @@ export function usePropertiesEdit(
       const next = updater(_list);
 
       // onChange to parent
-      const nextProperties: Record<string, JsonSchema> = {};
+      const nextProperties: Record<string, IJsonSchema> = {};
       const nextRequired: string[] = [];
 
       for (const _property of next) {

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,
@@ -10,8 +10,8 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { JsonSchema } from '../type-selector/types';
 import { TypeSelector } from '../type-selector';
+import { IJsonSchema } from '../../typings';
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -31,10 +31,11 @@ import {
 import { UIName } from './styles';
 import { UIRow } from './styles';
 import { usePropertiesEdit } from './hooks';
+import { BlurInput } from './components/blur-input';
 
 export function JsonSchemaEditor(props: {
-  value?: JsonSchema;
-  onChange?: (value: JsonSchema) => void;
+  value?: IJsonSchema;
+  onChange?: (value: IJsonSchema) => void;
   config?: ConfigType;
 }) {
   const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;
@@ -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/json-schema-editor/types.ts

@@ -1,6 +1,6 @@
-import { JsonSchema } from '../type-selector/types';
+import { IJsonSchema } from '../../typings';
 
-export interface PropertyValueType extends JsonSchema {
+export interface PropertyValueType extends IJsonSchema {
   name?: string;
   key?: number;
   isPropertyRequired?: boolean;
@@ -8,7 +8,7 @@ export interface PropertyValueType extends JsonSchema {
 
 export type PropertiesValueType = Pick<PropertyValueType, 'properties' | 'required'>;
 
-export type JsonSchemaProperties = JsonSchema['properties'];
+export type JsonSchemaProperties = IJsonSchema['properties'];
 
 export interface ConfigType {
   placeholder?: string;

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

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

package/src/components/type-selector/constants.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { CascaderData } from '@douyinfe/semi-ui/lib/es/cascader';
 import Icon from '@douyinfe/semi-icons';
 
-import { JsonSchema } from './types';
+import { IJsonSchema } from '../../typings';
 
 export const VariableTypeIcons: { [key: string]: React.ReactNode } = {
   custom: (
@@ -271,7 +271,7 @@ export const ArrayIcons: { [key: string]: React.ReactNode } = {
   ),
 };
 
-export const getSchemaIcon = (value?: Partial<JsonSchema>) => {
+export const getSchemaIcon = (value?: Partial<IJsonSchema>) => {
   if (value?.type === 'array') {
     return ArrayIcons[value.items?.type || 'object'];
   }

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

@@ -2,17 +2,17 @@ import React, { useMemo } from 'react';
 
 import { Button, Cascader } from '@douyinfe/semi-ui';
 
-import { JsonSchema } from './types';
+import { IJsonSchema } from '../../typings';
 import { ArrayIcons, VariableTypeIcons, getSchemaIcon, options } from './constants';
 
 interface PropTypes {
-  value?: Partial<JsonSchema>;
-  onChange: (value?: Partial<JsonSchema>) => void;
+  value?: Partial<IJsonSchema>;
+  onChange: (value?: Partial<IJsonSchema>) => void;
   disabled?: boolean;
   style?: React.CSSProperties;
 }
 
-export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | undefined => {
+export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
   if (value?.type === 'array' && value?.items) {
     return [value.type, ...(getTypeSelectValue(value.items) || [])];
   }
@@ -20,7 +20,7 @@ export const getTypeSelectValue = (value?: Partial<JsonSchema>): string[] | unde
   return value?.type ? [value.type] : undefined;
 };
 
-export const parseTypeSelectValue = (value?: string[]): Partial<JsonSchema> | undefined => {
+export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | undefined => {
   const [type, ...subTypes] = value || [];
 
   if (type === 'array') {
@@ -54,4 +54,4 @@ export function TypeSelector(props: PropTypes) {
   );
 }
 
-export { JsonSchema, VariableTypeIcons, ArrayIcons, getSchemaIcon };
+export { VariableTypeIcons, ArrayIcons, getSchemaIcon };

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

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

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

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 
-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 { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
 import { UIRootTitle, UITag, UITreeSelect } from './styles';
 
@@ -15,8 +15,8 @@ interface PropTypes {
     notFoundContent?: string;
   };
   onChange: (value?: string[]) => void;
-  includeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
-  excludeSchema?: VarJSONSchema.ISchema | VarJSONSchema.ISchema[];
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
   readonly?: boolean;
   hasError?: boolean;
   style?: React.CSSProperties;
@@ -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...'}
       />