amis 1.9.0-beta.12 → 1.9.0-beta.15

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

@@ -0,0 +1,299 @@
+import React from 'react';
+import type {JSONSchema} from '../../utils/DataScope';
+import {autobind, guid} from '../../utils/helper';
+import Button from '../Button';
+import {Icon} from '../icons';
+import InputBox from '../InputBox';
+import {SchemaEditorItemCommon, SchemaEditorItemCommonProps} from './Common';
+import {SchemaEditorItem} from './Item';
+
+export interface SchemaEditorItemObjectState {
+  members: Array<{
+    id: string;
+    key: string;
+    hasError?: boolean;
+    required?: boolean;
+    schema: JSONSchema;
+  }>;
+  collapsed: boolean;
+}
+
+export class SchemaEditorItemObject extends SchemaEditorItemCommon<
+  SchemaEditorItemCommonProps,
+  SchemaEditorItemObjectState
+> {
+  state = {
+    members: this.propsToMembers(this.props),
+    collapsed: false
+  };
+
+  lastValue: any;
+
+  componentDidUpdate(prevProps: SchemaEditorItemCommonProps) {
+    const props = this.props;
+
+    // 外部属性变化，更新 state
+    if (
+      props.value !== prevProps.value &&
+      JSON.stringify(props.value) !== JSON.stringify(this.lastValue)
+    ) {
+      this.setState({
+        members: this.propsToMembers(props)
+      });
+    }
+  }
+
+  propsToMembers(props: SchemaEditorItemCommonProps) {
+    const members: Array<{
+      id: string;
+      key: string;
+      hasError?: boolean;
+      required?: boolean;
+      schema: JSONSchema;
+    }> = [];
+    const required = Array.isArray(props.value?.required)
+      ? props.value!.required
+      : [];
+
+    if (props.value?.properties) {
+      const properties = props.value.properties;
+      Object.keys(properties).forEach(key => {
+        const value = properties[key] as any;
+
+        members.push({
+          id: guid(),
+          key: key || '',
+          hasError: !key || members.some(i => i.key === key),
+          required: !!~required.indexOf(key),
+          schema: value
+        });
+      });
+    }
+
+    return members;
+  }
+
+  @autobind
+  pipeOut() {
+    const members = this.state.members;
+    const {value, onChange} = this.props;
+    const properties: any = {};
+    const required: Array<string> = [];
+
+    members
+      .filter(item => !item.hasError)
+      .forEach(member => {
+        properties[member.key] = member.schema;
+
+        if (member.required) {
+          required.push(member.key);
+        }
+      });
+
+    this.lastValue = {
+      ...value,
+      properties,
+      required
+    };
+    onChange?.(this.lastValue);
+  }
+
+  @autobind
+  handleAdd() {
+    const members = this.state.members.concat();
+    members.push({
+      id: guid(),
+      key: '',
+      hasError: true,
+      required: false,
+      schema: {
+        type: 'string'
+      }
+    });
+
+    this.setState(
+      {
+        members
+      },
+      this.pipeOut
+    );
+  }
+
+  @autobind
+  handlePropKeyChange(index: number, key: string) {
+    const members = this.state.members.concat();
+    members[index] = {
+      ...members[index],
+      key,
+      hasError: !key || members.some((m, i) => i !== index && m.key === key)
+    };
+
+    this.setState({members}, this.pipeOut);
+  }
+
+  @autobind
+  handlePropTitleChange(index: number, title: string) {
+    const members = this.state.members.concat();
+    members[index] = {
+      ...members[index],
+      schema: {
+        ...members[index].schema,
+        title
+      }
+    };
+
+    this.setState({members}, this.pipeOut);
+  }
+
+  @autobind
+  handlePropRemove(index: number) {
+    const members = this.state.members.concat();
+    members.splice(index, 1);
+    this.setState({members}, this.pipeOut);
+  }
+
+  @autobind
+  handlePropChange(index: number, item: any) {
+    const members = this.state.members.concat();
+    members[index] = {
+      ...members[index],
+      schema: {
+        ...item
+      }
+    };
+
+    this.setState({members}, this.pipeOut);
+  }
+
+  @autobind
+  handlePropRequiredChange(index: number, required: boolean) {
+    const members = this.state.members.concat();
+    members[index] = {
+      ...members[index],
+      required
+    };
+
+    this.setState({members}, this.pipeOut);
+  }
+
+  @autobind
+  toggleCollapsed() {
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  }
+
+  rendererProps() {
+    const {
+      value,
+      translate: __,
+      classnames: cx,
+      renderExtraProps,
+      locale,
+      classPrefix,
+      disabled,
+      showInfo,
+      types,
+      onTypeChange
+    } = this.props;
+    const members = this.state.members;
+
+    return (
+      <div
+        className={cx('SchemaEditorProps', {
+          'SchemaEditorProps--depth': showInfo !== false
+        })}
+      >
+        {members.length ? (
+          members.map((member, index) => (
+            <SchemaEditorItem
+              key={member.id}
+              types={types}
+              onTypeChange={onTypeChange}
+              prefix={
+                <>
+                  <InputBox
+                    className={cx('SchemaEditor-key')}
+                    hasError={member.hasError}
+                    value={member.key || ''}
+                    onChange={this.handlePropKeyChange.bind(this, index)}
+                    placeholder={__('JSONSchema.key')}
+                    disabled={disabled || !!value?.$ref}
+                  />
+
+                  <InputBox
+                    className={cx('SchemaEditor-title')}
+                    value={member.schema.title || ''}
+                    onChange={this.handlePropTitleChange.bind(this, index)}
+                    placeholder={__('JSONSchema.title')}
+                    disabled={disabled || !!value?.$ref}
+                  />
+                </>
+              }
+              affix={
+                <Button
+                  className={cx('SchemaEditor-btn')}
+                  onClick={this.handlePropRemove.bind(this, index)}
+                  iconOnly
+                  disabled={disabled || !!value?.$ref}
+                >
+                  <Icon icon="remove" className="icon" />
+                </Button>
+              }
+              value={member.schema}
+              onChange={this.handlePropChange.bind(this, index)}
+              renderExtraProps={renderExtraProps}
+              locale={locale}
+              translate={__}
+              classnames={cx}
+              classPrefix={classPrefix}
+              disabled={disabled || !!value?.$ref}
+              required={member.required}
+              onRequiredChange={this.handlePropRequiredChange.bind(this, index)}
+            />
+          ))
+        ) : (
+          <div className={cx('SchemaEditorProps-placeholder')}>
+            {__('placeholder.empty')}
+          </div>
+        )}
+
+        <Button
+          level="link"
+          onClick={this.handleAdd}
+          size="xs"
+          disabled={disabled || !!value?.$ref}
+        >
+          {__('JSONSchema.add_prop')}
+        </Button>
+      </div>
+    );
+  }
+
+  render() {
+    const {classnames: cx, showInfo, translate: __, disabled} = this.props;
+
+    return (
+      <div
+        className={cx('SchemaEditorItem SchemaEditorObject', {
+          'is-collapsed': this.state.collapsed
+        })}
+      >
+        {showInfo !== false ? (
+          <>
+            <a
+              className={cx('SchemaEditor-caret', {
+                'is-collapsed': this.state.collapsed
+              })}
+              onClick={this.toggleCollapsed}
+            >
+              <Icon icon="caret" className="icon" />
+            </a>
+            {this.renderCommon()}
+          </>
+        ) : null}
+        {this.state.collapsed ? null : this.rendererProps()}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import {localeable, LocaleProps} from '../../locale';
+import {themeable, ThemeProps} from '../../theme';
+import {DataSchema} from '../../utils/DataSchema';
+import type {JSONSchema} from '../../utils/DataScope';
+import {autobind} from '../../utils/helper';
+import {VariableItem} from '../formula/Editor';
+import VariableList from '../formula/VariableList';
+import TooltipWrapper from '../TooltipWrapper';
+
+export interface SchemaVariableListProps extends LocaleProps, ThemeProps {
+  schemas?: Array<JSONSchema> | JSONSchema;
+  value?: string;
+  onSelect?: (value: string, schema: JSONSchema) => void;
+}
+
+export interface SchemaVariableListState {
+  variables: Array<VariableItem>;
+}
+
+export class SchemaVariableList extends React.Component<
+  SchemaVariableListProps,
+  SchemaVariableListState
+> {
+  state = {
+    variables: this.schemasToVaraibles(this.props)
+  };
+
+  dataSchema?: DataSchema;
+
+  constructor(props: SchemaVariableListProps) {
+    super(props);
+  }
+
+  componentDidUpdate(prevProps: SchemaVariableListProps) {
+    const props = this.props;
+
+    if (props.schemas !== prevProps.schemas) {
+      this.setState({
+        variables: this.schemasToVaraibles(props)
+      });
+    }
+  }
+
+  schemasToVaraibles(props: SchemaVariableListProps) {
+    const schemas = Array.isArray(props.schemas)
+      ? props.schemas.concat()
+      : props.schemas
+      ? [props.schemas]
+      : [];
+
+    if (!schemas.length) {
+      return [];
+    }
+    const dataSchema = new DataSchema(schemas);
+    this.dataSchema = dataSchema;
+    return dataSchema.getDataPropsAsOptions();
+  }
+
+  @autobind
+  handleSelect(item: any) {
+    const {onSelect} = this.props;
+    const schema = this.dataSchema?.getSchemaByPath(item.value);
+
+    onSelect?.(item.value, schema!);
+  }
+
+  @autobind
+  itemRender(option: any) {
+    const {classnames: cx, translate: __} = this.props;
+
+    return (
+      <span className={cx(`FormulaEditor-VariableList-item`)}>
+        <label>{option.label}</label>
+        <TooltipWrapper tooltip={option.description} tooltipTheme="dark">
+          <span className={cx(`FormulaEditor-VariableList-item-tag`)}>
+            {__(`SchemaType.${option.type || 'any'}`)}
+          </span>
+        </TooltipWrapper>
+      </span>
+    );
+  }
+
+  render() {
+    return (
+      <VariableList
+        data={this.state.variables}
+        value={this.props.value}
+        onSelect={this.handleSelect}
+        selectMode="tree"
+        itemRender={this.itemRender}
+      />
+    );
+  }
+}
+
+export default localeable(themeable(SchemaVariableList));

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import {localeable} from '../../locale';
+import {themeable} from '../../theme';
+import {autobind} from '../../utils/helper';
+import PickerContainer from '../PickerContainer';
+import SchemaVariableList, {
+  SchemaVariableListProps
+} from './SchemaVariableList';
+
+export interface SchemaVariableListPickerProps extends SchemaVariableListProps {
+  children: (props: {
+    onClick: (e: React.MouseEvent) => void;
+    setState: (state: any) => void;
+    isOpened: boolean;
+  }) => JSX.Element;
+  value?: any;
+  onConfirm?: (value?: any) => void;
+  onCancel?: () => void;
+}
+
+export class SchemaVariableListPicker extends React.Component<SchemaVariableListPickerProps> {
+  render() {
+    const {
+      translate: __,
+      schemas,
+      value,
+      onConfirm,
+      onCancel,
+      children
+    } = this.props;
+
+    return (
+      <PickerContainer
+        title={__('Select.placeholder')}
+        bodyRender={({
+          onClose,
+          value,
+          onChange,
+          setState,
+          schemas: stateSchemas,
+          ...states
+        }) => {
+          return (
+            <SchemaVariableList
+              value={value?.value ?? value}
+              onSelect={(value, schema) =>
+                onChange({
+                  value,
+                  schema
+                })
+              }
+              schemas={stateSchemas ?? schemas}
+            />
+          );
+        }}
+        value={value}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      >
+        {children}
+      </PickerContainer>
+    );
+  }
+}
+
+export default localeable(themeable(SchemaVariableListPicker));

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

@@ -0,0 +1,211 @@
+/**
+ * 用来定义数据结构的编辑器
+ */
+
+import React from 'react';
+import {localeable, LocaleProps} from '../../locale';
+import {themeable, ThemeProps} from '../../theme';
+import type {JSONSchema} from '../../utils/DataScope';
+import {uncontrollable} from 'uncontrollable';
+import {SchemaEditorItem} from './Item';
+import type {JSONSchema7TypeName} from 'json-schema';
+import {autobind} from '../../utils/helper';
+
+export interface SchemaEditorProps extends LocaleProps, ThemeProps {
+  value?: JSONSchema;
+  onChange: (value: JSONSchema) => void;
+  disabled?: boolean;
+  defaultType: JSONSchema7TypeName;
+  renderExtraProps?: (
+    value: JSONSchema,
+    onChange: (value: JSONSchema) => void
+  ) => JSX.Element;
+
+  disabledTypes?: Array<string>;
+
+  /**
+   * 预设模板
+   */
+  definitions?: {
+    [propName: string]: {
+      type:
+        | 'string'
+        | 'number'
+        | 'interger'
+        | 'object'
+        | 'array'
+        | 'boolean'
+        | 'null';
+      title: string;
+      [propName: string]: any;
+    };
+  };
+
+  /**
+   * 顶层是否允许修改类型
+   */
+  rootTypeMutable: boolean;
+
+  /**
+   * 顶层类型信息是否隐藏
+   */
+  showRootInfo: boolean;
+}
+
+export class SchemaEditor extends React.Component<SchemaEditorProps> {
+  static defaultProps: Pick<
+    SchemaEditorProps,
+    'defaultType' | 'rootTypeMutable' | 'showRootInfo' | 'disabledTypes'
+  > = {
+    defaultType: 'object',
+    rootTypeMutable: false,
+    showRootInfo: false,
+    disabledTypes: ['null']
+  };
+
+  defaultTypes: Array<any>;
+
+  constructor(props: SchemaEditorProps) {
+    super(props);
+
+    const __ = props.translate;
+    this.defaultTypes = [
+      {
+        label: __('SchemaType.string'),
+        value: 'string'
+      },
+
+      {
+        label: __('SchemaType.number'),
+        value: 'number'
+      },
+
+      {
+        label: __('SchemaType.interger'),
+        value: 'interger'
+      },
+
+      {
+        label: __('SchemaType.object'),
+        value: 'object'
+      },
+
+      {
+        label: __('SchemaType.array'),
+        value: 'array'
+      },
+
+      {
+        label: __('SchemaType.boolean'),
+        value: 'boolean'
+      },
+
+      {
+        label: __('SchemaType.null'),
+        value: 'null'
+      }
+    ];
+  }
+
+  @autobind
+  handleTypeChange(type: string, value: any, origin: any) {
+    const {definitions} = this.props;
+
+    if (type === 'array') {
+      value.items = {
+        type: 'string'
+      };
+    }
+
+    if (definitions?.[type]) {
+      value = {
+        ...value,
+        ...definitions[type],
+        $ref: type
+      };
+    }
+
+    return value;
+  }
+
+  render() {
+    const {
+      defaultType,
+      classnames: cx,
+      onChange,
+      renderExtraProps,
+      translate,
+      locale,
+      classPrefix,
+      rootTypeMutable,
+      showRootInfo,
+      disabled,
+      definitions
+    } = this.props;
+    const value: JSONSchema = this.props.value || {
+      type: defaultType || 'object'
+    };
+
+    const disabledTypes = Array.isArray(this.props.disabledTypes)
+      ? this.props.disabledTypes
+      : [];
+    let types = this.defaultTypes.concat();
+
+    if (definitions) {
+      const keys = Object.keys(definitions);
+      keys.forEach(key => {
+        const definition = definitions[key];
+
+        if (
+          definition?.type &&
+          definition.title &&
+          [
+            'string',
+            'number',
+            'interger',
+            'object',
+            'array',
+            'boolean',
+            'null'
+          ].includes(definition.type)
+        ) {
+          types.push({
+            value: key,
+            label: translate(definition.title)
+          });
+        }
+      });
+    }
+
+    if (disabledTypes.length) {
+      types = types.filter(item => !~disabledTypes.indexOf(item.value));
+    }
+
+    return (
+      <div className={cx('SchemaEditor')}>
+        <SchemaEditorItem
+          types={types}
+          typeMutable={rootTypeMutable}
+          showInfo={showRootInfo}
+          value={value}
+          onChange={onChange}
+          renderExtraProps={renderExtraProps}
+          locale={locale}
+          translate={translate}
+          classnames={cx}
+          classPrefix={classPrefix}
+          disabled={disabled}
+          onTypeChange={this.handleTypeChange}
+        />
+      </div>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(SchemaEditor, {
+      value: 'onChange'
+    })
+  )
+);