amis 1.4.2-beta.6 → 1.5.0

package/src/components/Collapse.tsx

@@ -12,6 +12,8 @@ import Transition, {
   EXITING
 } from 'react-transition-group/Transition';
 import {autobind} from '../utils/helper';
+import {isClickOnInput} from '../utils/helper';
+import {TranslateFn} from '../locale';
 
 const collapseStyles: {
   [propName: string]: string;
@@ -22,24 +24,87 @@ const collapseStyles: {
 };
 
 export interface CollapseProps {
-  show?: boolean;
+  key?: string;
+  id?: string;
   mountOnEnter?: boolean;
   unmountOnExit?: boolean;
   className?: string;
   classPrefix: string;
   classnames: ClassNamesFn;
+  headerPosition?: 'top' | 'bottom';
+  header?: React.ReactElement;
+  body: any;
+  bodyClassName?: string;
+  disabled?: boolean;
+  collapsable?: boolean;
+  collapsed?: boolean;
+  showArrow?: boolean;
+  expandIcon?: React.ReactElement | null;
+  headingClassName?: string;
+  collapseHeader?: React.ReactElement | null;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
+  onCollapse?: (item: any, collapsed: boolean) => void;
+  wrapperComponent?: any;
+  headingComponent?: any;
+  translate?: TranslateFn;
+  propsUpdate?: boolean;
 }
 
-export class Collapse extends React.Component<CollapseProps, any> {
-  static defaultProps: Pick<
-    CollapseProps,
-    'show' | 'mountOnEnter' | 'unmountOnExit'
-  > = {
-    show: false,
+export interface CollapseState {
+  collapsed: boolean;
+}
+
+export class Collapse extends React.Component<CollapseProps, CollapseState> {
+
+  static defaultProps: Partial<CollapseProps> = {
     mountOnEnter: false,
-    unmountOnExit: false
+    unmountOnExit: false,
+    headerPosition: 'top',
+    wrapperComponent: 'div',
+    headingComponent: 'div',
+    className: '',
+    headingClassName: '',
+    bodyClassName: '',
+    collapsable: true,
+    disabled: false,
+    showArrow: true,
+    propsUpdate: false
+  };
+
+  state: CollapseState = {
+    collapsed: false
   };
 
+  constructor(props: CollapseProps) {
+    super(props);
+
+    this.toggleCollapsed = this.toggleCollapsed.bind(this);
+    this.state.collapsed = !!props.collapsed;
+  }
+
+  static getDerivedStateFromProps(nextProps: CollapseProps, preState: CollapseState) {
+    if (nextProps.propsUpdate && nextProps.collapsed !== preState.collapsed) {
+      return {
+        collapsed: !!nextProps.collapsed
+      };
+    }
+    return null;
+  }
+
+  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
+    if (isClickOnInput(e)) {
+      return;
+    }
+    const props = this.props;
+    if (props.disabled || props.collapsable === false) {
+      return;
+    }
+    props.onCollapse && props.onCollapse(props, !this.state.collapsed);
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  }
+
   contentDom: any;
   contentRef = (ref: any) => (this.contentDom = ref);
 
@@ -77,18 +142,54 @@ export class Collapse extends React.Component<CollapseProps, any> {
 
   render() {
     const {
-      show,
-      children,
       classnames: cx,
       mountOnEnter,
-      unmountOnExit
+      unmountOnExit,
+      classPrefix: ns,
+      size,
+      wrapperComponent: WrapperComponent,
+      headingComponent: HeadingComponent,
+      className,
+      headingClassName,
+      headerPosition,
+      collapseHeader,
+      header,
+      body,
+      bodyClassName,
+      collapsable,
+      translate: __,
+      showArrow,
+      expandIcon,
+      disabled,
+      children
     } = this.props;
 
-    return (
+    const finalHeader = this.state.collapsed ? header : collapseHeader || header;
+
+    let dom = [
+      finalHeader ? (
+        <HeadingComponent
+          key="header"
+          onClick={this.toggleCollapsed}
+          className={cx(`Collapse-header`, headingClassName)}
+        >
+          {showArrow && collapsable
+            ? expandIcon
+              ? React.cloneElement(expandIcon, {
+                  ...expandIcon.props,
+                  className: cx('Collapse-icon-tranform')
+                })
+              : <span className={cx('Collapse-arrow')} />
+              : ''}
+          {finalHeader}
+        </HeadingComponent>
+      ) : null,
+
       <Transition
+        key="body"
         mountOnEnter={mountOnEnter}
         unmountOnExit={unmountOnExit}
-        in={show}
+        in={!this.state.collapsed}
         timeout={300}
         onEnter={this.handleEnter}
         onEntering={this.handleEntering}
@@ -105,17 +206,35 @@ export class Collapse extends React.Component<CollapseProps, any> {
               className={cx('Collapse-contentWrapper', collapseStyles[status])}
               ref={this.contentRef}
             >
-              {React.cloneElement(children as any, {
-                ...(children as React.ReactElement).props,
-                className: cx(
-                  'Collapse-content',
-                  (children as React.ReactElement).props.className
-                )
-              })}
+              <div className={cx('Collapse-body', bodyClassName)}>
+                <div className={cx('Collapse-content')}>{body || children}</div>
+              </div>
             </div>
           );
         }}
       </Transition>
+      
+    ];
+
+    if (headerPosition === 'bottom') {
+      dom.reverse();
+    }
+
+    return (
+      <WrapperComponent
+        className={cx(
+          `Collapse`,
+          {
+            'is-active': !this.state.collapsed,
+            [`Collapse--${size}`]: size,
+            'Collapse--disabled': disabled || collapsable === false,
+            'Collapse--title-bottom': headerPosition === 'bottom'
+          },
+          className
+        )}
+      >
+        {dom}
+      </WrapperComponent>
     );
   }
 }

package/src/components/CollapseGroup.tsx

@@ -0,0 +1,130 @@
+/**
+ * @file CollapseGroup
+ * @description 折叠面板group
+ * @author hongyang03
+ */
+
+import React from 'react';
+import {CollapseProps} from '../renderers/Collapse';
+import {SchemaNode} from '../types';
+import {ClassNamesFn, themeable} from '../theme';
+
+export interface CollapseGroupProps {
+  defaultActiveKey?: Array<string | number | never> | string | number;
+  accordion?: boolean;
+  expandIcon?: SchemaNode;
+  expandIconPosition?: 'left' | 'right';
+  body?: Array<React.ReactElement>;
+  className?: string;
+  classnames: ClassNamesFn;
+  classPrefix: string;
+}
+
+export interface CollapseGroupState {
+  activeKey: Array<string | number | never>;
+}
+
+class CollapseGroup extends React.Component<
+  CollapseGroupProps,
+  CollapseGroupState
+> {
+
+  static defaultProps: Partial<CollapseGroupProps> = {
+    className: '',
+    accordion: false,
+    expandIconPosition: 'left'
+  };
+
+  constructor(props: CollapseGroupProps) {
+    super(props);
+
+    // 传入的activeKey会被自动转换为defaultActiveKey
+    let activeKey = props.defaultActiveKey;
+    if (!Array.isArray(activeKey)) {
+      activeKey = activeKey ? [activeKey] : [];
+    }
+    if (props.accordion) {
+      // 手风琴模式下只展开第一个元素
+      activeKey = activeKey.length ? [activeKey[0]] : [];
+    }
+
+    this.state = {
+      activeKey: activeKey.map((key: number | string) => String(key))
+    };
+  }
+
+  collapseChange(item: CollapseProps, collapsed: boolean) {
+    let activeKey = this.state.activeKey;
+    if (collapsed) {
+      if (this.props.accordion) {
+        activeKey = [];
+      }
+      else {
+        for(let i = 0; i < activeKey.length; i++) {
+          if (activeKey[i] === item.id) {
+            activeKey.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+    else {
+      if (this.props.accordion) {
+        activeKey = [item.id];
+      }
+      else {
+        activeKey.push(item.id);
+      }
+    }
+    this.setState({
+      activeKey
+    });
+  }
+
+  getItems = (children: React.ReactNode) => {
+    if (!Array.isArray(children)) {
+      return children;
+    }
+
+    return children.map((child: React.ReactElement, index: number) => {
+      let props = child.props;
+      const id = props.schema.key || String(index);
+      const collapsed = this.state.activeKey.indexOf(id) === -1;
+
+      return React.cloneElement(child as any, {
+        ...props,
+        key: id,
+        id,
+        collapsed,
+        expandIcon: this.props.expandIcon,
+        propsUpdate: true,
+        onCollapse: (item: CollapseProps, collapsed: boolean) => this.collapseChange(item, collapsed)
+      });
+    });
+  };
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      expandIconPosition,
+      children
+    } = this.props;
+
+    return (
+      <div
+        className={cx(
+          `CollapseGroup`,
+          {
+            'icon-position-right': expandIconPosition === 'right',
+          },
+          className
+        )}
+      >
+        {this.getItems(children)}
+      </div>
+    );
+  }
+}
+
+export default themeable(CollapseGroup);

package/src/components/ColorPicker.tsx

@@ -12,9 +12,11 @@ import Overlay from './Overlay';
 import {uncontrollable} from 'uncontrollable';
 import PopOver from './PopOver';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
-import {autobind} from '../utils/helper';
+import {autobind, isObject} from '../utils/helper';
 import {localeable, LocaleProps} from '../locale';
 
+export type PresetColor = {color: string; title: string} | string;
+
 export interface ColorProps extends LocaleProps, ThemeProps {
   placeholder?: string;
   format: string;
@@ -27,7 +29,7 @@ export interface ColorProps extends LocaleProps, ThemeProps {
   placement?: string;
   value?: any;
   onChange: (value: any) => void;
-  presetColors?: string[];
+  presetColors?: PresetColor[];
   resetValue?: string;
   allowCustomColor?: boolean;
 }
@@ -229,11 +231,20 @@ export class ColorControl extends React.PureComponent<
           `ColorPicker`,
           {
             'is-disabled': disabled,
-            'is-focused': isFocused
+            'is-focused': isFocused,
+            'is-opened': isOpened
           },
           className
         )}
       >
+        <span onClick={this.handleClick} className={cx('ColorPicker-preview')}>
+          <i
+            ref={this.preview}
+            className={`${ns}ColorPicker-previewIcon`}
+            style={{background: this.state.inputValue || '#ccc'}}
+          />
+        </span>
+
         <input
           ref={this.input}
           type="text"
@@ -255,12 +266,8 @@ export class ColorControl extends React.PureComponent<
           </a>
         ) : null}
 
-        <span onClick={this.handleClick} className={cx('ColorPicker-preview')}>
-          <i
-            ref={this.preview}
-            className={`${ns}ColorPicker-previewIcon`}
-            style={{background: this.state.inputValue || '#ccc'}}
-          />
+        <span className={cx('ColorPicker-arrow')}>
+          <Icon icon="caret" className="icon" onClick={this.handleClick} />
         </span>
 
         {isOpened ? (
@@ -280,6 +287,7 @@ export class ColorControl extends React.PureComponent<
             >
               {allowCustomColor ? (
                 <SketchPicker
+                  styles={{}}
                   disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
                   color={value}
                   presetColors={presetColors}
@@ -288,7 +296,21 @@ export class ColorControl extends React.PureComponent<
               ) : (
                 <GithubPicker
                   color={value}
-                  colors={presetColors}
+                  colors={
+                    Array.isArray(presetColors)
+                      ? (presetColors
+                          .filter(
+                            item => typeof item === 'string' || isObject(item)
+                          )
+                          .map(item =>
+                            typeof item === 'string'
+                              ? item
+                              : isObject(item)
+                              ? item?.color
+                              : item
+                          ) as string[])
+                      : undefined
+                  }
                   onChangeComplete={this.handleChange}
                 />
               )}

package/src/components/Drawer.tsx

@@ -225,12 +225,14 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
                     fadeStyles[status]
                   )}
                 >
-                  <a
-                    onClick={disabled ? undefined : onHide}
-                    className={`${ns}Drawer-close`}
-                  >
-                    <Icon icon="close" className="icon" />
-                  </a>
+                  {show ? (
+                    <a
+                      onClick={disabled ? undefined : onHide}
+                      className={`${ns}Drawer-close`}
+                    >
+                      <Icon icon="close" className="icon" />
+                    </a>
+                  ) : null}
                   {status === EXITED ? null : children}
                 </div>
               </div>

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;