amis 1.5.6-beta.5 → 1.6.0

package/src/renderers/Avatar.tsx

@@ -3,38 +3,36 @@
  */
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {
-  BaseSchema,
-  SchemaClassName,
-  SchemaIcon,
-  SchemaUrlPath
-} from '../Schema';
+import Avatar from '../components/Avatar';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {
-  isPureVariable,
-  resolveVariable,
-  resolveVariableAndFilter
-} from '../utils/tpl-builtin';
+import {BaseSchema, SchemaClassName} from '../Schema';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 
-/**
- * Avatar 用户头像显示
- * 文档：https://baidu.gitee.io/amis/docs/components/avatar
- */
 export interface AvatarSchema extends BaseSchema {
+  // 指定类型
+  type: 'avatar';
+
   /**
-   *  指定为用户头像控件
+   * 类名
    */
-  type: 'avatar';
+  className?: SchemaClassName;
 
   /**
-   * 大小
+   * 自定义样式
    */
-  size?: number;
+  style?: {
+    [propName: string]: any;
+  };
 
   /**
-   * 形状
+   * 角标
+   */
+  badge?: BadgeSchema;
+
+  /**
+   * 图片地址
    */
-  shape?: 'circle' | 'square';
+  src?: string;
 
   /**
    * 图标
@@ -42,19 +40,29 @@ export interface AvatarSchema extends BaseSchema {
   icon?: string;
 
   /**
-   * 文本
+   * 图片相对于容器的缩放方式
    */
-  text?: string;
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 
   /**
-   * 图片地址
+   * 形状
    */
-  src?: string;
+  shape?: 'circle' | 'square' | 'rounded';
 
   /**
-   * 图片相对于容器的缩放方式
+   * 大小
    */
-  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+  size?: number | 'small' | 'default' | 'large';
+
+  /**
+   * 文本
+   */
+  text?: string;
+
+  /**
+   * 字符类型距离左右两侧边界单位像素
+   */
+  gap?: number;
 
   /**
    * 图片无法显示时的替换文字地址
@@ -62,82 +70,83 @@ export interface AvatarSchema extends BaseSchema {
   alt?: string;
 
   /**
-   * 类名
+   * 图片是否允许拖动
    */
-  className?: SchemaClassName;
+  draggable?: boolean;
 
   /**
-   * 自定义样式
+   * 图片CORS属性
    */
-  style?: {
-    [propName: string]: any;
-  };
+  crossOrigin: 'anonymous' | 'use-credentials' | '';
 
   /**
-   * 角标
+   * 图片加载失败的是否默认处理，字符串函数
    */
-  badge?: BadgeSchema;
+  onError?: string
 }
 
