amis 1.4.2-beta.13 → 1.4.2-beta.15

package/src/renderers/Collapse.tsx

@@ -3,11 +3,10 @@ import {Renderer, RendererProps} from '../factory';
 import {Collapse as BasicCollapse} from '../components/Collapse';
 import {
   BaseSchema,
-  SchemaClassName,
   SchemaCollection,
-  SchemaTpl
+  SchemaTpl,
+  SchemaObject
 } from '../Schema';
-import {isClickOnInput} from '../utils/helper';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -19,10 +18,20 @@ export interface CollapseSchema extends BaseSchema {
    */
   type: 'collapse';
 
+  /**
+   * 标识
+   */
+  key?: string;
+
   /**
    * 标题展示位置
    */
-  titlePosition: 'top' | 'bottom';
+  headerPosition?: 'top' | 'bottom';
+
+  /**
+   * 标题
+   */
+  header?: string | SchemaCollection;
 
   /**
    * 内容区域
@@ -32,7 +41,12 @@ export interface CollapseSchema extends BaseSchema {
   /**
    * 配置 Body 容器 className
    */
-  bodyClassName?: SchemaClassName;
+  bodyClassName?: string;
+
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
 
   /**
    * 是否可折叠
@@ -45,19 +59,24 @@ export interface CollapseSchema extends BaseSchema {
   collapsed?: boolean;
 
   /**
-   * 标题 CSS 类名
+   * 图标是否展示
    */
-  headingClassName?: string;
+  showArrow?: boolean;
+
+   /**
+    * 自定义切换图标
+    */
+  expandIcon?: SchemaObject;
 
   /**
-   * 标题
+   * 标题 CSS 类名
    */
-  title?: SchemaTpl;
+  headingClassName?: string;
 
   /**
    * 收起的标题
    */
-  collapseTitle?: SchemaTpl;
+  collapseHeader?: SchemaTpl;
 
   /**
    * 控件大小
@@ -85,143 +104,77 @@ export interface CollapseProps
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export interface CollapseState {
-  collapsed: boolean;
-}
-
 export default class Collapse extends React.Component<
   CollapseProps,
-  CollapseState
+  {}
 > {
-  static propsList: Array<string> = [
-    'wrapperComponent',
-    'headingComponent',
-    'bodyClassName',
-    'collapsed',
-    'headingClassName',
-    'title',
-    'mountOnEnter',
-    'unmountOnExit'
-  ];
-
-  static defaultProps: Partial<CollapseProps> = {
-    titlePosition: 'top',
-    wrapperComponent: 'div',
-    headingComponent: 'h4',
-    className: '',
-    headingClassName: '',
-    bodyClassName: '',
-    collapsable: true
-  };
-
-  state = {
-    collapsed: false
-  };
-
-  constructor(props: CollapseProps) {
-    super(props);
-
-    this.toggleCollapsed = this.toggleCollapsed.bind(this);
-    this.state.collapsed = !!props.collapsed;
-  }
-
-  componentDidUpdate(prevProps: CollapseProps) {
-    const props = this.props;
-
-    if (prevProps.collapsed !== props.collapsed) {
-      this.setState({
-        collapsed: !!props.collapsed
-      });
-    }
-  }
-
-  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
-    if (isClickOnInput(e)) {
-      return;
-    }
-    this.props.collapsable !== false &&
-      this.setState({
-        collapsed: !this.state.collapsed
-      });
-  }
 
   render() {
     const {
+      key,
+      id,
       classPrefix: ns,
       classnames: cx,
       size,
-      wrapperComponent: WrapperComponent,
-      headingComponent: HeadingComponent,
+      wrapperComponent,
+      headingComponent,
       className,
       headingClassName,
       children,
       titlePosition,
+      headerPosition,
       title,
       collapseTitle,
+      collapseHeader,
+      header,
       body,
       bodyClassName,
       render,
       collapsable,
       translate: __,
       mountOnEnter,
-      unmountOnExit
+      unmountOnExit,
+      showArrow,
+      expandIcon,
+      disabled,
+      collapsed,
+      propsUpdate,
+      onCollapse
     } = this.props;
-    // 默认给个 title，不然没法点
-    const finalTitle = this.state.collapsed ? title : collapseTitle || title;
-
-    let dom = [
-      finalTitle ? (
-        <HeadingComponent
-          key="title"
-          onClick={this.toggleCollapsed}
-          className={cx(`Collapse-header`, headingClassName)}
-        >
-          <div className={cx('Collapse-header-wrapper')}>
-            {render('heading', finalTitle, {className: 'Collapse-header-tpl'})}
-            {collapsable && <span className={cx('Collapse-arrow')} />}
-          </div>
-        </HeadingComponent>
-      ) : null,
 
+    return (
       <BasicCollapse
-        show={collapsable ? !this.state.collapsed : true}
+        key={key}
+        id={id}
         classnames={cx}
         classPrefix={ns}
-        key="body"
         mountOnEnter={mountOnEnter}
         unmountOnExit={unmountOnExit}
+        size={size}
+        wrapperComponent={wrapperComponent}
+        headingComponent={headingComponent}
+        className={className}
+        headingClassName={headingClassName}
+        bodyClassName={bodyClassName}
+        headerPosition={titlePosition || headerPosition}
+        collapsable={collapsable}
+        collapsed={collapsed}
+        showArrow={showArrow}
+        disabled={disabled}
+        propsUpdate={propsUpdate}
+        expandIcon={expandIcon ? render('arrow-icon', expandIcon || '', {className: cx('Collapse-icon-tranform')}) : null}
+        collapseHeader={collapseTitle || collapseHeader ? render('heading', collapseTitle || collapseHeader) : null}
+        header={render('heading', title || header || '')}
+        body={children
+          ? typeof children === 'function'
+            ? children(this.props)
+            : children
+          : body
+          ? render('body', body)
+          : null}
+        onCollapse={onCollapse}
       >
-        <div className={cx(`Collapse-body`, bodyClassName)}>
-          {children
-            ? typeof children === 'function'
-              ? children(this.props)
-              : children
-            : body
-            ? render('body', body)
-            : null}
-        </div>
       </BasicCollapse>
-    ];
-
-    if (titlePosition === 'bottom') {
-      dom.reverse();
-    }
-
-    return (
-      <WrapperComponent
-        className={cx(
-          `Collapse`,
-          {
-            'is-collapsed': this.state.collapsed,
-            [`Collapse--${size}`]: size,
-            'Collapse--collapsable': collapsable,
-            'Collapse--title-bottom': titlePosition === 'bottom'
-          },
-          className
-        )}
-      >
-        {dom}
-      </WrapperComponent>
     );
   }
 }

package/src/renderers/CollapseGroup.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaCollection, SchemaObject} from '../Schema';
+import CollapseGroup from '../components/CollapseGroup';
+
+/**
+ * CollapseGroup 折叠渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/collapse
+ */
+export interface CollapseGroupSchema extends BaseSchema {
+  /**
+   * 指定为折叠器类型
+   */
+  type: 'collapse-group';
+
+  /**
+   * 激活面板
+   */
+  activeKey?: Array<string | number | never> | string | number;
+
+  /**
+   * 手风琴模式
+   */
+  accordion?: boolean;
+
+  /**
+   * 自定义切换图标
+   */
+  expandIcon?: SchemaObject;
+
+  /**
+   * 设置图标位置
+   */
+  expandIconPosition?: 'left' | 'right';
+
+  /**
+   * 内容区域
+   */
+  body?: SchemaCollection;
+}
+export interface CollapseGroupProps
+  extends RendererProps,
+    Omit<CollapseGroupSchema, 'type' | 'className'> {
+
+  children?: JSX.Element | ((props?: any) => JSX.Element);
+}
+
+export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}> {
+  constructor(props: CollapseGroupProps) {
+    super(props);
+  }
+  render() {
+    const {
+      defaultActiveKey,
+      accordion,
+      expandIcon,
+      expandIconPosition,
+      body,
+      className,
+      render
+    } = this.props;
+    return (
+      <CollapseGroup
+          defaultActiveKey={defaultActiveKey}
+          accordion={accordion}
+          expandIcon={expandIcon}
+          expandIconPosition={expandIconPosition}
+          className={className}
+        >
+          {render('body', body || '')}
+        </CollapseGroup>
+    )
+  }
+}
+
+
+@Renderer({
+  type: 'collapse-group'
+})
+export class CollapseGroupRenderer extends CollapseGroupRender {}

