amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/Calendar.d.ts

@@ -0,0 +1,45 @@
+import { SchemaObject, BaseSchema } from '../Schema';
+import { DateControlRenderer } from './Form/InputDate';
+interface scheduleItem {
+    startTime: string;
+    endTime: string;
+    content: any;
+    className?: string;
+}
+export interface CalendarSchema extends BaseSchema {
+    /**
+     * 指定为日历选择控件
+     */
+    type: 'calendar';
+    /**
+     * 日程
+     */
+    schedules?: Array<scheduleItem> | string;
+    /**
+     * 日程显示颜色自定义
+     */
+    scheduleClassNames?: Array<string>;
+    /**
+     * 日程点击展示
+     */
+    scheduleAction?: SchemaObject;
+}
+export declare class CalendarRenderer extends DateControlRenderer {
+    static defaultProps: {
+        embed: boolean;
+        placeholder: string;
+        dateFormat: string;
+        timeFormat: string;
+        strictMode: boolean;
+        format: string;
+        viewMode: string;
+        inputFormat: string;
+        timeConstraints: {
+            minutes: {
+                step: number;
+            };
+        };
+        clearable: boolean;
+    };
+}
+export {};

package/esm/renderers/Calendar.js

@@ -0,0 +1,22 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import { Renderer } from 'amis-core';
+import { DateControlRenderer } from './Form/InputDate.js';
+
+/** @class */ ((function (_super) {
+    __extends(CalendarRenderer, _super);
+    function CalendarRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CalendarRenderer.defaultProps = __assign(__assign({}, DateControlRenderer.defaultProps), { embed: true });
+    CalendarRenderer = __decorate([
+        Renderer({
+            type: 'calendar'
+        })
+    ], CalendarRenderer);
+    return CalendarRenderer;
+})(DateControlRenderer));

package/esm/renderers/Card.d.ts

