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

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

@@ -9,8 +9,13 @@ import {Icon} from './icons';
 
 export interface AlertProps {
   level: 'danger' | 'info' | 'success' | 'warning';
-  className: string;
+  title?: string;
+  className?: string;
   showCloseButton: boolean;
+  showIcon?: boolean;
+  icon?: string | React.ReactNode;
+  iconClassName?: string;
+  closeButtonClassName?: string;
   onClose?: () => void;
   classnames: ClassNamesFn;
   classPrefix: string;
@@ -60,21 +65,44 @@ export class Alert extends React.Component<AlertProps, AlertState> {
       className,
       level,
       children,
-      showCloseButton
+      showCloseButton,
+      title,
+      icon,
+      showIcon,
+      iconClassName,
+      closeButtonClassName
     } = this.props;
 
+    const iconNode = icon ? (
+      typeof icon === 'string' ? (
+        <Icon icon={icon} className={cx(`Alert-icon icon`)} />
+      ) : React.isValidElement(icon) ? (
+        React.cloneElement(icon, {
+          className: cx(`Alert-icon`, icon.props?.className)
+        })
+      ) : null
+    ) : showIcon ? (
+      <Icon icon={`alert-${level}`} className={cx(`Alert-icon icon`)} />
+    ) : null;
+
     return this.state.show ? (
       <div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
+        {showIcon && iconNode ? (
+          <div className={cx('Alert-icon', iconClassName)}>{iconNode}</div>
+        ) : null}
+        <div className={cx('Alert-content')}>
+          {title ? <div className={cx('Alert-title')}>{title}</div> : null}
+          <div className={cx('Alert-desc')}>{children}</div>
+        </div>
         {showCloseButton ? (
           <button
-            className={cx('Alert-close')}
+            className={cx('Alert-close', closeButtonClassName)}
             onClick={this.handleClick}
             type="button"
           >
             <Icon icon="close" className="icon" />
           </button>
         ) : null}
-        {children}
       </div>
     ) : null;
   }

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

@@ -82,6 +82,7 @@ export class Button extends React.Component<ButtonProps> {
       <Comp
         type={Comp === 'input' || Comp === 'button' ? type : undefined}
         {...pickEventsProps(rest)}
+        onClick={rest.onClick && disabled ? () => {} : rest.onClick}
         href={href}
         className={cx(
           overrideClassName

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}
                 />
               )}