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

package/src/RootRenderer.tsx

@@ -157,20 +157,28 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       store.setCurrentAction(action);
       store.openDrawer(ctx);
     } else if (action.actionType === 'toast') {
-      action.toast?.items?.forEach((item:any) => {
-        env.notify(item.level || 'info', item.body ? renderChild('body', item.body, {
-          ...this.props,
-          data: ctx
-        }) : '', {
-          ...action.toast,
-          ...item,
-          title: item.title ? renderChild('title', item.title, {
-            ...this.props,
-          data: ctx
-          }) : null,
-          useMobileUI: env.useMobileUI
-        })
-      })
+      action.toast?.items?.forEach((item: any) => {
+        env.notify(
+          item.level || 'info',
+          item.body
+            ? renderChild('body', item.body, {
+                ...this.props,
+                data: ctx
+              })
+            : '',
+          {
+            ...action.toast,
+            ...item,
+            title: item.title
+              ? renderChild('title', item.title, {
+                  ...this.props,
+                  data: ctx
+                })
+              : null,
+            useMobileUI: env.useMobileUI
+          }
+        );
+      });
     } else if (action.actionType === 'ajax') {
       store.setCurrentAction(action);
       store
@@ -197,7 +205,11 @@ export class RootRenderer extends React.Component<RootRendererProps> {
               store.data
             );
         })
-        .catch(() => {});
+        .catch(e => {
+          if (throwErrors || action.countDown) {
+            throw e;
+          }
+        });
     } else if (
       action.actionType === 'copy' &&
       (action.content || action.copy)

package/src/Schema.ts

@@ -117,6 +117,7 @@ import {UUIDControlSchema} from './renderers/Form/UUID';
 import {FormControlSchema} from './renderers/Form/Control';
 import {TransferPickerControlSchema} from './renderers/Form/TransferPicker';
 import {TabsTransferPickerControlSchema} from './renderers/Form/TabsTransferPicker';
+import {UserSelectControlSchema} from './renderers/Form/UserSelect';
 import {JSONSchemaEditorControlSchema} from './renderers/Form/JSONSchemaEditor';
 import {TableSchemaV2} from './renderers/Table-v2';
 
@@ -170,6 +171,7 @@ export type SchemaType =
   | 'static-image' // 这个几个跟表单项同名，再form下面用必须带前缀 static-
   | 'images'
   | 'static-images' // 这个几个跟表单项同名，再form下面用必须带前缀 static-
+  | 'json-schema'
   | 'json-schema-editor'
   | 'json'
   | 'static-json' // 这个几个跟表单项同名，再form下面用必须带前缀 static-
@@ -334,6 +336,7 @@ export type SchemaType =
   | 'table-view'
   | 'portlet'
   | 'grid-nav'
+  | 'users-select'
   | 'tag'
 
   // 原生 input 类型
@@ -465,7 +468,8 @@ export type SchemaObject =
   | TransferPickerControlSchema
   | TabsTransferPickerControlSchema
   | TreeControlSchema
-  | TreeSelectControlSchema;
+  | TreeSelectControlSchema
+  | UserSelectControlSchema;
 
 export type SchemaCollection =
   | SchemaObject

package/src/SchemaRenderer.tsx

@@ -391,13 +391,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       ref: this.refFn,
       render: this.renderChild,
       rootStore: rootStore,
+      disabled: disable ?? rest.disabled ?? restSchema.disabled,
       dispatchEvent: this.dispatchEvent
     };
 