@@ -0,0 +1,236 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { SchemaNode, Schema, ActionObject, PlainObject } from 'amis-core';
+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 type { IItem } from 'amis-core/lib/store/list';
+export declare type CardBodyField = SchemaObject & {
+    /**
+     * 列标题
+     */
+    label: string;
+    /**
+     * label 类名
+     */
+    labelClassName?: SchemaClassName;
+    /**
+     * 绑定字段名
+     */
+    name?: string;
+    /**
+     * 配置查看详情功能
+     */
+    popOver?: SchemaPopOver;
+    /**
+     * 配置快速编辑功能
+     */
+    quickEdit?: SchemaQuickEdit;
+    /**
+     * 配置点击复制功能
+     */
+    copyable?: SchemaCopyable;
+};
+/**
+ * Card 卡片渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
+ */
+export interface CardSchema extends BaseSchema {
+    /**
+     * 指定为 card 类型
+     */
+    type: 'card';
+    /**
+     * 头部配置
+     */
+    header?: {
+        className?: SchemaClassName;
+        /**
+         * 标题
+         */
+        title?: SchemaTpl;
+        titleClassName?: SchemaClassName;
+        /**
+         * 副标题
+         */
+        subTitle?: SchemaTpl;
+        subTitleClassName?: SchemaClassName;
+        subTitlePlaceholder?: string;
+        /**
+         * 描述
+         */
+        description?: SchemaTpl;
+        /**
+         * 描述占位内容
+         */
+        descriptionPlaceholder?: string;
+        /**
+         * 描述占位类名
+         */
+        descriptionClassName?: SchemaClassName;
+        /**
+         * @deprecated 建议用 description
+         */
+        desc?: SchemaTpl;
+        /**
+         * @deprecated 建议用 descriptionPlaceholder
+         */
+        descPlaceholder?: SchemaTpl;
+        /**
+         * @deprecated 建议用 descriptionClassName
+         */
+        descClassName?: SchemaClassName;
+        /**
+         * 图片地址
+         */
+        avatar?: SchemaUrlPath;
+        avatarText?: SchemaTpl;
+        avatarTextBackground?: String[];
+        avatarTextClassName?: SchemaClassName;
+        /**
+         * 图片包括层类名
+         */
+        avatarClassName?: SchemaClassName;
+        /**
+         * 图片类名。
+         */
+        imageClassName?: SchemaClassName;
+        /**
+         * 是否点亮
+         */
+        highlight?: SchemaExpression;
+        highlightClassName?: SchemaClassName;
+        /**
+         * 链接地址
+         */
+        href?: SchemaTpl;
+        /**
+         * 是否新窗口打开
+         */
+        blank?: boolean;
+    };
+    /**
+     * 内容区域
+     */
+    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;
+    };
+    /**
+     * 底部按钮集合。
+     */
+    actions?: Array<ActionSchema>;
+    /**
+     * 工具栏按钮
+     */
+    toolbar?: Array<ActionSchema>;
+    /**
+     * 次要说明
+     */
+    secondary?: SchemaTpl;
+    /**
+     * 卡片内容区的表单项label是否使用Card内部的样式，默认为true
+     */
+    useCardLabel?: boolean;
+}
+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;
+    hideCheckToggler?: boolean;
+    item: IItem;
+    checkOnItemClick?: boolean;
+}
+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;
+        useCardLabel: boolean;
+    };
+    static propsList: Array<string>;
+    constructor(props: CardProps);
+    isHaveLink(): any;
+    handleClick(e: React.MouseEvent<HTMLDivElement>): void;
+    handleAction(e: React.UIEvent<any>, action: ActionObject, ctx: object): 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[] | undefined;
+    renderChild(node: SchemaNode, region?: string, key?: any): React.ReactNode;
+    itemRender(field: any, index: number, props: any): JSX.Element | undefined;
+    renderFeild(region: string, field: Schema, 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 CardItemFieldRenderer extends TableCell {
+    static defaultProps: {
+        wrapperComponent: string;
+    };
+    static propsList: string[];
+    render(): JSX.Element;
+}

package/esm/renderers/Card.js

@@ -0,0 +1,376 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __rest, __decorate, __metadata, __spreadArray } from 'tslib';
+import React from 'react';
+import omit from 'lodash/omit';
+import merge from 'lodash/merge';
+import { filter, evalExpression, noop, padArr, isVisible, isDisabled, resolveVariable, hashCode, resolveVariableAndFilter, Renderer } from 'amis-core';
+import { Checkbox, Icon, Card } from 'amis-ui';
+import { HocQuickEdit } from './QuickEdit.js';
+import { HocPopOver } from './PopOver.js';
+import './Table/index.js';
+import { HocCopyable } from './Copyable.js';
+import { findDOMNode } from 'react-dom';
+import { TableCell } from './Table/TableCell.js';
+
+var CardRenderer = /** @class */ (function (_super) {
+    __extends(CardRenderer, _super);
+    function CardRenderer(props) {
+        var _this = _super.call(this, props) || 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;
+    }
+    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, onCheck = _a.onCheck, selectable = _a.selectable;
+        if (href) {
+            env.jumpTo(filter(href, data), {
+                type: 'button',
+                actionType: 'url',
+                blank: blank
+            });
+            return;
+        }
+        if (itemAction) {
+            onAction && onAction(e, itemAction, (item === null || item === void 0 ? void 0 : item.data) || data);
+            return;
+        }
+        selectable && (onCheck === null || onCheck === void 0 ? void 0 : onCheck(item));
+    };
+    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);
+    };
+    CardRenderer.prototype.getPopOverContainer = function () {
+        return findDOMNode(this);
+    };
+    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);
+    };
+    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, highlight = header.highlight;
+            if (typeof highlight === 'string'
+                ? evalExpression(highlight, data)
+                : highlight) {
+                toolbars.push(React.createElement("i", { key: "highlight", className: cx('Card-highlight', highlightClassName) }));
+            }
+        }
+        if (selectable && !hideCheckToggler) {
+            toolbars.push(React.createElement(Checkbox, { key: "check", className: cx('Card-checkbox'), type: multiple ? 'checkbox' : 'radio', disabled: !checkable, checked: selected, onChange: checkOnItemClick ? noop : this.handleCheck }));
+        }
+        if (Array.isArray(toolbar)) {
+            toolbar.forEach(function (action, index) {
+                return toolbars.push(render("toolbar/".concat(index), __assign({ type: 'button', level: 'link', size: 'sm' }, action), {
+                    key: index
+                }));
+            });
+        }
+        if (dragging) {
+            toolbars.push(React.createElement("div", { className: cx('Card-dragBtn') },
+                React.createElement(Icon, { icon: "drag-bar", className: "icon" })));
+        }
+        return toolbars.length ? (React.createElement("div", { className: cx('Card-toolbar') }, toolbars)) : null;
+    };
+    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)) {
+            var group = padArr(actions.filter(function (item) { return isVisible(item, data); }), actionsCount);
+            return group.map(function (actions, groupIndex) { return (React.createElement("div", { key: groupIndex, className: cx('Card-actions') }, actions.map(function (action, index) {
+                var size = action.size || 'sm';
+                return render("action/".concat(index), __assign(__assign({ level: 'link', type: 'button' }, action), { size: size }), {
+                    isMenuItem: true,
+                    key: index,
+                    index: index,
+                    disabled: dragging || isDisabled(action, data),
+                    className: cx('Card-action', action.className || "".concat(size ? "Card-action--".concat(size) : '')),
+                    componentClass: 'a',
+                    onAction: _this.handleAction
+                });
+            }))); });
+        }
+        return;
+    };
+    CardRenderer.prototype.renderChild = function (node, region, key) {
+        if (region === void 0) { region = 'body'; }
+        if (key === void 0) { key = 0; }
+        var render = this.props.render;
+        if (typeof node === 'string' || typeof node === 'number') {
+            return render(region, node, { key: key });
+        }
+        var childNode = node;
+        if (childNode.type === 'hbox' || childNode.type === 'grid') {
+            return render(region, node, {
+                key: key,
+                itemRender: this.itemRender
+            });
+        }
+        return this.renderFeild(region, childNode, key, this.props);
+    };
+    CardRenderer.prototype.itemRender = function (field, index, props) {
+        return this.renderFeild("column/".concat(index), field, index, props);
+    };
+    CardRenderer.prototype.renderFeild = function (region, field, key, props) {
+        var render = props.render, cx = props.classnames, itemIndex = props.itemIndex, useCardLabel = props.useCardLabel;
+        var data = this.props.data;
+        if (!field || !isVisible(field, data)) {
+            return;
+        }
+        var $$id = field.$$id ? "".concat(field.$$id, "-field") : '';
+        return (React.createElement("div", { className: cx('Card-field'), key: key },
+            useCardLabel && field.label ? (React.createElement("label", { className: cx('Card-fieldLabel', field.labelClassName) }, field.label)) : null,
+            render(region, merge(__assign(__assign({}, field), { field: field, $$id: $$id, type: 'card-item-field' }), useCardLabel
+                ? { label: false, field: __assign(__assign({}, field), { label: false }) }
+                : {}), {
+                className: cx('Card-fieldValue', field.className),
+                rowIndex: itemIndex,
+                colIndex: key,
+                value: field.name ? resolveVariable(field.name, data) : undefined,
+                popOverContainer: this.getPopOverContainer,
+                onAction: this.handleAction,
+                onQuickChange: this.handleQuickChange
+            })));
+    };
+    CardRenderer.prototype.renderBody = function () {
+        var _this = this;
+        var body = this.props.body;
+        if (!body) {
+            return null;
+        }
+        if (Array.isArray(body)) {
+            return body.map(function (child, index) {
+                return _this.renderChild(child, "body/".concat(index), index);
+            });
+        }
+        return this.renderChild(body, 'body');
+    };
+    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 = 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 = filter(subTitleTpl, 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 = 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 = 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 = 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 = 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 = filter(avatarTextTpl, data);
+            var avatarTextStyle = {};
+            if (avatarText && avatarTextBackground && avatarTextBackground.length) {
+                avatarTextStyle['background'] =
+                    avatarTextBackground[Math.abs(hashCode(avatarText)) % avatarTextBackground.length];
+            }
+            return avatarTextStyle;
+        }
+        return;
+    };
+    CardRenderer.prototype.renderMedia = function () {
+        var _a = this.props, media = _a.media, cx = _a.classnames, render = _a.render, region = _a.region, data = _a.data;
+        if (media) {
+            var type = media.type, url = media.url, className = media.className, autoPlay = media.autoPlay, isLive = media.isLive, poster = media.poster;
+            var mediaUrl = resolveVariableAndFilter(url, data, '| raw');
+            if (type === 'image' && mediaUrl) {
+                return (React.createElement("img", { className: cx('Card-multiMedia-img', className), src: mediaUrl }));
+            }
+            else if (type === 'video' && mediaUrl) {
+                return (React.createElement("div", { className: cx('Card-multiMedia-video', className) }, render(region, {
+                    type: type,
+                    autoPlay: autoPlay,
+                    poster: poster,
+                    src: mediaUrl,
+                    isLive: isLive
+                })));
+            }
+        }
+        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; _a.mediaClassName; var media = _a.media, rest = __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.createElement(Card, __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 })));
+    };
+    CardRenderer.defaultProps = {
+        className: '',
+        avatarClassName: '',
+        headerClassName: '',
+        footerClassName: '',
+        secondaryClassName: '',
+        avatarTextClassName: '',
+        bodyClassName: '',
+        actionsCount: 4,
+        titleClassName: '',
+        highlightClassName: '',
+        subTitleClassName: '',
+        descClassName: '',
+        descriptionClassName: '',
+        imageClassName: '',
+        highlight: false,
+        blank: true,
+        dragging: false,
+        selectable: false,
+        checkable: true,
+        selected: false,
+        hideCheckToggler: false,
+        useCardLabel: true
+    };
+    CardRenderer.propsList = [
+        'avatarClassName',
+        'avatarTextClassName',
+        'bodyClassName',
+        'actionsCount',
+        'titleClassName',
+        'highlightClassName',
+        'subTitleClassName',
+        'descClassName',
+        'descriptionClassName',
+        'imageClassName',
+        'hideCheckToggler'
+    ];
+    CardRenderer = __decorate([
+        Renderer({
+            type: 'card'
+        }),
+        __metadata("design:paramtypes", [Object])
+    ], CardRenderer);
+    return CardRenderer;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(CardItemFieldRenderer, _super);
+    function CardItemFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CardItemFieldRenderer.prototype.render = function () {
+        var _a = this.props; _a.type; var className = _a.className, render = _a.render, style = _a.style, Component = _a.wrapperComponent; _a.labelClassName; var value = _a.value, data = _a.data, children = _a.children, width = _a.width, innerClassName = _a.innerClassName; _a.label; var tabIndex = _a.tabIndex, onKeyUp = _a.onKeyUp, field = _a.field, rest = __rest(_a, ["type", "className", "render", "style", "wrapperComponent", "labelClassName", "value", "data", "children", "width", "innerClassName", "label", "tabIndex", "onKeyUp", "field"]);
+        var schema = __assign(__assign({}, field), { className: innerClassName, type: (field && field.type) || 'plain' });
+        var body = children
+            ? children
+            : render('field', schema, __assign(__assign({}, omit(rest, Object.keys(schema))), { value: value, data: data }));
+        if (width) {
+            style = style || {};
+            style.width = style.width || width;
+            body = (React.createElement("div", { style: { width: !/%/.test(String(width)) ? width : '' } }, body));
+        }
+        if (!Component) {
+            return body;
+        }
+        return (React.createElement(Component, { style: style, className: className, tabIndex: tabIndex, onKeyUp: onKeyUp }, body));
+    };
+    CardItemFieldRenderer.defaultProps = __assign(__assign({}, TableCell.defaultProps), { wrapperComponent: 'div' });
+    CardItemFieldRenderer.propsList = __spreadArray([
+        'quickEdit',
+        'quickEditEnabledOn',
+        'popOver',
+        'copyable',
+        'inline'
+    ], TableCell.propsList, true);
+    CardItemFieldRenderer = __decorate([
+        Renderer({
+            type: 'card-item-field'
+        }),
+        HocQuickEdit(),
+        HocPopOver(),
+        HocCopyable()
+    ], CardItemFieldRenderer);
+    return CardItemFieldRenderer;
+})(TableCell));
+
+export { CardRenderer };