IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Make PgTreeView react component more customisable

Browse Source
This commit is contained in:
Kundan 2024-07-31 14:07:47 +05:30 committed by GitHub
parent d39fe78239
commit c45fb47b08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/pgadmin/static/js/PgTreeView/index.jsx
View File

@ -38,9 +38,11 @@ const Root = styled('div')(({theme}) => ({
export const PgTreeSelectionContext = React.createContext();
export default function PgTreeView({ data = [], hasCheckbox = false, selectionChange = null}) {
export default function PgTreeView({ data = [], hasCheckbox = false,
selectionChange = null, NodeComponent = null, ...props }) {
let treeData = data;
const Node = NodeComponent ?? DefaultNode;
const treeObj = useRef();
const treeContainerRef = useRef();
const [selectedCheckBoxNodes, setSelectedCheckBoxNodes] = React.useState([]);
@ -83,9 +85,10 @@ export default function PgTreeView({ data = [], hasCheckbox = false, selectionCh
disableDrag={true}
disableDrop={true}
dndRootElement={treeContainerRef.current}
{...props}
>
{
(props) => <Node onNodeSelectionChange={onSelectionChange} hasCheckbox={hasCheckbox} {...props}></Node>
(props) => <Node onNodeSelectionChange={onSelectionChange} hasCheckbox={hasCheckbox} {...props} />
}
</Tree>
)}
@ -103,9 +106,10 @@ PgTreeView.propTypes = {
data: PropTypes.array,
selectionChange: PropTypes.func,
hasCheckbox: PropTypes.bool,
NodeComponent: PropTypes.func
};
function Node({ node, style, tree, hasCheckbox, onNodeSelectionChange}) {
function DefaultNode({ node, style, tree, hasCheckbox, onNodeSelectionChange }) {
const pgTreeSelCtx = React.useContext(PgTreeSelectionContext);
const [isSelected, setIsSelected] = React.useState(pgTreeSelCtx.includes(node.id) || node.data?.isSelected);
@ -185,7 +189,7 @@ function Node({ node, style, tree, hasCheckbox, onNodeSelectionChange}) {
);
}
Node.propTypes = {
DefaultNode.propTypes = {
node: PropTypes.object,
style: PropTypes.any,
tree: PropTypes.object,