Skip to content

Commit aefbe44

Browse files
dtuyenledtuyenle
committed
build lib
1 parent 342dee1 commit aefbe44

File tree

14 files changed

+452
-280
lines changed

14 files changed

+452
-280
lines changed

‎lib/components/BreadCrum/BreadCrum.js

Lines changed: 66 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

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 _templateObject = _taggedTemplateLiteral(['\n width: 100%;\n margin: 10px 0px;\n text-align: left;\n\n i {\n color: #4E4E4E;\n line-height: 9px;\n position: absolute;\n margin-top: 7px;\n margin-left: 5px;\n font-size: 6px;\n }\n'], ['\n width: 100%;\n margin: 10px 0px;\n text-align: left;\n\n i {\n color: #4E4E4E;\n line-height: 9px;\n position: absolute;\n margin-top: 7px;\n margin-left: 5px;\n font-size: 6px;\n }\n']),
10-
_templateObject2 = _taggedTemplateLiteral(['\n color: #000;\n color: #6090C3;\n cursor: pointer;\n font-size: 11px;\n margin-right: 12px;\n'], ['\n color: #000;\n color: #6090C3;\n cursor: pointer;\n font-size: 11px;\n margin-right: 12px;\n']),
11-
_templateObject3 = _taggedTemplateLiteral(['\n color: #6090C3;\n cursor: pointer;\n font-size: 11px;\n margin-right: 15px;\n'], ['\n color: #6090C3;\n cursor: pointer;\n font-size: 11px;\n margin-right: 15px;\n']);
7+
var _templateObject = _taggedTemplateLiteral(['\n font-size: 0.8em;\n line-height: 11px;\n color: ', ';\n cursor: pointer;\n'], ['\n font-size: 0.8em;\n line-height: 11px;\n color: ', ';\n cursor: pointer;\n']),
8+
_templateObject2 = _taggedTemplateLiteral(['\n font-size: 0.6em;\n margin: 0 0.8em;\n'], ['\n font-size: 0.6em;\n margin: 0 0.8em;\n']),
9+
_templateObject3 = _taggedTemplateLiteral(['\n font-size: 0.8em;\n line-height: 11px;\n color: ', ';\n'], ['\n font-size: 0.8em;\n line-height: 11px;\n color: ', ';\n']);
1210

1311
var _react = require('react');
1412

@@ -22,145 +20,83 @@ var _styledComponents = require('styled-components');
2220

2321
var _styledComponents2 = _interopRequireDefault(_styledComponents);
2422

25-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26-
27-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
23+
var _color = require('../color');
2824

29-
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; }
25+
var _color2 = _interopRequireDefault(_color);
3026

31-
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; }
27+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
3228

3329
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3430

35-
var uniqueId = function uniqueId() {
36-
return Math.random();
37-
};
38-
39-
var BreadcrumContainer = _styledComponents2.default.p(_templateObject);
31+
var BreadCrumItem = _styledComponents2.default.span(_templateObject, _color2.default.grey_main);
4032

41-
var BreadcrumItemLast = _styledComponents2.default.span(_templateObject2);
33+
var Arrow = _styledComponents2.default.span(_templateObject2);
4234

43-
var BreadcrumItem = _styledComponents2.default.span(_templateObject3);
35+
var BreadCrumItemLast = _styledComponents2.default.span(_templateObject3, _color2.default.orange_main);
4436

