@kaspersky/components
Version:
Kaspersky Design System UI Kit
198 lines (194 loc) • 7.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TreeView = exports.TreeNodeCheckIcon = exports.Tree = exports.Spinner = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _antd = require("antd");
var _useThemedTree = require("./useThemedTree.js");
var _treeCss = require("./treeCss.js");
var _checkbox = require("../checkbox/index.js");
var _radio = require("../radio/index.js");
var _2 = require("@kaspersky/icons/8");
var _utils = require("./utils.js");
var _loader = require("../loader/index.js");
var _useTestAttribute = require("../../helpers/hooks/useTestAttribute.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
const CustomCheckboxIcon = _ref => {
let {
checked
} = _ref;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
className: "kl-v6-checkbox-icon-normal",
checked: checked
}), /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
className: "kl-v6-checkbox-icon-indeterminate",
indeterminate: true
}));
};
const CustomRadioIcon = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
value: "1",
options: [{
label: '',
value: '1'
}, {
label: '',
value: '2'
}]
});
const TreeNodeCheckIcon = _ref2 => {
let {
checkable,
checked,
multiple
} = _ref2;
if (checkable === false) {
return null;
}
if (!multiple) {
return /*#__PURE__*/_react.default.createElement(CustomRadioIcon, null);
}
return /*#__PURE__*/_react.default.createElement(CustomCheckboxIcon, {
checked: checked
});
};
exports.TreeNodeCheckIcon = TreeNodeCheckIcon;
const Spinner = exports.Spinner = (0, _styledComponents.default)(_ref3 => {
let {
className
} = _ref3;
return /*#__PURE__*/_react.default.createElement("span", {
className: className
}, /*#__PURE__*/_react.default.createElement(_loader.Loader, {
size: "small"
}));
}).withConfig({
displayName: "Tree__Spinner",
componentId: "sc-66j6x1-0"
})(["width:0;display:inline-block;> .ant-spin{transform:translate(calc(-100% - 4px),-1px);}"]);
const StyledTreeView = (0, _styledComponents.default)(_antd.Tree).withConfig({
shouldForwardProp: prop => !['cssConfig'].includes(prop)
}).withConfig({
displayName: "Tree__StyledTreeView",
componentId: "sc-66j6x1-1"
})(["", " .ant-tree-icon__customize:has(", ":last-child){width:0;margin-right:-4px;}"], _treeCss.treeCss, Spinner);
const TreeView = _ref4 => {
let {
checkChildren = true,
checkStrictly = false,
checkable = false,
checkedKeys,
defaultCheckedKeys,
disabled = false,
draggable = false,
multiple = true,
onCheck,
selectable = false,
showLine = false,
treeData,
testAttributes,
allowUncheck = true,
...props
} = _ref4;
const parents = _react.default.useMemo(() => (0, _utils.getParents)(treeData), [treeData]);
const [nonStrictlyCheckedKeys, setNonStrictlyCheckedKeys] = _react.default.useState(() => (0, _utils.sortCheckedKeys)(treeData, defaultCheckedKeys));
const treeCheckedKeys = _react.default.useMemo(() => {
if (!multiple) {
return [...nonStrictlyCheckedKeys.checked, ...nonStrictlyCheckedKeys.halfChecked];
}
if (!checkStrictly) {
return nonStrictlyCheckedKeys;
}
return checkedKeys;
}, [multiple, checkStrictly, nonStrictlyCheckedKeys, checkedKeys]);
_react.default.useEffect(() => {
if (checkStrictly || !checkedKeys) {
return;
}
setNonStrictlyCheckedKeys((0, _utils.sortCheckedKeys)(treeData, checkedKeys));
}, [checkStrictly, checkedKeys, treeData]);
const onCheckFn = (_, event) => {
const checked = new Set(nonStrictlyCheckedKeys.checked);
const halfChecked = new Set(nonStrictlyCheckedKeys.halfChecked);
const node = event.node;
if (event.checked && !halfChecked.has(node.key)) {
if (!multiple) {
checked.clear();
halfChecked.clear();
(0, _utils.checkNode)(node, false, checked, halfChecked);
} else {
(0, _utils.checkNode)(node, checkChildren, checked, halfChecked);
// mark eligible halfChecked parents as checked
let parent = parents[node.key];
while (parent) {
if (halfChecked.has(parent.key) && !(0, _utils.hasUncheckedChildren)(parent, checked)) {
checked.add(parent.key);
halfChecked.delete(parent.key);
parent = parents[parent.key];
} else {
break;
}
}
}
} else {
if (!allowUncheck) {
return;
}
(0, _utils.uncheckNode)(node, checkChildren, checked, halfChecked);
// mark checked parents as half checked
let parent = parents[node.key];
while (parent) {
if (checked.has(parent.key)) {
checked.delete(parent.key);
halfChecked.add(parent.key);
parent = parents[parent.key];
} else {
break;
}
}
}
const checkedKeys = Array.from(checked);
const halfCheckedKeys = Array.from(halfChecked);
setNonStrictlyCheckedKeys({
checked: checkedKeys,
halfChecked: halfCheckedKeys
});
if (onCheck) {
onCheck([...checkedKeys, ...halfCheckedKeys], event);
}
};
return /*#__PURE__*/_react.default.createElement(StyledTreeView, _extends({
draggable: draggable,
checkStrictly: true,
checkable: checkable,
checkedKeys: treeCheckedKeys,
disabled: disabled,
icon: props => {
// AntdTreeNodeAttribute type is wrong, it actually can have 'checkable' prop
// TODO move Spinner to switcherIcon for antd >= 4.20.0
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null), /*#__PURE__*/_react.default.createElement(TreeNodeCheckIcon, _extends({}, props, {
multiple: multiple
})));
}
// @ts-ignore
,
onCheck: checkStrictly ? onCheck : onCheckFn,
selectable: checkable ? false : selectable,
showIcon: checkable,
showLine: showLine,
switcherIcon: /*#__PURE__*/_react.default.createElement(_2.ArrowDownSolid, null),
treeData: treeData
}, testAttributes, props, {
motion: false
}));
};
/** @deprecated Use TreeList or TreeNav instead */
exports.TreeView = TreeView;
const Tree = rawProps => {
const themedProps = (0, _useThemedTree.useThemedTree)(rawProps);
const props = (0, _useTestAttribute.useTestAttribute)(themedProps);
return /*#__PURE__*/_react.default.createElement(TreeView, props);
};
exports.Tree = Tree;