amis 1.7.0 → 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/Tabs.tsx

@@ -16,6 +16,7 @@ import {Icon} from './icons';
 import debounce from 'lodash/debounce';
 import {findDOMNode} from 'react-dom';
 import TooltipWrapper, {TooltipObject, Trigger} from './TooltipWrapper';
+import {resizeSensor} from '../utils/resize-sensor';
 
 import Sortable from 'sortablejs';
 
@@ -26,7 +27,7 @@ const transitionStyles: {
   [ENTERED]: 'in'
 };
 
-export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong';
+export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong' | 'tiled' |'sidebar';
 
 export interface TabProps extends ThemeProps {
   title?: string | React.ReactNode; // 标题
@@ -114,6 +115,8 @@ export interface TabsProps extends ThemeProps {
   scrollable?: boolean; // 属性废弃，为了兼容暂且保留
   editable?: boolean;
   onEdit?: (index: number, text: string) => void;
+  sidePosition?: 'left' | 'right';
+  addBtnText?: string;
 }
 
 export interface IDragInfo {
@@ -122,21 +125,25 @@ export interface IDragInfo {
 
 export class Tabs extends React.Component<TabsProps, any> {
   static defaultProps: Pick<TabsProps,
-    'mode' | 'contentClassName' | 'showTip' | 'showTipClassName'
+    'mode' | 'contentClassName' | 'showTip' | 'showTipClassName' | 'sidePosition' | 'addBtnText'
   > = {
     mode: '',
     contentClassName: '',
     showTip: false,
-    showTipClassName: ''
+    showTipClassName: '',
+    sidePosition: 'left',
+    addBtnText: '增加'
   };
 
   static Tab = Tab;
-  navMain = React.createRef<HTMLDivElement>();
+  navMain = React.createRef<HTMLUListElement>(); // HTMLDivElement
   scroll: boolean = false;
   sortable?: Sortable;
   dragTip?: HTMLElement;
   id: string = guid();
   draging: boolean = false;
+  toDispose: Array<() => void> = [];
+  resizeDom = React.createRef<HTMLDivElement>();
 
   checkArrowStatus = debounce(
     () => {
@@ -200,6 +207,12 @@ export class Tabs extends React.Component<TabsProps, any> {
       });
       this.checkArrowStatus();
     }
+
+    this.resizeDom?.current && this.toDispose.push(
+      resizeSensor(this.resizeDom.current as HTMLElement, () =>
+        this.computedWidth()
+      )
+    );
   }
 
   componentDidUpdate() {
@@ -212,6 +225,8 @@ export class Tabs extends React.Component<TabsProps, any> {
 
   componentWillUnmount() {
     this.checkArrowStatus.cancel();
+    this.toDispose.forEach(fn => fn());
+    this.toDispose = [];
   }
 
   /**
@@ -220,7 +235,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   computedWidth() {
     const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical') {
+    if (['vertical', 'sidebar'].includes(mode)) {
       return;
     }
   
@@ -246,7 +261,7 @@ export class Tabs extends React.Component<TabsProps, any> {
     const {mode: dMode, tabsMode} = this.props;
     const {isOverflow} = this.state;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical' || !isOverflow) {
+    if (['vertical', 'sidebar'].includes(mode) || !isOverflow) {
       return;
     }
     const {activeKey, children} = this.props;
@@ -254,7 +269,7 @@ export class Tabs extends React.Component<TabsProps, any> {
     const currentIndex = (children as any[])?.findIndex(
       (item: any) => item.props.eventKey === currentKey
     );
-    const li = this.navMain.current?.children[0]?.children || [];
+    const li = this.navMain.current?.children || [];
     const currentLi = li[currentIndex] as HTMLElement;
     const liOffsetLeft = currentLi?.offsetLeft;
     const liClientWidth = currentLi?.clientWidth;
@@ -569,7 +584,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   renderArrow(type: 'left' | 'right') {
     const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical') {
+    if (['vertical', 'sidebar'].includes(mode)) {
       return;
     }
     const {classnames: cx} = this.props;
@@ -607,7 +622,9 @@ export class Tabs extends React.Component<TabsProps, any> {
       toolbar,
       linksClassName,
       addable,
-      draggable
+      draggable,
+      sidePosition,
+      addBtnText
     } = this.props;
 
     const {isOverflow} = this.state;
@@ -617,19 +634,35 @@ export class Tabs extends React.Component<TabsProps, any> {
 
     const mode = tabsMode || dMode;
 
+    const toolButtons = (
+      <>
+        {addable && (
+          <div className={cx('Tabs-addable')} onClick={() => this.handleAddBtn()}>
+            <Icon icon="plus" className={cx('Tabs-addable-icon')} />
+            {addBtnText}
+          </div>
+        )}
+        {toolbar}
+      </>
+    );
+
     return (
       <div
         className={cx(
           `Tabs`,
           {
-            [`Tabs--${mode}`]: mode
+            [`Tabs--${mode}`]: mode,
+            [`sidebar--${sidePosition}`]: mode === 'sidebar'
           },
           className
         )}
       >
         {
-        !['vertical', 'chrome'].includes(mode) ? (
-          <div className={cx('Tabs-linksContainer-wrapper')}>
+        !['vertical', 'sidebar', 'chrome'].includes(mode) ? (
+          <div
+            className={cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar')}
+            ref={this.resizeDom}
+          >
             <div
               className={cx(
                 'Tabs-linksContainer',
@@ -637,22 +670,19 @@ export class Tabs extends React.Component<TabsProps, any> {
               )}
             >
               {this.renderArrow('left')}
-              <div className={cx('Tabs-linksContainer-main')} ref={this.navMain}>
-                <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+              <div className={cx('Tabs-linksContainer-main')}>
+                <ul className={cx('Tabs-links', linksClassName)} role="tablist" ref={this.navMain}>
                   {children.map((tab, index) => this.renderNav(tab, index))}
                   {additionBtns}
-                  {toolbar}
+                  {
+                    !isOverflow && toolButtons
+                  }
                 </ul>
               </div>
               {this.renderArrow('right')}
             </div>
             {
-              addable && (
-                <div className={cx('Tabs-addable')} onClick={() => this.handleAddBtn()}>
-                  <Icon icon="plus" className={cx('Tabs-addable-icon')} />
-                  增加
-                </div>
-              )
+              isOverflow && toolButtons
             }
           </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>