amis 1.9.1-beta.1 → 1.9.1-beta.3

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>
+    </>
+  );
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import {localeable, LocaleProps} from '../../locale';
+import {themeable, ThemeProps} from '../../theme';
+import type {JSONSchema} from '../../utils/DataScope';
+import {InputJSONSchemaItem} from './Item';
+
+export interface InputJSONSchemaItemProps extends ThemeProps, LocaleProps {
+  schema: JSONSchema & {
+    [propName: string]: any;
+  };
+  value?: any;
+  onChange?: any;
+  disabled?: boolean;
+  renderValue?: (
+    value: any,
+    onChange: (value: any) => void,
+    schema: any,
+    props: any
+  ) => JSX.Element;
+  renderKey?: (
+    value: any,
+    onChange: (value: any) => void,
+    schema: any,
+    props: any
+  ) => JSX.Element;
+  collapsable?: boolean;
+  placeholder?: string;
+}
+
+export interface InputJSONSchemaProps
+  extends Omit<InputJSONSchemaItemProps, 'schema'> {
+  schema?: any;
+}
+
+function InputJSONSchema(props: InputJSONSchemaProps) {
+  const schema = props.schema || {
+    type: 'object',
+    properties: {}
+  };
+
+  return <InputJSONSchemaItem {...props} schema={schema} />;
+}
+
+export default themeable(localeable(InputJSONSchema));

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

@@ -38,7 +38,8 @@ export class SchemaEditorItemArray extends SchemaEditorItemCommon {
       disabled,
       showInfo,
       types,
-      onTypeChange
+      onTypeChange,
+      enableAdvancedSetting
     } = this.props;
     const items = value?.items || {
       type: 'string'
@@ -67,6 +68,7 @@ export class SchemaEditorItemArray extends SchemaEditorItemCommon {
           classnames={cx}
           classPrefix={classPrefix}
           disabled={disabled || !!(items as any)?.$ref}
+          enableAdvancedSetting={enableAdvancedSetting}
         />
       </div>
     );