amis 1.4.2-beta.13 → 1.4.2-beta.18

package/src/components/GridNav.tsx

@@ -0,0 +1,233 @@
+/**
+ * @file GridNav
+ * @description 金刚位宫格导航 参考react-vant
+ */
+
+import React, {useMemo} from 'react';
+import {ClassNamesFn} from '../theme';
+import {Badge, BadgeProps} from './Badge';
+
+export type GridNavDirection = 'horizontal' | 'vertical';
+
+export interface GridNavProps {
+  /** 是否将格子固定为正方形	 */
+  square?: boolean;
+  /** 是否将格子内容居中显示	 */
+  center?: boolean;
+  /** 是否显示边框	 */
+  border?: boolean;
+  /** 格子之间的间距，默认单位为`px` */
+  gutter?: number;
+  /** 是否调换图标和文本的位置	 */
+  reverse?: boolean;
+  /** 图标占比，默认单位为`%` */
+  iconRatio?: number;
+  /** 格子内容排列的方向，可选值为 `horizontal`	 */
+  direction?: GridNavDirection;
+  /** 列数	 */
+  columnNum?: number;
+  className?: string;
+  itemClassName?: string;
+  classnames: ClassNamesFn;
+  style?: React.CSSProperties;
+}
+
+export interface GridNavItemProps {
+  /**  图标右上角徽标	 */
+  badge?: BadgeProps;
+  /** 文字 */
+  text?: string | React.ReactNode;
+  /** 图标名称或图片链接	 */
+  icon?: string | React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+  classnames: ClassNamesFn;
+  onClick?: (event: React.MouseEvent) => void;
+}
+
+type InternalProps = {
+  parent?: GridNavProps;
+  index?: number;
+};
+
+function addUnit(value?: string | number): string | undefined {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  value = String(value);
+  return /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+}
+
+export const GridNavItem: React.FC<GridNavItemProps & InternalProps> = ({
+  children,
+  classnames: cx,
+  className,
+  style,
+  ...props
+}) => {
+  const {index = 0, parent} = props;
+  if (!parent) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error(
+        '[React Vant] <GridNavItem> must be a child component of <GridNav>.'
+      );
+    }
+    return null;
+  }
+
+  const rootStyle = useMemo(() => {
+    const {square, gutter, columnNum = 4} = parent;
+    const percent = `${100 / +columnNum}%`;
+    const internalStyle: React.CSSProperties = {
+      ...style,
+      flexBasis: percent
+    };
+
+    if (square) {
+      internalStyle.paddingTop = percent;
+    } else if (gutter) {
+      const gutterValue = addUnit(gutter);
+      internalStyle.paddingRight = gutterValue;
+
+      if (index >= columnNum) {
+        internalStyle.marginTop = gutterValue;
+      }
+    }
+
+    return internalStyle;
+  }, [parent.style, parent.gutter, parent.columnNum]);
+
+  const contentStyle = useMemo(() => {
+    const {square, gutter} = parent;
+
+    if (square && gutter) {
+      const gutterValue = addUnit(gutter);
+      return {
+        ...props.contentStyle,
+        right: gutterValue,
+        bottom: gutterValue,
+        height: 'auto'
+      };
+    }
+    return props.contentStyle;
+  }, [parent.gutter, parent.columnNum, props.contentStyle]);
+
+  const renderIcon = () => {
+    const ratio = parent.iconRatio || 60;
+    if (typeof props.icon === 'string') {
+      if (props.badge) {
+        return (
+          <Badge {...props.badge}>
+            <div className={cx('GridNavItem-image')}>
+              <img src={props.icon} style={{width: ratio + '%'}} />
+            </div>
+          </Badge>
+        );
+      }
+      return (
+        <div className={cx('GridNavItem-image')}>
+          <img src={props.icon} style={{width: ratio + '%'}} />
+        </div>
+      );
+    }
+
+    if (React.isValidElement(props.icon)) {
+      return <Badge {...(props.badge as BadgeProps)}>{props.icon}</Badge>;
+    }
+
+    return null;
+  };
+
+  const renderText = () => {
+    if (React.isValidElement(props.text)) {
+      return props.text;
+    }
+    if (props.text) {
+      return <span className={cx('GridNavItem-text')}>{props.text}</span>;
+    }
+    return null;
+  };
+
+  const renderContent = () => {
+    if (children) {
+      return children;
+    }
+    return (
+      <>
+        {renderIcon()}
+        {renderText()}
+      </>
+    );
+  };
+
+  const {center, border, square, gutter, reverse, direction} = parent;
+
+  const prefix = 'GridNavItem-content';
+  const classes = cx(`${prefix} ${props.contentClassName || ''}`, {
+    [`${prefix}--${direction}`]: !!direction,
+    [`${prefix}--center`]: center,
+    [`${prefix}--square`]: square,
+    [`${prefix}--reverse`]: reverse,
+    [`${prefix}--clickable`]: !!props.onClick,
+    [`${prefix}--surround`]: border && gutter,
+    [`${prefix}--border u-hairline`]: border
+  });
+
+  return (
+    <div
+      className={cx(className, {'GridNavItem--square': square})}
+      style={rootStyle}
+    >
+      <div
+        role={props.onClick ? 'button' : undefined}
+        className={classes}
+        style={contentStyle}
+        onClick={props.onClick}
+      >
+        {renderContent()}
+      </div>
+    </div>
+  );
+};
+
+const GridNav: React.FC<GridNavProps> = ({
+  children,
+  className,
+  classnames: cx,
+  itemClassName,
+  style,
+  ...props
+}) => {
+  return (
+    <div
+      style={{paddingLeft: addUnit(props.gutter), ...style}}
+      className={cx(`GridNav ${className || ''}`, {
+        'GridNav-top u-hairline': props.border && !props.gutter
+      })}
+    >
+      {React.Children.toArray(children)
+        .filter(Boolean)
+        .map((child: React.ReactElement, index: number) =>
+          React.cloneElement(child, {
+            index,
+            parent: props,
+            className: itemClassName,
+            classnames: cx
+          })
+        )}
+    </div>
+  );
+};
+
+GridNav.defaultProps = {
+  direction: 'vertical',
+  center: true,
+  border: true,
+  columnNum: 4
+};
+
+export default GridNav;

