amis 1.4.2-beta.11 → 1.4.2-beta.16

package/src/Schema.ts

@@ -12,6 +12,7 @@ import {FormSchema} from './renderers/Form';
 import {CarouselSchema} from './renderers/Carousel';
 import {ChartSchema} from './renderers/Chart';
 import {CollapseSchema} from './renderers/Collapse';
+import {CollapseGroupSchema} from './renderers/CollapseGroup';
 import {ColorSchema} from './renderers/Color';
 import {ContainerSchema} from './renderers/Container';
 import {CRUDSchema} from './renderers/CRUD';
@@ -131,6 +132,7 @@ export type SchemaType =
   | 'carousel'
   | 'chart'
   | 'collapse'
+  | 'collapse-group'
   | 'color'
   | 'container'
   | 'crud'
@@ -317,6 +319,7 @@ export type SchemaType =
   | 'tree-select'
   | 'table-view'
   | 'portlet'
+  | 'grid-nav'
 
   // 原生 input 类型
   | 'native-date'
@@ -339,6 +342,7 @@ export type SchemaObject =
   | CarouselSchema
   | ChartSchema
   | CollapseSchema
+  | CollapseGroupSchema
   | ColorSchema
   | ContainerSchema
   | CRUDSchema
@@ -487,7 +491,7 @@ export interface SchemaApiObject {
   /**
    * API 发送类型
    */
-  method?: 'get' | 'post' | 'put' | 'delete' | 'patch';
+  method?: 'get' | 'post' | 'put' | 'delete' | 'patch' | 'jsonp';
 
   /**
    * API 发送目标地址

package/src/components/AssociatedSelection.tsx

@@ -105,7 +105,8 @@ export class AssociatedSelection extends BaseSelection<
       disabled,
       leftMode,
       cellRender,
-      multiple
+      multiple,
+      onDeferLoad
     } = this.props;
 
     const selectdOption = BaseSelection.resolveSelected(
@@ -127,6 +128,7 @@ export class AssociatedSelection extends BaseSelection<
               onChange={this.handleLeftSelect}
               multiple={false}
               clearable={false}
+              onDeferLoad={onDeferLoad}
             />
           ) : (
             <GroupedSelecton

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/InputBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ThemeProps, themeable} from '../theme';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {Icon} from './icons';
 
 export interface InputBoxProps
@@ -17,6 +17,7 @@ export interface InputBoxProps
   placeholder?: string;
   prefix?: JSX.Element;
   children?: JSX.Element;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export interface InputBoxState {
@@ -79,20 +80,20 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
       placeholder,
       prefix: result,
       children,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'InputBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          rest.onClick ? 'is-clickable' : ''
-        )}
+        className={cx('InputBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': rest.onClick,
+          [`InputBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
       >
         {result}
 

package/src/components/PickerColumn.tsx

@@ -20,7 +20,7 @@ import {range} from '../utils/helper';
 import {themeable, ThemeProps} from '../theme';
 import {localeable, LocaleProps} from '../locale';
 import useTouch from '../hooks/use-touch';
-import {Button} from '.';
+import Button from './Button';
 
 export interface PickerColumnProps extends ThemeProps, LocaleProps {
   mobileClassName?: string;