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
330 lines (275 loc) • 13.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _checkboxTree = require('./styles/checkbox-tree');
var _treeItem = require('./js/tree-item');
var _treeItem2 = _interopRequireDefault(_treeItem);
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; } /**
* Created by manoraj.k on 17/08/17.
*/
var CheckboxTree = function (_React$Component) {
_inherits(CheckboxTree, _React$Component);
_createClass(CheckboxTree, null, [{
key: 'getDisabledState',
value: function getDisabledState(node, parent, disabledProp, noCascade) {
if (disabledProp || !noCascade && parent.disabled) {
return true;
}
return false;
}
}]);
function CheckboxTree(props) {
_classCallCheck(this, CheckboxTree);
var _this = _possibleConstructorReturn(this, (CheckboxTree.__proto__ || Object.getPrototypeOf(CheckboxTree)).call(this, props));
_this.valueNodesMap = {};
_lodash2.default.bindAll(_this, 'addNodesToMap', 'unserializeLists', 'renderItems', 'renderChilds', 'onCheck', 'onExpand', 'prepareNodes');
_this.prepareNodes(props.nodes, props.checked, props.expanded);
return _this;
}
_createClass(CheckboxTree, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(_ref) {
var nodes = _ref.nodes,
checked = _ref.checked,
expanded = _ref.expanded;
if (!_lodash2.default.isEqual(this.props.nodes, nodes)) {
this.addNodesToMap(nodes);
}
this.unserializeLists({ checked: checked, expanded: expanded });
}
}, {
key: 'onExpand',
value: function onExpand(node) {
var onExpand = this.props.onExpand;
this.toggleNode('expanded', node, node.expanded);
onExpand(this.serializeList('expanded'));
}
}, {
key: 'onCheck',
value: function onCheck(node) {
var _props = this.props,
noCascade = _props.noCascade,
onCheck = _props.onCheck;
this.toggleChecked(node, node.checked, noCascade);
onCheck(this.serializeList('checked'));
}
}, {
key: 'getCheckState',
value: function getCheckState(node, noCascade) {
if (node.children === null || noCascade) {
return node.checked ? 1 : 0;
}
if (this.isEveryChildChecked(node)) {
return 1;
}
if (this.isSomeChildChecked(node)) {
return 2;
}
return 0;
}
}, {
key: 'getFormattedNodes',
value: function getFormattedNodes(nodes) {
var _this2 = this;
return _lodash2.default.map(nodes, function (node) {
var formatted = _extends({}, node);
formatted.checked = _this2.valueNodesMap[node.value].checked;
formatted.expanded = _this2.valueNodesMap[node.value].expanded;
if (_lodash2.default.isArray(node.children) && node.children.length > 0) {
formatted.children = _this2.getFormattedNodes(formatted.children);
} else {
formatted.children = null;
}
return formatted;
});
}
}, {
key: 'isEveryChildChecked',
value: function isEveryChildChecked(node) {
var _this3 = this;
return _lodash2.default.every(node.children, function (child) {
if (child.children !== null) {
return _this3.isEveryChildChecked(child);
}
return child.checked;
});
}
}, {
key: 'isSomeChildChecked',
value: function isSomeChildChecked(node) {
var _this4 = this;
return _lodash2.default.some(node.children, function (child) {
if (child.children !== null) {
return _this4.isSomeChildChecked(child);
}
return child.checked;
});
}
}, {
key: 'addNodesToMap',
value: function addNodesToMap(nodes) {
var _this5 = this;
if (!_lodash2.default.isArray(nodes) || nodes.length === 0) {
return;
}
_lodash2.default.each(nodes, function (node) {
_this5.valueNodesMap[node.value] = {};
_this5.addNodesToMap(node.children);
});
}
}, {
key: 'serializeList',
value: function serializeList(key) {
var _this6 = this;
var list = [];
Object.keys(this.valueNodesMap).forEach(function (value) {
if (_this6.valueNodesMap[value][key]) {
list.push(value);
}
});
return list;
}
}, {
key: 'unserializeLists',
value: function unserializeLists(nodeProperties) {
var _this7 = this;
_lodash2.default.each(nodeProperties, function (nodeNames, key) {
_lodash2.default.each(_this7.valueNodesMap, function (node) {
node[key] = false;
});
});
_lodash2.default.each(nodeProperties, function (nodeNames, key) {
_lodash2.default.each(nodeNames, function (nodeName) {
_this7.valueNodesMap[nodeName][key] = true;
});
});
}
}, {
key: 'prepareNodes',
value: function prepareNodes(nodes, checked, expanded) {
this.addNodesToMap(nodes);
this.unserializeLists({
checked: checked,
expanded: expanded
});
}
}, {
key: 'toggleNode',
value: function toggleNode(key, node, toggleValue) {
this.valueNodesMap[node.value][key] = toggleValue;
}
}, {
key: 'toggleChecked',
value: function toggleChecked(node, isChecked, noCascade) {
var _this8 = this;
if (node.children === null || noCascade) {
// Set the check status of a leaf node or an uncoupled parent
this.toggleNode('checked', node, isChecked);
} else {
// Percolate check status down to all children
node.children.forEach(function (child) {
_this8.toggleChecked(child, isChecked);
});
}
}
}, {
key: 'renderChilds',
value: function renderChilds(node) {
if (node.children !== null && node.expanded) {
return this.renderItems(node.children, node);
}
return null;
}
}, {
key: 'renderItems',
value: function renderItems(nodes) {
var _this9 = this;
var parentNode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _props2 = this.props,
disabled = _props2.disabled,
expandDisabled = _props2.expandDisabled,
noCascade = _props2.noCascade,
getCollapseIcon = _props2.getCollapseIcon,
getCheckboxIcon = _props2.getCheckboxIcon;
var treeNodes = nodes.map(function (node) {
var key = '' + node.value;
var checked = _this9.getCheckState(node, noCascade);
var children = _this9.renderChilds(node);
var nodeDisabled = CheckboxTree.getDisabledState(node, parentNode, disabled, noCascade);
return _react2.default.createElement(
_treeItem2.default,
{
key: key,
checked: checked,
disabled: nodeDisabled,
expandDisabled: expandDisabled,
expanded: node.expanded,
getCollapseIcon: getCollapseIcon,
getCheckboxIcon: getCheckboxIcon,
label: node.label,
value: node.value,
onCheck: _this9.onCheck,
onExpand: _this9.onExpand,
listChildren: node.children,
noCheckbox: node.noCheckbox
},
children
);
});
return _react2.default.createElement(
'ol',
null,
treeNodes
);
}
}, {
key: 'render',
value: function render() {
var nodes = this.getFormattedNodes(this.props.nodes);
var treeNodes = this.renderItems(nodes);
return _react2.default.createElement(
_checkboxTree.CheckboxTreeContainer,
{ maxHeight: this.props.height },
treeNodes
);
}
}]);
return CheckboxTree;
}(_react2.default.Component);
exports.default = CheckboxTree;
CheckboxTree.propTypes = {
nodes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
label: _propTypes2.default.string.isRequired,
value: _propTypes2.default.string.isRequired,
children: _propTypes2.default.array
})).isRequired,
checked: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
expanded: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
onExpand: _propTypes2.default.func.isRequired,
onCheck: _propTypes2.default.func.isRequired,
height: _propTypes2.default.string.isRequired,
getCheckboxIcon: _propTypes2.default.func,
getCollapseIcon: _propTypes2.default.string,
expandDisabled: _propTypes2.default.bool,
disabled: _propTypes2.default.bool,
noCascade: _propTypes2.default.bool
};
CheckboxTree.defaultProps = {
getCheckboxIcon: undefined,
getCollapseIcon: undefined,
expandDisabled: false,
disabled: false,
noCascade: undefined
};