Skip to content

Commit 5343af6

Browse files
committed
add selected and customize color as prop
1 parent 40183cd commit 5343af6

File tree

15 files changed

+610
-829
lines changed

15 files changed

+610
-829
lines changed

lib/components/BreadCrum/BreadCrum.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
66

77
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; }; }();
88

9-
var _templateObject = _taggedTemplateLiteral(['\n width: 95%;\n margin: 15px 0px;\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: 95%;\n margin: 15px 0px;\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: 15px;\n'], ['\n color: #000;\n color: #6090C3;\n cursor: pointer;\n font-size: 11px;\n margin-right: 15px;\n']),
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']),
1111
_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']);
1212

1313
var _react = require('react');
@@ -66,10 +66,14 @@ var BreadCrum = function (_Component) {
6666
if (item) {
6767
var currHierarchy = hierarchy.slice(0, count);
6868
var lastitem = false;
69-
var icon = _react2.default.createElement('i', { className: 'fa fa-chevron-right' });
69+
var icon = _react2.default.createElement(
70+
'i',
71+
null,
72+
'>'
73+
);
7074
var style = _this2.props.style ? _this2.props.style : {};
7175
if (count === hierarchy.length) {
72-
icon = _react2.default.createElement('i', { style: { 'display': 'none' }, className: 'fa fa-chevron-right' });
76+
icon = _react2.default.createElement('i', null);
7377
lastitem = true;
7478
}
7579
if (!handleBreadCrumClick) {
@@ -146,7 +150,7 @@ var BreadCrum = function (_Component) {
146150
return _react2.default.createElement(
147151
BreadcrumContainer,
148152
null,
149-
breadcrums.length > 1 && breadcrums
153+
breadcrums.length > 1 && this.getBreadCrums()
150154
);
151155
}
152156
}]);

lib/components/InputBox/InputBox.js

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
66

77
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; }; }();
88

9-
var _templateObject = _taggedTemplateLiteral(['\n padding: 12px;\n display: flex;\n max-height: 280px;\n border: 1px solid #CCC;\n overflow: auto;\n overflow-x: hidden;\n margin-left: 5px;\n\n span {\n margin: 0;\n font-weight: 400;\n }\n'], ['\n padding: 12px;\n display: flex;\n max-height: 280px;\n border: 1px solid #CCC;\n overflow: auto;\n overflow-x: hidden;\n margin-left: 5px;\n\n span {\n margin: 0;\n font-weight: 400;\n }\n']),
9+
var _templateObject = _taggedTemplateLiteral(['\n padding: 12px;\n display: flex;\n max-height: 280px;\n border: 1px solid #CCC;\n overflow: auto;\n overflow-x: hidden;\n\n span {\n margin: 0;\n font-weight: 400;\n }\n'], ['\n padding: 12px;\n display: flex;\n max-height: 280px;\n border: 1px solid #CCC;\n overflow: auto;\n overflow-x: hidden;\n\n span {\n margin: 0;\n font-weight: 400;\n }\n']),
1010
_templateObject2 = _taggedTemplateLiteral(['\n font-size: 0.8em;\n margin: 1em 0;\n\n label:before {\n content: \'\';\n position: absolute;\n left: 0;\n top: 0;\n width: 8px;\n height: 8px;\n border: 1px solid #ddd;\n background: #fff;\n }\n'], ['\n font-size: 0.8em;\n margin: 1em 0;\n\n label:before {\n content: \'\';\n position: absolute;\n left: 0;\n top: 0;\n width: 8px;\n height: 8px;\n border: 1px solid #ddd;\n background: #fff;\n }\n']),
1111
_templateObject3 = _taggedTemplateLiteral(['\n font-size: 1em;\n'], ['\n font-size: 1em;\n']),
1212
_templateObject4 = _taggedTemplateLiteral(['\n width: auto;\n height: 15px;\n'], ['\n width: auto;\n height: 15px;\n']),
@@ -54,6 +54,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
5454

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

