amis 1.4.2-beta.1 → 1.4.2-beta.15

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,53 @@ 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
     } = 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 +205,41 @@ 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)}>
+                {React.cloneElement(body as any, {
+                  ...(body as React.ReactElement).props,
+                  className: cx(
+                    'Collapse-content',
+                    (body as React.ReactElement).props.className
+                  )
+                })}
+              </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/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/{ListCheckboxes.tsx → GroupedSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes} from './Checkboxes';
+import {BaseSelection} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -6,7 +6,7 @@ import Checkbox from './Checkbox';
 import {Option} from './Select';
 import {localeable} from '../locale';
 
-export class ListCheckboxes extends BaseCheckboxes {
+export class GroupedSelection extends BaseSelection {
   valueArray: Array<Option>;
 
   renderOption(option: Option, index: number) {
@@ -15,7 +15,8 @@ export class ListCheckboxes extends BaseCheckboxes {
       disabled,
       classnames: cx,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
     const valueArray = this.valueArray;
 
@@ -23,13 +24,13 @@ export class ListCheckboxes extends BaseCheckboxes {
       return (
         <div
           key={index}
-          className={cx('ListCheckboxes-group', option.className)}
+          className={cx('GroupedSelection-group', option.className)}
         >
-          <div className={cx('ListCheckboxes-itemLabel')}>
+          <div className={cx('GroupedSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
-          <div className={cx('ListCheckboxes-items', option.className)}>
+          <div className={cx('GroupedSelection-items', option.className)}>
             {option.children.map((child, index) =>
               this.renderOption(child, index)
             )}
@@ -42,24 +43,27 @@ export class ListCheckboxes extends BaseCheckboxes {
       <div
         key={index}
         className={cx(
-          'ListCheckboxes-item',
+          'GroupedSelection-item',
           itemClassName,
           option.className,
-          disabled || option.disabled ? 'is-disabled' : ''
+          disabled || option.disabled ? 'is-disabled' : '',
+          !!~valueArray.indexOf(option) ? 'is-active' : ''
         )}
         onClick={() => this.toggleOption(option)}
       >
-        <div className={cx('ListCheckboxes-itemLabel')}>
+        <div className={cx('GroupedSelection-itemLabel')}>
           {itemRender(option)}
         </div>
 
-        <Checkbox
-          size="sm"
-          checked={!!~valueArray.indexOf(option)}
-          disabled={disabled || option.disabled}
-          labelClassName={labelClassName}
-          description={option.description}
-        />
+        {multiple ? (
+          <Checkbox
+            size="sm"
+            checked={!!~valueArray.indexOf(option)}
+            disabled={disabled || option.disabled}
+            labelClassName={labelClassName}
+            description={option.description}
+          />
+        ) : null}
       </div>
     );
   }
@@ -71,11 +75,12 @@ export class ListCheckboxes extends BaseCheckboxes {
       className,
       placeholder,
       classnames: cx,
-      option2value
+      option2value,
+      onClick
     } = this.props;
     const __ = this.props.translate;
 
-    this.valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    this.valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
@@ -83,11 +88,11 @@ export class ListCheckboxes extends BaseCheckboxes {
     }
 
     return (
-      <div className={cx('ListCheckboxes', className)}>
+      <div className={cx('GroupedSelection', className)} onClick={onClick}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('ListCheckboxes-placeholder')}>
+          <div className={cx('GroupedSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -98,7 +103,7 @@ export class ListCheckboxes extends BaseCheckboxes {
 
 export default themeable(
   localeable(
-    uncontrollable(ListCheckboxes, {
+    uncontrollable(GroupedSelection, {
       value: 'onChange'
     })
   )