From 9ea810524f235778f41523ae35ab92ed0a4040b2 Mon Sep 17 00:00:00 2001 From: Gordon Smith Date: Wed, 24 Jan 2024 15:46:15 +0000 Subject: [PATCH] HPCC-31169 Add "padding" option for Dock Panel children Fix issue when child item in undefined Signed-off-by: Gordon Smith --- esp/src/src-react/layouts/DockPanel.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/esp/src/src-react/layouts/DockPanel.tsx b/esp/src/src-react/layouts/DockPanel.tsx index d688ccf9799..af586ee5919 100644 --- a/esp/src/src-react/layouts/DockPanel.tsx +++ b/esp/src/src-react/layouts/DockPanel.tsx @@ -150,6 +150,7 @@ interface DockPanelItemProps { location?: "split-top" | "split-left" | "split-right" | "split-bottom" | "tab-before" | "tab-after"; relativeTo?: string; closable?: boolean | IClosable; + padding?: number; children: JSX.Element; } @@ -174,7 +175,7 @@ export const DockPanel: React.FunctionComponent = ({ }) => { const items = React.useMemo(() => { if (children === undefined) return []; - return Array.isArray(children) ? children : [children]; + return (Array.isArray(children) ? children : [children]).filter(item => !!item); }, [children]); const [prevItems, setPrevItems] = React.useState[]>([]); const { theme, themeV9 } = useUserTheme(); @@ -201,8 +202,10 @@ export const DockPanel: React.FunctionComponent = ({ dockPanel.removeWidget(idx.get(item.key)); }); diffs.enter.forEach(item => { - const reactWidget = new ReactWidget().id(item.key); - dockPanel.addWidget(reactWidget, item.props.title, item.props.location, idx.get(item.props.relativeTo), item.props.closable); + const reactWidget = new ReactWidget() + .id(item.key) + ; + dockPanel.addWidget(reactWidget, item.props.title, item.props.location, idx.get(item.props.relativeTo), item.props.closable, item.props.padding); idx.set(item.key, reactWidget); }); [...diffs.enter, ...diffs.update].forEach(item => {