Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rsuite-check-tree

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rsuite-check-tree - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

193

lib/CheckTree.js

@@ -38,3 +38,4 @@ 'use strict';

var propTypes = {
data: _react2.default.PropTypes.array.isRequired,
height: _propTypes2.default.number,
data: _propTypes2.default.array.isRequired, // eslint-disable-line react/forbid-prop-types
/**

@@ -44,5 +45,5 @@ * 是否关系检查

relation: _propTypes2.default.bool,
defaultValue: _propTypes2.default.array,
value: _propTypes2.default.array,
disabledItems: _propTypes2.default.array,
defaultValue: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
value: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
disabledItems: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
valueKey: _propTypes2.default.string,

@@ -55,3 +56,4 @@ labelKey: _propTypes2.default.string,

onSelect: _propTypes2.default.func,
rennderTreeNode: _propTypes2.default.func
renderTreeNode: _propTypes2.default.func,
renderTreeIcon: _propTypes2.default.func
};

@@ -80,15 +82,14 @@

for (var i = 0; i < nodes.length; i += 1) {
if (nodes[i][valueKey] === value) {
nodes[i].checkState = nodes[i].checkState !== 'checked' ? 'checked' : 'unchecked';
return nodes[i];
} else if (nodes[i][childrenKey]) {
var activeNode = _this.getActiveNode(nodes[i][childrenKey], value);
nodes.forEach(function (node) {
if (_lodash2.default.isEqual(node[valueKey], value)) {
node.checkState = node.checkState !== 'checked' ? 'checked' : 'unchecked';
return node;
} else if (node[childrenKey]) {
var activeNode = _this.getActiveNode(node[childrenKey], value);
if (activeNode) {
if (relation) {
var checkedNodes = nodes[i][childrenKey].filter(function (node) {
return node.checkState === 'checked' || node.checkState === 'halfChecked';
var checkedNodes = node[childrenKey].filter(function (n) {
return n.checkState === 'checked' || n.checkState === 'halfChecked';
});
nodes[i].checkState = _this.getCheckState(checkedNodes, nodes[i]);
node.checkState = _this.getCheckState(checkedNodes, node);
}

@@ -98,3 +99,3 @@ return activeNode;

}
}
});
return false;

@@ -109,17 +110,16 @@ };

var loop = function loop(nodes) {
var _loop = function _loop(i) {
selectedValues.forEach(function (node) {
nodes[i].checkState = node === nodes[i][valueKey] ? 'checked' : 'unchecked';
var level = 0;
var loop = function loop(nodes, ref) {
nodes.forEach(function (node, index) {
node.refKey = ref + '-' + index;
selectedValues.forEach(function (selected) {
node.checkState = _lodash2.default.isEqual(selected, node[valueKey]) ? 'checked' : 'unchecked';
});
if (nodes[i][childrenKey]) {
loop(nodes[i][childrenKey]);
node.expand = _this.getExpandState(node);
if (node[childrenKey]) {
loop(node[childrenKey], node.refKey);
}
};
for (var i = 0; i < nodes.length; i += 1) {
_loop(i);
}
});
};
loop(_this.tempNode, null);
loop(_this.tempNode, level);
};

@@ -133,20 +133,18 @@

var loop = function loop(nodes, parentNode) {
var _loop2 = function _loop2(i) {
nodes[i].parentNode = parentNode;
var level = 0;
var loop = function loop(nodes, parentNode, ref) {
nodes.forEach(function (node, index) {
node.refKey = ref + '-' + index;
node.expand = _this.getExpandState(node);
node.parentNode = parentNode;
// 同时加上 checkState 属性
selectedValues.forEach(function (node) {
nodes[i].checkState = node === nodes[i][valueKey] ? 'checked' : 'unchecked';
selectedValues.forEach(function (selected) {
node.checkState = _lodash2.default.isEqual(selected, node[valueKey]) ? 'checked' : 'unchecked';
});
if (nodes[i][childrenKey]) {
loop(nodes[i][childrenKey], nodes[i]);
if (node[childrenKey]) {
loop(node[childrenKey], node, node.refKey);
}
};
for (var i = 0; i < nodes.length; i += 1) {
_loop2(i);
}
});
};
loop(_this.tempNode, null);
loop(_this.tempNode, null, level);
};

@@ -191,2 +189,13 @@

_this.handleToggle = function (nodeData, layer) {
var onExpand = _this.props.onExpand;
var nextData = _lodash2.default.cloneDeep(_this.state.data);
_this.setState({
data: nextData
}, function () {
onExpand && onExpand(nodeData, layer);
});
};
_this.tempNode = null;

@@ -197,3 +206,4 @@ _this.isControlled = 'value' in props;

data: [],
selectedValues: nextValue
selectedValues: nextValue,
defaultExpandAll: props.defaultExpandAll
};

@@ -260,3 +270,20 @@ return _this;

}
}, {
key: 'getExpandState',
value: function getExpandState(node) {
var _props = this.props,
childrenKey = _props.childrenKey,
defaultExpandAll = _props.defaultExpandAll;
if (node[childrenKey] && node[childrenKey].length) {
if ('expand' in node) {
return !!node.expand;
} else if (defaultExpandAll) {
return true;
}
return false;
}
return false;
}
/**

@@ -269,2 +296,21 @@ * 当前找到当前选中的节点

}, {
key: 'getSelectedValues',
value: function getSelectedValues(selectValue, checkState) {
var selectedValues = this.state.selectedValues;
var key = -1;
selectedValues.forEach(function (value, index) {
if (_lodash2.default.isEqual(selectedValues, value)) {
key = index;
}
});
if (checkState === 'checked') {
selectedValues.push(selectValue);
} else if (checkState === 'unchecked' || !checkState) {
if (key !== -1) {
selectedValues.splice(key, 1);
}
}
return selectedValues;
}

@@ -284,29 +330,25 @@ /**

var selectedValues = this.state.selectedValues;
var _props = this.props,
valueKey = _props.valueKey,
childrenKey = _props.childrenKey;
var _props2 = this.props,
valueKey = _props2.valueKey,
childrenKey = _props2.childrenKey;
var leafNodes = [];
var loop = function loop(nodes) {
var _loop3 = function _loop3(i) {
selectedValues.forEach(function (node) {
if (nodes[i][childrenKey]) {
if (node === nodes[i][valueKey] || nodes[i].checkState === 'checked') {
nodes[i].childrenKey.map(function (node) {
return node.checkState = 'checked';
nodes.forEach(function (node) {
selectedValues.forEach(function (selected) {
if (node[childrenKey]) {
if (_lodash2.default.isEqual(node, node[valueKey]) || node.checkState === 'checked') {
node[childrenKey].map(function (v) {
return v.checkState = 'checked';
});
}
loop(nodes[i][childrenKey]);
loop(node[childrenKey]);
} else {
leafNodes.push(nodes[i]);
leafNodes.push(node);
}
if (node === nodes[i][valueKey]) {
nodes[i].checkState = 'checked';
if (_lodash2.default.isEqual(selected, node[valueKey])) {
node.checkState = 'checked';
}
});
};
for (var i = 0; i < nodes.length; i += 1) {
_loop3(i);
}
});
};

@@ -329,4 +371,4 @@ loop(this.tempNode);

var upLoop = function upLoop(node) {
var parentNode = node.parentNode;
var upLoop = function upLoop(leafNode) {
var parentNode = leafNode.parentNode;
if (parentNode) {

@@ -357,16 +399,3 @@ var checkedNodes = parentNode[childrenKey].filter(function (node) {

}, {
key: 'getSelectedValues',
value: function getSelectedValues(selectValue, checkState) {
var selectedValues = this.state.selectedValues;
var key = selectedValues.indexOf(selectValue);
if (checkState === 'checked') {
selectedValues.push(selectValue);
} else if (checkState === 'unchecked' || !checkState) {
if (key !== -1) {
selectedValues.splice(key, 1);
}
}
return selectedValues;
}
/**

@@ -381,5 +410,5 @@ * 选择某个节点后的回调函数

value: function render() {
var _props2 = this.props,
onChange = _props2.onChange,
props = _objectWithoutProperties(_props2, ['onChange']);
var _props3 = this.props,
onChange = _props3.onChange,
props = _objectWithoutProperties(_props3, ['onChange']);

@@ -389,3 +418,5 @@ return _react2.default.createElement(_Tree2.default, _extends({}, props, {

data: this.state.data,
onChange: this.handleSelect
defaultExpandAll: this.state.defaultExpandAll,
onChange: this.handleSelect,
onExpand: this.handleToggle
}));

@@ -392,0 +423,0 @@ }

@@ -45,5 +45,5 @@ 'use strict';

className = _props.className,
key = _props.key,
children = _props.children,
props = _objectWithoutProperties(_props, ['className', 'key', 'children']);
nodeData = _props.nodeData,
props = _objectWithoutProperties(_props, ['className', 'children', 'nodeData']);

@@ -54,6 +54,5 @@ var Node = _TreeCheckNode2.default;

{
className: className,
key: key
className: className
},
_react2.default.createElement(Node, props),
_react2.default.createElement(Node, this.props),
_react2.default.createElement(

@@ -60,0 +59,0 @@ 'div',

@@ -19,2 +19,6 @@ 'use strict';

var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var _reactDom = require('react-dom');

@@ -62,14 +66,21 @@

var propTypes = {
data: _propTypes2.default.array.isRequired,
height: _propTypes2.default.number,
data: _react2.default.PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
/**
* 是否关系检查
*/
relation: _propTypes2.default.bool,
defaultValue: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
value: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
disabledItems: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
valueKey: _propTypes2.default.string,
labelKey: _propTypes2.default.string,
childrenKey: _propTypes2.default.string,
defaultExpandAll: _propTypes2.default.bool,
activeNode: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
onChange: _propTypes2.default.func,
onExpand: _propTypes2.default.func,
disabledItems: _propTypes2.default.array,
value: _propTypes2.default.array,
defaultValue: _propTypes2.default.array,
valueKey: _propTypes2.default.string,
labelKey: _propTypes2.default.string,
childrenKey: _propTypes2.default.string,
activeNode: _propTypes2.default.object
onSelect: _propTypes2.default.func,
renderTreeNode: _propTypes2.default.func,
renderTreeIcon: _propTypes2.default.func
};

