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

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/Form/ConditionBuilder.tsx

@@ -66,12 +66,12 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
     RemoteOptionsProps & React.ComponentProps<typeof ConditionBuilder>
   > {
     render() {
-      const {loading, config, deferLoad, ...rest} = this.props;
+      const {loading, config, deferLoad, disabled, ...rest} = this.props;
       return (
         <ConditionBuilder
           {...rest}
           fields={config || rest.fields || []}
-          disabled={loading}
+          disabled={disabled || loading}
         />
       );
     }

package/src/renderers/Form/InputColor.tsx

@@ -1,7 +1,9 @@
 import React, {Suspense} from 'react';
-import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import type {PresetColor} from '../../components/ColorPicker';
+
 export const ColorPicker = React.lazy(
   () => import('../../components/ColorPicker')
 );
@@ -34,7 +36,7 @@ export interface InputColorControlSchema extends FormBaseControl {
   /**
    * 预设颜色，用户可以直接从预设中选。
    */
-  presetColors?: Array<any>;
+  presetColors?: Array<PresetColor>;
 
   /**
    * 是否允许用户输入颜色。

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/renderers/Page.tsx

@@ -85,6 +85,21 @@ export interface PageSchema extends BaseSchema {
    */
   aside?: SchemaCollection;
 
+  /**
+   * 边栏是否允许拖动
+   */
+  asideResizor?: boolean;
+
+  /**
+   * 边栏最小宽度
+   */
+  asideMinWidth?: number;
+
+   /**
+   * 边栏最小宽度
+   */
+  asideMaxWidth?: number;
+
   /**
    * 边栏区 css 类名
    */
@@ -199,6 +214,9 @@ export default class Page extends React.Component<PageProps> {
   mounted: boolean;
   style: HTMLStyleElement;
   varStyle: HTMLStyleElement;
+  startX: number;
+  startWidth: number;
+  codeWrap: HTMLElement;
 
   static defaultProps = {
     asideClassName: '',
@@ -499,6 +517,37 @@ export default class Page extends React.Component<PageProps> {
     }
   }
 
+  @autobind
+  handleResizeMouseDown(e: React.MouseEvent) {
+    // todo 可能 ie 不正确
+    let isRightMB = e.nativeEvent.which == 3;
+
+    if (isRightMB) {
+      return;
+    }
+
+    this.codeWrap = e.currentTarget.parentElement as HTMLElement;
+    document.addEventListener('mousemove', this.handleResizeMouseMove);
+    document.addEventListener('mouseup', this.handleResizeMouseUp);
+    this.startX = e.clientX;
+    this.startWidth = this.codeWrap.offsetWidth;
+  }
+
+  @autobind
+  handleResizeMouseMove(e: MouseEvent) {
+    const {asideMinWidth = 160, asideMaxWidth = 350} = this.props;
+    const dx = e.clientX - this.startX;
+    const mx = this.startWidth + dx;
+    const width = Math.min(Math.max(mx, asideMinWidth), asideMaxWidth);
+    this.codeWrap.style.cssText += `width: ${width}px`;
+  }
+
+  @autobind
+  handleResizeMouseUp() {
+    document.removeEventListener('mousemove', this.handleResizeMouseMove);
+    document.removeEventListener('mouseup', this.handleResizeMouseUp);
+  }
+
   openFeedback(dialog: any, ctx: any) {
     return new Promise(resolve => {
       const {store} = this.props;
@@ -658,6 +707,7 @@ export default class Page extends React.Component<PageProps> {
       regions,
       style,
       data,
+      asideResizor,
       translate: __
     } = this.props;
 
@@ -684,7 +734,11 @@ export default class Page extends React.Component<PageProps> {
         style={styleVar}
       >
         {hasAside ? (
-          <div className={cx(`Page-aside`, asideClassName)}>
+          <div className={cx(
+            `Page-aside`,
+            asideResizor ? 'relative' : 'Page-aside--withWidth',
+            asideClassName
+          )}>
             {render('aside', aside || '', {
               ...subProps,
               ...(typeof aside === 'string'
@@ -694,6 +748,13 @@ export default class Page extends React.Component<PageProps> {
                   }
                 : null)
             })}
+            {asideResizor ? (
+              <div
+                onMouseDown={this.handleResizeMouseDown}
+                className={cx(`Page-asideResizor`)}
+              ></div>
+            ) : null}
+            
           </div>
         ) : null}