amis 1.7.0 → 1.8.0-beta.13

package/src/Schema.ts

@@ -52,11 +52,13 @@ import {DialogSchema, DialogSchemaBase} from './renderers/Dialog';
 import {DrawerSchema} from './renderers/Drawer';
 import {SearchBoxSchema} from './renderers/SearchBox';
 import {SparkLineSchema} from './renderers/SparkLine';
+import {TooltipWrapperSchema} from './renderers/TooltipWrapper';
 import {PaginationWrapperSchema} from './renderers/PaginationWrapper';
 import {PaginationSchema} from './renderers/Pagination';
 import {AnchorNavSchema} from './renderers/AnchorNav';
 import {AvatarSchema} from './renderers/Avatar';
 import {StepsSchema} from './renderers/Steps';
+import {SpinnerSchema} from './renderers/Spinner';
 import {TimelineSchema} from './renderers/Timeline';
 import {ArrayControlSchema} from './renderers/Form/InputArray';
 import {ButtonGroupControlSchema} from './renderers/Form/ButtonGroupSelect';
@@ -149,6 +151,7 @@ export type SchemaType =
   | 'month'
   | 'static-month' // 这个几个跟表单项同名，再form下面用必须带前缀 static-
   | 'dialog'
+  | 'spinner'
   | 'divider'
   | 'dropdown-button'
   | 'drawer'
@@ -331,7 +334,8 @@ export type SchemaType =
   | 'native-date'
   | 'native-time'
   | 'native-number'
-  | 'code';
+  | 'code'
+  | 'tooltip-wrapper';
 
 export type SchemaObject =
   | PageSchema
@@ -382,6 +386,7 @@ export type SchemaObject =
   | ServiceSchema
   | SparkLineSchema
   | StatusSchema
+  | SpinnerSchema
   | TableSchema
   | TabsSchema
   | TasksSchema
@@ -389,6 +394,7 @@ export type SchemaObject =
   | VideoSchema
   | WizardSchema
   | WrapperSchema
+  | TooltipWrapperSchema
   | FormSchema
   | AnchorNavSchema
   | StepsSchema
@@ -593,6 +599,13 @@ export interface SchemaApiObject {
    */
   cache?: number;
 
+  /**
+   * 强制将数据附加在 query，默认只有 api 地址中没有用变量的时候 crud 查询接口才会
+   * 自动附加数据到 query 部分，如果想强制附加请设置这个属性。
+   * 对于那种临时加了个变量但是又不想全部参数写一遍的时候配置很有用。
+   */
+  forceAppendDataToQuery?: boolean;
+
   /**
    * qs 配置项
    */
@@ -882,4 +895,4 @@ export interface ToastSchemaBase extends BaseSchema {
    * 持续时间
    */
   timeout: number;
-};
+}

package/src/SchemaRenderer.tsx

@@ -15,12 +15,14 @@ import {asFormItem} from './renderers/Form/Item';
 import {renderChild, renderChildren} from './Root';
 import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
-import {DebugWrapper, enableAMISDebug} from './utils/debug';
+import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
 import {anyChanged, chainEvents, autobind} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
 
 import type {RendererEvent} from './utils/renderer-event';
+import {observer} from 'mobx-react';
+import {isAlive} from 'mobx-state-tree';
 
 interface SchemaRendererProps extends Partial<RendererProps> {
   schema: Schema;
@@ -59,6 +61,7 @@ const defaultOmitList = [
 
 const componentCache: SimpleMap = new SimpleMap();
 
+@observer
 class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
   ref: any;
   unbindEvent: (() => void) | undefined = undefined;
@@ -99,21 +102,36 @@ class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
   }
 
   render() {
-    const {component: Component, ...rest} = this.props;
-
+    const {component: Component, rootStore, ...rest} = this.props;
+    const visible = isAlive(rootStore)
+      ? rootStore.visibleState[rest.$schema.id || rest.$path]
+      : true;
+    const disable = isAlive(rootStore)
+      ? rootStore.disableState[rest.$schema.id || rest.$path]
+      : false;
     const isClassComponent = Component.prototype?.isReactComponent;
 
-    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+    if (disable) {
+      (rest as any).disabled = true;
+    }
 
-    return isClassComponent ? (
-      <Component
-        ref={this.childRef}
-        {...rest}
-        dispatchEvent={this.dispatchEvent}
-      />
-    ) : (
-      <Component {...rest} dispatchEvent={this.dispatchEvent} />
-    );
+    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+    return visible !== false ? (
+      isClassComponent ? (
+        <Component
+          ref={this.childRef}
+          {...rest}
+          rootStore={rootStore}
+          dispatchEvent={this.dispatchEvent}
+        />
+      ) : (
+        <Component
+          {...rest}
+          rootStore={rootStore}
+          dispatchEvent={this.dispatchEvent}
+        />
+      )
+    ) : null;
   }
 }
 