-    if (disable) {
-      (props as any).disabled = true;
-    }
-
     // 自动解析变量模式，主要是方便直接引入第三方组件库，无需为了支持变量封装一层
     if (renderer.autoVar) {
       for (const key of Object.keys($schema)) {

package/src/actions/CmptAction.ts

@@ -56,16 +56,16 @@ export class CmptAction implements RendererAction {
 
     // 数据更新
     if (action.actionType === 'setValue') {
-      if (component.setData) {
-        return component.setData(action.args?.value);
+      if (component?.setData) {
+        return component?.setData(action.args?.value);
       } else {
-        return component.props.onChange?.(action.args?.value);
+        return component?.props.onChange?.(action.args?.value);
       }
     }
 
     // 刷新
     if (action.actionType === 'reload') {
-      return component.reload?.(undefined, action.args);
+      return component?.reload?.(undefined, action.args);
     }
 
     // 执行组件动作

package/src/components/Button.tsx

@@ -12,6 +12,7 @@ interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   id?: string;
   className?: string;
   href?: string;
+  title?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   type: 'button' | 'reset' | 'submit';
   level: string; // 'link' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'default';
@@ -57,6 +58,7 @@ export class Button extends React.Component<ButtonProps> {
       size,
       disabled,
       className,
+      title,
       componentClass: Comp,
       classnames: cx,
       children,
@@ -98,6 +100,7 @@ export class Button extends React.Component<ButtonProps> {
               },
           className
         )}
+        title={title}
         disabled={disabled}
       >
         {loading && !disabled ? (

package/src/components/Checkbox.tsx

@@ -83,7 +83,8 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
           [`Checkbox--${size}`]: size,
           'Checkbox--button': optionType === 'button',
           'Checkbox--button--checked': optionType === 'button' && checked,
-          'Checkbox--button--disabled--unchecked': disabled && !checked
+          'Checkbox--button--disabled--unchecked':
+            optionType === 'button' && disabled && !checked
         })}
       >
         <input

package/src/components/ContextMenu.tsx

@@ -70,6 +70,10 @@ export class ContextMenu extends React.Component<
 
   menuRef: React.RefObject<HTMLDivElement> = React.createRef();
   originInstance: this | null;
+  prevInfo: { // 记录当前右键位置: 方便下一次做对比
+    x: number;
+    y: number;
+  } | null;
 
   constructor(props: ContextMenuProps) {
     super(props);
@@ -98,13 +102,27 @@ export class ContextMenu extends React.Component<
     menus: Array<MenuItem>,
     onClose?: () => void
   ) {
-    this.setState({
-      isOpened: true,
-      x: info.x,
-      y: info.y,
-      menus: menus,
-      onClose
-    });
+    if (this.state.isOpened) {
+      const {x, y} = this.state;
+      // 避免 二次触发未进行智能定位 导致遮挡问题
+      this.setState({
+        x: x + (info.x - (this.prevInfo && this.prevInfo.x ? this.prevInfo.x : 0)),
+        y: y + (info.y - (this.prevInfo && this.prevInfo.y ? this.prevInfo.y : 0)),
+        menus: menus,
+        onClose
+      }, () => {
+        this.handleEnter(this.menuRef.current as HTMLElement);
+      });
+    } else {
+      this.setState({
+        isOpened: true,
+        x: info.x,
+        y: info.y,
+        menus: menus,
+        onClose
+      });
+    }
+    this.prevInfo = info;
   }
 
   @autobind

package/src/components/Form.tsx

@@ -0,0 +1,70 @@
+/**
+ * @file 给组件用的，渲染器里面不要用这个
+ */
+import React from 'react';
+import {themeable, ThemeProps} from '../theme';
+import {useForm, UseFormReturn} from 'react-hook-form';
+import {useValidationResolver} from '../hooks/use-validation-resolver';
+import {localeable, LocaleProps} from '../locale';
+
+export type FormRef = React.MutableRefObject<
+  | {
+      submit: () => void;
+    }
+  | undefined
+>;
+
+export interface FormProps extends ThemeProps, LocaleProps {
+  defaultValues: any;
+  onSubmit: (value: any) => void;
+  forwardRef?: FormRef;
+  children?: (methods: UseFormReturn) => JSX.Element | null;
+}
+
+export function Form(props: FormProps) {
+  const {classnames: cx} = props;
+  const methods = useForm({
+    defaultValues: props.defaultValues,
+    resolver: useValidationResolver(props.translate)
+  });
+
+  React.useEffect(() => {
+    if (props.forwardRef) {
+      // 这个模式别的组件没见到过不知道后续会不会不允许
+      props.forwardRef.current = {
+        submit: () =>
+          new Promise<any>((resolve, reject) => {
+            methods.handleSubmit(
+              values => resolve(values),
+              () => resolve(false)
+            )();
+          })
+      };
+    }
+
+    return () => {
+      if (props.forwardRef) {
+        props.forwardRef.current = undefined;
+      }
+    };
+  });
+
+  return (
+    <form
+      className={cx('Form')}
+      onSubmit={methods.handleSubmit(props.onSubmit)}
+      noValidate
+    >
+      {/* 实现回车自动提交 */}
+      <input type="submit" style={{display: 'none'}} />
+      {props.children?.(methods)}
+    </form>
+  );
+}
+
+const ThemedForm = themeable(localeable(Form));
+type ThemedFormProps = Omit<FormProps, keyof ThemeProps | keyof LocaleProps>;
+
+export default React.forwardRef((props: ThemedFormProps, ref: FormRef) => (
+  <ThemedForm {...props} forwardRef={ref} />
+));

package/src/components/FormField.tsx

@@ -0,0 +1,127 @@
+/**
+ * @file 给组件用的，渲染器里面不要用这个
+ */
+import React from 'react';
+import {themeable, ThemeProps} from '../theme';
+import {
+  ControllerProps as ReactHookFormControllerProps,
+  Controller as ReactHookFormController,
+  RegisterOptions
+} from 'react-hook-form';
+import {method} from 'lodash';
+
+export interface FormFieldProps extends ThemeProps {
+  mode?: 'normal' | 'horizontal';
+  horizontal?: {
+    left?: number;
+    right?: number;
+    leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
+    justify?: boolean; // 两端对齐
+  };
+  label?: string;
+  description?: string;
+  isRequired?: boolean;
+  hasError?: boolean;
+  errors?: string | Array<string>;
+  children?: JSX.Element;
+}
+
+function FormField(props: FormFieldProps) {
+  const {
+    mode,
+    children,
+    classnames: cx,
+    className,
+    hasError,
+    isRequired,
+    label,
+    description
+  } = props;
+
+  const errors = Array.isArray(props.errors)
+    ? props.errors
+    : props.errors
+    ? [props.errors]
+    : [];
+
+  if (mode === 'horizontal') {
+  }
+
+  return (
+    <div
+      data-role="form-item"
+      className={cx(`Form-item Form-item--normal`, className, {
+        'is-error': hasError,
+        [`is-required`]: isRequired
+      })}
+    >
+      {label ? (
+        <label className={cx(`Form-label`)}>
+          <span>
+            {label}
+            {isRequired && label ? (
+              <span className={cx(`Form-star`)}>*</span>
+            ) : null}
+          </span>
+        </label>
+      ) : null}
+
+      {children}
+
+      {hasError && errors.length ? (
+        <ul className={cx(`Form-feedback`)}>
+          {errors.map((msg: string, key: number) => (
+            <li key={key}>{msg}</li>
+          ))}
+        </ul>
+      ) : null}
+
+      {description ? (
+        <div className={cx(`Form-description`)}>{description}</div>
+      ) : null}
+    </div>
+  );
+}
+
+const ThemedFormField = themeable(FormField);
+
+export default ThemedFormField;
+
+export interface ControllerProps
+  extends ReactHookFormControllerProps,
+    Omit<FormFieldProps, keyof ThemeProps> {
+  rules?: Omit<
+    RegisterOptions,
+    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
+  > & {
+    [propName: string]: any;
+  };
+}
+export function Controller(props: ControllerProps) {
+  const {render, name, shouldUnregister, defaultValue, control, ...rest} =
+    props;
+  let rules = {...props.rules};
+
+  if (rest.isRequired) {
+    rules.required = true;
+  }
+
+  return (
+    <ReactHookFormController
+      name={name}
+      rules={rules}
+      shouldUnregister={shouldUnregister}
+      defaultValue={defaultValue}
+      control={control}
+      render={methods => (
+        <ThemedFormField
+          {...rest}
+          hasError={!!methods.fieldState.error}
+          errors={methods.fieldState.error?.message}
+        >
+          {render(methods)}
+        </ThemedFormField>
+      )}
+    />
+  );
+}

package/src/components/InputBox.tsx

@@ -37,6 +37,7 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
   @autobind
   clearValue(e: any) {
     e.preventDefault();
+    e.stopPropagation();
 
     const onClear = this.props.onClear;
     const onChange = this.props.onChange;
@@ -81,6 +82,7 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
       prefix: result,
       children,
       borderMode,
+      onClick,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
@@ -91,9 +93,10 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
           'is-focused': isFocused,
           'is-disabled': disabled,
           'is-error': hasError,
-          'is-clickable': rest.onClick,
+          'is-clickable': onClick,
           [`InputBox--border${ucFirst(borderMode)}`]: borderMode
         })}
