1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _typeof2 = require('babel-runtime/helpers/typeof');
|
6 |
|
7 | var _typeof3 = _interopRequireDefault(_typeof2);
|
8 |
|
9 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
10 |
|
11 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
12 |
|
13 | var _extends2 = require('babel-runtime/helpers/extends');
|
14 |
|
15 | var _extends3 = _interopRequireDefault(_extends2);
|
16 |
|
17 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
18 |
|
19 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
20 |
|
21 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
22 |
|
23 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
24 |
|
25 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
26 |
|
27 | var _inherits3 = _interopRequireDefault(_inherits2);
|
28 |
|
29 | var _class, _temp, _initialiseProps;
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _propTypes = require('prop-types');
|
36 |
|
37 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
38 |
|
39 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
40 |
|
41 | var _icon = require('../icon');
|
42 |
|
43 | var _icon2 = _interopRequireDefault(_icon);
|
44 |
|
45 | var _configProvider = require('../config-provider');
|
46 |
|
47 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
48 |
|
49 | var _dropdown = require('../dropdown');
|
50 |
|
51 | var _dropdown2 = _interopRequireDefault(_dropdown);
|
52 |
|
53 | var _menu = require('../menu');
|
54 |
|
55 | var _menu2 = _interopRequireDefault(_menu);
|
56 |
|
57 | var _item = require('./item');
|
58 |
|
59 | var _item2 = _interopRequireDefault(_item);
|
60 |
|
61 | var _util = require('../util');
|
62 |
|
63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | var Breadcrumb = (_temp = _class = function (_Component) {
|
69 | (0, _inherits3.default)(Breadcrumb, _Component);
|
70 |
|
71 | function Breadcrumb(props) {
|
72 | (0, _classCallCheck3.default)(this, Breadcrumb);
|
73 |
|
74 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
75 |
|
76 | _initialiseProps.call(_this);
|
77 |
|
78 | _this.state = {
|
79 | maxNode: props.maxNode === 'auto' ? 100 : props.maxNode
|
80 | };
|
81 | return _this;
|
82 | }
|
83 |
|
84 | Breadcrumb.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
85 | if (state.prevMaxNode === props.maxNode) {
|
86 | return {};
|
87 | }
|
88 |
|
89 | return {
|
90 | prevMaxNode: props.maxNode,
|
91 | maxNode: props.maxNode === 'auto' ? 100 : props.maxNode
|
92 | };
|
93 | };
|
94 |
|
95 | Breadcrumb.prototype.componentDidMount = function componentDidMount() {
|
96 | this.computeMaxNode();
|
97 | _util.events.on(window, 'resize', this.computeMaxNode);
|
98 | };
|
99 |
|
100 | Breadcrumb.prototype.componentDidUpdate = function componentDidUpdate() {
|
101 | this.computeMaxNode();
|
102 | };
|
103 |
|
104 | Breadcrumb.prototype.componentWillUnmount = function componentWillUnmount() {
|
105 | _util.events.off(window, 'resize', this.computeMaxNode);
|
106 | };
|
107 |
|
108 | Breadcrumb.prototype.renderEllipsisNodeWithMenu = function renderEllipsisNodeWithMenu(children, breakpointer) {
|
109 |
|
110 | var hiddenItems = [];
|
111 | _react.Children.forEach(children, function (item, i) {
|
112 | var _item$props = item.props,
|
113 | link = _item$props.link,
|
114 | itemChildren = _item$props.children;
|
115 |
|
116 | if (i > 0 && i <= breakpointer) {
|
117 | hiddenItems.push(_react2.default.createElement(
|
118 | _menu2.default.Item,
|
119 | { key: i },
|
120 | link ? _react2.default.createElement(
|
121 | 'a',
|
122 | { href: link },
|
123 | itemChildren
|
124 | ) : itemChildren
|
125 | ));
|
126 | }
|
127 | });
|
128 |
|
129 | var _props = this.props,
|
130 | prefix = _props.prefix,
|
131 | followTrigger = _props.followTrigger,
|
132 | popupContainer = _props.popupContainer,
|
133 | popupProps = _props.popupProps;
|
134 |
|
135 |
|
136 | return _react2.default.createElement(
|
137 | _dropdown2.default,
|
138 | (0, _extends3.default)({
|
139 | trigger: _react2.default.createElement(
|
140 | 'span',
|
141 | null,
|
142 | '...'
|
143 | )
|
144 | }, popupProps, {
|
145 | container: popupContainer,
|
146 | followTrigger: followTrigger
|
147 | }),
|
148 | _react2.default.createElement(
|
149 | 'div',
|
150 | { className: prefix + 'breadcrumb-dropdown-wrapper' },
|
151 | _react2.default.createElement(
|
152 | _menu2.default,
|
153 | null,
|
154 | hiddenItems
|
155 | )
|
156 | )
|
157 | );
|
158 | };
|
159 |
|
160 | Breadcrumb.prototype.render = function render() {
|
161 | var _this2 = this;
|
162 |
|
163 | var _props2 = this.props,
|
164 | prefix = _props2.prefix,
|
165 | rtl = _props2.rtl,
|
166 | className = _props2.className,
|
167 | children = _props2.children,
|
168 | component = _props2.component,
|
169 | showHiddenItems = _props2.showHiddenItems,
|
170 | maxNodeProp = _props2.maxNode,
|
171 | others = (0, _objectWithoutProperties3.default)(_props2, ['prefix', 'rtl', 'className', 'children', 'component', 'showHiddenItems', 'maxNode']);
|
172 |
|
173 |
|
174 | var separator = this.props.separator || _react2.default.createElement(_icon2.default, { type: 'arrow-right', className: prefix + 'breadcrumb-icon-sep' });
|
175 |
|
176 | var maxNode = this.state.maxNode;
|
177 |
|
178 |
|
179 | var items = void 0;
|
180 | var length = _react.Children.count(children);
|
181 |
|
182 | if (maxNode > 1 && length > maxNode) {
|
183 | var breakpointer = length - maxNode + 1;
|
184 | items = [];
|
185 |
|
186 | _react.Children.forEach(children, function (item, i) {
|
187 | var ariaProps = {};
|
188 |
|
189 |
|
190 | if (!item) {
|
191 | return;
|
192 | }
|
193 | if (i === length - 1) {
|
194 | ariaProps['aria-current'] = 'page';
|
195 | }
|
196 |
|
197 | if (i && i === breakpointer) {
|
198 | items.push(_react2.default.cloneElement(item, (0, _extends3.default)({
|
199 | separator: separator,
|
200 | prefix: prefix,
|
201 | key: i,
|
202 | activated: i === length - 1
|
203 | }, ariaProps, {
|
204 | className: showHiddenItems ? prefix + 'breadcrumb-text-ellipsis-clickable' : prefix + 'breadcrumb-text-ellipsis'
|
205 | }), showHiddenItems ? _this2.renderEllipsisNodeWithMenu(children, breakpointer) : '...'));
|
206 | } else if (!i || i > breakpointer) {
|
207 | items.push(_react2.default.cloneElement(item, (0, _extends3.default)({
|
208 | separator: separator,
|
209 | prefix: prefix,
|
210 | key: i
|
211 | }, ariaProps, {
|
212 | activated: i === length - 1
|
213 | })));
|
214 | }
|
215 | });
|
216 | } else {
|
217 | items = _react.Children.map(children, function (item, i) {
|
218 | var ariaProps = {};
|
219 |
|
220 | if (!item) {
|
221 | return;
|
222 | }
|
223 | if (i === length - 1) {
|
224 | ariaProps['aria-current'] = 'page';
|
225 | }
|
226 |
|
227 | return _react2.default.cloneElement(item, (0, _extends3.default)({
|
228 | separator: separator,
|
229 | prefix: prefix,
|
230 | activated: i === length - 1
|
231 | }, ariaProps, {
|
232 | key: i
|
233 | }));
|
234 | });
|
235 | }
|
236 |
|
237 | if (rtl) {
|
238 | others.dir = 'rtl';
|
239 | }
|
240 |
|
241 | var BreadcrumbComponent = component;
|
242 |
|
243 | delete others.maxNode;
|
244 |
|
245 | return _react2.default.createElement(
|
246 | BreadcrumbComponent,
|
247 | (0, _extends3.default)({
|
248 | 'aria-label': 'Breadcrumb',
|
249 | className: className
|
250 | }, others, {
|
251 | style: (0, _extends3.default)({ position: 'relative' }, others.style || {})
|
252 | }),
|
253 | _react2.default.createElement(
|
254 | 'ul',
|
255 | { className: prefix + 'breadcrumb' },
|
256 | items
|
257 | ),
|
258 | maxNodeProp === 'auto' ? _react2.default.createElement(
|
259 | 'ul',
|
260 | {
|
261 | style: {
|
262 | position: 'absolute',
|
263 | left: 0,
|
264 | right: 0,
|
265 | top: 0,
|
266 | visibility: 'hidden'
|
267 | },
|
268 | ref: this.saveBreadcrumbRef,
|
269 | className: prefix + 'breadcrumb'
|
270 | },
|
271 | _react.Children.map(children, function (item, i) {
|
272 | return _react2.default.cloneElement(item, {
|
273 | separator: separator,
|
274 | prefix: prefix,
|
275 | activated: i === length - 1,
|
276 | key: i
|
277 | });
|
278 | })
|
279 | ) : null
|
280 | );
|
281 | };
|
282 |
|
283 | return Breadcrumb;
|
284 | }(_react.Component), _class.Item = _item2.default, _class.propTypes = {
|
285 | |
286 |
|
287 |
|
288 | prefix: _propTypes2.default.string,
|
289 | rtl: _propTypes2.default.bool,
|
290 |
|
291 | |
292 |
|
293 |
|
294 | children: function children(props, propName) {
|
295 | _react.Children.forEach(props[propName], function (child) {
|
296 | if (!(child && ['function', 'object'].indexOf((0, _typeof3.default)(child.type)) > -1 && child.type._typeMark === 'breadcrumb_item')) {
|
297 | throw new Error("Breadcrumb's children must be Breadcrumb.Item!");
|
298 | }
|
299 | });
|
300 | },
|
301 |
|
302 | |
303 |
|
304 |
|
305 | maxNode: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['auto'])]),
|
306 | |
307 |
|
308 |
|
309 |
|
310 | showHiddenItems: _propTypes2.default.bool,
|
311 | |
312 |
|
313 |
|
314 |
|
315 | popupContainer: _propTypes2.default.any,
|
316 | |
317 |
|
318 |
|
319 |
|
320 | followTrigger: _propTypes2.default.bool,
|
321 | |
322 |
|
323 |
|
324 |
|
325 | popupProps: _propTypes2.default.object,
|
326 | |
327 |
|
328 |
|
329 | separator: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.string]),
|
330 | |
331 |
|
332 |
|
333 | component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
|
334 | className: _propTypes2.default.any
|
335 | }, _class.defaultProps = {
|
336 | prefix: 'next-',
|
337 | maxNode: 100,
|
338 | showHiddenItems: false,
|
339 | component: 'nav'
|
340 | }, _initialiseProps = function _initialiseProps() {
|
341 | var _this3 = this;
|
342 |
|
343 | this.computeMaxNode = function () {
|
344 |
|
345 | if (_this3.props.maxNode !== 'auto' || !_this3.breadcrumbEl) return;
|
346 | var scrollWidth = _this3.breadcrumbEl.scrollWidth;
|
347 | var rect = _this3.breadcrumbEl.getBoundingClientRect();
|
348 |
|
349 | if (scrollWidth <= rect.width) return;
|
350 | var maxNode = _this3.breadcrumbEl.children.length;
|
351 | var index = 1;
|
352 | var fullWidth = scrollWidth;
|
353 |
|
354 | while (index < _this3.breadcrumbEl.children.length - 1) {
|
355 | var el = _this3.breadcrumbEl.children[index];
|
356 | maxNode--;
|
357 | fullWidth -= el.getBoundingClientRect().width;
|
358 | if (fullWidth <= rect.width) {
|
359 | break;
|
360 | }
|
361 | index++;
|
362 | }
|
363 |
|
364 | maxNode = Math.max(3, maxNode);
|
365 |
|
366 | if (maxNode !== _this3.state.maxNode) {
|
367 | _this3.setState({
|
368 | maxNode: maxNode
|
369 | });
|
370 | }
|
371 | };
|
372 |
|
373 | this.saveBreadcrumbRef = function (ref) {
|
374 | _this3.breadcrumbEl = ref;
|
375 | };
|
376 | }, _temp);
|
377 | Breadcrumb.displayName = 'Breadcrumb';
|
378 | exports.default = _configProvider2.default.config((0, _reactLifecyclesCompat.polyfill)(Breadcrumb));
|
379 | module.exports = exports['default']; |
\ | No newline at end of file |