fk-react-ui-components
Version:
Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should
273 lines (233 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _each = require('lodash/each');
var _each2 = _interopRequireDefault(_each);
var _filter = require('lodash/filter');
var _filter2 = _interopRequireDefault(_filter);
var _cloneDeep = require('lodash/cloneDeep');
var _cloneDeep2 = _interopRequireDefault(_cloneDeep);
var _isEqual = require('lodash/isEqual');
var _isEqual2 = _interopRequireDefault(_isEqual);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _ = require('./..');
var _styles = require('./styles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
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; }
var filterNodes = function filterNodes(nodes, value, root, expanded) {
(0, _each2.default)(nodes, function (node) {
var nodeName = node.label.replace(/_+?/g, '').toLowerCase().indexOf(value.trim().toLowerCase());
if (Object.prototype.hasOwnProperty.call(node, 'children')) {
filterNodes(node.children, value, false, expanded);
node.children = (0, _filter2.default)(node.children, function (child) {
return child.search;
});
if (node.children.length > 0) {
node.search = true;
expanded.push(node.value);
} else {
node.search = false;
}
} else if (nodeName > -1) {
node.search = true;
} else {
node.search = false;
}
});
if (root) {
return (0, _filter2.default)(nodes, function (node) {
return node.search;
});
}
};
var CheckboxTreeFilter = function (_Component) {
_inherits(CheckboxTreeFilter, _Component);
function CheckboxTreeFilter(props) {
_classCallCheck(this, CheckboxTreeFilter);
var _this = _possibleConstructorReturn(this, (CheckboxTreeFilter.__proto__ || Object.getPrototypeOf(CheckboxTreeFilter)).call(this, props));
_this.onSearchType = function (value) {
if (value.length <= 0) {
_this.setState({ nodes: _this.nodes });
} else if (value.length > _this.searchThreshold) {
var expanded = [];
_this.expanded = _this.state.expanded;
_this.value = _this.state.value;
var newNodes = filterNodes((0, _cloneDeep2.default)(_this.nodes), value, true, expanded);
_this.setState({ nodes: newNodes, expanded: expanded });
}
};
_this.onFilterChange = function (value) {
_this.setState({ value: value });
};
_this.onFilterExpand = function (expanded) {
_this.setState({ expanded: expanded });
};
_this.getSelectedNode = function (initNodes, initValue) {
var selectedNode = {};
var findNode = function findNode(nodes, value) {
return nodes.forEach(function (node) {
if (node.value === value) {
selectedNode = node;
} else if (node.children && node.children.length) {
return findNode(node.children, value);
}
});
};
findNode(initNodes, initValue);
return selectedNode;
};
_this.resetFilter = function (e) {
_this.setState({ value: [] });
e.stopPropagation();
};
_this.state = {
value: props.value || [],
expanded: props.expanded || [],
search: props.searchValue || '',
nodes: props.nodes
};
_this.nodes = (0, _cloneDeep2.default)(props.nodes);
_this.searchThreshold = props.searchThreshold || 2;
return _this;
}
_createClass(CheckboxTreeFilter, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (!(0, _isEqual2.default)(this.state.nodes, nextProps.nodes) || nextProps.value && !(0, _isEqual2.default)(this.state.value, nextProps.value)) {
this.nodes = (0, _cloneDeep2.default)(nextProps.nodes);
this.setState({
nodes: nextProps.nodes,
value: nextProps.value
});
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
if (this.state.value.length !== prevState.value.length) {
if (this.props.onChange) {
this.props.onChange(this.state.value, this.props.name);
}
}
}
}, {
key: 'getChipTemplate',
value: function getChipTemplate() {
var label = null;
var value = this.state.value;
if (value.length === 1) {
var selectedNode = this.getSelectedNode(this.state.nodes, value[0]);
label = selectedNode.label;
} else {
label = value.length + ' ' + this.props.chipLabel;
}
return _react2.default.createElement(
_.Chip,
{ id: label, onRemoveClick: this.resetFilter },
label
);
}
}, {
key: 'getCustomSelectLabelTemplate',
value: function getCustomSelectLabelTemplate() {
if (this.state.value.length) {
return _react2.default.createElement(
_styles.ChipLabelContainer,
null,
this.getChipTemplate()
);
}
return _react2.default.createElement(
_styles.TextLabelContainer,
null,
this.props.label
);
}
}, {
key: 'getSearchTemplate',
value: function getSearchTemplate() {
if (this.props.includeSearch) {
return _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(_.SimpleSearch, {
placeholder: this.props.placeholder,
value: this.state.search,
onChange: this.onSearchType,
onSearch: this.onSearchType
}),
_react2.default.createElement(_styles.Separator, null)
);
}
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
_.CustomSelect,
{
name: this.props.name,
isOpen: this.props.isOpen,
isActive: this.props.isActive,
labelContent: this.getCustomSelectLabelTemplate()
},
_react2.default.createElement(
_styles.CustomSelectBodyContent,
null,
this.getSearchTemplate(),
_react2.default.createElement(_.CheckboxTree, {
nodes: this.state.nodes,
showNodeIcon: false,
expanded: this.state.expanded,
checked: this.state.value,
onCheck: this.onFilterChange,
onExpand: this.onFilterExpand,
height: this.props.treeHeight
})
)
);
}
}]);
return CheckboxTreeFilter;
}(_react.Component);
CheckboxTreeFilter.propTypes = {
name: _propTypes2.default.string,
isOpen: _propTypes2.default.bool,
isActive: _propTypes2.default.bool,
label: _propTypes2.default.string.isRequired,
chipLabel: _propTypes2.default.string.isRequired,
value: _propTypes2.default.arrayOf(_propTypes2.default.string),
expanded: _propTypes2.default.arrayOf(_propTypes2.default.string),
searchValue: _propTypes2.default.string,
nodes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
label: _propTypes2.default.string.isRequired,
value: _propTypes2.default.string.isRequired,
children: _propTypes2.default.array
})).isRequired,
searchThreshold: _propTypes2.default.number,
includeSearch: _propTypes2.default.bool,
placeholder: _propTypes2.default.string,
onChange: _propTypes2.default.func,
treeHeight: _propTypes2.default.string
};
CheckboxTreeFilter.defaultProps = {
name: '',
isOpen: false,
isActive: false,
onChange: undefined,
searchThreshold: 2,
includeSearch: false,
searchValue: '',
treeHeight: '150px',
placeholder: 'Search',
value: [],
expanded: []
};
exports.default = CheckboxTreeFilter;