45-
var BreadCrum = function (_Component) {
46-
_inherits(BreadCrum, _Component);
47-
48-
function BreadCrum() {
49-
_classCallCheck(this, BreadCrum);
50-
51-
return _possibleConstructorReturn(this, (BreadCrum.__proto__ || Object.getPrototypeOf(BreadCrum)).apply(this, arguments));
52-
}
53-
54-
_createClass(BreadCrum, [{
55-
key: 'getBreadCrums',
56-
value: function getBreadCrums() {
57-
var _this2 = this;
58-
59-
var _props = this.props,
60-
hierarchy = _props.hierarchy,
61-
handleBreadCrumClick = _props.handleBreadCrumClick;
62-
63-
var breadcrums = [];
64-
var count = 1;
65-
hierarchy.forEach(function (item) {
66-
if (item) {
67-
var currHierarchy = hierarchy.slice(0, count);
68-
var lastitem = false;
69-
var icon = _react2.default.createElement(
70-
'i',
71-
null,
72-
'>'
73-
);
74-
var style = _this2.props.style ? _this2.props.style : {};
75-
if (count === hierarchy.length) {
76-
icon = _react2.default.createElement('i', null);
77-
lastitem = true;
78-
}
79-
if (!handleBreadCrumClick) {
80-
style.cursor = 'auto';
81-
}
82-
if (item.href && item.href !== null) {
83-
var id = item.name.toLowerCase().split(' ').join('_');
84-
var breadcrumitem = _react2.default.createElement(
85-
BreadcrumItem,
86-
{
87-
id: id,
88-
onClick: _this2.handleBreadCrumClick.bind(_this2, currHierarchy)
89-
},
90-
item.name,
91-
' ',
92-
icon
93-
);
94-
var breadcrumitemlast = _react2.default.createElement(
95-
BreadcrumItemLast,
96-
{
97-
id: id,
98-
onClick: _this2.handleBreadCrumClick.bind(_this2, currHierarchy)
99-
},
100-
item.name,
101-
' ',
102-
icon
103-
);
104-
105-
breadcrums.push(_react2.default.createElement(
106-
'a',
107-
{ key: uniqueId(), to: item.href, onClick: item.reload && _this2.handleReload.bind(_this2) },
108-
lastitem ? breadcrumitemlast : breadcrumitem
109-
));
110-
} else {
111-
// style.color = '#000';
112-
breadcrums.push(_react2.default.createElement(
113-
BreadcrumItem,
114-
{
115-
key: uniqueId(),
116-
style: style,
117-
id: item.name ? item.name.toLowerCase().split(' ').join('_') : '',
118-
onClick: _this2.handleBreadCrumClick.bind(_this2, currHierarchy)
119-
},
120-
item.name,
121-
' ',
122-
icon
123-
));
124-
}
125-
}
126-
count++;
127-
});
128-
return breadcrums;
129-
}
130-
}, {
131-
key: 'handleReload',
132-
value: function handleReload() {
133-
setTimeout(function () {
134-
window.location.reload();
135-
}, 2000);
37+
var handleOnClick = function handleOnClick(item, onClick) {
38+
if (item.href) {
39+
window.location.href = item.href;
40+
if (onClick) {
41+
onClick(item);
13642
}
137-
}, {
138-
key: 'handleBreadCrumClick',
139-
value: function handleBreadCrumClick(hierarchy) {
140-
var handleBreadCrumClick = this.props.handleBreadCrumClick;
141-
142-
if (handleBreadCrumClick) {
143-
handleBreadCrumClick(hierarchy);
144-
}
43+
} else {
44+
if (onClick) {
45+
onClick(item);
14546
}
146-
}, {
147-
key: 'render',
148-
value: function render() {
149-
var breadcrums = this.getBreadCrums();
150-
return _react2.default.createElement(
151-
BreadcrumContainer,
152-
null,
153-
breadcrums.length > 1 && this.getBreadCrums()
154-
);
47+
}
48+
};
49+
50+
var getBreadCrums = function getBreadCrums(data, style, onClick) {
51+
var DATA = [];
52+
for (var count = 0; count < data.length; count++) {
53+
var item = data[count];
54+
if (count === data.length - 1) {
55+
DATA.push(_react2.default.createElement(
56+
BreadCrumItemLast,
57+
{ key: count, style: style, id: item.id, onClick: handleOnClick.bind(undefined, item, onClick) },
58+
item.name
59+
));
60+
} else {
61+
DATA.push(_react2.default.createElement(
62+
BreadCrumItem,
63+
{ key: 'item' + count, style: style, id: item.id, onClick: handleOnClick.bind(undefined, item, onClick) },
64+
item.name
65+
));
66+
DATA.push(_react2.default.createElement(
67+
Arrow,
68+
{ key: 'arrow' + count, className: 'icon-Right' },
69+
' > '
70+
));
15571
}
156-
}]);
72+
}
73+
return DATA;
74+
};
15775

158-
return BreadCrum;
159-
}(_react.Component);
76+
var BreadCrum = function BreadCrum(props) {
77+
var data = props.data,
78+
style = props.style,
79+
onClick = props.onClick;
80+
81+
return _react2.default.createElement(
82+
'p',
83+
null,
84+
getBreadCrums(data, style, onClick)
85+
);
86+
};
16087

16188
BreadCrum.propTypes = {
89+
/** data array of object {id: , name: ''} */
90+
data: _propTypes2.default.array,
91+
/** style override */
16292
style: _propTypes2.default.object,
163-
hierarchy: _propTypes2.default.array.isRequired,
164-
handleBreadCrumClick: _propTypes2.default.func
93+
/** onClick breadcrum item */
94+
onClick: _propTypes2.default.func
16595
};
96+
97+
BreadCrum.defaultProps = {
98+
data: [],
99+
style: {}
100+
};
101+
166102
exports.default = BreadCrum;

‎lib/components/BreadCrum/BreadCrum.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
```js
2+
<div>
3+
<BreadCrum
4+
data={[
5+
{id:1, name: 'Name 1', href: 'https://github.com'},
6+
{id:2, name: 'Name 2', href: 'https://github.com'},
7+
{id:3, name: 'Name 3', href: 'https://github.com'}
8+
]}/>
9+
</div>
10+
```
11+
12+
```js
13+
initialState = {
14+
item: null
15+
};
16+
<div>
17+
<h5>Current Selection: {JSON.stringify(state.item)}</h5>
18+
<BreadCrum
19+
data={[
20+
{id:1, name: 'Name 1'},
21+
{id:2, name: 'Name 2'},
22+
{id:3, name: 'Name 3'}
23+
]}
24+
onClick={(item) => {
25+
setState({item: item});
26+
}}/>
27+
</div>
28+
```

0 commit comments

Comments
 (0)