1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3 | import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
5 | import _createClass from "@babel/runtime/helpers/createClass";
|
6 | import _inherits from "@babel/runtime/helpers/inherits";
|
7 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
8 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
9 |
|
10 | function _createSuper(Derived) {
|
11 | function isNativeReflectConstruct() {
|
12 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
13 | if (Reflect.construct.sham) return false;
|
14 | if (typeof Proxy === "function") return true;
|
15 |
|
16 | try {
|
17 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
18 | return true;
|
19 | } catch (e) {
|
20 | return false;
|
21 | }
|
22 | }
|
23 |
|
24 | return function () {
|
25 | var Super = _getPrototypeOf(Derived),
|
26 | result;
|
27 |
|
28 | if (isNativeReflectConstruct()) {
|
29 | var NewTarget = _getPrototypeOf(this).constructor;
|
30 |
|
31 | result = Reflect.construct(Super, arguments, NewTarget);
|
32 | } else {
|
33 | result = Super.apply(this, arguments);
|
34 | }
|
35 |
|
36 | return _possibleConstructorReturn(this, result);
|
37 | };
|
38 | }
|
39 |
|
40 | import { __decorate } from "tslib";
|
41 | import React, { Children, Component } from 'react';
|
42 | import classNames from 'classnames';
|
43 | import omit from 'lodash/omit';
|
44 | import { Size } from '../_util/enum';
|
45 | import Grid from './Grid';
|
46 | import Meta from './Meta';
|
47 | import Tabs from '../tabs';
|
48 | import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
49 | import warning from '../_util/warning';
|
50 | import addEventListener from '../_util/addEventListener';
|
51 | import { getPrefixCls } from '../configure';
|
52 |
|
53 | var Card =
|
54 |
|
55 | function (_Component) {
|
56 | _inherits(Card, _Component);
|
57 |
|
58 | var _super = _createSuper(Card);
|
59 |
|
60 | function Card() {
|
61 | var _this;
|
62 |
|
63 | _classCallCheck(this, Card);
|
64 |
|
65 | _this = _super.apply(this, arguments);
|
66 | _this.state = {
|
67 | widerPadding: false
|
68 | };
|
69 |
|
70 | _this.onTabChange = function (key) {
|
71 | var onTabChange = _this.props.onTabChange;
|
72 |
|
73 | if (onTabChange) {
|
74 | onTabChange(key);
|
75 | }
|
76 | };
|
77 |
|
78 | _this.saveRef = function (node) {
|
79 | _this.container = node;
|
80 | };
|
81 |
|
82 | return _this;
|
83 | }
|
84 |
|
85 | _createClass(Card, [{
|
86 | key: "componentDidMount",
|
87 | value: function componentDidMount() {
|
88 | this.updateWiderPadding();
|
89 | this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding);
|
90 |
|
91 | if ('noHovering' in this.props) {
|
92 | var noHovering = this.props.noHovering;
|
93 | warning(!noHovering, '`noHovering` of Card is deperated, you can remove it safely or use `hoverable` instead.');
|
94 | warning(!!noHovering, '`noHovering={false}` of Card is deperated, use `hoverable` instead.');
|
95 | }
|
96 | }
|
97 | }, {
|
98 | key: "componentWillUnmount",
|
99 | value: function componentWillUnmount() {
|
100 | if (this.resizeEvent) {
|
101 | this.resizeEvent.remove();
|
102 | }
|
103 |
|
104 | this.updateWiderPadding.cancel();
|
105 | }
|
106 | }, {
|
107 | key: "updateWiderPadding",
|
108 | value: function updateWiderPadding() {
|
109 | var _this2 = this;
|
110 |
|
111 | if (!this.container) {
|
112 | return;
|
113 | }
|
114 |
|
115 |
|
116 | var WIDTH_BOUDARY_PX = 936;
|
117 | var widerPadding = this.state.widerPadding;
|
118 |
|
119 | if (this.container.offsetWidth >= WIDTH_BOUDARY_PX && !widerPadding) {
|
120 | this.setState({
|
121 | widerPadding: true
|
122 | }, function () {
|
123 | _this2.updateWiderPaddingCalled = true;
|
124 | });
|
125 | }
|
126 |
|
127 | if (this.container.offsetWidth < WIDTH_BOUDARY_PX && widerPadding) {
|
128 | this.setState({
|
129 | widerPadding: false
|
130 | }, function () {
|
131 | _this2.updateWiderPaddingCalled = true;
|
132 | });
|
133 | }
|
134 | }
|
135 | }, {
|
136 | key: "isContainGrid",
|
137 | value: function isContainGrid() {
|
138 | var children = this.props.children;
|
139 | return Children.toArray(children).some(function (element) {
|
140 | return element && element.type && element.type === Grid;
|
141 | });
|
142 | }
|
143 | }, {
|
144 | key: "getAction",
|
145 | value: function getAction(actions) {
|
146 | if (!actions || !actions.length) {
|
147 | return null;
|
148 | }
|
149 |
|
150 | var actionList = actions.map(function (action, index) {
|
151 | return React.createElement("li", {
|
152 | style: {
|
153 | width: "".concat(100 / actions.length, "%")
|
154 | },
|
155 | key: "action-".concat(String(index))
|
156 | }, React.createElement("span", null, action));
|
157 | });
|
158 | return actionList;
|
159 | }
|
160 |
|
161 | }, {
|
162 | key: "getCompatibleHoverable",
|
163 | value: function getCompatibleHoverable() {
|
164 | var _this$props = this.props,
|
165 | noHovering = _this$props.noHovering,
|
166 | hoverable = _this$props.hoverable;
|
167 |
|
168 | if ('noHovering' in this.props) {
|
169 | return !noHovering || hoverable;
|
170 | }
|
171 |
|
172 | return !!hoverable;
|
173 | }
|
174 | }, {
|
175 | key: "render",
|
176 | value: function render() {
|
177 | var _classNames;
|
178 |
|
179 | var _this$props2 = this.props,
|
180 | customizePrefixCls = _this$props2.prefixCls,
|
181 | className = _this$props2.className,
|
182 | extra = _this$props2.extra,
|
183 | bodyStyle = _this$props2.bodyStyle,
|
184 | title = _this$props2.title,
|
185 | loading = _this$props2.loading,
|
186 | _this$props2$bordered = _this$props2.bordered,
|
187 | bordered = _this$props2$bordered === void 0 ? true : _this$props2$bordered,
|
188 | type = _this$props2.type,
|
189 | cover = _this$props2.cover,
|
190 | actions = _this$props2.actions,
|
191 | tabList = _this$props2.tabList,
|
192 | children = _this$props2.children,
|
193 | activeTabKey = _this$props2.activeTabKey,
|
194 | defaultActiveTabKey = _this$props2.defaultActiveTabKey,
|
195 | onHeadClick = _this$props2.onHeadClick,
|
196 | others = _objectWithoutProperties(_this$props2, ["prefixCls", "className", "extra", "bodyStyle", "title", "loading", "bordered", "type", "cover", "actions", "tabList", "children", "activeTabKey", "defaultActiveTabKey", "onHeadClick"]);
|
197 |
|
198 | var widerPadding = this.state.widerPadding;
|
199 | var prefixCls = getPrefixCls('card', customizePrefixCls);
|
200 | var classString = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(prefixCls, "-bordered"), bordered), _defineProperty(_classNames, "".concat(prefixCls, "-hoverable"), this.getCompatibleHoverable()), _defineProperty(_classNames, "".concat(prefixCls, "-wider-padding"), widerPadding), _defineProperty(_classNames, "".concat(prefixCls, "-padding-transition"), this.updateWiderPaddingCalled), _defineProperty(_classNames, "".concat(prefixCls, "-contain-grid"), this.isContainGrid()), _defineProperty(_classNames, "".concat(prefixCls, "-contain-tabs"), tabList && tabList.length), _defineProperty(_classNames, "".concat(prefixCls, "-type-").concat(type), !!type), _classNames));
|
201 | var loadingBlock = React.createElement("div", {
|
202 | className: "".concat(prefixCls, "-loading-content")
|
203 | }, React.createElement("p", {
|
204 | className: "".concat(prefixCls, "-loading-block"),
|
205 | style: {
|
206 | width: '94%'
|
207 | }
|
208 | }), React.createElement("p", null, React.createElement("span", {
|
209 | className: "".concat(prefixCls, "-loading-block"),
|
210 | style: {
|
211 | width: '28%'
|
212 | }
|
213 | }), React.createElement("span", {
|
214 | className: "".concat(prefixCls, "-loading-block"),
|
215 | style: {
|
216 | width: '62%'
|
217 | }
|
218 | })), React.createElement("p", null, React.createElement("span", {
|
219 | className: "".concat(prefixCls, "-loading-block"),
|
220 | style: {
|
221 | width: '22%'
|
222 | }
|
223 | }), React.createElement("span", {
|
224 | className: "".concat(prefixCls, "-loading-block"),
|
225 | style: {
|
226 | width: '66%'
|
227 | }
|
228 | })), React.createElement("p", null, React.createElement("span", {
|
229 | className: "".concat(prefixCls, "-loading-block"),
|
230 | style: {
|
231 | width: '56%'
|
232 | }
|
233 | }), React.createElement("span", {
|
234 | className: "".concat(prefixCls, "-loading-block"),
|
235 | style: {
|
236 | width: '39%'
|
237 | }
|
238 | })), React.createElement("p", null, React.createElement("span", {
|
239 | className: "".concat(prefixCls, "-loading-block"),
|
240 | style: {
|
241 | width: '21%'
|
242 | }
|
243 | }), React.createElement("span", {
|
244 | className: "".concat(prefixCls, "-loading-block"),
|
245 | style: {
|
246 | width: '15%'
|
247 | }
|
248 | }), React.createElement("span", {
|
249 | className: "".concat(prefixCls, "-loading-block"),
|
250 | style: {
|
251 | width: '40%'
|
252 | }
|
253 | })));
|
254 | var hasActiveTabKey = activeTabKey !== undefined;
|
255 |
|
256 | var extraProps = _defineProperty({}, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey);
|
257 |
|
258 | var head;
|
259 | var tabs = tabList && tabList.length ? React.createElement(Tabs, _extends({}, extraProps, {
|
260 | className: "".concat(prefixCls, "-head-tabs"),
|
261 | size: Size.large,
|
262 | onChange: this.onTabChange
|
263 | }), tabList.map(function (item) {
|
264 | return React.createElement(Tabs.TabPane, {
|
265 | tab: item.tab,
|
266 | key: item.key
|
267 | });
|
268 | })) : null;
|
269 |
|
270 | if (title || extra || tabs) {
|
271 | head = React.createElement("div", {
|
272 | className: "".concat(prefixCls, "-head"),
|
273 | onClick: onHeadClick
|
274 | }, React.createElement("div", {
|
275 | className: "".concat(prefixCls, "-head-wrapper")
|
276 | }, title && React.createElement("div", {
|
277 | className: "".concat(prefixCls, "-head-title")
|
278 | }, title), extra && React.createElement("div", {
|
279 | className: "".concat(prefixCls, "-extra")
|
280 | }, extra)), tabs);
|
281 | }
|
282 |
|
283 | var coverDom = cover ? React.createElement("div", {
|
284 | className: "".concat(prefixCls, "-cover")
|
285 | }, cover) : null;
|
286 | var body = React.createElement("div", {
|
287 | className: "".concat(prefixCls, "-body"),
|
288 | style: bodyStyle
|
289 | }, loading ? loadingBlock : children);
|
290 | var actionDom = actions && actions.length ? React.createElement("ul", {
|
291 | className: "".concat(prefixCls, "-actions")
|
292 | }, this.getAction(actions)) : null;
|
293 | var divProps = omit(others, ['onTabChange', 'noHovering', 'hoverable']);
|
294 | return React.createElement("div", _extends({}, divProps, {
|
295 | className: classString,
|
296 | ref: this.saveRef
|
297 | }), head, coverDom, body, actionDom);
|
298 | }
|
299 | }]);
|
300 |
|
301 | return Card;
|
302 | }(Component);
|
303 |
|
304 | export { Card as default };
|
305 | Card.displayName = 'Card';
|
306 | Card.Grid = Grid;
|
307 | Card.Meta = Meta;
|
308 |
|
309 | __decorate([throttleByAnimationFrameDecorator()], Card.prototype, "updateWiderPadding", null);
|
310 |
|