amis 1.8.0-beta.5 → 1.8.0-beta.9

package/src/Schema.ts

@@ -58,6 +58,7 @@ 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';
@@ -150,6 +151,7 @@ export type SchemaType =
   | 'month'
   | 'static-month' // 这个几个跟表单项同名，再form下面用必须带前缀 static-
   | 'dialog'
+  | 'spinner'
   | 'divider'
   | 'dropdown-button'
   | 'drawer'
@@ -384,6 +386,7 @@ export type SchemaObject =
   | ServiceSchema
   | SparkLineSchema
   | StatusSchema
+  | SpinnerSchema
   | TableSchema
   | TabsSchema
   | TasksSchema
@@ -596,6 +599,13 @@ export interface SchemaApiObject {
    */
   cache?: number;
 
+  /**
+   * 强制将数据附加在 query，默认只有 api 地址中没有用变量的时候 crud 查询接口才会
+   * 自动附加数据到 query 部分，如果想强制附加请设置这个属性。
+   * 对于那种临时加了个变量但是又不想全部参数写一遍的时候配置很有用。
+   */
+  forceAppendDataToQuery?: boolean;
+
   /**
    * qs 配置项
    */

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/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

@@ -79,7 +79,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       <label
         className={cx(`Checkbox Checkbox--${type}`, className, {
           'Checkbox--full': !partial,
-          'Checkbox--partial': partial,
+          // 'Checkbox--partial': partial
           [`Checkbox--${size}`]: size,
           'Checkbox--button': optionType === 'button',
           'Checkbox--button--checked': optionType === 'button' && checked,

package/src/components/DatePicker.tsx

@@ -370,18 +370,20 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       const newState: any = {
         value: normalizeValue(props.value, props.format)
       };
-      // 相对值和公式是 didUpdate 的时候才更新
+
       if (
-        typeof prevValue === 'string' &&
-        (prevValue.startsWith('+') ||
-          prevValue.startsWith('-') ||
-          prevValue.startsWith('$'))
+        typeof prevValue === 'undefined' || // initApi 的情况
+        (typeof prevValue === 'string' && // 公式的情况
+          (prevValue.startsWith('+') ||
+            prevValue.startsWith('-') ||
+            prevValue.startsWith('$')))
       ) {
         newState.inputValue =
           normalizeValue(this.props.value, this.props.format)?.format(
             this.props.inputFormat
           ) || '';
       }
+
       this.setState(newState);
     }
   }

package/src/components/Drawer.tsx

@@ -204,6 +204,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
         <Transition
           mountOnEnter
           unmountOnExit
+          appear
           in={show}
           timeout={500}
           onEnter={this.handleEnter}

package/src/components/Modal.tsx

@@ -236,6 +236,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
       <Transition
         mountOnEnter
         unmountOnExit
+        appear
         in={show}
         timeout={500}
         onEnter={this.handleEnter}

package/src/components/Overlay.tsx

@@ -97,7 +97,8 @@ class Position extends React.Component<any, any> {
         overlay,
         target,
         container,
-        this.props.containerPadding
+        this.props.containerPadding,
+        this.props.offset
       )
     );
   }
@@ -173,7 +174,7 @@ interface OverlayProps {
   container?: React.ReactNode | Function;
   target?: React.ReactNode | Function;
   watchTargetSizeChange?: boolean;
-
+  offset?: [number, number];
   onEnter?(node: HTMLElement): any;
   onEntering?(node: HTMLElement): any;
   onEntered?(node: HTMLElement): any;
@@ -238,6 +239,7 @@ export default class Overlay extends React.Component<
       children,
       watchTargetSizeChange,
       transition: Transition,
+      offset,
       ...props
     } = this.props;
 
@@ -259,7 +261,8 @@ export default class Overlay extends React.Component<
           containerPadding,
           target,
           placement,
-          shouldUpdatePosition
+          shouldUpdatePosition,
+          offset
         }}
         ref={this.positionRef}
       >

package/src/components/PullRefresh.tsx

