amis 1.9.0 → 1.9.1-beta.3

package/src/components/formula/Picker.tsx

@@ -275,6 +275,7 @@ export class FormulaPicker extends React.Component<
       variables,
       functions,
       children,
+      variableMode,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -377,7 +378,7 @@ export class FormulaPicker extends React.Component<
               {...rest}
               variables={this.state.variables ?? variables}
               functions={this.state.functions ?? functions}
-              variableMode={this.state.variableMode}
+              variableMode={this.state.variableMode ?? variableMode}
               value={editorValue}
               onChange={this.handleEditorChange}
             />

package/src/components/icons.tsx

@@ -84,6 +84,11 @@ import FunctionIcon from '../icons/function.svg';
 import InputClearIcon from '../icons/input-clear.svg';
 import SliderHandleIcon from '../icons/slider-handle-icon.svg';
 import TrashIcon from '../icons/trash.svg';
+import MenuIcon from '../icons/menu.svg';
+import UserRemove from '../icons/user-remove.svg';
+import Role from '../icons/role.svg';
+import Department from '../icons/department.svg';
+import Post from '../icons/post.svg';
 import DotIcon from '../icons/dot.svg';
 
 // 兼容原来的用法，后续不直接试用。
@@ -195,6 +200,11 @@ registerIcon('cloud-upload', CloudUploadIcon);
 registerIcon('image', ImageIcon);
 registerIcon('refresh', RefreshIcon);
 registerIcon('trash', TrashIcon);
