amis 1.5.2 → 1.5.6-beta.0

package/src/renderers/Card.tsx

@@ -1,36 +1,28 @@
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {Renderer, RendererProps} from '../factory';
 import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
-import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
-import {IItem} from '../store/list';
-import {
-  padArr,
-  isVisible,
-  isDisabled,
-  noop,
-  isClickOnInput,
-  hashCode
-} from '../utils/helper';
+import {padArr, isVisible, isDisabled, noop, hashCode} from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
 import {TableCell} from './Table';
 import Copyable, {SchemaCopyable} from './Copyable';
-import {Icon} from '../components/icons';
 import omit = require('lodash/omit');
 import {
   BaseSchema,
   SchemaClassName,
-  SchemaCollection,
   SchemaExpression,
   SchemaObject,
   SchemaTpl,
   SchemaUrlPath
 } from '../Schema';
 import {ActionSchema} from './Action';
+import {Card} from '../components/Card';
+import {findDOMNode} from 'react-dom';
+import {IItem} from '../store/list';
+import {Icon} from '../components/icons';
 
 export type CardBodyField = SchemaObject & {
   /**
@@ -84,7 +76,7 @@ export interface CardSchema extends BaseSchema {
      * 标题
      */
     title?: SchemaTpl;
-    titleClassName?: string;
+    titleClassName?: SchemaClassName;
 
     /**
      * 副标题
@@ -106,7 +98,7 @@ export interface CardSchema extends BaseSchema {
     /**
      * 描述占位类名
      */
-    descriptionClassName?: string;
+    descriptionClassName?: SchemaClassName;
 
     /**
      * @deprecated 建议用 description
@@ -164,6 +156,43 @@ export interface CardSchema extends BaseSchema {
    */
   body?: Array<CardBodyField>;
 
+  /**
+   * 多媒体区域
+   */
+  media?: {
+    className?: SchemaClassName;
+
+    /**
+     * 多媒体类型
+     */
+    type?: 'image' | 'video';
+
+    /**
+     * 多媒体链接地址
+     */
+    url?: SchemaUrlPath;
+
+    /**
+     * 多媒体区域位置
+     */
+    position?: 'top' | 'left' | 'right' | 'bottom';
+
+    /**
+     * 类型为video时是否自动播放
+     */
+    autoPlay?: boolean;
+
+    /**
+     * 类型为video时是否是直播
+     */
+    isLive?: boolean;
+
+    /**
+     * 类型为video时视频封面
+     */
+    poster?: SchemaUrlPath;
+  };
+
   /**
    * 底部按钮集合。
    */
@@ -173,60 +202,88 @@ export interface CardSchema extends BaseSchema {
    * 工具栏按钮
    */
   toolbar?: Array<ActionSchema>;
-}
 
+  /**
+   * 次要说明
+   */
+  secondary?: SchemaTpl;
+}
 export interface CardProps
   extends RendererProps,
     Omit<CardSchema, 'className'> {
   onCheck: (item: IItem) => void;
+  actionsCount: number;
   itemIndex?: number;
+  dragging?: boolean;
+  selectable?: boolean;
+  selected?: boolean;
+  checkable?: boolean;
   multiple?: boolean;
-  highlightClassName?: string;
   hideCheckToggler?: boolean;
   item: IItem;
   checkOnItemClick?: boolean;
 }