@@ -399,7 +417,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       />
     );
 
-    return enableAMISDebug ? (
+    return this.props.env.enableAMISDebug ? (
       <DebugWrapper renderer={renderer}>{component}</DebugWrapper>
     ) : (
       component

package/src/WithStore.tsx

@@ -1,5 +1,6 @@
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {observer} from 'mobx-react';
+import {isAlive} from 'mobx-state-tree';
 import React from 'react';
 import {RendererProps} from './factory';
 import {IIRendererStore, IRendererStore} from './store';
@@ -257,7 +258,8 @@ export function HocStoreFactory(renderer: {
       componentWillUnmount() {
         const rootStore = this.context as IRendererStore;
         const store = this.store;
-        rootStore.removeStore(store);
+
+        isAlive(store) && rootStore.removeStore(store);
 
         // @ts-ignore
         delete this.store;

package/src/actions/CmptAction.ts

@@ -30,6 +30,34 @@ export class CmptAction implements Action {
         ? event.context.scoped?.getComponentById(action.componentId)
         : renderer;
 
+    // 显隐&状态控制
+    if (['show', 'hidden'].includes(action.actionType)) {
+      return renderer.props.rootStore.setVisible(
+        action.componentId,
+        action.actionType === 'show'
+      );
+    } else if (['enabled', 'disabled'].includes(action.actionType)) {
+      return renderer.props.rootStore.setDisable(
+        action.componentId,
+        action.actionType === 'disabled'
+      );
+    }
+
+    // 数据更新
+    if (action.actionType === 'setValue') {
+      const value = dataMapping(action.value, event.data);
+      if (component.setData) {
+        return component.setData(value);
+      } else {
+        return component.props.onChange?.(value);
+      }
+    }
+
+    // 刷新
+    if (action.actionType === 'reload') {
+      return component.reload?.(undefined, action.args);
+    }
+
     // 执行组件动作
     return component.doAction?.(action, action.args);
   }

package/src/actions/PageAction.ts

@@ -0,0 +1,62 @@
+import {RendererEvent} from '../utils/renderer-event';
+import {
+  Action,
+  ListenerAction,
+  ListenerContext,
+  registerAction
+} from './Action';
+
+/**
+ * 返回上个页面
+ *
+ * @export
+ * @class PageGoBackAction
+ * @implements {Action}
+ */
+export class PageGoBackAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    window.history.back();
+  }
+}
+
+/**
+ * 到指定页面
+ *
+ * @export
+ * @class PageGoAction
+ * @implements {Action}
+ */
+export class PageGoAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    window.history.go(action.delta || 0);
+  }
+}
+
+/**
+ * 浏览器刷新
+ *
+ * @export
+ * @class PageRefreshAction
+ * @implements {Action}
+ */
+export class PageRefreshAction implements Action {
+  async run(
+    action: ListenerAction,
+    renderer: ListenerContext,
+    event: RendererEvent<any>
+  ) {
+    window.location.reload();
+  }
+}
+
+registerAction('goBack', new PageGoBackAction());
+registerAction('refresh', new PageRefreshAction());
+registerAction('goPage', new PageGoAction());

package/src/actions/index.ts

@@ -17,6 +17,7 @@ import './DrawerAction';
 import './EmailAction';
 import './LinkAction';
 import './ToastAction';
+import './PageAction';
 import './Decorators';
 
 export * from './Action';

package/src/components/Alert2.tsx

@@ -5,7 +5,8 @@
 
 import React from 'react';
 import {ClassNamesFn, themeable} from '../theme';
-import {Icon} from './icons';
+import {generateIcon} from '../utils/icon';
+import {Icon, getIcon} from './icons';
 
 export interface AlertProps {
   level: 'danger' | 'info' | 'success' | 'warning';
@@ -73,16 +74,21 @@ export class Alert extends React.Component<AlertProps, AlertState> {
       closeButtonClassName
     } = this.props;
 
+    // 优先使用内置svg，其次使用icon库
     const iconNode = icon ? (
       typeof icon === 'string' ? (
-        <Icon icon={icon} className={cx(`Alert-icon icon`)} />
+        getIcon(icon) ? (
+          <Icon icon={icon} className={cx(`icon`)} />
+        ) : (
+          generateIcon(cx, icon, 'icon')
+        )
       ) : React.isValidElement(icon) ? (
         React.cloneElement(icon, {
           className: cx(`Alert-icon`, icon.props?.className)
         })
       ) : null
     ) : showIcon ? (
-      <Icon icon={`alert-${level}`} className={cx(`Alert-icon icon`)} />
+      <Icon icon={`alert-${level}`} className={cx(`icon`)} />
     ) : null;
 
     return this.state.show ? (

package/src/components/AssociatedSelection.tsx

@@ -88,9 +88,15 @@ export class AssociatedSelection extends BaseSelection<
 
   @autobind
   handleLeftDeferLoad(option: Option) {
-    const {leftOptions, onLeftDeferLoad} = this.props;
-
-    onLeftDeferLoad?.(option, leftOptions);
+    const {leftOptions, onLeftDeferLoad, onDeferLoad} = this.props;
+
+    if (typeof onLeftDeferLoad === 'function') {
+      // TabsTransfer
+      return onLeftDeferLoad?.(option, leftOptions);
+    } else if (typeof onDeferLoad === 'function') {
+      // Select
+      return onDeferLoad?.(option);
+    }
   }
 
   handleRetry(option: Option) {

package/src/components/BarCode.tsx

@@ -20,7 +20,7 @@ export class BarCode extends React.Component<BarCodeProps> {
 
   constructor(props: BarCodeProps) {
     super(props);
-    this.dom = React.createRef<SVGSVGElement>();
+    this.dom = React.createRef<HTMLImageElement>();
   }
 
   componentDidUpdate(prevProps: BarCodeProps) {
@@ -43,7 +43,7 @@ export class BarCode extends React.Component<BarCodeProps> {
   }
 
   render() {
-    return <svg ref={this.dom}></svg>;
+    return <img ref={this.dom} />;
   }
 }
 

package/src/components/Cascader.tsx

@@ -48,6 +48,8 @@ export interface CascaderState {
   tabs: Array<{
     options: Options;
   }>;
+  // 用于在只选择子节点模式的时候禁用按钮
+  disableConfirm: boolean;
 }
 
 export class Cascader extends React.Component<CascaderProps, CascaderState> {
@@ -66,7 +68,8 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
         {
           options: this.props.options.slice() || []
         }
-      ]
+      ],
+      disableConfirm: false
     };
   }
   componentDidMount() {
@@ -288,7 +291,7 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
 
   @autobind
   onSelect(option: CascaderOption, tabIndex: number) {
-    const {multiple, valueField = 'value', cascade} = this.props;
+    const {multiple, valueField = 'value', cascade, onlyLeaf} = this.props;
 
     let tabs = this.state.tabs.slice();
     let {activeTab} = this.state;
@@ -364,10 +367,15 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
       }
       activeTab += 1;
     }
+    let disableConfirm = false;
+    if (onlyLeaf && selectedOptions.length && selectedOptions[0].children) {
+      disableConfirm = true;
+    }
     this.setState({
       tabs,
       activeTab,
-      selectedOptions
+      selectedOptions,
+      disableConfirm
     });
   }
 
@@ -428,23 +436,39 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
 
   @autobind
   confirm() {
-    const {onChange, joinValues, delimiter, extractValue, valueField, onClose} =
-      this.props;
-    let {selectedOptions} = this.state;
-    let _selectedOptions = this.getSubmitOptions(selectedOptions);
-    _selectedOptions = uniqBy(_selectedOptions, valueField);
+    const {
+      onChange,
+      joinValues,
+      delimiter,
+      extractValue,
+      valueField,
+      onClose,
+      onlyLeaf
+    } = this.props;
+    const selectedOptions = this.getSelectedOptions();
+    if (onlyLeaf && selectedOptions.length && selectedOptions[0].children) {
+      return;
+    }
     onChange(
       joinValues
-        ? _selectedOptions
+        ? selectedOptions
             .map(item => item[valueField as string])
             .join(delimiter)
         : extractValue
-        ? _selectedOptions.map(item => item[valueField as string])
-        : _selectedOptions
+        ? selectedOptions.map(item => item[valueField as string])
+        : selectedOptions
     );
     onClose && onClose();
   }
 
+  @autobind
+  getSelectedOptions() {
+    return uniqBy(
+      this.getSubmitOptions(this.state.selectedOptions),
+      this.props.valueField
+    );
+  }
+
   @autobind
   renderOption(option: CascaderOption, tabIndex: number) {
     const {
@@ -534,6 +558,7 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
       classnames: cx,
       className,
       onClose,
+      valueField,
       translate: __
     } = this.props;
 
@@ -551,6 +576,7 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
             className={cx(`Cascader-btnConfirm`)}
             level="text"
             onClick={this.confirm}
+            disabled={this.state.disableConfirm}
           >
             {__('confirm')}
           </Button>

package/src/components/Checkbox.tsx

@@ -16,10 +16,10 @@ interface CheckboxProps {
   labelClassName?: string;
   className?: string;
   onChange?: (value: any, shift?: boolean) => void;
-  value?: any;
+  value?: boolean | string | number;
   inline?: boolean;
-  trueValue?: any;
-  falseValue?: any;
+  trueValue?: boolean | string | number;
+  falseValue?: boolean | string | number;
   disabled?: boolean;
   readOnly?: boolean;
   checked?: boolean;
@@ -28,6 +28,7 @@ interface CheckboxProps {
   classPrefix: string;
   classnames: ClassNamesFn;
   partial?: boolean;
+  optionType?: 'default' | 'button';
 }
 
 export class Checkbox extends React.Component<CheckboxProps, any> {
@@ -70,14 +71,19 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       checked,
       type,
       name,
-      labelClassName
+      labelClassName,
+      optionType
     } = this.props;
 
     return (
       <label
         className={cx(`Checkbox Checkbox--${type}`, className, {
           'Checkbox--full': !partial,
-          [`Checkbox--${size}`]: size
+          // 'Checkbox--partial': partial
+          [`Checkbox--${size}`]: size,
+          'Checkbox--button': optionType === 'button',
+          'Checkbox--button--checked': optionType === 'button' && checked,
+          'Checkbox--button--disabled--unchecked': disabled && !checked
         })}
       >
         <input

package/src/components/CityArea.tsx

@@ -145,8 +145,11 @@ const CityArea = memo<AreaProps>(props => {
     } else {
       onChange({
         code,
+        provinceCode: province,
         province: db[province],
+        cityCode: city,
         city: db[city],
+        districtCode: district,
         district: db[district],
         street
       });

package/src/components/DatePicker.tsx

@@ -17,6 +17,7 @@ import Calendar from './calendar/Calendar';
 import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';
 import CalendarMobile from './CalendarMobile';
+import Input from './Input';
 
 const availableShortcuts: {[propName: string]: any} = {
   now: {
@@ -302,6 +303,7 @@ export interface DatePickerState {
   isOpened: boolean;
   isFocused: boolean;
   value: moment.Moment | undefined;
+  inputValue: string | undefined; // 手动输入的值
 }
 
 function normalizeValue(value: any, format?: string) {
@@ -329,11 +331,15 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
   state: DatePickerState = {
     isOpened: false,
     isFocused: false,
-    value: normalizeValue(this.props.value, this.props.format)
+    value: normalizeValue(this.props.value, this.props.format),
+    inputValue:
+      normalizeValue(this.props.value, this.props.format)?.format(
+        this.props.inputFormat
+      ) || ''
   };
   constructor(props: DateProps) {
     super(props);
-
+    this.inputRef = React.createRef();
     this.handleChange = this.handleChange.bind(this);
     this.selectRannge = this.selectRannge.bind(this);
     this.checkIsValidDate = this.checkIsValidDate.bind(this);
@@ -348,17 +354,26 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     this.getTarget = this.getTarget.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
     this.renderShortCuts = this.renderShortCuts.bind(this);
+    this.inputChange = this.inputChange.bind(this);
   }
 
   dom: HTMLDivElement;
 
+  inputRef: React.RefObject<HTMLInputElement>;
+
   componentDidUpdate(prevProps: DateProps) {
     const props = this.props;
 
-    if (prevProps.value !== props.value) {
-      this.setState({
+    const prevValue = prevProps.value;
+
+    if (prevValue !== props.value) {
+      const newState: any = {
         value: normalizeValue(props.value, props.format)
-      });
+      };
+
+      newState.inputValue = newState.value.format(this.props.inputFormat) || '';
+
+      this.setState(newState);
     }
   }
 
@@ -403,13 +418,17 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
   }
 
   open(fn?: () => void) {
-    this.props.disabled ||
-      this.setState(
-        {
-          isOpened: true
-        },
-        fn
-      );
+    if (this.props.disabled) {
+      return;
+    }
+    this.setState(
+      {
+        isOpened: true
+      },
+      fn
+    );
+    const input = this.inputRef.current;
+    input && input.focus();
   }
 
   close() {
@@ -423,6 +442,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     e.stopPropagation();
     const onChange = this.props.onChange;
     onChange('');
+    this.setState({inputValue: ''});
   }
 
   handleChange(value: moment.Moment) {
@@ -432,6 +452,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       minDate,
       maxDate,
       dateFormat,
+      inputFormat,
       timeFormat,
       closeOnSelect,
       utc,
@@ -453,6 +474,31 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     if (closeOnSelect && dateFormat && !timeFormat) {
       this.close();
     }
+
+    this.setState({
+      inputValue: utc
+        ? moment.utc(value).format(inputFormat)
+        : value.format(inputFormat)
+    });
+  }
+
+  // 手动输入日期
+  inputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange, inputFormat, format, utc} = this.props;
+    const value = e.currentTarget.value;
+    this.setState({inputValue: value});
+    if (value === '') {
+      onChange('');
+    } else {
+      const newDate = moment(value, inputFormat);
+      const dateValue = utc
+        ? moment.utc(newDate).format(format)
+        : newDate.format(format);
+      // 小于 0 的日期丢弃
+      if (!dateValue.startsWith('-')) {
+        onChange(dateValue);
+      }
+    }
   }
 
   selectRannge(item: any) {
@@ -684,7 +730,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           `DatePicker`,
           {
             'is-disabled': disabled,
-            'is-focused': this.state.isFocused,
+            'is-focused': !disabled && this.state.isFocused,
             [`DatePicker--border${ucFirst(borderMode)}`]: borderMode,
             'is-mobile': useMobileUI && isMobile()
           },
@@ -693,15 +739,15 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         ref={this.domRef}
         onClick={this.handleClick}
       >
-        {date ? (
-          <span className={cx(`DatePicker-value`)}>
-            {date.format(inputFormat)}
-          </span>
-        ) : (
-          <span className={cx(`DatePicker-placeholder`)}>
-            {__(placeholder)}
-          </span>
-        )}
+        <Input
+          className={cx('DatePicker-input')}
+          onChange={this.inputChange}
+          ref={this.inputRef}
+          placeholder={__(placeholder)}
+          autoComplete="off"
+          value={this.state.inputValue}
+          disabled={disabled}
+        />
 
         {clearable && !disabled && normalizeValue(value, format) ? (
           <a className={cx(`DatePicker-clear`)} onClick={this.clearValue}>