import { connect } from "react-redux";
import { Tree, TreeProps, TreeItem, TreeItemStatus } from "~/components/tree/tree";
import { RootState } from "~/store/store";
-import { createTreePickerNode, TreePickerNode } from "~/store/tree-picker/tree-picker";
-import { getNodeValue, getNodeChildren, Tree as Ttree, createTree } from "~/models/tree";
+import { getNodeChildrenIds, Tree as Ttree, createTree, getNode, TreeNodeStatus } from '~/models/tree';
import { Dispatch } from "redux";
+import { initTreeNode } from '../../models/tree';
-export interface TreePickerProps {
- pickerKind: string;
- toggleItemOpen: (id: string, status: TreeItemStatus, pickerKind: string) => void;
- toggleItemActive: (id: string, status: TreeItemStatus, pickerKind: string) => void;
+type Callback<T> = (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>, pickerId: string) => void;
+export interface TreePickerProps<T> {
+ pickerId: string;
+ onContextMenu: Callback<T>;
+ toggleItemOpen: Callback<T>;
+ toggleItemActive: Callback<T>;
+ toggleItemSelection: Callback<T>;
}
-const mapStateToProps = (state: RootState, props: TreePickerProps): Pick<TreeProps<any>, 'items'> => {
- const tree = state.treePicker[props.pickerKind] || createTree();
- return {
- items: getNodeChildren('')(tree)
- .map(treePickerToTreeItems(tree))
+const memoizedMapStateToProps = () => {
+ let prevTree: Ttree<any>;
+ let mappedProps: Pick<TreeProps<any>, 'items' | 'disableRipple'>;
+ return <T>(state: RootState, props: TreePickerProps<T>): Pick<TreeProps<T>, 'items' | 'disableRipple'> => {
+ const tree = state.treePicker[props.pickerId] || createTree();
+ if (tree !== prevTree) {
+ prevTree = tree;
+ mappedProps = {
+ disableRipple: true,
+ items: getNodeChildrenIds('')(tree)
+ .map(treePickerToTreeItems(tree))
+ };
+ }
+ return mappedProps;
};
};
-const mapDispatchToProps = (dispatch: Dispatch, props: TreePickerProps): Pick<TreeProps<any>, 'onContextMenu' | 'toggleItemOpen' | 'toggleItemActive'> => ({
- onContextMenu: () => { return; },
- toggleItemActive: (id, status) => props.toggleItemActive(id, status, props.pickerKind),
- toggleItemOpen: (id, status) => props.toggleItemOpen(id, status, props.pickerKind)
+const mapDispatchToProps = (_: Dispatch, props: TreePickerProps<any>): Pick<TreeProps<any>, 'onContextMenu' | 'toggleItemOpen' | 'toggleItemActive' | 'toggleItemSelection'> => ({
+ onContextMenu: (event, item) => props.onContextMenu(event, item, props.pickerId),
+ toggleItemActive: (event, item) => props.toggleItemActive(event, item, props.pickerId),
+ toggleItemOpen: (event, item) => props.toggleItemOpen(event, item, props.pickerId),
+ toggleItemSelection: (event, item) => props.toggleItemSelection(event, item, props.pickerId),
});
-export const TreePicker = connect(mapStateToProps, mapDispatchToProps)(Tree);
+export const TreePicker = connect(memoizedMapStateToProps(), mapDispatchToProps)(Tree);
-const treePickerToTreeItems = (tree: Ttree<TreePickerNode>) =>
+const treePickerToTreeItems = (tree: Ttree<any>) =>
(id: string): TreeItem<any> => {
- const node: TreePickerNode = getNodeValue(id)(tree) || createTreePickerNode({ id: '', value: 'InvalidNode' });
- const items = getNodeChildren(node.id)(tree)
+ const node = getNode(id)(tree) || initTreeNode({ id: '', value: 'InvalidNode' });
+ const items = getNodeChildrenIds(node.id)(tree)
.map(treePickerToTreeItems(tree));
return {
- active: node.selected,
+ active: node.active,
data: node.value,
id: node.id,
items: items.length > 0 ? items : undefined,
- open: !node.collapsed,
- status: node.status
+ open: node.expanded,
+ selected: node.selected,
+ status: treeNodeStatusToTreeItem(node.status),
};
};
+export const treeNodeStatusToTreeItem = (status: TreeNodeStatus) => {
+ switch (status) {
+ case TreeNodeStatus.INITIAL:
+ return TreeItemStatus.INITIAL;
+ case TreeNodeStatus.PENDING:
+ return TreeItemStatus.PENDING;
+ case TreeNodeStatus.LOADED:
+ return TreeItemStatus.LOADED;
+ }
+};
+