-export class Card extends React.Component<CardProps> {
-  static defaultProps: Partial<CardProps> = {
+
+@Renderer({
+  type: 'card'
+})
+export class CardRenderer extends React.Component<CardProps> {
+  static defaultProps = {
     className: '',
     avatarClassName: '',
+    headerClassName: '',
+    footerClassName: '',
+    secondaryClassName: '',
+    avatarTextClassName: '',
     bodyClassName: '',
     actionsCount: 4,
     titleClassName: '',
     highlightClassName: '',
     subTitleClassName: '',
     descClassName: '',
-    blank: true
+    descriptionClassName: '',
+    imageClassName: '',
+    highlight: false,
+    blank: true,
+    dragging: false,
+    selectable: false,
+    checkable: true,
+    selected: false,
+    hideCheckToggler: false
   };
 
   static propsList: Array<string> = [
     'avatarClassName',
+    'avatarTextClassName',
     'bodyClassName',
     'actionsCount',
     'titleClassName',
     'highlightClassName',
     'subTitleClassName',
     'descClassName',
+    'descriptionClassName',
+    'imageClassName',
     'hideCheckToggler'
   ];
 
   constructor(props: CardProps) {
     super(props);
 
-    this.getPopOverContainer = this.getPopOverContainer.bind(this);
-    this.itemRender = this.itemRender.bind(this);
-    this.handleAction = this.handleAction.bind(this);
-    this.handleQuickChange = this.handleQuickChange.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleAction = this.handleAction.bind(this);
     this.handleCheck = this.handleCheck.bind(this);
+    this.getPopOverContainer = this.getPopOverContainer.bind(this);
+    this.handleQuickChange = this.handleQuickChange.bind(this);
   }
 
-  handleClick(e: React.MouseEvent<HTMLDivElement>) {
-    if (isClickOnInput(e)) {
-      return;
-    }
+  isHaveLink() {
+    const {href, itemAction, onCheck, checkOnItemClick, checkable} = this.props;
+    return href || itemAction || onCheck || (checkOnItemClick && checkable);
+  }
 
+  handleClick(e: React.MouseEvent<HTMLDivElement>) {
     const {item, href, data, env, blank, itemAction, onAction} = this.props;
+
     if (href) {
       env.jumpTo(filter(href, data), {
         type: 'button',
@@ -244,14 +301,19 @@ export class Card extends React.Component<CardProps> {
     this.props.onCheck && this.props.onCheck(item);
   }
 
-  handleCheck() {
+  handleAction(e: React.UIEvent<any>, action: Action, ctx: object) {
+    const {onAction, item} = this.props;
+
+    onAction && onAction(e, action, ctx || item.data);
+  }
+
+  handleCheck(e: React.MouseEvent<any>) {
     const item = this.props.item;
     this.props.onCheck && this.props.onCheck(item);
   }
 
-  handleAction(e: React.UIEvent<any>, action: Action, ctx: object) {
-    const {onAction, item} = this.props;
-    onAction && onAction(e, action, ctx || item.data);
+  getPopOverContainer() {
+    return findDOMNode(this);
   }
 
   handleQuickChange(
@@ -265,27 +327,34 @@ export class Card extends React.Component<CardProps> {
       onQuickChange(item, values, saveImmediately, savePristine, resetOnFailed);
   }
 
-  getPopOverContainer() {
-    return findDOMNode(this);
-  }
-
   renderToolbar() {
     const {
-      dragging,
       selectable,
       checkable,
       selected,
-      onSelect,
       checkOnItemClick,
       multiple,
       hideCheckToggler,
       classnames: cx,
-      classPrefix: ns,
       toolbar,
-      render
+      render,
+      dragging,
+      data,
+      header
     } = this.props;
+
     const toolbars: Array<JSX.Element> = [];
 
+    if (header) {
+      const {highlightClassName, highlight: highlightTpl} = header;
+      const highlight = !!evalExpression(highlightTpl!, data as object);
+      if (highlight) {
+        toolbars.push(
+          <i className={cx('Card-highlight', highlightClassName)} />
+        );
+      }
+    }
+
     if (selectable && !hideCheckToggler) {
       toolbars.push(
         <Checkbox
@@ -318,6 +387,14 @@ export class Card extends React.Component<CardProps> {
       );
     }
 
+    if (dragging) {
+      toolbars.push(
+        <div className={cx('Card-dragBtn')}>
+          <Icon icon="drag-bar" className="icon" />
+        </div>
+      );
+    }
+
     return toolbars.length ? (
       <div className={cx('Card-toolbar')}>{toolbars}</div>
     ) : null;
@@ -368,8 +445,7 @@ export class Card extends React.Component<CardProps> {
         </div>
       ));
     }
-
-    return null;
+    return;
   }
 
   renderChild(
@@ -456,53 +532,105 @@ export class Card extends React.Component<CardProps> {
     return this.renderChild(body, 'body');
   }
 
-  render() {
-    const {
-      className,
-      data,
-      header,
-      render,
-      bodyClassName,
-      highlightClassName,
-      titleClassName,
-      subTitleClassName,
-      descClassName,
-      checkOnItemClick,
-      avatarClassName,
-      checkable,
-      classnames: cx,
-      classPrefix: ns,
-      imageClassName,
-      avatarTextClassName,
-      href,
-      itemAction,
-      dragging
-    } = this.props;
+  rederTitle() {
+    const {render, data, header} = this.props;
+    if (header) {
+      const {title: titleTpl} = header || {};
+      const title = filter(titleTpl, data);
+      return title ? render('title', titleTpl!) : undefined;
+    }
+    return;
+  }
 
-    const toolbar = this.renderToolbar();
-    let heading = null;
-
-    if (header || toolbar) {
-      const {
-        highlight: highlightTpl,
-        avatar: avatarTpl,
-        avatarText: avatarTextTpl,
-        avatarTextBackground,
-        title: titleTpl,
-        subTitle: subTitleTpl,
-        subTitlePlaceholder,
-        desc: descTpl
-      } = header || {};
+  renderSubTitle() {
+    const {render, data, header} = this.props;
+    if (header) {
+      const {subTitle: subTitleTpl} = header || {};
 
+      const subTitle = filter(subTitleTpl, data);
+      return subTitle ? render('sub-title', subTitleTpl!) : undefined;
+    }
+    return;
+  }
+
+  renderSubTitlePlaceholder() {
+    const {render, header, classnames: cx} = this.props;
+    if (header) {
+      const {subTitlePlaceholder} = header || {};
+
+      return subTitlePlaceholder
+        ? render('sub-title', subTitlePlaceholder, {
+            className: cx('Card-placeholder')
+          })
+        : undefined;
+    }
+    return;
+  }
+
+  renderDesc() {
+    const {render, data, header} = this.props;
+
+    if (header) {
+      const {desc: descTpl, description: descriptionTpl} = header || {};
+      const desc = filter(descriptionTpl! || descTpl!, data);
+      return desc
+        ? render('desc', descriptionTpl! || descTpl!, {
+            className: !desc ? 'text-muted' : null
+          })
+        : undefined;
+    }
+    return;
+  }
+
+  renderDescPlaceholder() {
+    const {render, header} = this.props;
+
+    if (header) {
       const descPlaceholder =
-        header?.descriptionPlaceholder || header?.descPlaceholder;
+        header.descriptionPlaceholder || header.descPlaceholder;
+      return descPlaceholder
+        ? render('desc', descPlaceholder, {
+            className: !descPlaceholder ? 'text-muted' : null
+          })
+        : undefined;
+    }
+    return;
+  }
 
-      const highlight = !!evalExpression(highlightTpl!, data as object);
+  renderAvatar() {
+    const {data, header} = this.props;
+    if (header) {
+      const {avatar: avatarTpl} = header || {};
       const avatar = filter(avatarTpl, data, '| raw');
+      return avatar ? avatar : undefined;
+    }
+    return;
+  }
+
+  renderAvatarText() {
+    const {render, data, header} = this.props;
+    if (header) {
+      const {avatarText: avatarTextTpl} = header || {};
+
+      const avatarText = filter(avatarTextTpl, data);
+
+      return avatarText ? render('avatarText', avatarTextTpl!) : undefined;
+    }
+    return;
+  }
+
+  renderSecondary() {
+    const {render, data, secondary: secondaryTextTpl} = this.props;
+
+    const secondary = filter(secondaryTextTpl, data);
+    return secondary ? render('secondary', secondaryTextTpl!) : undefined;
+  }
+
+  renderAvatarTextStyle() {
+    const {header, data} = this.props;
+    if (header) {
+      const {avatarText: avatarTextTpl, avatarTextBackground} = header;
       const avatarText = filter(avatarTextTpl, data);
-      const title = filter(titleTpl, data);
-      const subTitle = filter(subTitleTpl, data);
-      const desc = filter(header?.description || descTpl, data);
       const avatarTextStyle: PlainObject = {};
       if (avatarText && avatarTextBackground && avatarTextBackground.length) {
         avatarTextStyle['background'] =
@@ -510,124 +638,104 @@ export class Card extends React.Component<CardProps> {
             Math.abs(hashCode(avatarText)) % avatarTextBackground.length
           ];
       }
+      return avatarTextStyle;
+    }
+    return;
+  }
 
-      heading = (
-        <div className={cx('Card-heading', header?.className)}>
-          {avatar ? (
-            <span
-              className={cx(
-                'Card-avtar',
-                header?.avatarClassName || avatarClassName
-              )}
-            >
-              <img
-                className={cx(
-                  'Card-img',
-                  header?.imageClassName || imageClassName
-                )}
-                src={avatar}
-              />
-            </span>
-          ) : avatarText ? (
-            <span
-              className={cx(
-                'Card-avtarText',
-                header?.avatarTextClassName || avatarTextClassName
-              )}
-              style={avatarTextStyle}
-            >
-              {avatarText}
-            </span>
-          ) : null}
-          <div className={cx('Card-meta')}>
-            {highlight ? (
-              <i
-                className={cx(
-                  'Card-highlight',
-                  header?.highlightClassName || highlightClassName
-                )}
-              />
-            ) : null}
-
-            {title ? (
-              <div
-                className={cx(
-                  'Card-title',
-                  header?.titleClassName || titleClassName
-                )}
-              >
-                {render('title', titleTpl!)}
-              </div>
-            ) : null}
-
-            {subTitle || subTitlePlaceholder ? (
-              <div
-                className={cx(
-                  'Card-subTitle',
-                  header?.subTitleClassName || subTitleClassName
-                )}
-              >
-                {render('sub-title', subTitleTpl || subTitlePlaceholder!, {
-                  className: cx(!subTitle ? 'Card-placeholder' : undefined)
-                })}
-              </div>
-            ) : null}
-
-            {desc || descPlaceholder ? (
-              <div
-                className={cx(
-                  'Card-desc',
-                  header?.descriptionClassName ||
-                    header?.descClassName ||
-                    descClassName
-                )}
-              >
-                {render('desc', header?.description || descTpl!, {
-                  className: !desc ? 'text-muted' : undefined
-                })}
-              </div>
-            ) : null}
+  renderMedia() {
+    const {media, classnames: cx, render, region} = this.props;
+    if (media) {
+      const {type, url, className, autoPlay, isLive, poster} = media;
+
+      if (type === 'image' && url) {
+        return (
+          <img className={cx('Card-multiMedia-img', className)} src={url} />
+        );
+      } else if (type === 'video' && url) {
+        return (
+          <div className={cx('Card-multiMedia-video', className)}>
+            {
+              render(region, {
+                type: type,
+                autoPlay: autoPlay,
+                poster: poster,
+                src: url,
+                isLive: isLive
+              }) as JSX.Element
+            }
           </div>
-          {toolbar}
-        </div>
-      );
+        );
+      }
     }
+    return;
+  }
 
-    const body = this.renderBody();
+  render() {
+    const {
+      header,
+      className,
+      avatarClassName,
+      avatarTextClassName,
+      descClassName,
+      descriptionClassName,
+      titleClassName,
+      subTitleClassName,
+      bodyClassName,
+      imageClassName,
+      headerClassName,
+      secondaryClassName,
+      footerClassName,
+      mediaClassName,
+      media,
+      ...rest
+    } = this.props;
+
+    const headerCn = header?.className || headerClassName;
+    const titleCn = header?.titleClassName || titleClassName;
+    const subTitleCn = header?.subTitleClassName || subTitleClassName;
+    const descCn = header?.descClassName || descClassName;
+    const descriptionCn =
+      header?.descriptionClassName || descriptionClassName || descCn;
+    const avatarTextCn = header?.avatarTextClassName || avatarTextClassName;
+    const avatarCn = header?.avatarClassName || avatarClassName;
+    const imageCn = header?.imageClassName || imageClassName;
+    const mediaPosition = media?.position;
 
     return (
-      <div
-        onClick={
-          (checkOnItemClick && checkable) || href || itemAction
-            ? this.handleClick
-            : undefined
-        }
-        className={cx('Card', className, {
-          'Card--link': href || itemAction
-        })}
-      >
-        {dragging ? (
-          <div className={cx('Card-dragBtn')}>
-            <Icon icon="drag-bar" className="icon" />
-          </div>
-        ) : null}
-        {heading}
-        {body ? (
-          <div className={cx('Card-body', bodyClassName)}>{body}</div>
-        ) : null}
-        {this.renderActions()}
-      </div>
+      <Card
+        {...rest}
+        title={this.rederTitle()}
+        subTitle={this.renderSubTitle()}
+        subTitlePlaceholder={this.renderSubTitlePlaceholder()}
+        description={this.renderDesc()}
+        descriptionPlaceholder={this.renderDescPlaceholder()}
+        children={this.renderBody()}
+        actions={this.renderActions()}
+        avatar={this.renderAvatar()}
+        avatarText={this.renderAvatarText()}
+        secondary={this.renderSecondary()}
+        toolbar={this.renderToolbar()}
+        avatarClassName={avatarCn}
+        avatarTextStyle={this.renderAvatarTextStyle()}
+        avatarTextClassName={avatarTextCn}
+        className={className}
+        titleClassName={titleCn}
+        media={this.renderMedia()}
+        subTitleClassName={subTitleCn}
+        mediaPosition={mediaPosition}
+        descriptionClassName={descriptionCn}
+        imageClassName={imageCn}
+        headerClassName={headerCn}
+        footerClassName={footerClassName}
+        secondaryClassName={secondaryClassName}
+        bodyClassName={bodyClassName}
+        onClick={this.isHaveLink() ? this.handleClick : undefined}
+      ></Card>
     );
   }
 }
 
-@Renderer({
-  type: 'card'
-})
-export class CardRenderer extends Card {
-  static propsList = ['multiple', ...Card.propsList];
-}
-
 @Renderer({
   type: 'card-item-field'
 })