feat(material): inject materials like VariableSelector, TypeSelector (bytedance#665)

* feat(material): inject material

* feat: update docs

* fix: file path

* fix: i18n text

* fix: remove useless code

Author: sanmaopep

apps/demo-free-layout/src/hooks/use-editor-props.tsx

@@ -192,6 +192,7 @@ export function useEditorProps(
         enableScrollLimit: false,
       },
       materials: {
+        components: {},
         /**
          * Render Node
          */

packages/materials/form-materials/src/components/assign-row/index.tsx

@@ -9,8 +9,8 @@ import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue } from '@/typings';
-import { VariableSelector } from '@/components/variable-selector';
-import { DynamicValueInput } from '@/components/dynamic-value-input';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 
 import { AssignRowProps } from './types';
 import { BlurInput } from './components/blur-input';
@@ -29,7 +29,7 @@ export function AssignRow(props: AssignRowProps) {
     <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
       <div style={{ width: 150, minWidth: 150, maxWidth: 150 }}>
         {value?.operator === 'assign' ? (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%', height: 26 }}
             value={value?.left?.content}
             config={{ placeholder: 'Select Left' }}
@@ -56,7 +56,7 @@ export function AssignRow(props: AssignRowProps) {
         )}
       </div>
       <div style={{ flexGrow: 1 }}>
-        <DynamicValueInput
+        <InjectDynamicValueInput
           readonly={readonly}
           value={value?.right as IFlowConstantRefValue | undefined}
           onChange={(v) =>

packages/materials/form-materials/src/components/batch-outputs/index.tsx

@@ -9,7 +9,7 @@ import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
 import { useObjectList } from '@/hooks';
-import { VariableSelector } from '@/components/variable-selector';
+import { InjectVariableSelector } from '@/components/variable-selector';
 
 import { PropsType } from './types';
 import { UIRow, UIRows } from './styles';
@@ -31,7 +31,7 @@ export function BatchOutputs(props: PropsType) {
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
             />
-            <VariableSelector
+            <InjectVariableSelector
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value?.content}

packages/materials/form-materials/src/components/condition-row/index.tsx

@@ -8,8 +8,8 @@ import React, { useMemo } from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { Input } from '@douyinfe/semi-ui';
 
-import { VariableSelector } from '@/components/variable-selector';
-import { DynamicValueInput } from '@/components/dynamic-value-input';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 
 import { ConditionRowValueType, IRules, OpConfigs } from './types';
 import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
@@ -59,7 +59,7 @@ export function ConditionRow({
       <UIOperator>{renderOpSelect()}</UIOperator>
       <UIValues>
         <UILeft>
-          <VariableSelector
+          <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
             value={left?.content}
@@ -76,7 +76,7 @@ export function ConditionRow({
         </UILeft>
         <UIRight>
           {targetSchema ? (
-            <DynamicValueInput
+            <InjectDynamicValueInput
               readonly={readonly || !rule}
               value={right}
               schema={targetSchema}

packages/materials/form-materials/src/components/dynamic-value-input/index.tsx

@@ -10,7 +10,8 @@ import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue } from '@/typings/flow-value';
-import { VariableSelector } from '@/components/variable-selector';
+import { createInjectMaterial } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
 import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
 
@@ -88,7 +89,7 @@ export function DynamicValueInput({
     if (value?.type === 'ref') {
       // Display Variable Or Delete
       return (
-        <VariableSelector
+        <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
@@ -108,7 +109,7 @@ export function DynamicValueInput({
         readonly={readonly}
         strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%' }}
             onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
             includeSchema={includeSchema}
@@ -121,7 +122,7 @@ export function DynamicValueInput({
   };
 
   const renderTrigger = () => (
-    <VariableSelector
+    <InjectVariableSelector
       style={{ width: '100%' }}
       value={value?.type === 'ref' ? value?.content : undefined}
       onChange={(_v) => onChange({ type: 'ref', content: _v })}
@@ -141,3 +142,6 @@ export function DynamicValueInput({
     </UIContainer>
   );
 }
+
+DynamicValueInput.renderKey = 'dynamic-value-input-render-key';
+export const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);

packages/materials/form-materials/src/components/inputs-values/index.tsx

@@ -5,12 +5,13 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue, IFlowValue } from '@/typings';
 import { useObjectList } from '@/hooks';
-import { DynamicValueInput } from '@/components/dynamic-value-input';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 
 import { PropsType } from './types';
 import { UIRow, UIRows } from './styles';
@@ -42,9 +43,9 @@ export function InputsValues({
               size="small"
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
-              placeholder="Input Key"
+              placeholder={I18n.t('Input Key')}
             />
-            <DynamicValueInput
+            <InjectDynamicValueInput
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value as IFlowConstantRefValue}

packages/materials/form-materials/src/components/json-schema-editor/index.tsx

@@ -17,7 +17,7 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { TypeSelector } from '@/components/type-selector';
+import { InjectTypeSelector } from '@/components/type-selector';
 
 import { ConfigType, PropertyValueType } from './types';
 import {
@@ -41,14 +41,16 @@ import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
 import { BlurInput } from './components/blur-input';
 
+const DEFAULT = { type: 'object' };
+
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
   onChange?: (value: IJsonSchema) => void;
   config?: ConfigType;
   className?: string;
   readonly?: boolean;
 }) {
-  const { value = { type: 'object' }, config = {}, onChange: onChangeProps, readonly } = props;
+  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -170,7 +172,7 @@ function PropertyEdit(props: {
               />
             </UIName>
             <UIType>
-              <TypeSelector
+              <InjectTypeSelector
                 value={typeSelectorValue}
                 readonly={readonly}
                 onChange={(_value) => {

packages/materials/form-materials/src/components/type-selector/index.tsx

@@ -8,9 +8,10 @@ import React, { useMemo } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
+import { createInjectMaterial } from '@/shared/inject-material';
 import { useTypeManager } from '@/plugins';
 
-interface PropTypes {
+export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
   onChange?: (value?: Partial<IJsonSchema>) => void;
   readonly?: boolean;
@@ -41,7 +42,7 @@ export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | u
   return { type };
 };
 
-export function TypeSelector(props: PropTypes) {
+export function TypeSelector(props: TypeSelectorProps) {
   const { value, onChange, readonly, disabled, style } = props;
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
@@ -101,3 +102,6 @@ export function TypeSelector(props: PropTypes) {
     />
   );
 }
+
+TypeSelector.renderKey = 'type-selector-render-key';
+export const InjectTypeSelector = createInjectMaterial(TypeSelector);

packages/materials/form-materials/src/components/variable-selector/index.tsx

@@ -12,10 +12,12 @@ import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
+import { createInjectMaterial } from '@/shared';
+
 import { useVariableTree } from './use-variable-tree';
 import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
-interface PropTypes {
+export interface VariableSelectorProps {
   value?: string[];
   config?: {
     placeholder?: string;
@@ -30,8 +32,6 @@ interface PropTypes {
   triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
 }
 
-export type VariableSelectorProps = PropTypes;
-
 export { useVariableTree };
 
 export const VariableSelector = ({
@@ -44,7 +44,7 @@ export const VariableSelector = ({
   excludeSchema,
   hasError,
   triggerRender,
-}: PropTypes) => {
+}: VariableSelectorProps) => {
   const treeData = useVariableTree({ includeSchema, excludeSchema });
 
   const treeValue = useMemo(() => {
@@ -136,3 +136,6 @@ export const VariableSelector = ({
     </>
   );
 };
+
+VariableSelector.renderKey = 'variable-selector-render-key';
+export const InjectVariableSelector = createInjectMaterial(VariableSelector);

packages/materials/form-materials/src/shared/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './format-legacy-refs';
+export * from './inject-material';