rsuite
Version:
A suite of react components
781 lines (703 loc) • 33.4 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.maxTreeHeight = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
var _omit2 = _interopRequireDefault(require("lodash/omit"));
var _pick2 = _interopRequireDefault(require("lodash/pick"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _VirtualizedList = require("../Picker/VirtualizedList");
var _TreeNode = _interopRequireDefault(require("./TreeNode"));
var _treeUtils = require("../utils/treeUtils");
var _utils = require("../utils");
var _Picker = require("../Picker");
var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
// default value for virtualized
var maxTreeHeight = 320;
exports.maxTreeHeight = maxTreeHeight;
var emptyArray = [];
var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
var _props$as = props.as,
Component = _props$as === void 0 ? 'div' : _props$as,
_props$data = props.data,
data = _props$data === void 0 ? emptyArray : _props$data,
_props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
style = props.style,
showIndentLine = props.showIndentLine,
controlledValue = props.value,
overrideLocale = props.locale,
_props$height = props.height,
height = _props$height === void 0 ? 360 : _props$height,
className = props.className,
disabled = props.disabled,
_props$placement = props.placement,
placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
_props$cleanable = props.cleanable,
cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
menuStyle = props.menuStyle,
_props$searchable = props.searchable,
searchable = _props$searchable === void 0 ? true : _props$searchable,
_props$virtualized = props.virtualized,
virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
_props$classPrefix = props.classPrefix,
classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
defaultValue = props.defaultValue,
placeholder = props.placeholder,
searchKeyword = props.searchKeyword,
menuClassName = props.menuClassName,
_props$menuAutoWidth = props.menuAutoWidth,
menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
searchBy = props.searchBy,
toggleAs = props.toggleAs,
_props$labelKey = props.labelKey,
labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
_props$valueKey = props.valueKey,
valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
_props$childrenKey = props.childrenKey,
childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
draggable = props.draggable,
_props$defaultExpandA = props.defaultExpandAll,
defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
_props$disabledItemVa = props.disabledItemValues,
disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
controlledExpandItemValues = props.expandItemValues,
_props$defaultExpandI = props.defaultExpandItemValues,
defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
id = props.id,
listProps = props.listProps,
getChildren = props.getChildren,
renderTreeIcon = props.renderTreeIcon,
renderTreeNode = props.renderTreeNode,
onExit = props.onExit,
onExited = props.onExited,
onClean = props.onClean,
onOpen = props.onOpen,
onSearch = props.onSearch,
onSelect = props.onSelect,
onChange = props.onChange,
onEntered = props.onEntered,
onClose = props.onClose,
onDragEnd = props.onDragEnd,
onDragStart = props.onDragStart,
onDragEnter = props.onDragEnter,
onDragLeave = props.onDragLeave,
onDragOver = props.onDragOver,
onDrop = props.onDrop,
onExpand = props.onExpand,
renderExtraFooter = props.renderExtraFooter,
renderMenu = props.renderMenu,
renderValue = props.renderValue,
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "className", "disabled", "placement", "cleanable", "menuStyle", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
var triggerRef = (0, _react.useRef)(null);
var targetRef = (0, _react.useRef)(null);
var listRef = (0, _react.useRef)(null);
var overlayRef = (0, _react.useRef)(null);
var searchInputRef = (0, _react.useRef)(null);
var treeViewRef = (0, _react.useRef)(null);
var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
rtl = _useCustom.rtl,
locale = _useCustom.locale;
var _useContext = (0, _react.useContext)(_TreeContext.default),
inline = _useContext.inline;
var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),
value = _useControlled[0],
setValue = _useControlled[1],
isControlled = _useControlled[2];
var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),
treeData = _useGetTreeNodeChildr.data,
setTreeData = _useGetTreeNodeChildr.setData,
loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,
loadChildren = _useGetTreeNodeChildr.loadChildren;
var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {
defaultExpandAll: defaultExpandAll,
valueKey: valueKey,
childrenKey: childrenKey,
defaultExpandItemValues: defaultExpandItemValues
})),
expandItemValues = _useControlled2[0],
setExpandItemValues = _useControlled2[1];
var _useState = (0, _react.useState)(false),
active = _useState[0],
setActive = _useState[1];
var _useState2 = (0, _react.useState)(null),
focusItemValue = _useState2[0],
setFocusItemValue = _useState2[1];
var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({
data: treeData,
labelKey: labelKey,
valueKey: valueKey,
childrenKey: childrenKey,
callback: function callback() {
// after flattenData, always trigger re-render
forceUpdate();
}
}),
flattenNodes = _useFlattenTreeData.flattenNodes,
forceUpdate = _useFlattenTreeData.forceUpdate,
formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
prefix = _useClassNames.prefix,
merge = _useClassNames.merge;
var _useClassNames2 = (0, _utils.useClassNames)('tree'),
treePrefix = _useClassNames2.prefix,
withTreeClassPrefix = _useClassNames2.withClassPrefix;
var _useTreeSearch = (0, _treeUtils.useTreeSearch)({
labelKey: labelKey,
childrenKey: childrenKey,
searchKeyword: searchKeyword,
data: treeData,
searchBy: searchBy,
callback: function callback(searchKeyword, _filterData, event) {
onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
}
}),
filteredData = _useTreeSearch.filteredData,
searchKeywordState = _useTreeSearch.searchKeywordState,
setSearchKeyword = _useTreeSearch.setSearchKeyword,
handleSearch = _useTreeSearch.handleSearch,
setFilteredData = _useTreeSearch.setFilteredData;
var _useTreeDrag = (0, _treeUtils.useTreeDrag)(),
dragNodeKeys = _useTreeDrag.dragNodeKeys,
dragOverNodeKey = _useTreeDrag.dragOverNodeKey,
dragNode = _useTreeDrag.dragNode,
dropNodePosition = _useTreeDrag.dropNodePosition,
setDragNodeKeys = _useTreeDrag.setDragNodeKeys,
setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,
setDragNode = _useTreeDrag.setDragNode,
setDropNodePosition = _useTreeDrag.setDropNodePosition;
var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),
treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);
var getFormattedNodes = (0, _react.useCallback)(function (render) {
if (virtualized) {
return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
searchKeyword: searchKeywordState
}).filter(function (n) {
return n.visible;
});
}
return filteredData.map(function (dataItem, index) {
return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
});
}, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized]);
var focusActiveNode = (0, _react.useCallback)(function () {
if (listRef.current) {
(0, _treeUtils.focusToActiveTreeNode)({
list: listRef.current,
valueKey: valueKey,
selector: "." + treePrefix('node-active'),
activeNode: activeNode,
virtualized: virtualized,
container: treeViewRef.current,
formattedNodes: getFormattedNodes()
});
}
}, [treePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
(0, _react.useEffect)(function () {
setFilteredData(data, searchKeywordState);
setTreeData(data);
}, [data, searchKeywordState, setFilteredData, setTreeData]);
(0, _react.useEffect)(function () {
setFilteredData(treeData, searchKeywordState);
}, [treeData, searchKeywordState, setFilteredData]);
(0, _react.useEffect)(function () {
if (Array.isArray(controlledExpandItemValues)) {
setExpandItemValues(controlledExpandItemValues);
}
}, [controlledExpandItemValues, setExpandItemValues]);
(0, _react.useEffect)(function () {
setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
}, [searchKeyword, setSearchKeyword]);
var getDropData = (0, _react.useCallback)(function (nodeData) {
var options = {
valueKey: valueKey,
childrenKey: childrenKey
};
return {
/** draggingNode */
dragNode: dragNode,
/** dropNode */
dropNode: nodeData,
/** dragAndDrop Position type */
dropNodePosition: dropNodePosition,
createUpdateDataFunction: (0, _treeUtils.createUpdateTreeDataFunction)({
dragNode: dragNode,
dropNode: nodeData,
dropNodePosition: dropNodePosition
}, options)
};
}, [dragNode, valueKey, childrenKey, dropNodePosition]);
var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {
var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
return {
as: Component,
rtl: rtl,
value: node[valueKey],
label: node[labelKey],
index: index,
layer: layer,
loading: loadingNodeValues.some(function (item) {
return (0, _utils.shallowEqual)(item, node[valueKey]);
}),
expand: node.expand,
active: (0, _utils.shallowEqual)(node[valueKey], value),
focus: (0, _utils.shallowEqual)(node[valueKey], focusItemValue),
visible: node.visible,
draggable: draggable,
dragging: (0, _utils.shallowEqual)(node[valueKey], draggingNode[valueKey]),
children: node[childrenKey],
nodeData: node,
disabled: disabledItemValues.some(function (disabledItem) {
return (0, _utils.shallowEqual)(disabledItem, node[valueKey]);
}),
dragOver: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER,
dragOverTop: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,
dragOverBottom: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM,
onSelect: handleSelect,
onDragStart: handleDragStart,
onDragEnter: handleDragEnter,
onDragOver: handleDragOver,
onDragLeave: handleDragLeave,
onDragEnd: handleDragEnd,
onDrop: handleDrop,
onExpand: handleExpand,
onRenderTreeNode: renderTreeNode,
onRenderTreeIcon: renderTreeIcon
};
};
var handleSelect = (0, _react.useCallback)(function (nodeData, event) {
var _targetRef$current, _triggerRef$current, _triggerRef$current$c;
if (!nodeData) {
return;
}
var nodeValue = nodeData[valueKey];
if (!isControlled) {
setValue(nodeValue);
}
setFocusItemValue(nodeData[valueKey]);
onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);
onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);
(_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
(_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
}, [valueKey, isControlled, onChange, onSelect, setValue]);
var handleExpand = (0, _react.useCallback)(function (node) {
var nextExpandItemValues = (0, _treeUtils.toggleExpand)({
node: node,
isExpand: !node.expand,
expandItemValues: expandItemValues,
valueKey: valueKey
});
setExpandItemValues(nextExpandItemValues);
onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {
valueKey: valueKey,
childrenKey: childrenKey
}));
if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
loadChildren(node, getChildren);
}
}, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
var handleDragStart = (0, _react.useCallback)(function (nodeData, event) {
if (draggable) {
setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));
setDragNode(flattenNodes[nodeData.refKey]);
onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
}
}, [draggable, childrenKey, flattenNodes, onDragStart, setDragNodeKeys, setDragNode, valueKey]);
var handleDragEnter = (0, _react.useCallback)(function (nodeData, event) {
if (dragNodeKeys.some(function (d) {
return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
})) {
return;
}
if (dragNode) {
setDragOverNodeKey(nodeData[valueKey]);
setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));
}
onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
}, [dragNode, treeNodesRefs, dragNodeKeys, onDragEnter, setDragOverNodeKey, setDropNodePosition, valueKey]);
var handleDragOver = (0, _react.useCallback)(function (nodeData, event) {
if (dragNodeKeys.some(function (d) {
return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
})) {
return;
}
if (dragNode && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {
var lastDropNodePosition = (0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]);
if (lastDropNodePosition === dropNodePosition) return;
setDropNodePosition(lastDropNodePosition);
}
onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
}, [dragNode, dragNodeKeys, dragOverNodeKey, dropNodePosition, onDragOver, setDropNodePosition, treeNodesRefs, valueKey]);
var handleDragLeave = (0, _react.useCallback)(function (nodeData, event) {
onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
}, [onDragLeave]);
var handleDragEnd = (0, _react.useCallback)(function (nodeData, event) {
setDragNode(null);
setDragNodeKeys([]);
setDragOverNodeKey(null);
onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
}, [setDragNode, setDragNodeKeys, setDragOverNodeKey, onDragEnd]);
var handleDrop = (0, _react.useCallback)(function (nodeData, event) {
if (dragNodeKeys.some(function (d) {
return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
})) {
console.error('Cannot drag a node to itself and its children');
} else {
var dropData = getDropData(nodeData);
onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
}
setDragNode(null);
setDragNodeKeys([]);
setDragOverNodeKey(null);
}, [dragNodeKeys, setDragNode, setDragOverNodeKey, setDragNodeKeys, onDrop, getDropData, valueKey]);
var handleOpen = (0, _react.useCallback)(function () {
var _triggerRef$current2, _triggerRef$current2$;
(_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
focusActiveNode();
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
setActive(true);
}, [focusActiveNode, onOpen]);
var handleClose = (0, _react.useCallback)(function () {
var _triggerRef$current3, _triggerRef$current3$, _targetRef$current2;
(_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.close) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
setSearchKeyword('');
setActive(false);
setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
/**
* when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
*/
(_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
}, [activeNode, setSearchKeyword, valueKey]);
(0, _Picker.usePublicMethods)(ref, {
rootRef: inline ? treeViewRef : undefined,
triggerRef: triggerRef,
overlayRef: overlayRef,
targetRef: targetRef,
listRef: listRef,
inline: inline
});
var handleFocusItem = (0, _react.useCallback)(function (key) {
var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
disabledItemValues: disabledItemValues,
valueKey: valueKey,
childrenKey: childrenKey,
expandItemValues: expandItemValues
}, (0, _treeUtils.isSearching)(searchKeywordState));
var selector = "." + treePrefix('node-label');
var focusProps = {
focusItemValue: focusItemValue,
focusableItems: focusableItems,
treeNodesRefs: treeNodesRefs,
selector: selector,
valueKey: valueKey,
callback: function callback(nextFocusItemValue) {
setFocusItemValue(nextFocusItemValue);
}
};
if (key === _utils.KEY_VALUES.DOWN) {
(0, _treeUtils.focusNextItem)(focusProps);
return;
}
if (key === _utils.KEY_VALUES.UP) {
(0, _treeUtils.focusPreviousItem)(focusProps);
}
}, [searchKeywordState, expandItemValues, filteredData, focusItemValue, treeNodesRefs, treePrefix, valueKey, childrenKey, disabledItemValues]);
var handleLeftArrow = (0, _react.useCallback)(function () {
if ((0, _isNil2.default)(focusItemValue)) return;
var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
(0, _treeUtils.leftArrowHandler)({
focusItem: focusItem,
expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
onExpand: handleExpand,
childrenKey: childrenKey,
onFocusItem: function onFocusItem() {
var _focusItem$parent, _focusItem$parent2;
setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);
(0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, "." + treePrefix('node-label'));
}
});
}, [expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, treePrefix, valueKey, childrenKey]);
var handleRightArrow = (0, _react.useCallback)(function () {
if ((0, _isNil2.default)(focusItemValue)) return;
var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
(0, _treeUtils.rightArrowHandler)({
focusItem: focusItem,
expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
childrenKey: childrenKey,
onExpand: handleExpand,
onFocusItem: function onFocusItem() {
handleFocusItem(_utils.KEY_VALUES.DOWN);
}
});
}, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
var selectActiveItem = (0, _react.useCallback)(function (event) {
if ((0, _isNil2.default)(focusItemValue)) return;
var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
handleSelect(activeItem, event);
}, [flattenNodes, valueKey, focusItemValue, handleSelect]);
var handleClean = (0, _react.useCallback)(function (event) {
var nullValue = null;
var target = event.target; // exclude searchBar
if (target.matches('div[role="searchbox"] > input')) {
return;
}
setValue(null);
onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
}, [onChange, setValue]);
var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
toggle: !activeNode || !active,
triggerRef: triggerRef,
targetRef: targetRef,
overlayRef: overlayRef,
searchInputRef: searchInputRef,
active: active,
onExit: handleClean,
onClose: handleClose,
onMenuKeyDown: function onMenuKeyDown(event) {
(0, _Picker.onMenuKeyDown)(event, {
down: function down() {
return handleFocusItem(_utils.KEY_VALUES.DOWN);
},
up: function up() {
return handleFocusItem(_utils.KEY_VALUES.UP);
},
left: rtl ? handleRightArrow : handleLeftArrow,
right: rtl ? handleLeftArrow : handleRightArrow,
enter: selectActiveItem,
del: handleClean
});
}
}, rest));
var handleTreeKeyDown = (0, _react.useCallback)(function (event) {
if (!treeViewRef.current) {
return;
}
(0, _Picker.onMenuKeyDown)(event, {
down: function down() {
return handleFocusItem(_utils.KEY_VALUES.DOWN);
},
up: function up() {
return handleFocusItem(_utils.KEY_VALUES.UP);
},
left: rtl ? handleRightArrow : handleLeftArrow,
right: rtl ? handleLeftArrow : handleRightArrow,
enter: selectActiveItem
});
}, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);
var renderNode = function renderNode(node, index, layer) {
if (!node.visible) {
return null;
}
var children = node[childrenKey];
var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);
var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
expand: expand
}), layer, index), {
hasChildren: visibleChildren
});
if (nodeProps.hasChildren) {
var _merge;
layer += 1;
var openClass = treePrefix('open');
var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));
var nodes = children || [];
return /*#__PURE__*/_react.default.createElement("div", {
className: childrenClass,
key: node[valueKey]
}, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {
ref: function ref(_ref) {
return saveTreeNodeRef(_ref, node.refKey);
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: treePrefix('children')
}, nodes.map(function (child, i) {
return renderNode(child, i, layer);
}), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
className: treePrefix('indent-line'),
style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true)
})));
}
return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
ref: function ref(_ref2) {
return saveTreeNodeRef(_ref2, node.refKey);
},
key: node[valueKey]
}, nodeProps));
};
var renderVirtualListNode = function renderVirtualListNode(nodes) {
return function (_ref3) {
var key = _ref3.key,
index = _ref3.index,
style = _ref3.style;
var node = nodes[index];
var layer = node.layer,
visible = node.visible;
var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
if (!node.visible) {
return null;
}
var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
expand: expand
}), layer), {
style: style,
hasChildren: node.hasChildren
});
return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
ref: function ref(_ref4) {
return saveTreeNodeRef(_ref4, node.refKey);
},
key: key
}, nodeProps));
};
};
var renderTree = function renderTree() {
var _withTreeClassPrefix;
var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));
var formattedNodes = getFormattedNodes(renderNode);
var styles = inline ? (0, _extends2.default)({
height: height
}, style) : {};
return /*#__PURE__*/_react.default.createElement("div", {
role: "tree",
id: id ? id + "-listbox" : undefined,
ref: treeViewRef,
className: classes,
style: styles,
onKeyDown: inline ? handleTreeKeyDown : undefined
}, /*#__PURE__*/_react.default.createElement("div", {
className: treePrefix('nodes')
}, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {
defaultHeight: inline ? height : maxTreeHeight,
style: {
width: 'auto',
height: 'auto'
}
}, function (_ref5) {
var height = _ref5.height,
width = _ref5.width;
return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({
ref: listRef,
width: width,
height: height,
rowHeight: 36,
rowCount: formattedNodes.length,
rowRenderer: renderVirtualListNode(formattedNodes),
scrollToAlignment: "center"
}, listProps));
}) : formattedNodes));
};
var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
var left = positionProps.left,
top = positionProps.top,
className = positionProps.className;
var classes = merge(className, menuClassName, prefix('tree-menu'));
var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {
left: left,
top: top
});
var styles = virtualized ? (0, _extends2.default)({
height: height
}, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);
return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
autoWidth: menuAutoWidth,
className: classes,
style: styles,
ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
onKeyDown: onPickerKeydown,
target: triggerRef
}, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
placeholder: locale.searchPlaceholder,
onChange: handleSearch,
value: searchKeywordState,
inputRef: searchInputRef
}) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
};
/**
* 1.Have a value and the value is valid.
* 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
*/
var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);
var selectedElement = placeholder;
if (hasValidValue) {
var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};
selectedElement = node[labelKey];
if ((0, _isFunction2.default)(renderValue) && value) {
selectedElement = renderValue(value, node, selectedElement);
if ((0, _isNil2.default)(selectedElement)) {
hasValidValue = false;
}
}
}
var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
classPrefix: classPrefix,
appearance: appearance,
hasValue: hasValidValue,
name: 'tree',
cleanable: cleanable
})),
classes = _usePickerClassName[0],
usedClassNamePropKeys = _usePickerClassName[1];
if (inline) {
return renderTree();
}
return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
ref: triggerRef,
placement: placement,
onEnter: handleOpen,
onEntered: onEntered,
onExit: (0, _utils.createChainedFunction)(onClose, onExit),
onExited: (0, _utils.createChainedFunction)(handleClose, onExited),
speaker: renderDropdownMenu
}, /*#__PURE__*/_react.default.createElement(Component, {
className: classes,
style: style
}, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {
id: id,
ref: targetRef,
appearance: appearance,
onKeyDown: onPickerKeydown,
onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
cleanable: cleanable && !disabled,
as: toggleAs,
disabled: disabled,
hasValue: hasValidValue,
active: active,
placement: placement,
inputValue: value
}), selectedElement || locale.placeholder)));
});
TreePicker.displayName = 'TreePicker';
TreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
locale: _propTypes.default.any,
appearance: _propTypes.default.oneOf(['default', 'subtle']),
height: _propTypes.default.number,
draggable: _propTypes.default.bool,
virtualized: _propTypes.default.bool,
searchable: _propTypes.default.bool,
menuAutoWidth: _propTypes.default.bool,
searchKeyword: _propTypes.default.string,
defaultExpandAll: _propTypes.default.bool,
expandItemValues: _propTypes.default.array,
defaultExpandItemValues: _propTypes.default.array,
onSearch: _propTypes.default.func,
onExpand: _propTypes.default.func,
onSelect: _propTypes.default.func,
renderMenu: _propTypes.default.func,
renderTreeNode: _propTypes.default.func,
renderTreeIcon: _propTypes.default.func,
renderExtraFooter: _propTypes.default.func,
renderDragNode: _propTypes.default.func,
searchBy: _propTypes.default.func
});
var _default = TreePicker;
exports.default = _default;