acud
Version:
acg react 组件库
238 lines (237 loc) • 13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getAction = exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
var _row = _interopRequireDefault(require("../row"));
var _col = _interopRequireDefault(require("../col"));
var _tabs = _interopRequireDefault(require("../tabs"));
var _configProvider = require("../config-provider");
var _Meta = _interopRequireDefault(require("./Meta"));
var _Grid = _interopRequireDefault(require("./Grid"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* @file card/Card
* @author chenyaqiu
*/
var __rest = void 0 && (void 0).__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;
};
var getAction = exports.getAction = function getAction(actions) {
var actionList = actions.map(function (action, index) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
_react["default"].createElement("li", {
key: "action-".concat(index)
}, /*#__PURE__*/_react["default"].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["default"].useContext(_configProvider.ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var cardPrefixCls = getPrefixCls('card', prefixCls);
var divProps = (0, _omit["default"])(restProps, ['onTabChange']);
var _useState = (0, _react.useState)(isCardSelected),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isSelected = _useState2[0],
setIsSelected = _useState2[1];
var isContainGrid = function isContainGrid() {
var containGrid;
_react["default"].Children.forEach(children, function (element) {
if (element && element.type && element.type === _Grid["default"]) {
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["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-loading-block")
});
var loadingBlock = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-loading-content"),
style: loadingBlockStyle
}, /*#__PURE__*/_react["default"].createElement(_row["default"], {
gutter: 8
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 22
}, block)), /*#__PURE__*/_react["default"].createElement(_row["default"], {
gutter: 8
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 8
}, block), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 15
}, block)), /*#__PURE__*/_react["default"].createElement(_row["default"], {
gutter: 8
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 6
}, block), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 18
}, block)), /*#__PURE__*/_react["default"].createElement(_row["default"], {
gutter: 8
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 13
}, block), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 9
}, block)), /*#__PURE__*/_react["default"].createElement(_row["default"], {
gutter: 8
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 4
}, block), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 3
}, block), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 16
}, block)));
var hasActiveTabKey = activeTabKey !== undefined;
var extraProps = (0, _extends3["default"])((0, _extends3["default"])({}, tabProps), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey), "tabBarExtraContent", tabBarExtraContent));
var head;
var footer;
var body;
var coverDom = cover ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-cover")
}, cover) : null;
var actionDom = actions && actions.length ? /*#__PURE__*/_react["default"].createElement("ul", {
className: "".concat(cardPrefixCls, "-actions")
}, getAction(actions)) : null;
var actionsExtraDom = actionsExtra && actionsExtra.length ? /*#__PURE__*/_react["default"].createElement("ul", {
className: "".concat(cardPrefixCls, "-actionsExtra")
}, getAction(actionsExtra)) : null;
var actionRender = actionDom || actionsExtraDom ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-actions-wrap")
}, actionDom, actionsExtraDom) : null;
var tabs = tabList && tabList.length ? /*#__PURE__*/_react["default"].createElement(_tabs["default"], (0, _extends3["default"])({
size: "large"
}, extraProps, {
className: "".concat(cardPrefixCls, "-head-tabs"),
onChange: onTabChange
}), tabList.map(function (item) {
return /*#__PURE__*/_react["default"].createElement(_tabs["default"].TabPane, {
tab: item.tab,
disabled: item.disabled,
key: item.key
});
})) : null;
if (children) {
body = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-body"),
style: bodyStyle
}, loading ? loadingBlock : children);
}
if (title || extra || tabs) {
var titleClassName = (0, _classnames["default"])("".concat(cardPrefixCls, "-head-title"), (0, _defineProperty2["default"])({}, "".concat(cardPrefixCls, "-head-title-with-tabs"), !!tabs));
var extraClassName = (0, _classnames["default"])("".concat(cardPrefixCls, "-head-extra"), (0, _defineProperty2["default"])({}, "".concat(cardPrefixCls, "-head-extra-with-tabs"), !!tabs));
head = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-head"),
style: headStyle
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-head-wrapper")
}, title && /*#__PURE__*/_react["default"].createElement("div", {
className: titleClassName
}, title), extra && /*#__PURE__*/_react["default"].createElement("div", {
className: extraClassName
}, extra)), tabs);
}
if (description || footerExtra) {
footer = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-footer"),
style: footerStyle
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-footer-wrapper")
}, description && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-footer-description")
}, description), footerExtra && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-footer-extra")
}, footerExtra)));
}
var simpleCardRedner = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-simple-con")
}, body, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-simple-con-description")
}, description));
var cardRender = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-con ").concat(multiMedia ? 'hasImage' : '', " ").concat(multiMediaPosition)
}, !!multiMedia && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-con-image ").concat(multiMediaPosition)
}, multiMedia), /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(cardPrefixCls, "-con-wrap ").concat(multiMedia ? "".concat(multiMediaPosition === 'left' ? 'right' : 'left') : '')
}, head, coverDom, body, footer, actionRender));
var classString = (0, _classnames["default"])(cardPrefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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));
(0, _react.useEffect)(function () {
isCardSelected !== undefined && setIsSelected(isCardSelected);
}, [isCardSelected]);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends3["default"])({}, divProps, {
className: classString,
"aria-disabled": simple && disabled,
style: style,
onClick: handleCardClick
}), simple ? simpleCardRedner : cardRender);
};
Card.Grid = _Grid["default"];
Card.Meta = _Meta["default"];
var _default = exports["default"] = Card;