-export interface AvatarProps
-  extends RendererProps,
-    Omit<AvatarSchema, 'type' | 'className'> {}
+export interface AvatarProps extends RendererProps, Omit<AvatarSchema, 'type' | 'className'> {}
+
+export class AvatarField extends React.Component<AvatarProps> {
 
-export class AvatarField extends React.Component<AvatarProps, object> {
   render() {
     let {
+      style = {},
       className,
+      classnames: cx,
+      src,
       icon = 'fa fa-user',
+      fit,
+      shape,
+      size,
       text,
-      src,
-      fit = 'cover',
-      data,
-      shape = 'circle',
-      size = 40,
-      style,
-      classnames: cx,
-      props
+      gap,
+      alt,
+      draggable,
+      crossOrigin,
+      onError,
+      data
     } = this.props;
 
-    let sizeStyle = {
-      height: size,
-      width: size,
-      lineHeight: size + 'px'
-    };
+    let errHandler = () => false;
 
-    if (isPureVariable(text)) {
-      text = resolveVariableAndFilter(text, data);
+    if (typeof onError === 'string') {
+      try {
+        errHandler = new Function('event', onError) as () => boolean;
+      } catch (e) {
+        console.warn(onError, e);
+      }
     }
 
     if (isPureVariable(src)) {
       src = resolveVariableAndFilter(src, data, '| raw');
     }
 
-    if (isPureVariable(icon)) {
-      icon = resolveVariableAndFilter(icon, data);
-    }
-
-    let avatar = <i className={icon} />;
-
-    if (text) {
-      if (text.length > 2) {
-        text = text.substring(0, 2).toUpperCase();
-      }
-      avatar = <span>{text}</span>;
+    if (isPureVariable(text)) {
+      text = resolveVariableAndFilter(text, data);
     }
 
-    if (src) {
-      avatar = <img src={src} style={{objectFit: fit}} />;
+    if (isPureVariable(icon)) {
+      icon = resolveVariableAndFilter(icon, data);
     }
 
     return (
-      <div
-        className={cx('Avatar', className, `Avatar--${shape}`)}
-        style={{...sizeStyle, ...style}}
-        {...props}
-      >
-        {avatar}
-      </div>
+      <Avatar
+        style={style}
+        className={className}
+        classnames={cx}
+        src={src}
+        icon={icon}
+        fit={fit}
+        shape={shape}
+        size={size}
+        text={text}
+        gap={gap}
+        alt={alt}
+        draggable={draggable}
+        crossOrigin={crossOrigin}
+        onError={errHandler}
+      />
     );
   }
 }

package/src/renderers/CRUD.tsx

@@ -1532,9 +1532,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   renderBulkActions(childProps: any) {
     let {bulkActions, itemActions, store, render, classnames: cx} = this.props;
 
-    const items = childProps.items;
-
-    if (!items.length || !bulkActions || !bulkActions.length) {
+    if (!bulkActions || !bulkActions.length) {
       return null;
     }
 

package/src/renderers/Card.tsx

@@ -4,7 +4,7 @@ import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import Checkbox from '../components/Checkbox';
 import {padArr, isVisible, isDisabled, noop, hashCode} from '../utils/helper';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
 import {TableCell} from './Table';
@@ -644,15 +644,19 @@ export class CardRenderer extends React.Component<CardProps> {
   }
 
   renderMedia() {
-    const {media, classnames: cx, render, region} = this.props;
+    const {media, classnames: cx, render, region, data} = this.props;
     if (media) {
       const {type, url, className, autoPlay, isLive, poster} = media;
+      const mediaUrl = resolveVariableAndFilter(url, data, '| raw');
 
-      if (type === 'image' && url) {
+      if (type === 'image' && mediaUrl) {
         return (
-          <img className={cx('Card-multiMedia-img', className)} src={url} />
+          <img
+            className={cx('Card-multiMedia-img', className)}
+            src={mediaUrl}
+          />
         );
-      } else if (type === 'video' && url) {
+      } else if (type === 'video' && mediaUrl) {
         return (
           <div className={cx('Card-multiMedia-video', className)}>
             {
@@ -660,7 +664,7 @@ export class CardRenderer extends React.Component<CardProps> {
                 type: type,
                 autoPlay: autoPlay,
                 poster: poster,
-                src: url,
+                src: mediaUrl,
                 isLive: isLive
               }) as JSX.Element
             }

package/src/renderers/Custom.tsx

@@ -33,9 +33,12 @@ export interface CustomProps extends FormControlProps, CustomSchema {
 
 // 添加resolver，指定所有参数的联合字符串为key。因为最后一个参数为函数体
 // 缓存一下，避免在 crud 中的自定义组件被大量执行
-const getFunction = memoize((...args) => {
-  return new Function(...args);
-}, (...args) => JSON.stringify(args));
+const getFunction = memoize(
+  (...args) => {
+    return new Function(...args);
+  },
+  (...args) => JSON.stringify(args)
+);
 
 export class Custom extends React.Component<CustomProps, object> {
   static defaultProps: Partial<CustomProps> = {

package/src/renderers/DropDownButton.tsx

@@ -13,6 +13,13 @@ import {DividerSchema} from './Divider';
 import {RootClose} from '../utils/RootClose';
 import {generateIcon} from '../utils/icon';
 
+import type {Option} from '../components/Select';
+
+export type DropdownButton =
+  | (ActionSchema & {children?: Array<DropdownButton>})
+  | DividerSchema
+  | 'divider';
+
 /**
  * 下拉按钮渲染器。
  * 文档：https://baidu.gitee.io/amis/docs/components/dropdown-button
@@ -34,9 +41,9 @@ export interface DropdownButtonSchema extends BaseSchema {
   btnClassName?: SchemaClassName;
 
   /**
-   * 按钮集合
+   * 按钮集合，支持分组
    */
-  buttons?: Array<ActionSchema | DividerSchema | 'divider'>;
+  buttons?: Array<DropdownButton>;
 
   /**
    * 按钮文字
@@ -92,6 +99,11 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 是否显示下拉按钮
    */
   hideCaret?: boolean;
+
+  /**
+   * 菜单 CSS 样式
+   */
+  menuClassName?: string;
 }
 
 export interface DropDownButtonProps
@@ -110,6 +122,7 @@ export interface DropDownButtonProps
   label?: any;
   // 激活状态
   isActived?: boolean;
+  menuClassName?: string;
 }
 
 export interface DropDownButtonState {
@@ -175,6 +188,49 @@ export default class DropDownButton extends React.Component<
     });
   }
 
+  renderButton(
+    button: DropdownButton,
+    index: number | string
+  ): React.ReactNode {
+    const {render, classnames: cx, data} = this.props;
+    index = typeof index === 'number' ? index.toString() : index;
+
+    if (typeof button !== 'string' && Array.isArray(button?.children)) {
+      return (
+        <div key={index} className={cx('DropDown-menu')}>
+          <li key={`${index}/0`} className={cx('DropDown-groupTitle')}>
+            {button.icon ? generateIcon(cx, button.icon, 'm-r-xs') : null}
+            <span>{button.label}</span>
+          </li>
+          {button.children.map((child, childIndex) =>
+            this.renderButton(child, `${index}/${childIndex + 1}`)
+          )}
+        </div>
+      );
+    }
+
+    if (typeof button !== 'string' && !isVisible(button, data)) {
+      return null;
+    } else if (button === 'divider' || button.type === 'divider') {
+      return <li key={index} className={cx('DropDown-divider')} />;
+    } else {
+      return (
+        <li
+          key={index}
+          className={cx('DropDown-button', {
+            ['is-disabled']: isDisabled(button, data)
+          })}
+        >
+          {render(`button/${index}`, {
+            type: 'button',
+            ...(button as any),
+            isMenuItem: true
+          })}
+        </li>
+      );
+    }
+  }
+
   renderOuter() {
     const {
       render,
@@ -186,7 +242,8 @@ export default class DropDownButton extends React.Component<
       children,
       align,
       closeOnClick,
-      closeOnOutside
+      closeOnOutside,
+      menuClassName
     } = this.props;
 
     let body = (
@@ -197,43 +254,20 @@ export default class DropDownButton extends React.Component<
         {(ref: any) => {
           return (
             <ul
-              className={cx('DropDown-menu')}
+              className={cx(
+                'DropDown-menu-root',
+                'DropDown-menu',
+                menuClassName
+              )}
               onClick={closeOnClick ? this.close : noop}
               ref={ref}
             >
               {children
                 ? children
                 : Array.isArray(buttons)
-                ? buttons.map((button, index) => {
-                    if (
-                      typeof button !== 'string' &&
-                      !isVisible(button, data)
-                    ) {
-                      return null;
-                    } else if (
-                      button === 'divider' ||
-                      button.type === 'divider'
-                    ) {
-                      return (
-                        <li key={index} className={cx('DropDown-divider')} />
-                      );
-                    }
-
-                    return (
-                      <li
-                        key={index}
-                        className={
-                          isDisabled(button, data) ? 'is-disabled' : ''
-                        }
-                      >
-                        {render(`button/${index}`, {
-                          type: 'button',
-                          ...(button as any),
-                          isMenuItem: true
-                        })}
-                      </li>
-                    );
-                  })
+                ? buttons.map((button, index) =>
+                    this.renderButton(button, index)
+                  )
                 : null}
             </ul>
           );
@@ -248,7 +282,7 @@ export default class DropDownButton extends React.Component<
             overlay
             onHide={this.close}
             classPrefix={ns}
-            className={cx('DropDown-popover')}
+            className={cx('DropDown-popover', menuClassName)}
             style={{minWidth: this.target?.offsetWidth}}
           >
             {body}

package/src/renderers/Each.tsx

@@ -54,10 +54,10 @@ export default class Each extends React.Component<EachProps> {
       translate: __
     } = this.props;
 
-    const value = getPropValue(
-      this.props,
-      props => props.source && !props.name
-        ? resolveVariableAndFilter(props.source, props.data, '| raw') : undefined
+    const value = getPropValue(this.props, props =>
+      props.source && !props.name
+        ? resolveVariableAndFilter(props.source, props.data, '| raw')
+        : undefined
     );
 
     const arr = isObject(value)

package/src/renderers/Flex.tsx

@@ -112,13 +112,9 @@ export default class Flex extends React.Component<FlexProps, object> {
 
     return (
       <div style={flexStyle} className={className}>
-        {(Array.isArray(items)
-          ? items
-          : items
-          ? [items]
-          : []
-        ).map((item, key) =>
-          render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
+        {(Array.isArray(items) ? items : items ? [items] : []).map(
+          (item, key) =>
+            render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
         )}
       </div>
     );

package/src/renderers/Form/ChartRadios.tsx

@@ -98,13 +98,8 @@ export default class ChartRadiosControl extends React.Component<
   }
 
   render() {
-    const {
-      options,
-      labelField,
-      chartValueField,
-      valueField,
-      render
-    } = this.props;
+    const {options, labelField, chartValueField, valueField, render} =
+      this.props;
     const config = {
       legend: {
         top: 10

package/src/renderers/Form/Checkboxes.tsx

@@ -216,7 +216,7 @@ export default class CheckboxesControl extends React.Component<
           inline={inline}
           labelClassName={labelClassName}
         >
-        {__('Checkboxes.selectAll')}
+          {__('Checkboxes.selectAll')}
         </Checkbox>
       );
     }