1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
8 |
|
9 | var _react = require('react');
|
10 |
|
11 | var _react2 = _interopRequireDefault(_react);
|
12 |
|
13 | var _propTypes = require('prop-types');
|
14 |
|
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
16 |
|
17 | var _immutable = require('immutable');
|
18 |
|
19 | var _immutable2 = _interopRequireDefault(_immutable);
|
20 |
|
21 | var _reactRouter = require('react-router');
|
22 |
|
23 | var _InlineStylePrefixer = require('../internal/InlineStylePrefixer');
|
24 |
|
25 | var _InlineStylePrefixer2 = _interopRequireDefault(_InlineStylePrefixer);
|
26 |
|
27 | var _OptClass = require('../internal/OptClass');
|
28 |
|
29 | var _OptClass2 = _interopRequireDefault(_OptClass);
|
30 |
|
31 | var _Icon = require('../Icon');
|
32 |
|
33 | var _Icon2 = _interopRequireDefault(_Icon);
|
34 |
|
35 | var _style = require('./style.scss');
|
36 |
|
37 | var _style2 = _interopRequireDefault(_style);
|
38 |
|
39 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
40 |
|
41 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
42 |
|
43 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
44 |
|
45 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
46 |
|
47 | var Breadcrumb = function (_React$Component) {
|
48 | _inherits(Breadcrumb, _React$Component);
|
49 |
|
50 | function Breadcrumb(props) {
|
51 | _classCallCheck(this, Breadcrumb);
|
52 |
|
53 | var _this = _possibleConstructorReturn(this, (Breadcrumb.__proto__ || Object.getPrototypeOf(Breadcrumb)).call(this, props));
|
54 |
|
55 | _this.state = {
|
56 | routes: _immutable2.default.fromJS(_this.props.routes)
|
57 | };
|
58 |
|
59 | _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
|
60 | _this.setState({
|
61 | routes: _immutable2.default.fromJS(nextProps.routes)
|
62 | });
|
63 | };
|
64 |
|
65 | _this.shouldComponentUpdate = function (nextProps, nextState) {
|
66 | if (!_immutable2.default.is(nextState.routes, _this.state.routes)) return true;
|
67 |
|
68 | return false;
|
69 | };
|
70 |
|
71 | _this.getGradientStyles = function () {
|
72 | var backgroundColor = _this.props.gradientColor || '#fff';
|
73 |
|
74 | var styles = {
|
75 | background: 'linear-gradient(90deg, rgba(255, 255, 255, 000.1), ' + backgroundColor + ')'
|
76 | };
|
77 |
|
78 | return (0, _InlineStylePrefixer2.default)(styles);
|
79 | };
|
80 |
|
81 | _this.getContainerStyles = function () {
|
82 | var styles = {
|
83 | marginLeft: _this.props.padding || '0px',
|
84 | paddingRight: _this.props.padding || '0px'
|
85 | };
|
86 |
|
87 | return (0, _InlineStylePrefixer2.default)(styles);
|
88 | };
|
89 |
|
90 | _this.getPath = function (index) {
|
91 | var parts = [];
|
92 |
|
93 | for (var i = 0; i <= index; i++) {
|
94 | if (_this.state.routes.getIn([i, 'path']) !== '/') {
|
95 | parts.push(_this.state.routes.getIn([i, 'path']));
|
96 | }
|
97 | }
|
98 |
|
99 | return '/' + parts.join('/');
|
100 | };
|
101 |
|
102 | _this.breadcrumbNode = function (title, index, firstItem) {
|
103 | var lastItem = title === _this.state.routes.filter(function (route) {
|
104 | return typeof route.get('title') !== 'undefined';
|
105 | }).last().get('title');
|
106 |
|
107 | var node = _react2.default.createElement(
|
108 | 'em',
|
109 | { key: index },
|
110 | !firstItem && _react2.default.createElement(_Icon2.default, { name: 'md-chevron-right', className: _style2.default['md-chevron-right'], width: '16', height: '16', color: '#879098' }),
|
111 | _react2.default.createElement(
|
112 | 'span',
|
113 | null,
|
114 | title
|
115 | )
|
116 | );
|
117 |
|
118 | return _this.props.clickable && !lastItem ? _react2.default.createElement(
|
119 | _reactRouter.Link,
|
120 | { to: _this.getPath(index), key: index },
|
121 | node
|
122 | ) : node;
|
123 | };
|
124 |
|
125 | _this.getTags = function () {
|
126 | var firstItem = true;
|
127 |
|
128 | return _this.state.routes.map(function (item, index) {
|
129 | var title = item.get('title');
|
130 |
|
131 | if (title === undefined) return;
|
132 |
|
133 | var breadcrumbNode = _this.breadcrumbNode(title, index, firstItem);
|
134 | firstItem = false;
|
135 |
|
136 | return breadcrumbNode;
|
137 | });
|
138 | };
|
139 |
|
140 | return _this;
|
141 | }
|
142 |
|
143 | _createClass(Breadcrumb, [{
|
144 | key: 'render',
|
145 | value: function render() {
|
146 | var breadcrumbClasses = (0, _OptClass2.default)(_style2.default, ['breadcrumbs-outer'], this.props.optClass);
|
147 |
|
148 | var gradientColor = {
|
149 | color: this.props.gradientColor || 'white'
|
150 | };
|
151 |
|
152 | return _react2.default.createElement(
|
153 | 'div',
|
154 | { className: breadcrumbClasses },
|
155 | _react2.default.createElement('div', { className: _style2.default['overflow-gradient'], style: this.getGradientStyles() }),
|
156 | _react2.default.createElement(
|
157 | 'div',
|
158 | { className: _style2.default['breadcrumbs-container'], style: this.getContainerStyles() },
|
159 | _react2.default.createElement(
|
160 | 'div',
|
161 | { className: _style2.default.breadcrumb },
|
162 | this.getTags()
|
163 | )
|
164 | )
|
165 | );
|
166 | }
|
167 | }]);
|
168 |
|
169 | return Breadcrumb;
|
170 | }(_react2.default.Component);
|
171 |
|
172 | Breadcrumb.propTypes = {
|
173 | |
174 |
|
175 |
|
176 | routes: _propTypes2.default.array.isRequired,
|
177 | |
178 |
|
179 |
|
180 | padding: _propTypes2.default.number,
|
181 | |
182 |
|
183 |
|
184 |
|
185 | gradientColor: _propTypes2.default.string,
|
186 | |
187 |
|
188 |
|
189 | optClass: _propTypes2.default.string,
|
190 | |
191 |
|
192 |
|
193 | clickable: _propTypes2.default.bool
|
194 | };
|
195 | Breadcrumb.defaultProps = {
|
196 | clickable: false
|
197 | };
|
198 | exports.default = Breadcrumb; |
\ | No newline at end of file |