57+
/* const debounce = (func, wait) => {
58+
let timeout = null;
59+
return function(...args) {
60+
const context = this;
61+
clearTimeout(timeout);
62+
timeout = setTimeout(() => func.apply(context, args), wait);
63+
};
64+
} */
65+
5766
var searchIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAARhSURBVGhD1ZpbyGZTGMc/jHNyisjZjNOFQyPcTCZFIYQL05waJHeomZrBpChuRk2GQo6RUrhwmCYulZwPGcwNzTCOQ85R5PT7YdXTau3x7r3X/mb716/eb7/f+6y19l7rOb3vVA8dCBfCtXAHPAD3wRpYBufC3jBKHQw3wDvw5wT8Dq/A1bAvbHO5gPvhFyhNeBJ+hFthL5h2bQdXgZMoTU5+hU3wOrwJm+E3KP2vfAGXwLRpD3gGSpN5F26BU2FHyLUznAG3wUYo2bgbSp+tqv3AO5wP7h0/E9rIpzoP3ofc3jrYDQbRnvAaxAF/hkvBSXXVTqCHy7fdU7ADVJUTfRriQJ/AyVBLZ8N3EMe4HarqGogDfAyHQG2dAHExf8D5UEW62OidfoJTYChdAHGbfQS7Q28ZJ5JRuQyG1s0Qx7wOesmnEYPdG9DnYE8qPdankMb9CnaFzloJyZi0dbF9dAXEsedDZxngkqH3vDCNMihugTS+7riTDoBkRIzYUdvDif+8HEx3QRr/e5gBrWUqHhdyGkSZF5lvDamLIc7hJGgto20yYAKY3w3zrfwp1dbhEBdiStNaFkXJwAdeCHJb+agf/fuv4eQ4MaYshdZ6EJKBt7wQpFv2+tfQad+20LeQ5nGjF9oqBsK3vRB0PKT3TMuHVExZOgVGa+xk4EMvBEWP9qQXBpJP23wrjXU5tJb7MRlwn+4CSabXMeLPgSF0NKQx5DxoLbsd0Ui+hZ6D9N56GKIQWghxDrOgtWzZ2O1IRixPo66EOMgTUDsPewiSfWv+znoVkiEbCXGi1t+enfS+3Au16m2fsC4+2bY/1ln2neJE8y7HRRAPozwP+0NfrYBo1wqys2yexaLKwJjf8ZsgDijeSTPnrgXRPhDjhwlr7227CuIkvVO5lkM8TwkDpvvcnOkgmHTb3QPRTie3m8sOYEyndcXnQK7TwTZonECO29C7uxia7nDuRGw/VcsePBvRuNG2lIk6ubmwGl4EPc2XsAEegSWwtUrvLIjxyddmEVVlBzAu5gfoFKAa5JMwy45j2KirLhtpayEO5LnwsPepp3Uo+U2K2IjQvlu32tPRt5f6vp+BNXabGKItnUT0Tk3Y0Uyv3bKHQW958Ewo8/ghOoU7wfhyBFhPJPm5o8C042HIu4rihJ/NrpWw13UkVJHnQ4OlgRJuvW/+pfR+5AUwSdRh2Cot/U+k6mIMeNeDnqk02CRYtC2C+PTyPK8JveJMqCYP4wKwNtGblQaNmLeZlzX1yYxTpc+VsA/tlq0uz4JtIhsFfvlpeWplZ6vV7TjJHZwNpUk34TcDbstR6iUoTboJW6zHwOh0KPyXM8kxDBwLo5NeyQNdmnQTn8NxMDp5pjzQpUk34WJsWY1O1uptF/M4jFK6WL1TadIlDMKjlS42fgG0NVz0qKWL1TuVJh+xsh29dLEe6NIC5GXo9VXddEoX6+9XSovwxw3/K9nQeAysaTwT/spoiI7nttbU1F8ecld/HmfjEQAAAABJRU5ErkJggg==';
5867
var chevrondown = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMTYuMDAzIDE4LjYyNmw3LjA4MS03LjA4MUwyNSAxMy40NmwtOC45OTcgOC45OTgtOS4wMDMtOSAxLjkxNy0xLjkxNnoiLz48L3N2Zz4=';
5968

