pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make PgTreeView react component more customisable

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