+        onClick={onClick}
       >
         {result}
 

package/src/components/InputBoxWithSuggestion.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+import {localeable, LocaleProps} from '../locale';
+import {themeable, ThemeProps} from '../theme';
+// @ts-ignore
+import {matchSorter} from 'match-sorter';
+import PopOverContainer from './PopOverContainer';
+import SearchBox from './SearchBox';
+import ListSelection from './GroupedSelection';
+import InputBox from './InputBox';
+import {Icon} from './icons';
+
+export interface InputBoxWithSuggestionProps extends ThemeProps, LocaleProps {
+  options: Array<any>;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  searchable?: boolean;
+  popOverContainer?: any;
+  hasError?: boolean;
+  placeholder?: string;
+  clearable?: boolean;
+}
+
+const option2value = (item: any) => item.value;
+
+export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggestionProps> {
+  constructor(props: InputBoxWithSuggestionProps) {
+    super(props);
+    this.state = {
+      searchText: ''
+    };
+    this.onSearch = this.onSearch.bind(this);
+    this.filterOptions = this.filterOptions.bind(this);
+  }
+
+  onSearch(text: string) {
+    let txt = text.toLowerCase();
+
+    this.setState({searchText: txt});
+  }
+
+  filterOptions(options: any[]) {
+    return matchSorter(options, this.props.value, {
+      keys: ['label', 'value']
+    });
+  }
+
+  // 选了值，还原options
+  onPopClose(e: React.MouseEvent, onClose: () => void) {
+    this.setState({searchText: ''});
+    onClose();
+  }
+
+  render() {
+    const {
+      placeholder,
+      onChange,
+      value,
+      classnames: cx,
+      disabled,
+      translate: __,
+      searchable,
+      popOverContainer,
+      clearable,
+      hasError
+    } = this.props;
+    const options = this.filterOptions(this.props.options);
+
+    return (
+      <PopOverContainer
+        popOverContainer={popOverContainer || (() => findDOMNode(this))}
+        popOverRender={({onClose}) => (
+          <>
+            {searchable ? (
+              <SearchBox mini={false} onSearch={this.onSearch} />
+            ) : null}
+            <ListSelection
+              multiple={false}
+              onClick={e => this.onPopClose(e, onClose)}
+              options={options}
+              value={[value]}
+              option2value={option2value}
+              onChange={(value: any) => {
+                onChange?.(value);
+              }}
+            />
+          </>
+        )}
+      >
+        {({onClick, ref, isOpened}) => (
+          <InputBox
+            className={cx('InputBox--sug', isOpened ? 'is-active' : '')}
+            ref={ref}
+            placeholder={placeholder}
+            disabled={disabled}
+            value={options.find(o => o.value === value)?.label ?? value}
+            onChange={onChange}
+            clearable={clearable}
+            onClick={onClick}
+            hasError={hasError}
+          >
+            <span className={cx('InputBox-caret')}>
+              <Icon icon="caret" className="icon" />
+            </span>
+          </InputBox>
+        )}
+      </PopOverContainer>
+    );
+  }
+}
+
+export default themeable(localeable(InputBoxWithSuggestion));

