react-asc 18.5.0 → 18.6.0

package/components/TreeView/TreeNode.d.ts

@@ -7,7 +7,7 @@ export interface ITreeNodeProps {
     hasChildren: boolean;
     isExpanded: boolean;
     isSelected: boolean;
-    onClick: (id: string) => void;
+    onToggleExpand: (id: string) => void;
     onClickSelect: (id: string) => void;
 }
 export declare const TreeNode: (props: ITreeNodeProps) => JSX.Element;

package/components/TreeView/TreeView.d.ts

@@ -1,6 +1,13 @@
 /// <reference types="react" />
+export interface ITreeNode {
+    id: string;
+    label: string;
+    children?: Array<ITreeNode>;
+}
 export interface ITreeViewProps {
-    data: Array<any>;
-    onSelect: (selectedItems: Array<any>) => void;
+    data: Array<ITreeNode>;
+    onSelect?: (selectedItems: Array<any>) => void;
+    onExpand?: (id: string) => void;
+    onCollapse?: (id: string) => void;
 }
 export declare const TreeView: (props: ITreeViewProps) => JSX.Element;

package/index.es.js

@@ -2440,16 +2440,16 @@ const TimeSelect = (props) => {
 };
 
 const TreeNode = (props) => {
-    const { id, label, level, hasChildren, isExpanded, isSelected, onClick, onClickSelect } = props;
+    const { id, label, level, hasChildren, isExpanded, isSelected, onToggleExpand, onClickSelect } = props;
     return (React.createElement("li", { className: "tree-node", style: { paddingLeft: `${(48 * level) + (hasChildren ? 0 : 1) * 48}px` } },
         hasChildren &&
-            React.createElement(IconButton, { onClick: () => onClick(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
+            React.createElement(IconButton, { onClick: () => onToggleExpand(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
         React.createElement(Checkbox, { checked: isSelected, onChange: () => onClickSelect(id) }),
         label));
 };
 
 const TreeView = (props) => {
-    const { data, onSelect } = props;
+    const { data, onSelect, onExpand, onCollapse } = props;
     const [flattenData, setFlattenData] = useState([]);
     const [expandedItems, setExpandedItems] = useState([]);
     const [selectedItemIds, setSelectedItemIds] = useState([]);
@@ -2468,14 +2468,16 @@ const TreeView = (props) => {
     useEffect(() => {
         setFlattenData(flattenDeep(data));
     }, [data]);
-    const handleNodeClick = (item) => {
+    const handleOnToggleExpand = (item) => {
         if (item.hasChildren) {
             let newExpandedItems = [...expandedItems];
             if (isExpanded(item.id)) {
                 newExpandedItems = collapseRecursive(item, [...expandedItems]);
+                onCollapse && onCollapse(item.id);
             }
             else {
                 newExpandedItems.push(item);
+                onExpand && onExpand(item.id);
             }
             setExpandedItems(newExpandedItems);
         }
@@ -2516,7 +2518,7 @@ const TreeView = (props) => {
     };
     return (React.createElement("ul", { className: "treeview" }, flattenData.map(item => {
         return isItemVisible(item) &&
-            React.createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren, onClick: () => handleNodeClick(item), onClickSelect: () => handleNodeClickSelect(item) });
+            React.createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren, onToggleExpand: () => handleOnToggleExpand(item), onClickSelect: () => handleNodeClickSelect(item) });
     })));
 };