package/src/renderers/GridNav.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {autobind, getPropValue} from '../utils/helper';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {
+  BaseSchema,
+  SchemaTokenizeableString,
+  SchemaTpl,
+  SchemaUrlPath
+} from '../Schema';
+import {ActionSchema} from './Action';
+import GridNav, {GridNavDirection, GridNavItem} from '../components/GridNav';
+import {BadgeSchema} from '../components/Badge';
+import handleAction from '../utils/handleAction';
+import {validations} from '../utils/validations';
+
+export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 单项点击事件
+   */
+  clickAction?: ActionSchema;
+
+  /**
+   * 跳转地址
+   */
+  link?: string;
+
+  /**
+   * 打开方式
+   */
+  blank?: string;
+
+  /**
+   * 图片地址
+   */
+  icon?: SchemaUrlPath;
+
+  /**
+   * 描述
+   */
+  text?: SchemaTpl;
+
+  /**
+   * 图标最大宽度比例 0-100
+   */
+  iconRatio?: number;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema;
+}
+
+/**
+ * List 列表展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
+ */
+export interface ListSchema extends BaseSchema {
+  /**
+   * 指定为 List 列表展示控件。
+   */
+  type: 'grid-nav';
+
+  /**
+   * 列表项类名
+   */
+  itemClassName?: string;
+
+  /**
+   * 静态图片列表配置
+   */
+  options?: Array<ListItemSchema>;
+
+  /**
+   * 是否将列表项固定为正方形
+   */
+  square?: boolean;
+
+  /**
+   * 是否将列表项内容居中显示
+   */
+  center?: boolean;
+
+  /**
+   * 是否显示列表项边框
+   */
+  border?: boolean;
+
+  /**
+   * 列表项之间的间距，默认单位为px
+   */
+  gutter?: number;
+
+  /**
+   * 图标宽度占比, 1-100
+   */
+  iconRatio?: number;
+
+  /**
+   * 列表项内容排列的方向，可选值为 horizontal 、vertical
+   */
+  direction?: GridNavDirection;
+
+  /**
+   * 列数
+   */
+  columnNum?: number;
+
+  /**
+   * 数据源: 绑定当前环境变量
+   *
+   * @default ${items}
+   */
+  source?: SchemaTokenizeableString;
+}
+
+export interface Column {
+  type: string;
+  [propName: string]: any;
+}
+
+export interface ListProps
+  extends RendererProps,
+    Omit<ListSchema, 'type' | 'className'> {
+  handleClick: (item?: ListItemSchema) => void;
+}
+
+@Renderer({
+  type: 'grid-nav'
+})
+export default class List extends React.Component<ListProps, object> {
+  @autobind
+  handleClick(item: ListItemSchema) {
+    return (e: React.MouseEvent) => {
+      let action;
+      if (item.link) {
+        action = validations.isUrl({}, item.link)
+          ? {
+              type: 'button',
+              actionType: 'url',
+              url: item.link,
+              blank: item.blank
+            }
+          : {
+              type: 'button',
+              actionType: 'link',
+              link: item.link
+            };
+      } else {
+        action = item.clickAction!;
+      }
+      handleAction(e, action as ActionSchema, this.props);
+    };
+  }
+
+  render() {
+    const {itemClassName, source, data, options, classnames} = this.props;
+
+    let value = getPropValue(this.props);
+    let list: any = [];
+
+    if (typeof source === 'string' && isPureVariable(source)) {
+      list = resolveVariableAndFilter(source, data, '| raw') || undefined;
+    } else if (Array.isArray(value)) {
+      list = value;
+    } else if (Array.isArray(options)) {
+      list = options;
+    }
+
+    if (list && !Array.isArray(list)) {
+      list = [list];
+    }
+
+    if (!list?.length) {
+      return null;
+    }
+
+    return (
+      <GridNav {...this.props}>
+        {list.map((item: ListItemSchema, index: number) => (
+          <GridNavItem
+            key={index}
+            onClick={
+              item.clickAction || item.link ? this.handleClick(item) : undefined
+            }
+            className={itemClassName}
+            text={item.text}
+            icon={item.icon}
+            classnames={classnames}
+            badge={
+              item.badge
+                ? {
+                    badge: item.badge,
+                    data: data,
+                    classnames
+                  }
+                : undefined
+            }
+          />
+        ))}
+      </GridNav>
+    );
+  }
+}