package/src/components/Overlay.tsx

@@ -295,6 +295,12 @@ export default class Overlay extends React.Component<
         <Portal container={container}>
           <RootClose onRootClose={props.onHide}>
             {(ref: any) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                  ref: ref
+                });
+              }
+
               return <div ref={ref}>{child}</div>;
             }}
           </RootClose>

package/src/components/PopOver.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {ClassNamesFn, themeable} from '../theme';
-import {camel} from '../utils/helper';
+import {camel, preventDefault} from '../utils/helper';
 
 export interface Offset {
   x: number;
@@ -53,12 +53,21 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
   };
 
   parent: HTMLElement;
+  wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
   componentDidMount() {
     this.mayUpdateOffset();
     const dom = findDOMNode(this) as HTMLElement;
     this.parent = dom.parentNode as HTMLElement;
     this.parent.classList.add('has-popover');
+
+    if (this.wrapperRef && this.wrapperRef.current) {
+      // https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#使用_passive_改善的滚屏性能
+      this.wrapperRef.current.addEventListener('touchmove', preventDefault, {
+        passive: false,
+        capture: false
+      });
+    }
   }
 
   componentDidUpdate() {
@@ -67,6 +76,10 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
 
   componentWillUnmount() {
     this.parent && this.parent.classList.remove('has-popover');
+
+    if (this.wrapperRef && this.wrapperRef.current) {
+      this.wrapperRef.current.removeEventListener('touchmove', preventDefault);
+    }
   }
 
   mayUpdateOffset() {
@@ -122,6 +135,7 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
 
     return (
       <div
+        ref={this.wrapperRef}
         className={cx(
           `${ns}PopOver`,
           className,

package/src/components/Toast.tsx

@@ -51,11 +51,13 @@ interface ToastComponentProps extends ThemeProps, LocaleProps {
   closeButton: boolean;
   showIcon?: boolean;
   timeout: number;
+  errorTimeout: number;
   className?: string;
 }
 
 interface Item extends Config {
-  body: string;
+  title?: string | React.ReactNode;
+  body: string | React.ReactNode;
   level: 'info' | 'success' | 'error' | 'warning';
   id: string;
   onDissmiss?: () => void;
@@ -78,11 +80,12 @@ export class ToastComponent extends React.Component<
 > {
   static defaultProps: Pick<
     ToastComponentProps,
-    'position' | 'closeButton' | 'timeout'
+    'position' | 'closeButton' | 'timeout' | 'errorTimeout'
   > = {
     position: 'top-center',
     closeButton: false,
-    timeout: 5000
+    timeout: 5000,
+    errorTimeout: 10000 // 错误的时候 time 调长
   };
   static themeKey = 'toast';
 
@@ -155,18 +158,17 @@ export class ToastComponent extends React.Component<
       classnames: cx,
       className,
       timeout,
+      errorTimeout,
       position,
       showIcon,
       translate,
       closeButton
     } = this.props;
     const items = this.state.items;
-
     const groupedItems = groupBy(items, item => item.position || position);
 
     return Object.keys(groupedItems).map(position => {
       const toasts = groupedItems[position];
-
       return (
         <div
           key={position}
@@ -177,19 +179,25 @@ export class ToastComponent extends React.Component<
             className
           )}
         >
-          {toasts.map(item => (
-            <ToastMessage
-              classnames={cx}
-              key={item.id}
-              body={item.body}
-              level={item.level || 'info'}
-              timeout={item.timeout ?? timeout}
-              closeButton={item.closeButton ?? closeButton}
-              onDismiss={this.handleDismissed.bind(this, items.indexOf(item))}
-              translate={translate}
-              showIcon={showIcon}
-            />
-          ))}
+          {toasts.map(item => {
+            const level = item.level || 'info';
+            const toastTimeout =
+              item.timeout ?? (level === 'error' ? errorTimeout : timeout);
+            return (
+              <ToastMessage
+                classnames={cx}
+                key={item.id}
+                title={item.title}
+                body={item.body}
+                level={level}
+                timeout={toastTimeout}
+                closeButton={item.closeButton ?? closeButton}
+                onDismiss={this.handleDismissed.bind(this, items.indexOf(item))}
+                translate={translate}
+                showIcon={showIcon}
+              />
+            );
+          })}
         </div>
       );
     });
@@ -199,7 +207,8 @@ export class ToastComponent extends React.Component<
 export default themeable(localeable(ToastComponent));
 
 interface ToastMessageProps {
-  body: string;
+  title?: string | React.ReactNode;
+  body: string | React.ReactNode;
   level: 'info' | 'success' | 'error' | 'warning';
   timeout: number;
   closeButton?: boolean;
@@ -284,6 +293,7 @@ export class ToastMessage extends React.Component<
       onDismiss,
       classnames: cx,
       closeButton,
+      title,
       body,
       allowHtml,
       level,
@@ -321,8 +331,25 @@ export class ToastMessage extends React.Component<
                   ) : null}
                 </div>
               )}
-              <div className={cx('Toast-body')}>
-                {allowHtml ? <Html html={body} /> : body}
+
+              <div className={cx('Toast-content')}>
+                {typeof title === 'string' ? (
+                  <span className={cx(`Toast-title`)}>{title}</span>
+                ) : React.isValidElement(title) ? (
+                  React.cloneElement(title, {
+                    className: cx(`Toast-title`, title?.props?.className ?? '')
+                  })
+                ) : null}
+
+                {typeof body === 'string' ? (
+                  <div className={cx('Toast-body')}>
+                    {allowHtml ? <Html html={body} /> : body}
+                  </div>
+                ) : React.isValidElement(body) ? (
+                  React.cloneElement(body, {
+                    className: cx(`Toast-body`, body?.props?.className ?? '')
+                  })
+                ) : null}
               </div>
 
               {closeButton ? (