amis 1.5.1 → 1.5.5

package/lib/renderers/Card.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { RendererProps } from '../factory';
-import { SchemaNode, Action } from '../types';
-import { IItem } from '../store/list';
+import { SchemaNode, Action, PlainObject } from '../types';
 import { SchemaQuickEdit } from './QuickEdit';
 import { SchemaPopOver } from './PopOver';
 import { TableCell } from './Table';
 import { SchemaCopyable } from './Copyable';
 import { BaseSchema, SchemaClassName, SchemaExpression, SchemaObject, SchemaTpl, SchemaUrlPath } from '../Schema';
 import { ActionSchema } from './Action';
+import { IItem } from '../store/list';
 export declare type CardBodyField = SchemaObject & {
     /**
      * 列标题
@@ -52,7 +52,7 @@ export interface CardSchema extends BaseSchema {
          * 标题
          */
         title?: SchemaTpl;
-        titleClassName?: string;
+        titleClassName?: SchemaClassName;
         /**
          * 副标题
          */
@@ -70,7 +70,7 @@ export interface CardSchema extends BaseSchema {
         /**
          * 描述占位类名
          */
-        descriptionClassName?: string;
+        descriptionClassName?: SchemaClassName;
         /**
          * @deprecated 建议用 description
          */
@@ -116,6 +116,36 @@ 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;
+    };
     /**
      * 底部按钮集合。
      */
@@ -124,36 +154,74 @@ 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 declare class Card extends React.Component<CardProps> {
-    static defaultProps: Partial<CardProps>;
+export declare class CardRenderer extends React.Component<CardProps> {
+    static defaultProps: {
+        className: string;
+        avatarClassName: string;
+        headerClassName: string;
+        footerClassName: string;
+        secondaryClassName: string;
+        avatarTextClassName: string;
+        bodyClassName: string;
+        actionsCount: number;
+        titleClassName: string;
+        highlightClassName: string;
+        subTitleClassName: string;
+        descClassName: string;
+        descriptionClassName: string;
+        imageClassName: string;
+        highlight: boolean;
+        blank: boolean;
+        dragging: boolean;
+        selectable: boolean;
+        checkable: boolean;
+        selected: boolean;
+        hideCheckToggler: boolean;
+    };
     static propsList: Array<string>;
     constructor(props: CardProps);
+    isHaveLink(): any;
     handleClick(e: React.MouseEvent<HTMLDivElement>): void;
-    handleCheck(): void;
     handleAction(e: React.UIEvent<any>, action: Action, ctx: object): void;
-    handleQuickChange(values: object, saveImmediately?: boolean, savePristine?: boolean, resetOnFailed?: boolean): void;
+    handleCheck(e: React.MouseEvent<any>): void;
     getPopOverContainer(): Element | Text | null;
+    handleQuickChange(values: object, saveImmediately?: boolean, savePristine?: boolean, resetOnFailed?: boolean): void;
     renderToolbar(): JSX.Element | null;
-    renderActions(): JSX.Element[] | null;
+    renderActions(): JSX.Element[] | undefined;
     renderChild(node: SchemaNode, region?: string, key?: any): React.ReactNode;
     itemRender(field: any, index: number, props: any): JSX.Element | undefined;
     renderFeild(region: string, field: any, key: any, props: any): JSX.Element | undefined;
     renderBody(): React.ReactNode;
+    rederTitle(): JSX.Element | undefined;
+    renderSubTitle(): JSX.Element | undefined;
+    renderSubTitlePlaceholder(): JSX.Element | undefined;
+    renderDesc(): JSX.Element | undefined;
+    renderDescPlaceholder(): JSX.Element | undefined;
+    renderAvatar(): string | undefined;
+    renderAvatarText(): JSX.Element | undefined;
+    renderSecondary(): JSX.Element | undefined;
+    renderAvatarTextStyle(): PlainObject | undefined;
+    renderMedia(): JSX.Element | undefined;
     render(): JSX.Element;
 }
-export declare class CardRenderer extends Card {
-    static propsList: string[];
-}
 export declare class CardItemFieldRenderer extends TableCell {
     static defaultProps: {
         wrapperComponent: string;

package/lib/renderers/Card.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardItemFieldRenderer = exports.CardRenderer = exports.Card = void 0;
+exports.CardItemFieldRenderer = exports.CardRenderer = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var react_dom_1 = require("react-dom");
 var factory_1 = require("../factory");
 var tpl_1 = require("../utils/tpl");
 var Checkbox_1 = (0, tslib_1.__importDefault)(require("../components/Checkbox"));
@@ -13,24 +12,26 @@ var QuickEdit_1 = (0, tslib_1.__importDefault)(require("./QuickEdit"));
 var PopOver_1 = (0, tslib_1.__importDefault)(require("./PopOver"));
 var Table_1 = require("./Table");
 var Copyable_1 = (0, tslib_1.__importDefault)(require("./Copyable"));
-var icons_1 = require("../components/icons");
 var omit = require("lodash/omit");
-var Card = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Card, _super);
-    function Card(props) {
+var Card_1 = require("../components/Card");
+var react_dom_1 = require("react-dom");
+var icons_1 = require("../components/icons");
+var CardRenderer = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(CardRenderer, _super);
+    function CardRenderer(props) {
         var _this = _super.call(this, props) || this;
-        _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);
         return _this;
     }
-    Card.prototype.handleClick = function (e) {
-        if ((0, helper_1.isClickOnInput)(e)) {
-            return;
-        }
+    CardRenderer.prototype.isHaveLink = function () {
+        var _a = this.props, href = _a.href, itemAction = _a.itemAction, onCheck = _a.onCheck, checkOnItemClick = _a.checkOnItemClick, checkable = _a.checkable;
+        return href || itemAction || onCheck || (checkOnItemClick && checkable);
+    };
+    CardRenderer.prototype.handleClick = function (e) {
         var _a = this.props, item = _a.item, href = _a.href, data = _a.data, env = _a.env, blank = _a.blank, itemAction = _a.itemAction, onAction = _a.onAction;
         if (href) {
             env.jumpTo((0, tpl_1.filter)(href, data), {
@@ -46,25 +47,32 @@ var Card = /** @class */ (function (_super) {
         }
         this.props.onCheck && this.props.onCheck(item);
     };
-    Card.prototype.handleCheck = function () {
+    CardRenderer.prototype.handleAction = function (e, action, ctx) {
+        var _a = this.props, onAction = _a.onAction, item = _a.item;
+        onAction && onAction(e, action, ctx || item.data);
+    };
+    CardRenderer.prototype.handleCheck = function (e) {
         var item = this.props.item;
         this.props.onCheck && this.props.onCheck(item);
     };
-    Card.prototype.handleAction = function (e, action, ctx) {
-        var _a = this.props, onAction = _a.onAction, item = _a.item;
-        onAction && onAction(e, action, ctx || item.data);
+    CardRenderer.prototype.getPopOverContainer = function () {
+        return (0, react_dom_1.findDOMNode)(this);
     };
-    Card.prototype.handleQuickChange = function (values, saveImmediately, savePristine, resetOnFailed) {
+    CardRenderer.prototype.handleQuickChange = function (values, saveImmediately, savePristine, resetOnFailed) {
         var _a = this.props, onQuickChange = _a.onQuickChange, item = _a.item;
         onQuickChange &&
             onQuickChange(item, values, saveImmediately, savePristine, resetOnFailed);
     };
-    Card.prototype.getPopOverContainer = function () {
-        return (0, react_dom_1.findDOMNode)(this);
-    };
-    Card.prototype.renderToolbar = function () {
-        var _a = this.props, dragging = _a.dragging, selectable = _a.selectable, checkable = _a.checkable, selected = _a.selected, onSelect = _a.onSelect, checkOnItemClick = _a.checkOnItemClick, multiple = _a.multiple, hideCheckToggler = _a.hideCheckToggler, cx = _a.classnames, ns = _a.classPrefix, toolbar = _a.toolbar, render = _a.render;
+    CardRenderer.prototype.renderToolbar = function () {
+        var _a = this.props, selectable = _a.selectable, checkable = _a.checkable, selected = _a.selected, checkOnItemClick = _a.checkOnItemClick, multiple = _a.multiple, hideCheckToggler = _a.hideCheckToggler, cx = _a.classnames, toolbar = _a.toolbar, render = _a.render, dragging = _a.dragging, data = _a.data, header = _a.header;
         var toolbars = [];
+        if (header) {
+            var highlightClassName = header.highlightClassName, highlightTpl = header.highlight;
+            var highlight = !!(0, tpl_1.evalExpression)(highlightTpl, data);
+            if (highlight) {
+                toolbars.push(react_1.default.createElement("i", { className: cx('Card-highlight', highlightClassName) }));
+            }
+        }
         if (selectable && !hideCheckToggler) {
             toolbars.push(react_1.default.createElement(Checkbox_1.default, { key: "check", className: cx('Card-checkbox'), type: multiple ? 'checkbox' : 'radio', disabled: !checkable, checked: selected, onChange: checkOnItemClick ? helper_1.noop : this.handleCheck }));
         }
@@ -75,9 +83,13 @@ var Card = /** @class */ (function (_super) {
                 }));
             });
         }
+        if (dragging) {
+            toolbars.push(react_1.default.createElement("div", { className: cx('Card-dragBtn') },
+                react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" })));
+        }
         return toolbars.length ? (react_1.default.createElement("div", { className: cx('Card-toolbar') }, toolbars)) : null;
     };
-    Card.prototype.renderActions = function () {
+    CardRenderer.prototype.renderActions = function () {
         var _this = this;
         var _a = this.props, actions = _a.actions, render = _a.render, dragging = _a.dragging, actionsCount = _a.actionsCount, data = _a.data, cx = _a.classnames;
         if (Array.isArray(actions)) {
@@ -95,9 +107,9 @@ var Card = /** @class */ (function (_super) {
                 });
             }))); });
         }
-        return null;
+        return;
     };
-    Card.prototype.renderChild = function (node, region, key) {
+    CardRenderer.prototype.renderChild = function (node, region, key) {
         if (region === void 0) { region = 'body'; }
         if (key === void 0) { key = 0; }
         var render = this.props.render;
@@ -113,10 +125,10 @@ var Card = /** @class */ (function (_super) {
         }
         return this.renderFeild(region, childNode, key, this.props);
     };
-    Card.prototype.itemRender = function (field, index, props) {
+    CardRenderer.prototype.itemRender = function (field, index, props) {
         return this.renderFeild("column/" + index, field, index, props);
     };
-    Card.prototype.renderFeild = function (region, field, key, props) {
+    CardRenderer.prototype.renderFeild = function (region, field, key, props) {
         var render = props.render, cx = props.classnames, itemIndex = props.itemIndex;
         var data = this.props.data;
         if (!(0, helper_1.isVisible)(field, data)) {
@@ -135,7 +147,7 @@ var Card = /** @class */ (function (_super) {
                 onQuickChange: this.handleQuickChange
             })));
     };
-    Card.prototype.renderBody = function () {
+    CardRenderer.prototype.renderBody = function () {
         var _this = this;
         var body = this.props.body;
         if (!body) {
@@ -148,89 +160,174 @@ var Card = /** @class */ (function (_super) {
         }
         return this.renderChild(body, 'body');
     };
-    Card.prototype.render = function () {
-        var _a = this.props, className = _a.className, data = _a.data, header = _a.header, render = _a.render, bodyClassName = _a.bodyClassName, highlightClassName = _a.highlightClassName, titleClassName = _a.titleClassName, subTitleClassName = _a.subTitleClassName, descClassName = _a.descClassName, checkOnItemClick = _a.checkOnItemClick, avatarClassName = _a.avatarClassName, checkable = _a.checkable, cx = _a.classnames, ns = _a.classPrefix, imageClassName = _a.imageClassName, avatarTextClassName = _a.avatarTextClassName, href = _a.href, itemAction = _a.itemAction, dragging = _a.dragging;
-        var toolbar = this.renderToolbar();
-        var heading = null;
-        if (header || toolbar) {
-            var _b = header || {}, highlightTpl = _b.highlight, avatarTpl = _b.avatar, avatarTextTpl = _b.avatarText, avatarTextBackground = _b.avatarTextBackground, titleTpl = _b.title, subTitleTpl = _b.subTitle, subTitlePlaceholder = _b.subTitlePlaceholder, descTpl = _b.desc;
-            var descPlaceholder = (header === null || header === void 0 ? void 0 : header.descriptionPlaceholder) || (header === null || header === void 0 ? void 0 : header.descPlaceholder);
-            var highlight = !!(0, tpl_1.evalExpression)(highlightTpl, data);
-            var avatar = (0, tpl_1.filter)(avatarTpl, data, '| raw');
-            var avatarText = (0, tpl_1.filter)(avatarTextTpl, data);
+    CardRenderer.prototype.rederTitle = function () {
+        var _a = this.props, render = _a.render, data = _a.data, header = _a.header;
+        if (header) {
+            var titleTpl = (header || {}).title;
             var title = (0, tpl_1.filter)(titleTpl, data);
+            return title ? render('title', titleTpl) : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderSubTitle = function () {
+        var _a = this.props, render = _a.render, data = _a.data, header = _a.header;
+        if (header) {
+            var subTitleTpl = (header || {}).subTitle;
             var subTitle = (0, tpl_1.filter)(subTitleTpl, data);
-            var desc = (0, tpl_1.filter)((header === null || header === void 0 ? void 0 : header.description) || descTpl, data);
+            return subTitle ? render('sub-title', subTitleTpl) : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderSubTitlePlaceholder = function () {
+        var _a = this.props, render = _a.render, header = _a.header, cx = _a.classnames;
+        if (header) {
+            var subTitlePlaceholder = (header || {}).subTitlePlaceholder;
+            return subTitlePlaceholder
+                ? render('sub-title', subTitlePlaceholder, {
+                    className: cx('Card-placeholder')
+                })
+                : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderDesc = function () {
+        var _a = this.props, render = _a.render, data = _a.data, header = _a.header;
+        if (header) {
+            var _b = header || {}, descTpl = _b.desc, descriptionTpl = _b.description;
+            var desc = (0, tpl_1.filter)(descriptionTpl || descTpl, data);
+            return desc
+                ? render('desc', descriptionTpl || descTpl, {
+                    className: !desc ? 'text-muted' : null
+                })
+                : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderDescPlaceholder = function () {
+        var _a = this.props, render = _a.render, header = _a.header;
+        if (header) {
+            var descPlaceholder = header.descriptionPlaceholder || header.descPlaceholder;
+            return descPlaceholder
+                ? render('desc', descPlaceholder, {
+                    className: !descPlaceholder ? 'text-muted' : null
+                })
+                : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderAvatar = function () {
+        var _a = this.props, data = _a.data, header = _a.header;
+        if (header) {
+            var avatarTpl = (header || {}).avatar;
+            var avatar = (0, tpl_1.filter)(avatarTpl, data, '| raw');
+            return avatar ? avatar : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderAvatarText = function () {
+        var _a = this.props, render = _a.render, data = _a.data, header = _a.header;
+        if (header) {
+            var avatarTextTpl = (header || {}).avatarText;
+            var avatarText = (0, tpl_1.filter)(avatarTextTpl, data);
+            return avatarText ? render('avatarText', avatarTextTpl) : undefined;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderSecondary = function () {
+        var _a = this.props, render = _a.render, data = _a.data, secondaryTextTpl = _a.secondary;
+        var secondary = (0, tpl_1.filter)(secondaryTextTpl, data);
+        return secondary ? render('secondary', secondaryTextTpl) : undefined;
+    };
+    CardRenderer.prototype.renderAvatarTextStyle = function () {
+        var _a = this.props, header = _a.header, data = _a.data;
+        if (header) {
+            var avatarTextTpl = header.avatarText, avatarTextBackground = header.avatarTextBackground;
+            var avatarText = (0, tpl_1.filter)(avatarTextTpl, data);
             var avatarTextStyle = {};
             if (avatarText && avatarTextBackground && avatarTextBackground.length) {
                 avatarTextStyle['background'] =
                     avatarTextBackground[Math.abs((0, helper_1.hashCode)(avatarText)) % avatarTextBackground.length];
             }
-            heading = (react_1.default.createElement("div", { className: cx('Card-heading', header === null || header === void 0 ? void 0 : header.className) },
-                avatar ? (react_1.default.createElement("span", { className: cx('Card-avtar', (header === null || header === void 0 ? void 0 : header.avatarClassName) || avatarClassName) },
-                    react_1.default.createElement("img", { className: cx('Card-img', (header === null || header === void 0 ? void 0 : header.imageClassName) || imageClassName), src: avatar }))) : avatarText ? (react_1.default.createElement("span", { className: cx('Card-avtarText', (header === null || header === void 0 ? void 0 : header.avatarTextClassName) || avatarTextClassName), style: avatarTextStyle }, avatarText)) : null,
-                react_1.default.createElement("div", { className: cx('Card-meta') },
-                    highlight ? (react_1.default.createElement("i", { className: cx('Card-highlight', (header === null || header === void 0 ? void 0 : header.highlightClassName) || highlightClassName) })) : null,
-                    title ? (react_1.default.createElement("div", { className: cx('Card-title', (header === null || header === void 0 ? void 0 : header.titleClassName) || titleClassName) }, render('title', titleTpl))) : null,
-                    subTitle || subTitlePlaceholder ? (react_1.default.createElement("div", { className: cx('Card-subTitle', (header === null || header === void 0 ? void 0 : header.subTitleClassName) || subTitleClassName) }, render('sub-title', subTitleTpl || subTitlePlaceholder, {
-                        className: cx(!subTitle ? 'Card-placeholder' : undefined)
-                    }))) : null,
-                    desc || descPlaceholder ? (react_1.default.createElement("div", { className: cx('Card-desc', (header === null || header === void 0 ? void 0 : header.descriptionClassName) ||
-                            (header === null || header === void 0 ? void 0 : header.descClassName) ||
-                            descClassName) }, render('desc', (header === null || header === void 0 ? void 0 : header.description) || descTpl, {
-                        className: !desc ? 'text-muted' : undefined
-                    }))) : null),
-                toolbar));
+            return avatarTextStyle;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderMedia = function () {
+        var _a = this.props, media = _a.media, cx = _a.classnames, render = _a.render, region = _a.region;
+        if (media) {
+            var type = media.type, url = media.url, className = media.className, autoPlay = media.autoPlay, isLive = media.isLive, poster = media.poster;
+            if (type === 'image' && url) {
+                return (react_1.default.createElement("img", { className: cx('Card-multiMedia-img', className), src: url }));
+            }
+            else if (type === 'video' && url) {
+                return (react_1.default.createElement("div", { className: cx('Card-multiMedia-video', className) }, render(region, {
+                    type: type,
+                    autoPlay: autoPlay,
+                    poster: poster,
+                    src: url,
+                    isLive: isLive
+                })));
+            }
         }
-        var body = this.renderBody();
-        return (react_1.default.createElement("div", { onClick: (checkOnItemClick && checkable) || href || itemAction
-                ? this.handleClick
-                : undefined, className: cx('Card', className, {
-                'Card--link': href || itemAction
-            }) },
-            dragging ? (react_1.default.createElement("div", { className: cx('Card-dragBtn') },
-                react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" }))) : null,
-            heading,
-            body ? (react_1.default.createElement("div", { className: cx('Card-body', bodyClassName) }, body)) : null,
-            this.renderActions()));
+        return;
+    };
+    CardRenderer.prototype.render = function () {
+        var _a = this.props, header = _a.header, className = _a.className, avatarClassName = _a.avatarClassName, avatarTextClassName = _a.avatarTextClassName, descClassName = _a.descClassName, descriptionClassName = _a.descriptionClassName, titleClassName = _a.titleClassName, subTitleClassName = _a.subTitleClassName, bodyClassName = _a.bodyClassName, imageClassName = _a.imageClassName, headerClassName = _a.headerClassName, secondaryClassName = _a.secondaryClassName, footerClassName = _a.footerClassName, mediaClassName = _a.mediaClassName, media = _a.media, rest = (0, tslib_1.__rest)(_a, ["header", "className", "avatarClassName", "avatarTextClassName", "descClassName", "descriptionClassName", "titleClassName", "subTitleClassName", "bodyClassName", "imageClassName", "headerClassName", "secondaryClassName", "footerClassName", "mediaClassName", "media"]);
+        var headerCn = (header === null || header === void 0 ? void 0 : header.className) || headerClassName;
+        var titleCn = (header === null || header === void 0 ? void 0 : header.titleClassName) || titleClassName;
+        var subTitleCn = (header === null || header === void 0 ? void 0 : header.subTitleClassName) || subTitleClassName;
+        var descCn = (header === null || header === void 0 ? void 0 : header.descClassName) || descClassName;
+        var descriptionCn = (header === null || header === void 0 ? void 0 : header.descriptionClassName) || descriptionClassName || descCn;
+        var avatarTextCn = (header === null || header === void 0 ? void 0 : header.avatarTextClassName) || avatarTextClassName;
+        var avatarCn = (header === null || header === void 0 ? void 0 : header.avatarClassName) || avatarClassName;
+        var imageCn = (header === null || header === void 0 ? void 0 : header.imageClassName) || imageClassName;
+        var mediaPosition = media === null || media === void 0 ? void 0 : media.position;
+        return (react_1.default.createElement(Card_1.Card, (0, tslib_1.__assign)({}, 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.defaultProps = {
+    CardRenderer.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
     };
-    Card.propsList = [
+    CardRenderer.propsList = [
         'avatarClassName',
+        'avatarTextClassName',
         'bodyClassName',
         'actionsCount',
         'titleClassName',
         'highlightClassName',
         'subTitleClassName',
         'descClassName',
+        'descriptionClassName',
+        'imageClassName',
         'hideCheckToggler'
     ];
-    return Card;
-}(react_1.default.Component));
-exports.Card = Card;
-var CardRenderer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(CardRenderer, _super);
-    function CardRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CardRenderer.propsList = (0, tslib_1.__spreadArray)(['multiple'], Card.propsList, true);
     CardRenderer = (0, tslib_1.__decorate)([
         (0, factory_1.Renderer)({
             type: 'card'
-        })
+        }),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object])
     ], CardRenderer);
     return CardRenderer;
-}(Card));
+}(react_1.default.Component));
 exports.CardRenderer = CardRenderer;
 var CardItemFieldRenderer = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(CardItemFieldRenderer, _super);