@@ -111,18 +120,34 @@ var InputBox = function (_Component) {
111120
if (this.state.search_value.trim().length < 3) {
112121
keys.forEach(function (key) {
113122
if (!filter.children[key].stayfirst) {
114-
DATA.push(_this2.getCheckBox(filter.children[key], name));
123+
DATA.push(_react2.default.createElement(
124+
'div',
125+
{ key: key },
126+
_this2.getCheckBox(filter.children[key], name)
127+
));
115128
} else {
116-
DATASTAYFIRST.push(_this2.getCheckBox(filter.children[key], name));
129+
DATASTAYFIRST.push(_react2.default.createElement(
130+
'div',
131+
{ key: key },
132+
_this2.getCheckBox(filter.children[key], name)
133+
));
117134
}
118135
});
119136
} else {
120137
if (filter.search_result && filter.search_result.length > 0) {
121-
filter.search_result.forEach(function (item) {
138+
filter.search_result.forEach(function (item, index) {
122139
if (!item.stayfirst) {
123-
DATA.push(_this2.getCheckBox(item, name));
140+
DATA.push(_react2.default.createElement(
141+
'div',
142+
{ key: index },
143+
_this2.getCheckBox(item, name)
144+
));
124145
} else {
125-
DATASTAYFIRST.push(_this2.getCheckBox(item, name));
146+
DATASTAYFIRST.push(_react2.default.createElement(
147+
'div',
148+
{ key: index },
149+
_this2.getCheckBox(item, name)
150+
));
126151
}
127152
});
128153
}
@@ -194,7 +219,7 @@ var InputBox = function (_Component) {
194219
hoverText
195220
)
196221
),
197-
placement: toolTipPlacement ? toolTipPlacement : 'left'
222+
placement: toolTipPlacement ? toolTipPlacement : 'bottom'
198223
}),
199224
checkboxNode.children && checkboxNode.children !== null && Object.keys(checkboxNode.children).length !== 0 && _react2.default.createElement(
200225
'span',
@@ -346,7 +371,7 @@ var InputBox = function (_Component) {
346371
id: 'binary_checkbox_search_' + filter.name,
347372
maxLength: 80,
348373
value: this.state.search_value,
349-
addonBefore: _react2.default.createElement('i', { className: 'fa fa-search' })
374+
addonbefore: _react2.default.createElement('i', { className: 'fa fa-search' })
350375
})
351376
);
352377
}
@@ -434,7 +459,11 @@ var InputBox = function (_Component) {
434459
filter && _react2.default.createElement(
435460
CheckboxContainer,
436461
{ key: name.split(' ').join(''), style: infinite ? { overflow: 'inherit', maxHeight: 'none' } : {} },
437-
CHECKBOX_RENDER.length === 0 ? 'No Results Found !' : _react2.default.createElement(
462+
CHECKBOX_RENDER.length === 0 ? _react2.default.createElement(
463+
'p',
464+
null,
465+
'No Results Found !'
466+
) : _react2.default.createElement(
438467
'div',
439468
{ key: Math.random() },
440469
CHECKBOX_RENDER
Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
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 _templateObject = _taggedTemplateLiteral(['\n width: 100%;\n'], ['\n width: 100%;\n']);
10+
11+
var _react = require('react');
12+
13+
var _react2 = _interopRequireDefault(_react);
14+
15+
var _propTypes = require('prop-types');
16+
17+
var _propTypes2 = _interopRequireDefault(_propTypes);
18+
19+
var _InputBox = require('./../InputBox');
20+
21+
var _InputBox2 = _interopRequireDefault(_InputBox);
22+
23+
var _util = require('./util');
24+
25+
var _lodash = require('lodash');
26+
27+
var _styledComponents = require('styled-components');
28+
29+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
30+
31+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
32+
33+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
34+
35+
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; }
36+
37+
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; }
38+
39+
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
40+
41+
var Container = _styledComponents2.default.div(_templateObject);
42+
43+
var ReactSelectionTree = function (_Component) {
44+
_inherits(ReactSelectionTree, _Component);
45+
46+
function ReactSelectionTree(props) {
47+
_classCallCheck(this, ReactSelectionTree);
48+
49+
var _this = _possibleConstructorReturn(this, (ReactSelectionTree.__proto__ || Object.getPrototypeOf(ReactSelectionTree)).call(this, props));
50+
51+
_this.state = {
52+
data: false,
53+
originalData: false,
54+
flatData: false
55+
};
56+
return _this;
57+
}
58+
59+
_createClass(ReactSelectionTree, [{
60+
key: 'componentDidMount',
61+
value: function componentDidMount() {
62+
this.load();
63+
}
64+
}, {
65+
key: 'load',
66+
value: function load() {
67+
var data = this.props.data;
68+
var flatData = (0, _util.flattenNode)(data, false);
69+
this.setState({
70+
data: data,
71+
flatData: flatData,
72+
originalData: (0, _lodash.merge)({}, this.state.data)
73+
});
74+
}
75+
}, {
76+
key: 'reset',
77+
value: function reset() {
78+
var flatData = this.state.flatData;
79+
Object.keys(flatData).forEach(function (key) {
80+
if (flatData[key] && typeof flatData[key].checked !== 'undefined') {
81+
flatData[key].checked = false;
82+
}
83+
});
84+
var rootData = this.state.data;
85+
while (rootData.parent && rootData.parent !== null) {
86+
rootData = rootData.parent;
87+
}
88+
rootData.search_result = undefined;
89+
this.setState({
90+
data: Object.assign({}, rootData),
91+
flatData: Object.assign({}, this.state.flatData)
92+
});
93+
}
94+
}, {
95+
key: 'update',
96+
value: function update(data, callback) {
97+
this.setState({
98+
data: Object.assign({}, data),
99+
flatData: Object.assign({}, this.state.flatData)
100+
}, function () {
101+
if (callback) {
102+
callback(data);
103+
}
104+
});
105+
}
106+
}, {
107+
key: 'updateOriginalFromData',
108+
value: function updateOriginalFromData() {
109+
(0, _util.copyTreeState)(this.state.originalData, this.state.data);
110+
this.setState({
111+
originalData: Object.assign({}, this.state.originalData)
112+
});
113+
}
114+
}, {
115+
key: 'updateDataFromOriginal',
116+
value: function updateDataFromOriginal() {
117+
(0, _util.copyTreeState)(this.state.data, this.state.originalData);
118+
var rootNode = Object.assign({}, this.state.data);
119+
this.setState({
120+
data: rootNode,
121+
flatData: (0, _util.flattenNode)(rootNode)
122+
});
123+
}
124+
}, {
125+
key: 'checkEmpty',
126+
value: function checkEmpty() {
127+
return this.state.data && this.state.data !== null && this.state.data.children && this.state.data.children !== null && Object.keys(this.state.data.children).length === 0;
128+
}
129+
}, {
130+
key: 'render',
131+
value: function render() {
132+
var _this2 = this;
133+
134+
return _react2.default.createElement(
135+
Container,
136+
null,
137+
this.checkEmpty() && _react2.default.createElement(
138+
'p',
139+
null,
140+
'There are no available data.'
141+
),
142+
!this.checkEmpty() && this.state.data && _react2.default.createElement(_InputBox2.default, {
143+
name: this.props.name,
144+
filter: this.state.data,
145+
checkFilter: function checkFilter(name, filter, checked) {
146+
filter.checked = checked;
147+
if (checked) {
148+
(0, _util.flattenChildren)(filter, true);
149+
}
150+
if (!checked) {
151+
(0, _util.flattenParent)(filter, false);
152+
(0, _util.flattenChildren)(filter, false);
153+
}
154+
_this2.update(filter.parent && filter.parent !== null ? filter.parent : filter, _this2.props.check);
155+
},
156+
updateFilter: function updateFilter(data) {
157+
_this2.update(data);
158+
_this2.props.breadcrumClick(data);
159+
},
160+
searchFilter: function searchFilter(value) {
161+
var filter = _this2.state.data;
162+
var result = [];
163+
Object.keys(_this2.state.flatData).forEach(function (key) {
164+
if (result.length < 15 && _this2.state.flatData[key].name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
165+
result.push(_this2.state.flatData[key]);
166+
}
167+
});
168+
while (filter.parent && filter.parent !== null) {
169+
filter = _this2.state.data.parent;
170+
}
171+
filter.search_result = result;
172+
_this2.update(filter, _this2.props.search);
173+
},
174+
resetSearch: function resetSearch() {
175+
var filter = _this2.state.data;
176+
while (filter.parent && filter.parent !== null) {
177+
filter = _this2.state.data.parent;
178+
}
179+
filter.search_result = [];
180+
_this2.update(filter, _this2.props.reset);
181+
},
182+
uncheckAll: function uncheckAll() {
183+
var filter = _this2.state.data;
184+
var flatData = _this2.state.flatData;
185+
Object.keys(flatData).forEach(function (key) {
186+
flatData[key].checked = false;
187+
});
188+
while (filter.parent && filter.parent !== null) {
189+
filter = _this2.state.data.parent;
190+
}
191+
_this2.update(filter, _this2.props.uncheckAll);
192+
},
193+
clearall: this.props.showClearAll,
194+
search: this.props.showSearch,
195+
multipleSelect: this.props.multipleSelect
196+
})
197+
);
198+
}
199+
}]);
200+
201+
return ReactSelectionTree;
202+
}(_react.Component);
203+
204+
ReactSelectionTree.propTypes = {
205+
name: _propTypes2.default.string.isRequired,
206+
data: _propTypes2.default.object.isRequired,
207+
excludeSelect: _propTypes2.default.array,
208+
209+
breadcrumClick: _propTypes2.default.func.isRequired,
210+
check: _propTypes2.default.func.isRequired,
211+
search: _propTypes2.default.func.isRequired,
212+
reset: _propTypes2.default.func.isRequired,
213+
uncheckAll: _propTypes2.default.func.isRequired,
214+
showSearch: _propTypes2.default.bool,
215+
showClearAll: _propTypes2.default.bool,
216+
infinite: _propTypes2.default.bool,
217+
multipleSelect: _propTypes2.default.bool
218+
};
219+
ReactSelectionTree.defaultProps = {
220+
name: '',
221+
search: true
222+
};
223+
exports.default = ReactSelectionTree;
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"private": false,
3+
"name": "ReactSelectionTree",
4+
"main": "./ReactSelectionTree.js"
5+
}

0 commit comments

Comments
 (0)