1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
6 |
|
7 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
8 |
|
9 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
10 |
|
11 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
12 |
|
13 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
14 |
|
15 | var _inherits3 = _interopRequireDefault(_inherits2);
|
16 |
|
17 | var _class, _temp;
|
18 |
|
19 | var _react = require('react');
|
20 |
|
21 | var _react2 = _interopRequireDefault(_react);
|
22 |
|
23 | var _reactDom = require('react-dom');
|
24 |
|
25 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
26 |
|
27 | var _propTypes = require('prop-types');
|
28 |
|
29 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
30 |
|
31 | var _icon = require('../icon');
|
32 |
|
33 | var _icon2 = _interopRequireDefault(_icon);
|
34 |
|
35 | var _button = require('../button');
|
36 |
|
37 | var _button2 = _interopRequireDefault(_button);
|
38 |
|
39 | var _configProvider = require('../config-provider');
|
40 |
|
41 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
42 |
|
43 | var _zhCn = require('../locale/zh-cn');
|
44 |
|
45 | var _zhCn2 = _interopRequireDefault(_zhCn);
|
46 |
|
47 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | var CardCollapseContent = (_temp = _class = function (_Component) {
|
54 | (0, _inherits3.default)(CardCollapseContent, _Component);
|
55 |
|
56 | function CardCollapseContent(props, context) {
|
57 | (0, _classCallCheck3.default)(this, CardCollapseContent);
|
58 |
|
59 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props, context));
|
60 |
|
61 | _this.handleToggle = function () {
|
62 | _this.setState(function (prevState) {
|
63 | return {
|
64 | expand: !prevState.expand
|
65 | };
|
66 | });
|
67 | };
|
68 |
|
69 | _this._contentRefHandler = function (ref) {
|
70 | _this.content = ref;
|
71 | };
|
72 |
|
73 | _this.saveFooter = function (ref) {
|
74 | _this.footer = ref;
|
75 | };
|
76 |
|
77 | _this.state = {
|
78 | needMore: false,
|
79 | expand: false,
|
80 | contentHeight: 'auto'
|
81 | };
|
82 | return _this;
|
83 | }
|
84 |
|
85 | CardCollapseContent.prototype.componentDidMount = function componentDidMount() {
|
86 | this._setNeedMore();
|
87 | this._setContentHeight();
|
88 | };
|
89 |
|
90 | CardCollapseContent.prototype.componentDidUpdate = function componentDidUpdate() {
|
91 | this._setContentHeight();
|
92 | };
|
93 |
|
94 |
|
95 | CardCollapseContent.prototype._setNeedMore = function _setNeedMore() {
|
96 | var contentHeight = this.props.contentHeight;
|
97 |
|
98 | var childrenHeight = this._getNodeChildrenHeight(this.content);
|
99 | this.setState({
|
100 | needMore: contentHeight !== 'auto' && childrenHeight > contentHeight
|
101 | });
|
102 | };
|
103 |
|
104 |
|
105 |
|
106 |
|
107 | CardCollapseContent.prototype._setContentHeight = function _setContentHeight() {
|
108 | if (this.props.contentHeight === 'auto') {
|
109 | this.content.style.height = 'auto';
|
110 | return;
|
111 | }
|
112 |
|
113 | if (this.state.expand) {
|
114 | var childrenHeight = this._getNodeChildrenHeight(this.content);
|
115 | this.content.style.height = childrenHeight + 'px';
|
116 | } else {
|
117 | var el = _reactDom2.default.findDOMNode(this.footer);
|
118 | var height = this.props.contentHeight;
|
119 |
|
120 | if (el) {
|
121 | height = height - el.getBoundingClientRect().height;
|
122 | }
|
123 |
|
124 | this.content.style.height = height + 'px';
|
125 | }
|
126 | };
|
127 |
|
128 | CardCollapseContent.prototype._getNodeChildrenHeight = function _getNodeChildrenHeight(node) {
|
129 | if (!node) {
|
130 | return 0;
|
131 | }
|
132 |
|
133 | var contentChildNodes = node.childNodes;
|
134 | var length = contentChildNodes.length;
|
135 |
|
136 | if (!length) {
|
137 | return 0;
|
138 | }
|
139 |
|
140 | var lastNode = contentChildNodes[length - 1];
|
141 |
|
142 | return lastNode.offsetTop + lastNode.offsetHeight;
|
143 | };
|
144 |
|
145 | CardCollapseContent.prototype.render = function render() {
|
146 | var _props = this.props,
|
147 | prefix = _props.prefix,
|
148 | children = _props.children,
|
149 | locale = _props.locale;
|
150 | var _state = this.state,
|
151 | needMore = _state.needMore,
|
152 | expand = _state.expand;
|
153 |
|
154 |
|
155 | return _react2.default.createElement(
|
156 | 'div',
|
157 | { className: prefix + 'card-body' },
|
158 | _react2.default.createElement(
|
159 | 'div',
|
160 | { className: prefix + 'card-content', ref: this._contentRefHandler },
|
161 | children
|
162 | ),
|
163 | needMore ? _react2.default.createElement(
|
164 | 'div',
|
165 | { className: prefix + 'card-footer', ref: this.saveFooter, onClick: this.handleToggle },
|
166 | _react2.default.createElement(
|
167 | _button2.default,
|
168 | { text: true, type: 'primary' },
|
169 | expand ? locale.fold : locale.expand,
|
170 | _react2.default.createElement(_icon2.default, { type: 'arrow-down', className: expand ? 'expand' : '' })
|
171 | )
|
172 | ) : null
|
173 | );
|
174 | };
|
175 |
|
176 | return CardCollapseContent;
|
177 | }(_react.Component), _class.propTypes = {
|
178 | prefix: _propTypes2.default.string,
|
179 | |
180 |
|
181 |
|
182 | contentHeight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
183 | locale: _propTypes2.default.object,
|
184 | children: _propTypes2.default.node
|
185 | }, _class.defaultProps = {
|
186 | prefix: 'next-',
|
187 | contentHeight: 120,
|
188 | locale: _zhCn2.default.Card
|
189 | }, _temp);
|
190 | CardCollapseContent.displayName = 'CardCollapseContent';
|
191 | exports.default = _configProvider2.default.config(CardCollapseContent, {
|
192 | componentName: 'Card'
|
193 | });
|
194 | module.exports = exports['default']; |
\ | No newline at end of file |