package/src/components/PickerContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {autobind} from '../utils/helper';
+import {autobind, isObject} from '../utils/helper';
 import Overlay from './Overlay';
 import PopOver from './PopOver';
 import {findDOMNode} from 'react-dom';
@@ -23,8 +23,9 @@ export interface PickerContainerProps extends ThemeProps, LocaleProps {
     onChange: (value: any) => void;
     setState: (state: any) => void;
     [propName: string]: any;
-  }) => JSX.Element;
+  }) => JSX.Element | null;
   value?: any;
+  beforeConfirm?: (bodyRef: any) => any;
   onConfirm?: (value?: any) => void;
   onCancel?: () => void;
   popOverContainer?: any;
@@ -49,6 +50,7 @@ export class PickerContainer extends React.Component<
     isOpened: false,
     value: this.props.value
   };
+  bodyRef = React.createRef<any>();
 
   componentDidUpdate(prevProps: PickerContainerProps) {
     const props = this.props;
@@ -94,10 +96,22 @@ export class PickerContainer extends React.Component<
   }
 
   @autobind
-  confirm() {
-    const {onConfirm} = this.props;
+  async confirm() {
+    const {onConfirm, beforeConfirm} = this.props;
+
+    const ret = await beforeConfirm?.(this.bodyRef.current);
+    let state: any = {
+      isOpened: false
+    };
+
+    // beforeConfirm 返回 false 则阻止后续动作
+    if (ret === false) {
+      return;
+    } else if (isObject(ret)) {
+      state.value = ret;
+    }
 
-    this.close(undefined, () => onConfirm?.(this.state.value));
+    this.setState(state, () => onConfirm?.(this.state.value));
   }
 
   @autobind
@@ -141,6 +155,7 @@ export class PickerContainer extends React.Component<
           <Modal.Body>
             {popOverRender({
               ...(this.state as any),
+              ref: this.bodyRef,
               setState: this.updateState,
               onClose: this.close,
               onChange: this.handleChange

package/src/components/Select.tsx

@@ -60,6 +60,8 @@ export interface OptionProps {
   disabled?: boolean;
   creatable?: boolean;
   pathSeparator?: string;
+  hasError?: boolean;
+  block?: boolean;
   onAdd?: (
     idx?: number | Array<number>,
     value?: any,
@@ -476,7 +478,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const {simpleValue} = this.props;
     const {selection} = this.state;
     const value = simpleValue ? selection.map(item => item.value) : selection;
-    
+
     this.props.disabled ||
       this.state.isOpen ||
       this.setState(
@@ -486,10 +488,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
         this.focus
       );
 
-    this.props.onFocus && this.props.onFocus({
-      ...e,
-      value
-    });
+    this.props.onFocus &&
+      this.props.onFocus({
+        ...e,
+        value
+      });
   }
 
   @autobind
@@ -502,10 +505,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
       isFocused: false
     });
 
-    this.props.onBlur && this.props.onBlur({
-      ...e,
-      value
-    });
+    this.props.onBlur &&
+      this.props.onBlur({
+        ...e,
+        value
+      });
   }
 
   @autobind
@@ -1093,6 +1097,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       valuesNoWrap,
       searchable,
       inline,
+      block,
       className,
       value,
       loading,
@@ -1101,7 +1106,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       disabled,
       checkAll,
       borderMode,
-      useMobileUI
+      useMobileUI,
+      hasError
     } = this.props;
 
     const selection = this.state.selection;
@@ -1137,11 +1143,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 {
                   [`Select--multi`]: multiple,
                   [`Select--inline`]: inline,
+                  [`Select--block`]: block,
                   [`Select--searchable`]: searchable,
                   'is-opened': isOpen,
                   'is-focused': this.state.isFocused,
                   'is-disabled': disabled,
                   'is-mobile': mobileUI,
+                  'is-error': hasError,
                   [`Select--border${ucFirst(borderMode)}`]: borderMode
                 },
                 className