acud
Version:
acg react 组件库
229 lines • 10.6 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* @file card/Card
* @author chenyaqiu
*/
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import omit from "rc-util/es/omit";
import Row from '../row';
import Col from '../col';
import Tabs from '../tabs';
import { ConfigContext } from '../config-provider';
import Meta from './Meta';
import Grid from './Grid';
export var getAction = function getAction(actions) {
var actionList = actions.map(function (action, index) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement("li", {
key: "action-".concat(index)
}, /*#__PURE__*/React.createElement("span", null, action))
);
});
return actionList;
};
;
;
;
var Card = function Card(_a) {
var prefixCls = _a.prefixCls,
simple = _a.simple,
description = _a.description,
disabled = _a.disabled,
footerExtra = _a.footerExtra,
footerStyle = _a.footerStyle,
children = _a.children,
loading = _a.loading,
_a$headStyle = _a.headStyle,
headStyle = _a$headStyle === void 0 ? {} : _a$headStyle,
_a$bodyStyle = _a.bodyStyle,
bodyStyle = _a$bodyStyle === void 0 ? {} : _a$bodyStyle,
_a$style = _a.style,
style = _a$style === void 0 ? {} : _a$style,
_a$bordered = _a.bordered,
bordered = _a$bordered === void 0 ? true : _a$bordered,
isCardSelected = _a.isSelected,
onSelect = _a.onSelect,
type = _a.type,
title = _a.title,
extra = _a.extra,
cover = _a.cover,
actions = _a.actions,
actionsExtra = _a.actionsExtra,
multiMedia = _a.multiMedia,
_a$multiMediaPosition = _a.multiMediaPosition,
multiMediaPosition = _a$multiMediaPosition === void 0 ? 'left' : _a$multiMediaPosition,
tabList = _a.tabList,
activeTabKey = _a.activeTabKey,
defaultActiveTabKey = _a.defaultActiveTabKey,
tabBarExtraContent = _a.tabBarExtraContent,
hoverable = _a.hoverable,
_a$tabProps = _a.tabProps,
tabProps = _a$tabProps === void 0 ? {} : _a$tabProps,
_a$className = _a.className,
className = _a$className === void 0 ? '' : _a$className,
restProps = __rest(_a, ["prefixCls", "simple", "description", "disabled", "footerExtra", "footerStyle", "children", "loading", "headStyle", "bodyStyle", "style", "bordered", "isSelected", "onSelect", "type", "title", "extra", "cover", "actions", "actionsExtra", "multiMedia", "multiMediaPosition", "tabList", "activeTabKey", "defaultActiveTabKey", "tabBarExtraContent", "hoverable", "tabProps", "className"]);
var _React$useContext = React.useContext(ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var cardPrefixCls = getPrefixCls('card', prefixCls);
var divProps = omit(restProps, ['onTabChange']);
var _useState = useState(isCardSelected),
_useState2 = _slicedToArray(_useState, 2),
isSelected = _useState2[0],
setIsSelected = _useState2[1];
var isContainGrid = function isContainGrid() {
var containGrid;
React.Children.forEach(children, function (element) {
if (element && element.type && element.type === Grid) {
containGrid = true;
}
});
return containGrid;
};
var onTabChange = function onTabChange(key) {
var _a;
return (_a = restProps.onTabChange) === null || _a === void 0 ? void 0 : _a.call(restProps, key);
};
var handleCardClick = function handleCardClick() {
onSelect && onSelect(divProps);
};
var loadingBlockStyle = (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) === 0 || (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) === '0px' ? {
padding: 24
} : undefined;
var block = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-loading-block")
});
var loadingBlock = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-loading-content"),
style: loadingBlockStyle
}, /*#__PURE__*/React.createElement(Row, {
gutter: 8
}, /*#__PURE__*/React.createElement(Col, {
span: 22
}, block)), /*#__PURE__*/React.createElement(Row, {
gutter: 8
}, /*#__PURE__*/React.createElement(Col, {
span: 8
}, block), /*#__PURE__*/React.createElement(Col, {
span: 15
}, block)), /*#__PURE__*/React.createElement(Row, {
gutter: 8
}, /*#__PURE__*/React.createElement(Col, {
span: 6
}, block), /*#__PURE__*/React.createElement(Col, {
span: 18
}, block)), /*#__PURE__*/React.createElement(Row, {
gutter: 8
}, /*#__PURE__*/React.createElement(Col, {
span: 13
}, block), /*#__PURE__*/React.createElement(Col, {
span: 9
}, block)), /*#__PURE__*/React.createElement(Row, {
gutter: 8
}, /*#__PURE__*/React.createElement(Col, {
span: 4
}, block), /*#__PURE__*/React.createElement(Col, {
span: 3
}, block), /*#__PURE__*/React.createElement(Col, {
span: 16
}, block)));
var hasActiveTabKey = activeTabKey !== undefined;
var extraProps = _extends(_extends({}, tabProps), _defineProperty(_defineProperty({}, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey), "tabBarExtraContent", tabBarExtraContent));
var head;
var footer;
var body;
var coverDom = cover ? /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-cover")
}, cover) : null;
var actionDom = actions && actions.length ? /*#__PURE__*/React.createElement("ul", {
className: "".concat(cardPrefixCls, "-actions")
}, getAction(actions)) : null;
var actionsExtraDom = actionsExtra && actionsExtra.length ? /*#__PURE__*/React.createElement("ul", {
className: "".concat(cardPrefixCls, "-actionsExtra")
}, getAction(actionsExtra)) : null;
var actionRender = actionDom || actionsExtraDom ? /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-actions-wrap")
}, actionDom, actionsExtraDom) : null;
var tabs = tabList && tabList.length ? /*#__PURE__*/React.createElement(Tabs, _extends({
size: "large"
}, extraProps, {
className: "".concat(cardPrefixCls, "-head-tabs"),
onChange: onTabChange
}), tabList.map(function (item) {
return /*#__PURE__*/React.createElement(Tabs.TabPane, {
tab: item.tab,
disabled: item.disabled,
key: item.key
});
})) : null;
if (children) {
body = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-body"),
style: bodyStyle
}, loading ? loadingBlock : children);
}
if (title || extra || tabs) {
var titleClassName = classNames("".concat(cardPrefixCls, "-head-title"), _defineProperty({}, "".concat(cardPrefixCls, "-head-title-with-tabs"), !!tabs));
var extraClassName = classNames("".concat(cardPrefixCls, "-head-extra"), _defineProperty({}, "".concat(cardPrefixCls, "-head-extra-with-tabs"), !!tabs));
head = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-head"),
style: headStyle
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-head-wrapper")
}, title && /*#__PURE__*/React.createElement("div", {
className: titleClassName
}, title), extra && /*#__PURE__*/React.createElement("div", {
className: extraClassName
}, extra)), tabs);
}
if (description || footerExtra) {
footer = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-footer"),
style: footerStyle
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-footer-wrapper")
}, description && /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-footer-description")
}, description), footerExtra && /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-footer-extra")
}, footerExtra)));
}
var simpleCardRedner = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-simple-con")
}, body, /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-simple-con-description")
}, description));
var cardRender = /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-con ").concat(multiMedia ? 'hasImage' : '', " ").concat(multiMediaPosition)
}, !!multiMedia && /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-con-image ").concat(multiMediaPosition)
}, multiMedia), /*#__PURE__*/React.createElement("div", {
className: "".concat(cardPrefixCls, "-con-wrap ").concat(multiMedia ? "".concat(multiMediaPosition === 'left' ? 'right' : 'left') : '')
}, head, coverDom, body, footer, actionRender));
var classString = classNames(cardPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cardPrefixCls, "-loading"), loading), "".concat(cardPrefixCls, "-bordered"), bordered), "".concat(cardPrefixCls, "-hoverable"), hoverable), "".concat(cardPrefixCls, "-contain-grid"), isContainGrid()), "".concat(cardPrefixCls, "-contain-tabs"), tabList && tabList.length), "".concat(cardPrefixCls, "-type-").concat(type), !!type), "".concat(cardPrefixCls, "-rtl"), direction === 'rtl'), "".concat(cardPrefixCls, "-simple"), simple), "".concat(cardPrefixCls, "-selected"), isSelected), className, !!className));
useEffect(function () {
isCardSelected !== undefined && setIsSelected(isCardSelected);
}, [isCardSelected]);
return /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
className: classString,
"aria-disabled": simple && disabled,
style: style,
onClick: handleCardClick
}), simple ? simpleCardRedner : cardRender);
};
Card.Grid = Grid;
Card.Meta = Meta;
export default Card;