@websolutespa/payload-plugin-bowl
Version:
Bowl PayloadCms plugin of the BOM Repository
281 lines (277 loc) • 11.1 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button } from '@payloadcms/ui';
import { getClassNames } from '@websolutespa/bom-core';
import React, { useImperativeHandle, useRef } from 'react';
import { InteractionMode, Tree, UncontrolledTreeEnvironment } from 'react-complex-tree';
import './DataTree.scss';
import { DataTreeProvider } from './DataTreeProvider';
const canRename = false;
export function getTreeItemClassName(props) {
const { context, item, depth, title, arrow, children } = props;
return getClassNames('rct-tree-item-title-container', {
'rct-tree-item-title-container-isFolder': item.isFolder,
'rct-tree-item-title-container-selected': context.isSelected,
'rct-tree-item-title-container-expanded': context.isExpanded,
'rct-tree-item-title-container-focused': context.isFocused,
'rct-tree-item-title-container-dragging-over': context.isDraggingOver,
'rct-tree-item-title-container-search-match': context.isSearchMatching
});
}
export const DataTreeItemLi = (props)=>{
const { context, item, depth, title, arrow, children, interactive } = props;
return /*#__PURE__*/ _jsxs("li", {
className: "rct-tree-item-li",
...context.itemContainerWithChildrenProps,
children: [
/*#__PURE__*/ _jsx("div", {
className: getTreeItemClassName(props),
...context.itemContainerWithoutChildrenProps,
children: /*#__PURE__*/ _jsx("div", {
className: "rct-tree-item-content",
children: interactive
})
}),
children
]
});
};
export const DataTreeDragItem = (props)=>{
const { context, item, depth, title, arrow, children } = props;
const { extra } = item.data;
// console.log('DataTreeDragItem', extra);
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
item.children && item.children.length > 0 && arrow,
/*#__PURE__*/ _jsx("button", {
type: "button",
className: "rct-tree-item-button",
...context.interactiveElementProps,
children: /*#__PURE__*/ _jsxs("span", {
className: "data-tree__item",
style: {
paddingLeft: `${depth * 6}px`
},
children: [
/*#__PURE__*/ _jsx("span", {
className: "data-tree__title",
children: title
}),
extra && /*#__PURE__*/ _jsx("span", {
className: "data-tree__extra",
children: extra
})
]
})
}),
canRename && /*#__PURE__*/ _jsx(Button, {
type: "button",
onClick: context.startRenamingItem,
children: "Rename"
}),
/*#__PURE__*/ _jsx(Button, {
type: "button",
buttonStyle: "pill",
size: "small",
icon: /*#__PURE__*/ _jsx("svg", {
clipRule: "evenodd",
fillRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: "2",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/ _jsx("path", {
fill: "currentColor",
d: "m19 20.25c0-.402-.356-.75-.75-.75-2.561 0-11.939 0-14.5 0-.394 0-.75.348-.75.75s.356.75.75.75h14.5c.394 0 .75-.348.75-.75zm-7.403-3.398 9.124-9.125c.171-.171.279-.423.279-.684 0-.229-.083-.466-.28-.662l-3.115-3.104c-.185-.185-.429-.277-.672-.277s-.486.092-.672.277l-9.143 9.103c-.569 1.763-1.555 4.823-1.626 5.081-.02.075-.029.15-.029.224 0 .461.349.848.765.848.511 0 .991-.189 5.369-1.681zm-3.27-3.342 2.137 2.137-3.168 1.046zm.955-1.166 7.651-7.616 2.335 2.327-7.637 7.638z",
fillRule: "nonzero"
})
}),
iconPosition: "left",
onClick: context.primaryAction,
children: "Edit"
})
]
});
};
export const DataTreeRenameItem = (props)=>{
const { context, item, depth, title, arrow, children } = props;
const { extra } = item.data;
console.log('DataTreeRenameItem', extra);
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
item.children && item.children.length > 0 && arrow,
/*#__PURE__*/ _jsx("div", {
className: "rct-tree-item-button",
...context.interactiveElementProps,
children: /*#__PURE__*/ _jsxs("span", {
className: "data-tree__item",
style: {
paddingLeft: `${depth * 6}px`
},
children: [
/*#__PURE__*/ _jsx("span", {
className: "data-tree__title",
children: title
}),
extra && /*#__PURE__*/ _jsx("span", {
className: "data-tree__extra",
children: extra
})
]
})
})
]
});
};
export const DataTreeItem = (props)=>{
const { context, item, depth, title, arrow, children } = props;
return /*#__PURE__*/ _jsx(DataTreeItemLi, {
...props,
interactive: context.isRenaming ? /*#__PURE__*/ _jsx(DataTreeRenameItem, {
...props
}) : /*#__PURE__*/ _jsx(DataTreeDragItem, {
...props
})
});
};
function DataTree_(props, ref) {
const { items, rootItem = '_root', treeId = 'tree', treeLabel = 'Label', onChange, onEdit } = props;
const treeEnvironment = useRef(null);
const tree = useRef(null);
const expandedItem = items[rootItem]?.children ? items[rootItem]?.children[0] : undefined;
const viewState = {
tree: {
expandedItems: expandedItem ? [
expandedItem
] : []
}
};
const onSetData = (item, data)=>({
...item,
data
});
useImperativeHandle(ref, ()=>({
onSetData
}));
const dataProvider = new DataTreeProvider(items, onSetData);
dataProvider.onItemsDidChange((items)=>{
// console.log('onItemsDidChange', items);
if (typeof onChange === 'function') {
onChange(items);
}
});
/*
dataProvider.onDidChangeTreeData(async (changedItemIds: TreeItemIndex[]) => {
const item = await dataProvider.getTreeItem(changedItemIds[0]);
console.log('onDidChangeTreeData', changedItemIds, item);
});
*/ const getItemTitle = (item)=>item.data.title;
/*
const onStateDidChange = () => {
const currentItems = treeEnvironment.current.items;
console.log(
'onStateDidChange',
'items', Object.keys(items).join(', '),
'currentItems', Object.keys(currentItems).join(', '),
items === currentItems,
JSON.stringify(items) === JSON.stringify(currentItems),
);
};
const onDrop = (items: TreeItem<any>[], target: DraggingPosition) => {
console.log('onDrop', items, target);
console.log(tree.current, treeEnvironment.current);
console.log(treeEnvironment.current.items['product_index'].children.join(', '));
onStateDidChange();
};
const onRenameItem = (item: TreeItem<any>, name: string, treeId: string) => {
console.log('onRenameItem', item, treeId);
onStateDidChange();
};
*/ const onPrimaryAction = (items, treeId)=>{
// console.log('onPrimaryAction', items, treeId);
if (typeof onEdit === 'function') {
onEdit(items, treeId);
}
};
const onExpandAll = (event)=>{
tree.current?.expandAll();
};
const onCollapseAll = (event)=>{
tree.current?.collapseAll();
};
/*
useEffect(() => {
tree.current?.collapseAll();
tree.current?.expandAll();
console.log('useEffect.expandAll');
}, [items]);
*/ const baseClass = 'category-tree';
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx("div", {
className: "list-controls",
children: /*#__PURE__*/ _jsx("div", {
className: "list-controls__wrap",
children: /*#__PURE__*/ _jsxs("div", {
className: `${baseClass}__actions`,
children: [
/*#__PURE__*/ _jsx("button", {
type: "button",
onClick: onExpandAll,
children: "Expand"
}),
/*#__PURE__*/ _jsx("button", {
type: "button",
onClick: onCollapseAll,
children: "Collapse"
})
]
})
})
}),
/*#__PURE__*/ _jsx(UncontrolledTreeEnvironment, {
ref: treeEnvironment,
dataProvider: dataProvider,
getItemTitle: getItemTitle,
viewState: viewState,
/*
renderTreeContainer={({ children, containerProps }) => (
<div {...containerProps}>{children}</div>
)}
renderItemsContainer={({ children, containerProps }) => (
<ul {...containerProps}>{children}</ul>
)}
*/ renderItem: DataTreeItem,
/*
renderItemTitle={({ title }) => <span>{title}</span>}
renderItemArrow={({ item, context }) =>
item.isFolder ? (
context.isExpanded ? (
<span>{'>'}</span>
) : (
<span>v</span>
)
) : null
}
*/ defaultInteractionMode: InteractionMode.ClickArrowToExpand,
canDragAndDrop: true,
canReorderItems: true,
canDropOnFolder: true,
canDropOnNonFolder: false,
canRename: canRename,
/*
onDrop={onDrop}
onRenameItem={onRenameItem}
*/ onPrimaryAction: onPrimaryAction,
children: /*#__PURE__*/ _jsx(Tree, {
ref: tree,
rootItem: rootItem,
treeId: treeId,
treeLabel: treeLabel
})
})
]
});
}
export const DataTree = /*#__PURE__*/ React.forwardRef(DataTree_);
//# sourceMappingURL=DataTree.js.map