package/src/store/formItem.ts

@@ -617,12 +617,104 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       return json;
     });
 
+    const tryDeferLoadLeftOptions: (
+      option: any,
+      api: Api,
+      data?: object,
+      config?: fetchOptions
+    ) => Promise<Payload | null> = flow(function* (
+      option: any,
+      api: string,
+      data: object,
+      config?: fetchOptions
+    ) {
+      if (
+        self.options.length != 1 ||
+        !Array.isArray(self.options[0].leftOptions)
+      ) {
+        return;
+      }
+
+      let leftOptions = self.options[0].leftOptions as any;
+
+      const indexes = findTreeIndex(leftOptions, item => item === option);
+      if (!indexes) {
+        return;
+      }
+
+      setOptions(
+        [
+          {
+            ...self.options[0],
+            leftOptions: spliceTree(leftOptions, indexes, 1, {
+              ...option,
+              loading: true
+            })
+          }
+        ],
+        undefined,
+        data
+      );
+
+      let json = yield fetchOptions(
+        api,
+        data,
+        {
+          ...config,
+          silent: true
+        },
+        false
+      );
+      if (!json) {
+        setOptions(
+          [
+            {
+              ...self.options[0],
+              leftOptions: spliceTree(self.options, indexes, 1, {
+                ...option,
+                loading: false,
+                error: true
+              })
+            }
+          ],
+          undefined,
+          data
+        );
+        return;
+      }
+
+      let options: Array<IOption> =
+        json.data?.options ||
+        json.data.items ||
+        json.data.rows ||
+        json.data ||
+        [];
+
+      setOptions(
+        [
+          {
+            ...self.options[0],
+            leftOptions: spliceTree(self.options, indexes, 1, {
+              ...option,
+              loading: false,
+              loaded: true,
+              children: options
+            })
+          }
+        ],
+        undefined,
+        data
+      );
+
+      return json;
+    });
+
     const deferLoadOptions: (
       option: any,
       api: Api,
       data?: object,
       config?: fetchOptions
-    ) => Promise<Payload | null> = flow(function* getInitData(
+    ) => Promise<Payload | null> = flow(function* (
       option: any,
       api: string,
       data: object,
@@ -630,7 +722,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
     ) {
       const indexes = findTreeIndex(self.options, item => item === option);
       if (!indexes) {
-        return;
+        return yield tryDeferLoadLeftOptions(option, api, data, config);
       }
 
       setOptions(

package/src/types.ts

@@ -31,7 +31,7 @@ export interface fetcherResult {
 }
 
 export interface fetchOptions {
-  method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';
   successMessage?: string;
   errorMessage?: string;
   autoAppend?: boolean;