+registerIcon('menu', MenuIcon);
+registerIcon('user-remove', UserRemove);
+registerIcon('role', Role);
+registerIcon('department', Department);
+registerIcon('post', Post);
 registerIcon('dot', DotIcon);
 
 export function Icon({
@@ -227,11 +237,17 @@ export {
   MuteIcon,
   PlayIcon,
   PauseIcon,
+  ReloadIcon,
   LeftArrowIcon,
   RightArrowIcon,
   CheckIcon,
   PlusIcon,
   MinusIcon,
   PencilIcon,
-  FunctionIcon
+  FunctionIcon,
+  MenuIcon,
+  UserRemove,
+  Role,
+  Department,
+  Post
 };

package/src/components/index.tsx

@@ -62,6 +62,7 @@ import Table from './table';
 import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
 import SchemaVariableList from './schema-editor/SchemaVariableList';
 import FormulaPicker from './formula/Picker';
+import InputJSONSchema from './json-schema';
 
 export {
   NotFound,
@@ -127,5 +128,6 @@ export {
   Table,
   SchemaVariableListPicker,
   SchemaVariableList,
-  FormulaPicker
+  FormulaPicker,
+  InputJSONSchema
 };

package/src/components/json-schema/Array.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import {guid} from '../../utils/helper';
+import Button from '../Button';
+import {Icon} from '../icons';
+import type {InputJSONSchemaItemProps} from './index';
+import {InputJSONSchemaItem} from './Item';
+
+type JSONSchemaArrayMember = {
+  key: string;
+  index: number;
+  schema?: any;
+  invalid?: boolean;
+};
+export function InputJSONSchemaArray(props: InputJSONSchemaItemProps) {
+  const {
+    classnames: cx,
+    value,
+    onChange,
+    disabled,
+    translate: __,
+    collapsable,
+    renderValue
+  } = props;
+  const buildMembers = React.useCallback((schema: any, value) => {
+    const members: Array<JSONSchemaArrayMember> = [];
+
+    let len = Array.isArray(value) ? value.length : 1;
+
+    if (typeof schema.minContains === 'number') {
+      len = Math.max(len, schema.minContains);
+    }
+
+    const maxContains =
+      typeof schema.maxContains === 'number' ? schema.maxContains : 0;
+
+    while (len--) {
+      members.push({
+        key: guid(),
+        index: members.length,
+        schema: schema.items,
+        invalid: maxContains ? maxContains < members.length : false
+      });
+    }
+
+    return members;
+  }, []);
+
+  const [members, setMembers] = React.useState<Array<JSONSchemaArrayMember>>(
+    buildMembers(props.schema, value)
+  );
+
+  const membersRef = React.useRef(members);
+  membersRef.current = members;
+
+  const [collapsed, setCollapsed] = React.useState<boolean>(
+    collapsable ? true : false
+  );
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const onMemberChange = (member: JSONSchemaArrayMember, memberValue: any) => {
+    const newValue = Array.isArray(props.value) ? props.value.concat() : [];
+    newValue[member.index] = memberValue;
+    onChange?.(newValue);
+  };
+  const onMemberDelete = (member: JSONSchemaArrayMember) => {
+    const idx = members.indexOf(member);
+    if (!~idx) {
+      throw new Error('member object not found');
+    }
+
+    const m = members.concat();
+    m.splice(idx, 1);
+    setMembers(m);
+
+    const newValue = Array.isArray(props.value) ? props.value.concat() : [];
+    newValue.splice(member.index, 1);
+    onChange?.(newValue);
+  };
+
+  React.useEffect(() => {
+    setMembers(buildMembers(props.schema, props.value));
+  }, [JSON.stringify(props.schema)]);
+
+  React.useEffect(() => {
+    const value = props.value;
+    const schema = props.schema;
+    let len = Array.isArray(value) ? value.length : 1;
+
+    if (typeof schema.minContains === 'number') {
+      len = Math.max(len, schema.minContains);
+    }
+
+    if (typeof schema.maxContains === 'number') {
+      len = Math.min(schema.maxContains, len);
+    }
+    const m = membersRef.current!.concat();
+
+    if (m.length !== len) {
+      while (m.length !== len) {
+        if (m.length > len) {
+          m.pop();
+        } else {
+          m.push({
+            key: guid(),
+            index: m.length,
+            schema: schema.items
+          });
+        }
+      }
+      setMembers(m);
+    }
+  }, [JSON.stringify(props.value)]);
+
+  const handleAdd = React.useCallback(() => {
+    const m = members.concat();
+    m.push({
+      key: guid(),
+      index: members.length,
+      schema: props.schema.items,
+      invalid: false
+    });
+    setMembers(m);
+  }, [members]);
+
+  const maxContains =
+    typeof props.schema?.maxContains === 'number'
+      ? props.schema.maxContains
+      : 0;
+
+  const minContains =
+    typeof props.schema?.minContains === 'number'
+      ? props.schema.minContains
+      : 0;
+
+  // todo additionalProperties 还有其他格式
+  const allowAdd = !maxContains || maxContains > members.length;
+  const allowDelete = !minContains || minContains < members.length;
+
+  return (
+    <>
+      {collapsable ? (
+        <a
+          className={cx('JSONSchemaObject-caret', {
+            'is-collapsed': collapsed
+          })}
+          onClick={toggleCollapsed}
+        >
+          <Icon icon="caret" className="icon" />
+        </a>
+      ) : null}
+
+      <div
+        className={cx('JSONSchemaObject', {
+          'is-expanded': collapsable && !collapsed
+        })}
+      >
+        {collapsed ? (
+          renderValue ? (
+            <InputJSONSchemaItem
+              {...props}
+              value={value}
+              onChange={onChange}
+              schema={{
+                type: 'string'
+              }}
+              placeholder={props.schema?.description}
+            />
+          ) : null
+        ) : (
+          members.map(member => {
+            return (
+              <div key={member.key} className={cx('JSONSchemaMember')}>
+                <div className={cx('JSONSchemaMember-value')}>
+                  <InputJSONSchemaItem
+                    {...props}
+                    value={value?.[member.index]}
+                    onChange={onMemberChange.bind(null, member)}
+                    schema={
+                      member.schema || {
+                        type: 'string'
+                      }
+                    }
+                    collapsable
+                  />
+                </div>
+                {allowDelete ? (
+                  <Button
+                    className={cx('SchemaEditor-btn')}
+                    onClick={onMemberDelete.bind(null, member)}
+                    iconOnly
+                    disabled={disabled || !!value?.$ref}
+                  >
+                    <Icon icon="remove" className="icon" />
+                  </Button>
+                ) : null}
+              </div>
+            );
+          })
+        )}
+
+        {!collapsed ? (
+          <Button
+            level="link"
+            onClick={handleAdd}
+            size="xs"
+            disabled={disabled || !allowAdd}
+          >
+            {__('JSONSchema.add_prop')}
+          </Button>
+        ) : null}
+      </div>
+    </>
+  );
+}

package/src/components/json-schema/Item.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import InputBox from '../InputBox';
+import NumberInput from '../NumberInput';
+import Switch from '../Switch';
+import {InputJSONSchemaArray} from './Array';
+import type {InputJSONSchemaItemProps} from './index';
+import {InputJSONSchemaObject} from './Object';
+
+export function InputJSONSchemaItem(props: InputJSONSchemaItemProps) {
+  const schema = props.schema;
+  if (schema.type === 'object') {
+    return <InputJSONSchemaObject {...props} />;
+  } else if (schema.type === 'array') {
+    return <InputJSONSchemaArray {...props} />;
+  } else if (props.renderValue) {
+    return props.renderValue(props.value, props.onChange, schema, props);
+  } else if (schema.type == 'number') {
+    return (
+      <NumberInput
+        value={props.value}
+        onChange={props.onChange}
+        placeholder={props.placeholder}
+      />
+    );
+  } else if (schema.type == 'integer') {
+    return (
+      <NumberInput
+        value={props.value}
+        onChange={props.onChange}
+        precision={0}
+        placeholder={props.placeholder}
+      />
+    );
+  } else if (schema.type == 'boolean') {
+    return (
+      <Switch value={props.value} onChange={props.onChange} className="mt-2" />
+    );
+  }
+
+  return (
+    <InputBox
+      value={props.value}
+      onChange={props.onChange}
+      placeholder={props.placeholder}
+    />
+  );
+}

package/src/components/json-schema/Object.tsx

@@ -0,0 +1,339 @@
+import React from 'react';
+import {guid} from '../../utils/helper';
+import Button from '../Button';
+import {Icon} from '../icons';
+import InputBox from '../InputBox';
+import InputBoxWithSuggestion from '../InputBoxWithSuggestion';
+import Select from '../Select';
+import type {InputJSONSchemaItemProps} from './index';
+import {InputJSONSchemaItem} from './Item';
+
+type JSONSchemaObjectMember = {
+  key: string;
+  name: string;
+  nameMutable?: boolean;
+  schema?: any;
+  invalid?: boolean;
+  required?: boolean;
+};
+export function InputJSONSchemaObject(props: InputJSONSchemaItemProps) {
+  const {
+    classnames: cx,
+    value,
+    onChange,
+    disabled,
+    translate: __,
+    renderKey,
+    collapsable,
+    renderValue
+  } = props;
+  const buildMembers = React.useCallback((schema: any, value: any) => {
+    const members: Array<JSONSchemaObjectMember> = [];
+    const required = Array.isArray(schema.required) ? schema.required : [];
+
+    Object.keys(schema.properties || {}).forEach(key => {
+      const child = schema.properties[key];
+      members.push({
+        key: guid(),
+        name: key,
+        nameMutable: !required.includes(key),
+        required: required.includes(key),
+        schema: child
+      });
+    });
+
+    const keys = Object.keys(value || {});
+    for (let key of keys) {
+      const exists = members.find(m => m.name === key);
+      if (!exists) {
+        members.push({
+          key: guid(),
+          name: key,
+          nameMutable: true,
+          schema: {
+            type: 'string'
+          }
+        });
+      }
+    }
+
+    if (!members.length) {
+      members.push({
+        key: guid(),
+        name: '',
+        nameMutable: true,
+        schema: {
+          type: 'string'
+        }
+      });
+    }
+
+    return members;
+  }, []);
+
+  const [members, setMembers] = React.useState<Array<JSONSchemaObjectMember>>(
+    buildMembers(props.schema, props.value)
+  );
+  const membersRef = React.useRef<Array<JSONSchemaObjectMember>>();
+  membersRef.current = members;
+
+  const [collapsed, setCollapsed] = React.useState<boolean>(
+    collapsable ? true : false
+  );
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const onMemberChange = (member: JSONSchemaObjectMember, memberValue: any) => {
+    const newValue = {
+      ...props.value,
+      [member.name]: memberValue
+    };
+    onChange?.(newValue);
+  };
+  const onMemberKeyChange = (
+    member: JSONSchemaObjectMember,
+    memberValue: any
+  ) => {
+    const idx = members.indexOf(member);
+    if (!~idx) {
+      throw new Error('member object not found');
+    }
+
+    const newValue = {
+      ...props.value
+    };
+    const m = members.concat();
+    m.splice(idx, 1, {
+      ...member,
+      schema: props.schema?.properties?.[memberValue] || {
+        type: 'string'
+      },
+      name: memberValue,
+      invalid:
+        !memberValue ||
+        members.some((a, b) => a.name === memberValue && b !== idx)
+    });
+
+    setMembers(m);
+
+    newValue[memberValue] = newValue[member.name];
+    delete newValue[member.name];
+    onChange?.(newValue);
+  };
+  const onMemberDelete = (member: JSONSchemaObjectMember) => {
+    const idx = members.indexOf(member);
+    if (!~idx) {
+      throw new Error('member object not found');
+    }
+
+    const m = members.concat();
+    m.splice(idx, 1);
+    setMembers(m);
+
+    const newValue = {
+      ...props.value
+    };
+    delete newValue[member.name];
+    onChange?.(newValue);
+  };
+
+  React.useEffect(() => {
+    setMembers(buildMembers(props.schema, props.value));
+  }, [JSON.stringify(props.schema)]);
+
+  React.useEffect(() => {
+    const value = props.value;
+    const m = membersRef.current!.concat();
+    const keys = Object.keys(value || {});
+    for (let key of keys) {
+      const exists = m.find(m => m.name === key);
+      if (!exists) {
+        m.push({
+          key: guid(),
+          name: key,
+          nameMutable: true,
+          schema: {
+            type: 'string'
+          }
+        });
+      }
+    }
+    if (m.length !== membersRef.current!.length) {
+      setMembers(m);
+    }
+  }, [JSON.stringify(props.value)]);
+
+  const handleAdd = React.useCallback(() => {
+    const m = members.concat();
+    m.push({
+      key: guid(),
+      name: '',
+      invalid: true,
+      nameMutable: true
+    });
+    setMembers(m);
+  }, [members]);
+
+  const options: Array<any> = [];
+  const properties: any = props.schema?.properties || {};
+  Object.keys(properties).forEach(key => {
+    options.push({
+      label: properties[key]?.title || key,
+      value: key
+    });
+  });
+  // todo additionalProperties 还有其他格式
+  const allowAdd = !(
+    props.schema.additionalProperties === false &&
+    options.every(o => members.find(m => m.name === o.value))
+  );
+  const allowInput = props.schema.additionalProperties !== false;
+
+  return (
+    <>
+      {collapsable ? (
+        <a
+          className={cx('JSONSchemaObject-caret', {
+            'is-collapsed': collapsed
+          })}
+          onClick={toggleCollapsed}
+        >
+          <Icon icon="caret" className="icon" />
+        </a>
+      ) : null}
+
+      <div
+        className={cx('JSONSchemaObject', {
+          'is-expanded': collapsable && !collapsed
+        })}
+      >
+        {collapsed ? (
+          renderValue ? (
+            <InputJSONSchemaItem
+              {...props}
+              value={value}
+              onChange={onChange}
+              schema={{
+                type: 'string'
+              }}
+              placeholder={props.schema?.description}
+            />
+          ) : null
+        ) : (
+          members.map(member => {
+            const filtedOptions = options.filter(
+              o => !members.find(m => m !== member && m.name === o.value)
+            );
+
+            return (
+              <div key={member.key} className={cx('JSONSchemaMember')}>
+                <div className={cx('JSONSchemaMember-key')}>
+                  {member.nameMutable ? (
+                    <>
+                      {renderKey ? (
+                        renderKey(
+                          member.name,
+                          onMemberKeyChange.bind(null, member),
+                          member.schema,
+                          props
+                        )
+                      ) : filtedOptions.length ? (
+                        allowInput ? (
+                          <InputBoxWithSuggestion
+                            value={member.name}
+                            hasError={member.invalid}
+                            onChange={onMemberKeyChange.bind(null, member)}
+                            clearable={false}
+                            placeholder={__('JSONSchema.key')}
+                            options={filtedOptions}
+                          />
+                        ) : (
+                          <Select
+                            simpleValue
+                            block
+                            value={member.name}
+                            hasError={member.invalid}
+                            onChange={onMemberKeyChange.bind(null, member)}
+                            clearable={false}
+                            placeholder={__('JSONSchema.key')}
+                            options={filtedOptions}
+                          />
+                        )
+                      ) : (
+                        <InputBox
+                          value={member.name}
+                          hasError={member.invalid}
+                          onChange={onMemberKeyChange.bind(null, member)}
+                          clearable={false}
+                          placeholder={__('JSONSchema.key')}
+                        />
+                      )}
+                    </>
+                  ) : (
+                    <span>
+                      {member.required ? (
+                        <span className={cx(`Form-star`)}>*</span>
+                      ) : null}
+                      {member.schema?.title || member.name}
+
+                      {/* {member.schema?.description ? (
+                        <TooltipWrapper
+                          tooltipTheme="dark"
+                          tooltip={member.schema.description}
+                          trigger="click"
+                          rootClose
+                        >
+                          <div className={cx(`Remark`, `Remark--warning`)}>
+                            <span className={cx('Remark-icon icon')}>
+                              <Icon icon="question-mark" />
+                            </span>
+                          </div>
+                        </TooltipWrapper>
+                      ) : null} */}
+                    </span>
+                  )}
+                </div>
+                <div className={cx('JSONSchemaMember-value')}>
+                  <InputJSONSchemaItem
+                    {...props}
+                    value={value?.[member.name]}
+                    onChange={onMemberChange.bind(null, member)}
+                    schema={
+                      member.schema || {
+                        type: 'string'
+                      }
+                    }
+                    placeholder={member.schema?.description}
+                    collapsable
+                  />
+                </div>
+                {!member.required ? (
+                  <Button
+                    className={cx('SchemaEditor-btn')}
+                    onClick={onMemberDelete.bind(null, member)}
+                    iconOnly
+                    disabled={disabled || !!value?.$ref}
+                  >
+                    <Icon icon="remove" className="icon" />
+                  </Button>
+                ) : null}
+              </div>
+            );
+          })
+        )}
+
+        {allowAdd && !collapsed ? (
+          <Button
+            level="link"
+            onClick={handleAdd}
+            size="xs"
+            disabled={disabled}
+          >
+            {__('JSONSchema.add_prop')}
+          </Button>
+        ) : null}
+      </div>
+    </>
+  );
+}