@@ -0,0 +1,197 @@
+/**
+ * @file PullRefresh.tsx
+ * @description 下拉刷新
+ * @author hongyang03
+ */
+
+import React, {forwardRef, useEffect} from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+import {useSetState} from '../hooks';
+import useTouch from '../hooks/use-touch';
+import {Icon} from './icons';
+import {TranslateFn} from '../locale';
+
+export interface PullRefreshProps {
+  classnames: ClassNamesFn;
+  classPrefix: string;
+  translate: TranslateFn;
+  disabled?: boolean;
+  pullingText?: string;
+  loosingText?: string;
+  loadingText?: string;
+  successText?: string;
+  onRefresh?: () => void;
+  loading?: boolean;
+  successDuration?: number;
+  loadingDuration?: number;
+}
+
+type statusText = 'normal' | 'pulling' | 'loosing' | 'success' | 'loading';
+
+export interface PullRefreshState {
+  status: statusText;
+  offsetY: number;
+}
+
+const defaultProps = {
+  successDuration: 0,
+  loadingDuration: 0
+};
+
+const defaultHeaderHeight = 28;
+
+const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => {
+  const {
+    classnames: cx,
+    translate: __,
+    children,
+    successDuration,
+    loadingDuration
+  } = props;
+
+  const refreshText = {
+    pullingText: __('pullRefresh.pullingText'),
+    loosingText: __('pullRefresh.loosingText'),
+    loadingText: __('pullRefresh.loadingText'),
+    successText: __('pullRefresh.successText')
+  };
+
+  const touch = useTouch();
+
+  useEffect(() => {
+    if (props.loading === false) {
+      loadSuccess();
+    }
+  }, [props.loading]);
+
+  const [state, updateState] = useSetState({
+    status: 'normal',
+    offsetY: 0
+  } as PullRefreshState);
+
+  const isTouchable = () => {
+    return (
+      !props.disabled &&
+      state.status !== 'loading' &&
+      state.status !== 'success'
+    );
+  };
+
+  const ease = (distance: number) => {
+    const pullDistance = defaultHeaderHeight;
+
+    if (distance > pullDistance) {
+      if (distance < pullDistance * 2) {
+        distance = pullDistance + (distance - pullDistance) / 2;
+      } else {
+        distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+      }
+    }
+
+    return Math.round(distance);
+  };
+
+  const setStatus = (distance: number, isLoading?: boolean) => {
+    const pullDistance = defaultHeaderHeight;
+    let status: statusText = 'normal';
+
+    if (isLoading) {
+      status = 'loading';
+    } else if (distance === 0) {
+      status = 'normal';
+    } else if (distance < pullDistance) {
+      status = 'pulling';
+    } else {
+      status = 'loosing';
+    }
+
+    updateState({offsetY: distance, status});
+  };
+
+  const loadSuccess = () => {
+    if (!successDuration) {
+      setStatus(0);
+      return;
+    }
+    updateState({status: 'success'});
+
+    setTimeout(() => {
+      setStatus(0);
+    }, successDuration);
+  };
+
+  const onTouchStart = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable() && state.offsetY === 0) {
+      touch.start(event);
+      updateState({});
+    }
+  };
+
+  const onTouchMove = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable()) {
+      touch.move(event);
+      updateState({});
+      if (touch.isVertical() && touch.deltaY > 0) {
+        setStatus(ease(touch.deltaY));
+      }
+    }
+    return false;
+  };
+
+  const onTouchEnd = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable() && state.offsetY > 0) {
+      if (state.status === 'loosing') {
+        if (loadingDuration) {
+          setStatus(defaultHeaderHeight, true);
+        } else {
+          setStatus(0);
+        }
+        props.onRefresh && props.onRefresh();
+      } else {
+        setStatus(0);
+      }
+    }
+  };
+
+  const transformStyle = {
+    transform: `translate3d(0, ${state.offsetY}px, 0)`,
+    touchAction: 'none'
+  };
+
+  const getStatusText = (status: statusText) => {
+    if (status === 'normal') {
+      return '';
+    }
+    return props[`${status}Text`] || refreshText[`${status}Text`];
+  };
+
+  return (
+    <div
+      className={cx('PullRefresh')}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <div className={cx('PullRefresh-wrap')} style={transformStyle}>
+        <div className={cx('PullRefresh-header')}>
+          {state.status === 'loading' && (
+            <Icon icon="loading-outline" className="icon loading-icon" />
+          )}
+          {getStatusText(state.status)}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+PullRefresh.defaultProps = defaultProps;
+
+export default themeable(PullRefresh);

package/src/components/Spinner.tsx

@@ -7,77 +7,112 @@
 
 import React from 'react';
 import {themeable, ThemeProps} from '../theme';
-import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
-import {Icon} from './icons';
+import Transition, {ENTERED} from 'react-transition-group/Transition';
+import {Icon, hasIcon} from './icons';
+import {generateIcon} from '../utils/icon';
 
 const fadeStyles: {
   [propName: string]: string;
 } = {
-  [ENTERING]: 'in',
   [ENTERED]: 'in'
 };
 
-interface SpinnerProps extends ThemeProps {
-  overlay: boolean;
-  spinnerClassName: string;
-  mode: string;
-  size: 'sm' | 'lg' | '';
-  show: boolean;
-  icon?: string;
+// Spinner Props
+export interface SpinnerProps extends ThemeProps {
+  show: boolean; // 控制Spinner显示与隐藏
+  className?: string; // 自定义最外层元素class
+  spinnerClassName?: string; // spin图标位置包裹元素的自定义class
+  /**
+   * @deprecated 已废弃，没有作用
+   */
+  mode?: string;
+  size?: 'sm' | 'lg' | ''; // spinner Icon 大小
+  icon?: string | React.ReactNode; // 自定义icon
+  tip?: string; // spinner文案
+  tipPlacement?: 'top' | 'right' | 'bottom' | 'left'; // spinner文案位置
+  delay?: number; // 延迟显示
+  overlay?: boolean; // 是否显示遮罩层，有children属性才生效
 }
 
-export class Spinner extends React.Component<SpinnerProps, object> {
+export class Spinner extends React.Component<SpinnerProps> {
   static defaultProps = {
-    overlay: false,
+    show: true,
+    className: '',
     spinnerClassName: '',
-    mode: '',
     size: '' as '',
-    show: true
+    icon: '',
+    tip: '',
+    tipPlacement: 'bottom' as 'bottom',
+    delay: 0,
+    overlay: false
   };
 
-  div: React.RefObject<HTMLDivElement> = React.createRef();
-  overlay: React.RefObject<HTMLDivElement> = React.createRef();
-
   render() {
     const {
-      show,
       classnames: cx,
+      show,
+      className,
       spinnerClassName,
-      mode,
-      size,
+      size = '',
       overlay,
-      icon
+      delay,
+      icon,
+      tip,
+      tipPlacement = ''
     } = this.props;
+    const isCustomIcon = icon && React.isValidElement(icon);
+    const timeout = {enter: delay, exit: 0};
+
     return (
-      <Transition mountOnEnter unmountOnExit in={show} timeout={350}>
+      <Transition mountOnEnter unmountOnExit in={show} timeout={timeout}>
         {(status: string) => {
-          if (status === ENTERING) {
-            // force reflow
-            // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-            // 否则看不到动画。
-            // this.div.current!.offsetWidth;
-            this.overlay.current && this.overlay.current.offsetWidth;
-          }
-
           return (
             <>
+              {/* 遮罩层 */}
               {overlay ? (
-                <div
-                  ref={this.overlay}
-                  className={cx(`Spinner-overlay`, fadeStyles[status])}
-                />
+                <div className={cx(`Spinner-overlay`, fadeStyles[status])} />
               ) : null}
 
+              {/* spinner图标和文案 */}
               <div
-                ref={this.div}
-                className={cx(`Spinner`, spinnerClassName, fadeStyles[status], {
-                  [`Spinner--${mode}`]: mode,
-                  [`Spinner--overlay`]: overlay,
-                  [`Spinner--${size}`]: size,
-                  [`Spinner--icon`]: icon
-                })}
+                className={cx(
+                  `Spinner`,
+                  tip && {
+                    [`Spinner-tip--${tipPlacement}`]: [
+                      'top',
+                      'right',
+                      'bottom',
+                      'left'
+                    ].includes(tipPlacement)
+                  },
+                  {[`Spinner--overlay`]: overlay},
+                  fadeStyles[status],
+                  className
+                )}
               >
-                {icon ? <Icon icon={icon} className="icon" /> : null}
+                <div
+                  className={cx(
+                    `Spinner-icon`,
+                    {
+                      [`Spinner-icon--${size}`]: ['lg', 'sm'].includes(size),
+                      [`Spinner-icon--default`]: !icon,
+                      [`Spinner-icon--simple`]: !isCustomIcon && icon,
+                      [`Spinner-icon--custom`]: isCustomIcon
+                    },
+                    spinnerClassName
+                  )}
+                >
+                  {icon ? (
+                    isCustomIcon ? (
+                      icon
+                    ) : hasIcon(icon as string) ? (
+                      <Icon icon={icon} className="icon" />
+                    ) : (
+                      generateIcon(cx, icon as string, 'icon')
+                    )
+                  ) : null}
+                </div>
+                {tip ? <span className={cx(`Spinner-tip`)}>{tip}</span> : ''}
               </div>
             </>
           );