@@ -89,2 +100,32 @@

_this.getFocusableMenuItems = function () {
var _this$props = _this.props,
data = _this$props.data,
childrenKey = _this$props.childrenKey;
var items = [];
var loop = function loop(nodes) {
nodes.forEach(function (node) {
if (!node.disabled) {
items.push(node);
if (!node.expand) {
return;
}
if (node[childrenKey]) {
loop(node[childrenKey]);
}
}
});
};
loop(data);
return items;
};
_this.getElementByDataKey = function (dataKey) {
var ele = (0, _reactDom.findDOMNode)(_this);
return ele.querySelector('[data-key="' + dataKey + '"]');
};
_this.selectActiveItem = function (event) {

@@ -100,24 +141,9 @@ var onChange = _this.props.onChange;

_this.toggleTreeNodeClass = function (nodeData) {
var ele = (0, _reactDom.findDOMNode)(_this);
var loop = function loop(nodes) {
nodes.forEach(function (node) {
(0, _domLib.toggleClass)(ele.querySelector('[data-value="' + node.value + '"]'), 'view');
if (node.children) {
loop(node.children);
}
});
};
_this.handleTreeToggle = function (nodeData, layer) {
var onExpand = _this.props.onExpand;
if (nodeData.children) {
loop(nodeData.children);
}
};
_this.handleTreeToggle = function (nodeData, layer, event) {
var onExpand = _this.props.onExpand;
(0, _domLib.toggleClass)((0, _reactDom.findDOMNode)(_this.refs[nodeData.refKey]), 'open');
nodeData.expand = (0, _domLib.hasClass)((0, _reactDom.findDOMNode)(_this.refs[nodeData.refKey]), 'open');
_this.toggleTreeNodeClass(nodeData);
(0, _domLib.toggleClass)((0, _reactDom.findDOMNode)(_this.refs['children_' + nodeData.value]), 'open');
nodeData.expand = (0, _domLib.hasClass)((0, _reactDom.findDOMNode)(_this.refs['children_' + nodeData.value]), 'open');
onExpand && onExpand(nodeData, layer);

@@ -127,5 +153,7 @@ };

_this.handleNodeSelect = function (nodeData, layer, event) {
var valueKey = _this.props.valueKey;
_this.setState({
activeNode: nodeData.value
activeNode: nodeData[valueKey]
}, function () {

@@ -140,3 +168,3 @@ var onChange = _this.props.onChange;

switch (event.keyCode) {
//down
// down
case 40:

@@ -146,3 +174,3 @@ _this.focusNextItem();

break;
//up
// up
case 38:

@@ -152,3 +180,3 @@ _this.focusPreviousItem();

break;
//enter
// enter
case 13:

@@ -195,3 +223,3 @@ _this.selectActiveItem(event);

value: function getActiveElementOption(options, value) {
for (var i = 0; i < options.length; i++) {
for (var i = 0; i < options.length; i += 1) {
if (options[i].value === value) {

@@ -209,17 +237,12 @@ return options[i];

}, {
key: 'getFocusableMenuItems',
value: function getFocusableMenuItems() {
var node = (0, _reactDom.findDOMNode)(this);
if (!node) {
return [];
}
return Array.from(node.querySelectorAll('[tabIndex="-1"].tree-node.view')).filter(function (item) {
return !~item.className.indexOf('disabled');
});
}
}, {
key: 'getItemsAndActiveIndex',
value: function getItemsAndActiveIndex() {
var items = this.getFocusableMenuItems();
var activeIndex = items.indexOf(document.activeElement);
var activeIndex = 0;
items.forEach(function (item, index) {
if (item.refKey === document.activeElement.getAttribute('data-key')) {
activeIndex = index;
}
});
return { items: items, activeIndex: activeIndex };

@@ -259,3 +282,3 @@ }

var nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
items[nextIndex].focus();
this.getElementByDataKey(items[nextIndex].refKey).focus();
}

@@ -272,4 +295,5 @@ }, {

}
var prevIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
items[prevIndex].focus();
this.getElementByDataKey(items[prevIndex].refKey).focus();
}

@@ -291,7 +315,7 @@

childrenKey = _props.childrenKey,
renderTreeNode = _props.renderTreeNode;
renderTreeNode = _props.renderTreeNode,
renderTreeIcon = _props.renderTreeIcon;
var hasChildren = itemData.hasChildren,
id = itemData.id,
title = itemData.title,
disabled = itemData.disabled,
checkState = itemData.checkState;

@@ -303,3 +327,2 @@

var hasNotEmptyChildren = hasChildren !== undefined ? hasChildren : children && Array.isArray(children) && children.length > 0;
var _hasChildren = !!children;
var props = {

@@ -311,8 +334,9 @@ id: value || id,

onRenderTreeNode: renderTreeNode,
onRenderTreeIcon: renderTreeIcon,
onSelect: this.handleNodeSelect,
onKeyDown: this.handleKeyDown,
active: this.state.activeNode === value,
hasChildren: _hasChildren,
hasChildren: !!children,
disabled: disabledItems.filter(function (disabledItem) {
return disabledItem === value;
return _lodash2.default.isEqual(disabledItem, value);
}).length > 0,

@@ -329,7 +353,7 @@ children: children,

var refKey = 'children_' + itemData.value;
var refKey = itemData.refKey;
if (_hasChildren) {
if (props.hasChildren) {
layer++;
layer += 1;

@@ -346,8 +370,8 @@ // 是否展开树节点且子节点不为空

className: childrenClasses,
key: index,
key: itemData.refKey,
ref: refKey,
multiple: true
}, props),
nodes.map(function (child, index) {
return _this2.renderNode(child, index, layer, itemData);
nodes.map(function (child, i) {
return _this2.renderNode(child, i, layer, itemData);
})

@@ -357,3 +381,3 @@ );

return _react2.default.createElement(Node, _extends({ key: index }, props, { ref: refKey }));
return _react2.default.createElement(Node, _extends({ key: itemData.refKey }, props, { ref: refKey }));
}

@@ -386,5 +410,9 @@ }, {

'div',
{ ref: function ref(_ref) {
return _this3.treeView = _ref;
}, className: classes, style: styles },
{
ref: function ref(_ref) {
_this3.treeView = _ref;
},
className: classes,
style: styles
},
nodes

@@ -391,0 +419,0 @@ );

@@ -23,4 +23,2 @@ 'use strict';

var _reactDragHandler = require('react-drag-handler');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -35,3 +33,17 @@

var propTypes = {
checkState: _propTypes2.default.oneOf(['checked', 'halfChecked', 'unchecked'])
id: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
title: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
nodeData: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
active: _propTypes2.default.bool,
checkState: _propTypes2.default.oneOf(['checked', 'halfChecked', 'unchecked']),
hasChildren: _propTypes2.default.bool,
labelClickableExpand: _propTypes2.default.bool,
disabled: _propTypes2.default.bool,
layer: _propTypes2.default.number,
onTreeToggle: _propTypes2.default.func,
onSelect: _propTypes2.default.func,
onRenderTreeIcon: _propTypes2.default.func,
onRenderTreeNode: _propTypes2.default.func,
onKeyDown: _propTypes2.default.func
};

@@ -55,2 +67,3 @@

var _this$props = _this.props,
labelClickableExpand = _this$props.labelClickableExpand,
onTreeToggle = _this$props.onTreeToggle,

@@ -60,2 +73,5 @@ layer = _this$props.layer,

if (labelClickableExpand) {
return;
}
onTreeToggle(nodeData, layer, event);

@@ -78,3 +94,3 @@ }, _this.handleSelect = function (event) {

// 如果点击的是展开 icon 就 return
if ((0, _domLib.hasClass)(event.target, 'expand-icon')) {
if ((0, _domLib.hasClass)(event.target.parentNode, 'expand-icon-wrapper')) {
return;

@@ -86,9 +102,25 @@ }

onSelect(nodeData, layer, event);
}, _this.renderLabel = function () {
}, _this.renderIcon = function () {
var _this$props3 = _this.props,
nodeData = _this$props3.nodeData,
onRenderTreeNode = _this$props3.onRenderTreeNode,
title = _this$props3.title;
onRenderTreeIcon = _this$props3.onRenderTreeIcon,
hasChildren = _this$props3.hasChildren,
nodeData = _this$props3.nodeData;
var label = onRenderTreeNode ? onRenderTreeNode(nodeData) : title;
var expandIcon = typeof onRenderTreeIcon === 'function' ? onRenderTreeIcon(nodeData) : _react2.default.createElement('i', { className: 'expand-icon icon' });
return hasChildren ? _react2.default.createElement(
'div',
{
className: 'expand-icon-wrapper',
onClick: _this.handleTreeToggle
},
expandIcon
) : null;
}, _this.renderLabel = function () {
var _this$props4 = _this.props,
nodeData = _this$props4.nodeData,
onRenderTreeNode = _this$props4.onRenderTreeNode,
title = _this$props4.title;
var label = typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : title;
return _react2.default.createElement(

@@ -109,25 +141,15 @@ 'label',

value: function render() {
var _this2 = this;
var _props = this.props,
id = _props.id,
title = _props.title,
active = _props.active,
index = _props.index,
layer = _props.layer,
onTreeToggle = _props.onTreeToggle,
hasChildren = _props.hasChildren,
disabled = _props.disabled,
onKeyDown = _props.onKeyDown,
labelClickableExpand = _props.labelClickableExpand,
nodeData = _props.nodeData,
checkState = _props.checkState,
renderTreeNode = _props.renderTreeNode,
defaultExpandAll = _props.defaultExpandAll;
checkState = _props.checkState;
var classes = (0, _classnames2.default)('tree-node', {
'text-muted': nodeData.status === 'DISABLE',
'text-muted': disabled,
'half-checked': checkState === 'halfChecked',
view: defaultExpandAll,
checked: checkState === 'checked',

@@ -143,11 +165,2 @@ disabled: disabled,

var expandIcon = hasChildren ? _react2.default.createElement('i', { className: 'expand-icon icon',
onClick: function onClick(e) {
if (labelClickableExpand) {
return;
}
_this2.handleTreeToggle(e);
} }) : null;
return _react2.default.createElement(

@@ -161,7 +174,7 @@ 'div',

'data-value': id,
'data-layer': layer,
'data-key': nodeData.refKey,
style: styles,
className: classes
},
expandIcon,
this.renderIcon(),
this.renderLabel()

@@ -168,0 +181,0 @@ );

{
"name": "rsuite-check-tree",
"version": "0.1.2",
"version": "0.1.3",
"description": "A react check tree component",

@@ -5,0 +5,0 @@ "scripts": {

[![Travis](https://img.shields.io/travis/rsuite/rsuite-check-tree.svg)](https://travis-ci.org/rsuite/rsuite-check-tree) [![npm](https://img.shields.io/npm/v/rsuite-notification.svg)](https://www.npmjs.com/package/rsuite-check-tree)
# rsuite-tree
# rsuite-check-tree

@@ -4,0 +4,0 @@ check 树形控件

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc