amis 1.8.0-beta.1 → 1.8.0-beta.13

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

package/src/components/Steps.tsx

@@ -69,8 +69,12 @@ export interface StepsSchema extends BaseSchema {
    * 展示模式
    */
   mode?: 'horizontal' | 'vertical';
-}
 
+  /**
+   * 标签放置位置
+   */
+   labelPlacement?: 'horizontal' | 'vertical';
+}
 export interface StepsProps extends ThemeProps {
   steps: StepSchema[];
   className: string;
@@ -81,6 +85,8 @@ export interface StepsProps extends ThemeProps {
         [propName: string]: StepStatus;
       };
   mode?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
+  progressDot?: boolean;
   useMobileUI?: boolean;
 }
 
@@ -92,6 +98,8 @@ export function Steps(props: StepsProps) {
     current,
     status,
     mode = 'horizontal',
+    labelPlacement = 'horizontal',
+    progressDot = false,
     useMobileUI
   } = props;
   const FINISH_ICON = 'check';
@@ -129,48 +137,41 @@ export function Steps(props: StepsProps) {
 
   const mobileUI = useMobileUI && isMobile();
   return (
-    <ul
-      className={cx(
-        'Steps',
-        `Steps--${mode}`,
-        mobileUI ? 'Steps-mobile' : '',
-        className
-      )}
-    >
+    <ul className={cx( // 纵向步骤条暂时不支持labelPlacement属性
+      'Steps',
+      `Steps--Placement-${(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')) ? 'vertical' : ''}`,
+      `Steps--${progressDot ? 'ProgressDot' : ''}`, 
+      `Steps--${mode}`,
+      mobileUI ? 'Steps-mobile' : '', className)}>
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
-
         return (
           <li
             key={i}
-            className={cx('StepsItem', `is-${stepStatus}`, step.className)}
+            className={cx('StepsItem', `is-${stepStatus}`, step.className, `StepsItem-${progressDot ? 'ProgressDot' : ''}`)}
           >
             <div className={cx('StepsItem-container')}>
-              <div
-                className={cx(
-                  'StepsItem-containerIcon',
-                  i < current && 'is-success'
-                )}
-              >
-                <span className={cx('StepsItem-icon')}>
-                  {icon ? <Icon icon={icon} className="icon" /> : i + 1}
-                </span>
-              </div>
+                <div className={cx('StepsItem-containerTail')}></div>
+                {progressDot ? <div className={cx('StepsItem-containerProgressDot')}></div>
+                  : <div className={cx('StepsItem-containerIcon', i < current && 'is-success')}>
+                      <span className={cx('StepsItem-icon')}>
+                          {icon ? <Icon icon={icon} className="icon" /> : i + 1}
+                      </span>
+                    </div>}
               <div className={cx('StepsItem-containerWrapper')}>
                 <div className={cx('StepsItem-body')}>
                   <div
                     className={cx(
                       'StepsItem-title',
+                      `StepsItem-${progressDot ? 'vertical-ProgressDot' : ''}`,
                       i < current && 'is-success'
                     )}
                   >
-                    <span>{step.title}</span>
-                    <span className={cx('StepsItem-subTitle')}>
-                      {step.subTitle}
-                    </span>
+                    <span className={cx('StepsItem-ellText')} title={String(step.title)}>{step.title}</span>
+                    <span className={cx('StepsItem-subTitle', 'StepsItem-ellText')} title={String(step.subTitle)}>{step.subTitle}</span>
                   </div>
-                  <div className={cx('StepsItem-description')}>
-                    {step.description}
+                  <div className={cx('StepsItem-description', 'StepsItem-ellText')} title={String(step.description)}>
+                    <span>{step.description}</span>
                   </div>
                 </div>
               </div>

package/src/components/Tooltip.tsx

@@ -18,18 +18,23 @@ interface TooltipProps extends React.HTMLProps<HTMLDivElement> {
   style?: any;
   arrowProps?: any;
   placement?: string;
+  showArrow?: boolean;
+  tooltipTheme?: string;
   [propName: string]: any;
 }
 
 export class Tooltip extends React.Component<TooltipProps> {
   static defaultProps = {
-    className: ''
+    className: '',
+    tooltipTheme: 'light',
+    showArrow: true
   };
 
   render() {
     const {
       classPrefix: ns,
       className,
+      tooltipTheme,
       title,
       children,
       arrowProps,
@@ -41,6 +46,7 @@ export class Tooltip extends React.Component<TooltipProps> {
       positionTop,
       classnames: cx,
       activePlacement,
+      showArrow,
       onMouseEnter,
       onMouseLeave,
       ...rest
@@ -52,14 +58,17 @@ export class Tooltip extends React.Component<TooltipProps> {
         className={cx(
           `Tooltip`,
           activePlacement ? `Tooltip--${activePlacement}` : '',
-          className
+          className,
+          `Tooltip--${tooltipTheme === 'dark' ? 'dark' : 'light'}`
         )}
         style={style}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         role="tooltip"
       >
-        <div className={cx(`Tooltip-arrow`)} {...arrowProps} />
+        {showArrow ? (
+          <div className={cx(`Tooltip-arrow`)} {...arrowProps} />
+        ) : null}
         {title ? <div className={cx('Tooltip-title')}>{title}</div> : null}
         <div className={cx('Tooltip-body')}>{children}</div>
       </div>

package/src/components/TooltipWrapper.tsx

@@ -11,21 +11,82 @@ import {findDOMNode} from 'react-dom';
 import Tooltip from './Tooltip';
 import {ClassNamesFn, themeable} from '../theme';
 import Overlay from './Overlay';
+import {isObject} from '../utils/helper';
+
+export type Trigger = 'hover' | 'click' | 'focus';
 
 export interface TooltipObject {
+  /**
+   * 文字提示标题
+   */
   title?: string;
+  /**
+   * 文字提示内容
+   */
   content?: string;
-  render?: () => JSX.Element;
-  dom?: JSX.Element;
+  /**
+   * 浮层出现位置
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * 主题样式
+   */
+  tooltipTheme?: 'light' | 'dark';
+  /**
+   * 浮层位置相对偏移量
+   */
+  offset?: [number, number];
+  /**
+   * 内容区自定义样式
+   */
+  style?: React.CSSProperties;
+  /**
+   * 是否可以移入浮层中, 默认true
+   */
+  enterable?: boolean;
+  /**
+   * 是否展示浮层指向箭头
+   */
+  showArrow?: boolean;
+  /**
+   * 是否禁用提示
+   */
+  disabled?: boolean;
+  /**
+   * 浮层延迟显示时间, 单位 ms
+   */
+  mouseEnterDelay?: number;
+  /**
+   * 浮层延迟隐藏时间, 单位 ms
+   */
+  mouseLeaveDelay?: number;
+  /**
+   * 浮层内容可通过JSX渲染
+   */
+  children?: () => JSX.Element | JSX.Element;
+  /**
+   * 挂载容器元素
+   */
+  container?: React.ReactNode;
+  /**
+   * 浮层触发方式
+   */
+  trigger?: Trigger | Array<Trigger>;
+  /**
+   * 是否点击非内容区域关闭提示，默认为true
+   */
+  rootClose?: boolean;
+  /**
+   * 文字提示浮层CSS类名
+   */
+  tooltipClassName?: string;
 }
 
-export type Trigger = 'hover' | 'click' | 'focus';
-
 export interface TooltipWrapperProps {
+  tooltip?: string | TooltipObject;
   classPrefix: string;
   classnames: ClassNamesFn;
   placement: 'top' | 'right' | 'bottom' | 'left';
-  tooltip?: string | TooltipObject;
   container?: React.ReactNode;
   trigger: Trigger | Array<Trigger>;
   rootClose: boolean;
@@ -106,18 +167,42 @@ export class TooltipWrapper extends React.Component<
     return child && (child as any).props;
   }
 
+  tooltipMouseEnter = (e: MouseEvent) => {
+    const tooltip = this.props.tooltip;
+    const enterable = (tooltip as any)?.enterable ?? true;
+    enterable && clearTimeout(this.timer);
+  };
+
+  tooltipMouseLeave = (e: MouseEvent) => {
+    const tooltip = this.props.tooltip;
+    const enterable = (tooltip as any)?.enterable ?? true;
+    enterable && clearTimeout(this.timer);
+    this.hide();
+  };
+
   handleShow() {
     this.timer && clearTimeout(this.timer);
     waitToHide && waitToHide();
-    this.show();
+    const tooltip = this.props.tooltip;
+    if (isObject(tooltip)) {
+      const {mouseEnterDelay = 0} = tooltip as TooltipObject;
+      this.timer = setTimeout(this.show, mouseEnterDelay);
+    } else {
+      this.timer = setTimeout(this.show, 0);
+    }
   }
 
   handleHide() {
     clearTimeout(this.timer);
-    const {delay} = this.props;
+    const {delay, tooltip} = this.props;
 
     waitToHide = this.hide.bind(this);
-    this.timer = setTimeout(this.hide, delay);
+    if (isObject(tooltip)) {
+      const {mouseLeaveDelay = 300} = tooltip as TooltipObject;
+      this.timer = setTimeout(this.hide, mouseLeaveDelay);
+    } else {
+      this.timer = setTimeout(this.hide, delay);
+    }
   }
 
   handleFocus(e: any) {
@@ -161,22 +246,42 @@ export class TooltipWrapper extends React.Component<
   }
 
   render() {
+    const props = this.props;
+
+    const child = React.Children.only(props.children);
+    if (!props.tooltip) {
+      return child;
+    }
+
+    // tooltip 对象内属性优先级更高
+    const tooltipObj: TooltipObject = {
+      placement: props.placement,
+      container: props.container,
+      trigger: props.trigger,
+      rootClose: props.rootClose,
+      tooltipClassName: props.tooltipClassName,
+      style: props.style,
+      mouseLeaveDelay: props.delay,
+      ...(typeof props.tooltip === 'string'
+        ? {content: props.tooltip}
+        : props.tooltip)
+    };
+
     const {
-      tooltip,
-      children,
+      title,
+      content,
       placement,
       container,
       trigger,
       rootClose,
       tooltipClassName,
-      style
-    } = this.props;
-
-    const child = React.Children.only(children);
-
-    if (!tooltip) {
-      return child;
-    }
+      style,
+      disabled = false,
+      offset,
+      tooltipTheme = 'light',
+      showArrow = true,
+      children
+    } = tooltipObj;
 
     const childProps: any = {
       key: 'target'
@@ -204,31 +309,30 @@ export class TooltipWrapper extends React.Component<
       <Overlay
         key="overlay"
         target={this.getTarget}
-        show={this.state.show}
+        show={this.state.show && !disabled}
         onHide={this.handleHide}
         rootClose={rootClose}
         placement={placement}
         container={container}
+        offset={Array.isArray(offset) ? offset : [0, 0]}
       >
         <Tooltip
-          title={typeof tooltip !== 'string' ? tooltip.title : undefined}
+          title={typeof title === 'string' ? title : undefined}
           style={style}
           className={tooltipClassName}
-          onMouseEnter={~triggers.indexOf('hover') && this.handleMouseOver}
-          onMouseLeave={~triggers.indexOf('hover') && this.handleMouseOut}
+          tooltipTheme={tooltipTheme}
+          showArrow={showArrow}
+          onMouseEnter={
+            ~triggers.indexOf('hover') ? this.tooltipMouseEnter : () => {}
+          }
+          onMouseLeave={
+            ~triggers.indexOf('hover') ? this.tooltipMouseLeave : () => {}
+          }
         >
-          {tooltip && (tooltip as TooltipObject).render ? (
-            this.state.show ? (
-              (tooltip as TooltipObject).render!()
-            ) : null
-          ) : tooltip && (tooltip as TooltipObject).dom ? (
-            (tooltip as TooltipObject).dom!
+          {children ? (
+            <>{typeof children === 'function' ? children() : children}</>
           ) : (
-            <Html
-              html={
-                typeof tooltip === 'string' ? tooltip : tooltip.content || ''
-              }
-            />
+            <Html html={typeof content === 'string' ? content : ''} />
           )}
         </Tooltip>
       </Overlay>

package/src/components/Tree.tsx

@@ -41,6 +41,8 @@ export interface IDropInfo {
 interface TreeSelectorProps extends ThemeProps, LocaleProps {
   highlightTxt?: string;
 
+  onRef: any;
+
   showIcon?: boolean;
   // 是否默认都展开
   initiallyOpen?: boolean;
@@ -55,6 +57,8 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps {
   withChildren?: boolean;
   // 多选时，选中父节点时，是否只将起子节点加入到值中。
   onlyChildren?: boolean;
+  // 单选时，只运行选择子节点
+  onlyLeaf?: boolean;
   // 名称、取值等字段名映射
   labelField: string;
   valueField: string;
@@ -206,6 +210,7 @@ export class TreeSelector extends React.Component<
 
   componentDidMount() {
     const {enableNodePath} = this.props;
+    this.props.onRef(this)
     enableNodePath && this.expandLazyLoadNodes();
   }
 
@@ -246,20 +251,23 @@ export class TreeSelector extends React.Component<
     onExpandTree?.(nodePathArr);
   }
 
-  syncUnFolded(props: TreeSelectorProps) {
+  syncUnFolded(props: TreeSelectorProps, unfoldedLevel?: Number) {
+    // 传入默认展开层级需要重新初始化unfolded
+    let initFoldedLevel = typeof unfoldedLevel !== 'undefined';
+    let expandLevel = initFoldedLevel ? unfoldedLevel : props.unfoldedLevel;
     // 初始化树节点的展开状态
     let unfolded = this.unfolded;
     const {foldedField, unfoldedField} = this.props;
 
     eachTree(props.options, (node: Option, index, level) => {
-      if (unfolded.has(node)) {
+      if (unfolded.has(node) && !initFoldedLevel) {
         return;
       }
 
       if (node.children && node.children.length) {
         let ret: any = true;
 
-        if (node.defer && node.loaded) {
+        if (node.defer && node.loaded && !initFoldedLevel) {
           ret = true;
         } else if (
           unfoldedField &&
@@ -270,7 +278,7 @@ export class TreeSelector extends React.Component<
           ret = !node[foldedField];
         } else {
           ret = !!props.initiallyOpen;
-          if (!ret && level <= (props.unfoldedLevel as number)) {
+          if (!ret && level <= (expandLevel as number)) {
             ret = true;
           }
         }
@@ -278,6 +286,8 @@ export class TreeSelector extends React.Component<
       }
     });
 
+    initFoldedLevel && this.forceUpdate();
+
     return unfolded;
   }
 
@@ -365,13 +375,17 @@ export class TreeSelector extends React.Component<
 
   @autobind
   handleSelect(node: any, value?: any) {
-    const {joinValues, valueField, onChange, enableNodePath} = this.props;
+    const {joinValues, valueField, onChange, enableNodePath, onlyLeaf} =
+      this.props;
 
     if (node[valueField as string] === undefined) {
       if (node.defer && !node.loaded) {
         this.toggleUnfolded(node);
       }
+      return;
+    }
 
+    if (onlyLeaf && node.children) {
       return;
     }
 

package/src/components/calendar/Calendar.tsx

@@ -161,20 +161,6 @@ class BaseDatePicker extends React.Component<
       updatedState = this.getStateFromProps(props);
     }
 
-    // open 是外部控制了
-    // if (updatedState.open === undefined) {
-    //   if (typeof props.open !== 'undefined') {
-    //     updatedState.open = props.open;
-    //   } else if (
-    //     prevProps.closeOnSelect &&
-    //     this.state.currentView !== viewModes.TIME
-    //   ) {
-    //     updatedState.open = false;
-    //   } else {
-    //     updatedState.open = this.state.open;
-    //   }
-    // }
-
     if (props.viewMode !== prevProps.viewMode) {
       updatedState.currentView = props.viewMode;
     }

package/src/components/calendar/TimeView.tsx

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import React from 'react';
+import merge from 'lodash/merge';
 import {LocaleProps, localeable} from '../../locale';
 import {Icon} from '../icons';
 import {ClassNamesFn} from '../../theme';
@@ -30,6 +31,7 @@ interface CustomTimeViewProps extends LocaleProps {
   useMobileUI: boolean;
   showToolbar?: boolean;
   onChange?: (value: any) => void;
+  timeConstraints?: any;
 }
 
 interface CustomTimeViewState {
@@ -85,6 +87,13 @@ export class CustomTimeView extends React.Component<
   constructor(props: any) {
     super(props);
     this.state = this.calculateState(this.props);
+
+    if (this.props.timeConstraints) {
+      this.timeConstraints = merge(
+        this.timeConstraints,
+        this.props.timeConstraints
+      );
+    }
   }
 
   componentDidUpdate(preProps: CustomTimeViewProps) {
@@ -173,6 +182,9 @@ export class CustomTimeView extends React.Component<
       value =
         this.timeConstraints[type].min +
         (value - (this.timeConstraints[type].max + 1));
+    if (value < this.timeConstraints[type].min) {
+      value = this.timeConstraints[type].min;
+    }
     return this.pad(type, value);
   }