amis 1.9.1-beta.0 → 1.9.1-beta.4

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>
     );

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

@@ -5,10 +5,13 @@ import type {JSONSchema} from '../../utils/DataScope';
 import {autobind} from '../../utils/helper';
 import Button from '../Button';
 import Checkbox from '../Checkbox';
+import Form from '../Form';
+import FormField, {Controller} from '../FormField';
 import {Icon} from '../icons';
 import InputBox from '../InputBox';
 import PickerContainer from '../PickerContainer';
 import Select from '../Select';
+import Textarea from '../Textarea';
 
 export interface SchemaEditorItemCommonProps extends LocaleProps, ThemeProps {
   value?: JSONSchema;
@@ -38,6 +41,7 @@ export interface SchemaEditorItemCommonProps extends LocaleProps, ThemeProps {
   ) => JSX.Element;
   prefix?: JSX.Element;
   affix?: JSX.Element;
+  enableAdvancedSetting?: boolean;
 }
 
 export class SchemaEditorItemCommon<
@@ -65,6 +69,11 @@ export class SchemaEditorItemCommon<
     });
   }
 
+  @autobind
+  handleBeforeSubmit(form: any) {
+    return form.submit();
+  }
+
   renderCommon() {
     const {
       value,
@@ -76,6 +85,7 @@ export class SchemaEditorItemCommon<
       onRequiredChange,
       renderExtraProps,
       renderModalProps,
+      enableAdvancedSetting,
       prefix,
       affix,
       types
@@ -107,16 +117,63 @@ export class SchemaEditorItemCommon<
 
         {renderExtraProps?.(value!, this.handlePropsChange)}
 
-        {renderModalProps ? (
+        {enableAdvancedSetting ? (
           <PickerContainer
             value={value}
-            bodyRender={renderModalProps as any}
+            bodyRender={({isOpened, value, onChange, ref}) => {
+              return isOpened ? (
+                <Form defaultValues={value} onSubmit={onChange} ref={ref}>
+                  {({control, getValues, setValue}) => (
+                    <>
+                      <Controller
+                        label={__('JSONSchema.title')}
+                        name="title"
+                        control={control}
+                        rules={{maxLength: 20}}
+                        isRequired
+                        render={({field}) => (
+                          <InputBox {...field} disabled={disabled} />
+                        )}
+                      />
+
+                      <Controller
+                        label={__('JSONSchema.description')}
+                        name="description"
+                        control={control}
+                        render={({field}) => (
+                          <Textarea {...field} disabled={disabled} />
+                        )}
+                      />
+
+                      <Controller
+                        label={__('JSONSchema.default')}
+                        name="default"
+                        control={control}
+                        render={({field}) => (
+                          <InputBox {...field} disabled={disabled} />
+                        )}
+                      />
+
+                      {renderModalProps?.(getValues(), (values: any) => {
+                        Object.keys(values).forEach(key =>
+                          setValue(key, values[key])
+                        );
+                      })}
+                    </>
+                  )}
+                </Form>
+              ) : null;
+            }}
+            beforeConfirm={this.handleBeforeSubmit}
             onConfirm={this.handlePropsChange}
-            size="md"
             title={__('SubForm.editDetail')}
           >
             {({onClick}) => (
-              <Button className={cx('SchemaEditor-btn')} onClick={onClick}>
+              <Button
+                disabled={disabled || !!value?.$ref}
+                className={cx('SchemaEditor-btn')}
+                onClick={onClick}
+              >
                 <Icon icon="setting" className="icon" />
               </Button>
             )}

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

@@ -195,7 +195,8 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
       disabled,
       showInfo,
       types,
-      onTypeChange
+      onTypeChange,
+      enableAdvancedSetting
     } = this.props;
     const members = this.state.members;
 
@@ -211,6 +212,7 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
               key={member.id}
               types={types}
               onTypeChange={onTypeChange}
+              enableAdvancedSetting={enableAdvancedSetting}
               prefix={
                 <>
                   <InputBox

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

@@ -35,7 +35,7 @@ export interface SchemaEditorProps extends LocaleProps, ThemeProps {
       type:
         | 'string'
         | 'number'
-        | 'interger'
+        | 'integer'
         | 'object'
         | 'array'
         | 'boolean'
@@ -54,6 +54,11 @@ export interface SchemaEditorProps extends LocaleProps, ThemeProps {
    * 顶层类型信息是否隐藏
    */
   showRootInfo: boolean;
+
+  /**
+   * 是否开启高级配置
+   */
+  enableAdvancedSetting?: boolean;
 }
 
 export class SchemaEditor extends React.Component<SchemaEditorProps> {
@@ -85,8 +90,8 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
       },
 
       {
-        label: __('SchemaType.interger'),
-        value: 'interger'
+        label: __('SchemaType.integer'),
+        value: 'integer'
       },
 
       {
@@ -145,7 +150,8 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
       rootTypeMutable,
       showRootInfo,
       disabled,
-      definitions
+      definitions,
+      enableAdvancedSetting
     } = this.props;
     const value: JSONSchema = this.props.value || {
       type: defaultType || 'object'
@@ -167,7 +173,7 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
           [
             'string',
             'number',
-            'interger',
+            'integer',
             'object',
             'array',
             'boolean',
@@ -202,6 +208,7 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
           classPrefix={classPrefix}
           disabled={disabled}
           onTypeChange={this.handleTypeChange}
+          enableAdvancedSetting={enableAdvancedSetting}
         />
       </div>
     );

package/src/components/table/ItemActionsWrapper.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {ClassNamesFn} from '../../theme';
+
+export interface ItemActionsProps {
+  classnames: ClassNamesFn;
+  children?: JSX.Element;
+  dom: HTMLTableRowElement;
+}
+
+export default class ItemActionsWrapper extends React.Component<ItemActionsProps, {}> {
+  render() {
+    const {classnames: cx, children, dom} = this.props;
+    if (!dom) {
+      return;
+    }
+
+    const frame = dom.closest('table')?.parentElement?.parentElement as HTMLElement;
+
+    const rect = dom.getBoundingClientRect();
+    const height = rect.height;
+    const top = rect.top - frame.getBoundingClientRect().top;
+
+    return (
+      <div
+        className={cx('Table-itemActions-wrap')}
+        style={{top: top + 'px', height: height + 'px'}}>
+        {children}
+      </div>
+    );
+  }
+}