@hitachivantara/uikit-react-pentaho 0.5.12 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Canvas/SidePanel/SidePanel.cjs +14 -2
- package/dist/cjs/Canvas/SidePanel/SidePanel.styles.cjs +2 -2
- package/dist/cjs/Canvas/SidePanel/useResizable.cjs +80 -0
- package/dist/esm/Canvas/SidePanel/SidePanel.js +14 -2
- package/dist/esm/Canvas/SidePanel/SidePanel.js.map +1 -1
- package/dist/esm/Canvas/SidePanel/SidePanel.styles.js +2 -2
- package/dist/esm/Canvas/SidePanel/SidePanel.styles.js.map +1 -1
- package/dist/esm/Canvas/SidePanel/useResizable.js +80 -0
- package/dist/esm/Canvas/SidePanel/useResizable.js.map +1 -0
- package/package.json +5 -5
|
@@ -5,6 +5,7 @@ const react = require("react");
|
|
|
5
5
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
6
6
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
7
|
const SidePanel_styles = require("./SidePanel.styles.cjs");
|
|
8
|
+
const useResizable = require("./useResizable.cjs");
|
|
8
9
|
const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
|
|
9
10
|
const PanelTab = require("../PanelTab/PanelTab.cjs");
|
|
10
11
|
const DEFAULT_LABELS = {
|
|
@@ -34,6 +35,12 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
|
|
|
34
35
|
tabProp,
|
|
35
36
|
tabs?.[0]?.id ?? "none"
|
|
36
37
|
);
|
|
38
|
+
const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable.useResizable({
|
|
39
|
+
ref,
|
|
40
|
+
initialWidth: 320,
|
|
41
|
+
minWidth: 100,
|
|
42
|
+
maxWidth: 500
|
|
43
|
+
});
|
|
37
44
|
const handleTogglePanel = (event) => {
|
|
38
45
|
setOpen((prev) => !prev);
|
|
39
46
|
onToggle?.(event, !open);
|
|
@@ -46,12 +53,12 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
|
|
|
46
53
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
47
54
|
"div",
|
|
48
55
|
{
|
|
49
|
-
ref,
|
|
50
56
|
id,
|
|
51
57
|
className: cx(classes.root, className, {
|
|
52
58
|
[classes.open]: open,
|
|
53
59
|
[classes.close]: !open
|
|
54
60
|
}),
|
|
61
|
+
...getContainerProps({ style: { ...!open && { width: 0 } } }),
|
|
55
62
|
...others,
|
|
56
63
|
children: [
|
|
57
64
|
tabs && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -83,6 +90,7 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
|
|
|
83
90
|
]
|
|
84
91
|
}
|
|
85
92
|
),
|
|
93
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ...getSeparatorProps() }),
|
|
86
94
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
87
95
|
uikitReactCore.HvIconButton,
|
|
88
96
|
{
|
|
@@ -93,7 +101,11 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
|
|
|
93
101
|
[classes.handleOpen]: open,
|
|
94
102
|
[classes.handleClose]: !open
|
|
95
103
|
}),
|
|
96
|
-
|
|
104
|
+
style: {
|
|
105
|
+
left: open ? width : 0,
|
|
106
|
+
transition: isDragging ? "none" : void 0
|
|
107
|
+
},
|
|
108
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { rotate: open })
|
|
97
109
|
}
|
|
98
110
|
)
|
|
99
111
|
] });
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const react = require("react");
|
|
4
|
+
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
5
|
+
const useResizable = (resizableOptions) => {
|
|
6
|
+
const {
|
|
7
|
+
ref,
|
|
8
|
+
initialWidth = 320,
|
|
9
|
+
minWidth = 100,
|
|
10
|
+
maxWidth = 600
|
|
11
|
+
} = resizableOptions;
|
|
12
|
+
const [width, setWidth] = react.useState(initialWidth);
|
|
13
|
+
const [isHover, setIsHover] = react.useState(false);
|
|
14
|
+
const [isDragging, setIsDragging] = react.useState(false);
|
|
15
|
+
const panelRef = react.useRef(null);
|
|
16
|
+
const forkedRef = uikitReactCore.useForkRef(ref, panelRef);
|
|
17
|
+
const mouseMove = (event) => {
|
|
18
|
+
if (panelRef.current) {
|
|
19
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
20
|
+
const newWidth = event.clientX - rect.left;
|
|
21
|
+
if (newWidth >= minWidth && newWidth <= maxWidth) {
|
|
22
|
+
setWidth(newWidth);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const handleMouseMove = (event) => {
|
|
27
|
+
if (panelRef.current) {
|
|
28
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
29
|
+
const isHoverBorder = event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;
|
|
30
|
+
setIsHover(isHoverBorder);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const handleMouseUp = () => {
|
|
34
|
+
if (!panelRef.current) return;
|
|
35
|
+
panelRef.current.style.userSelect = "";
|
|
36
|
+
panelRef.current?.parentElement?.removeEventListener(
|
|
37
|
+
"mousemove",
|
|
38
|
+
mouseMove
|
|
39
|
+
);
|
|
40
|
+
panelRef.current?.parentElement?.removeEventListener(
|
|
41
|
+
"mouseup",
|
|
42
|
+
handleMouseUp
|
|
43
|
+
);
|
|
44
|
+
setIsDragging(false);
|
|
45
|
+
};
|
|
46
|
+
const startResizing = () => {
|
|
47
|
+
if (!panelRef.current) return;
|
|
48
|
+
panelRef.current.style.userSelect = "none";
|
|
49
|
+
panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
|
|
50
|
+
panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
|
|
51
|
+
setIsDragging(true);
|
|
52
|
+
};
|
|
53
|
+
const getContainerProps = (overrides = {}) => ({
|
|
54
|
+
ref: forkedRef,
|
|
55
|
+
style: {
|
|
56
|
+
width,
|
|
57
|
+
transition: isDragging ? "none" : void 0,
|
|
58
|
+
...overrides.style
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
const getSeparatorProps = (overrides = {}) => ({
|
|
62
|
+
style: {
|
|
63
|
+
left: width,
|
|
64
|
+
position: "absolute",
|
|
65
|
+
top: 0,
|
|
66
|
+
bottom: 0,
|
|
67
|
+
width: 5,
|
|
68
|
+
cursor: "col-resize",
|
|
69
|
+
...overrides.style
|
|
70
|
+
},
|
|
71
|
+
onMouseMove: handleMouseMove,
|
|
72
|
+
onMouseLeave: () => setIsHover(false),
|
|
73
|
+
onMouseDown: () => {
|
|
74
|
+
if (isHover) startResizing();
|
|
75
|
+
},
|
|
76
|
+
role: "separator"
|
|
77
|
+
});
|
|
78
|
+
return { width, isDragging, getContainerProps, getSeparatorProps };
|
|
79
|
+
};
|
|
80
|
+
exports.useResizable = useResizable;
|
|
@@ -4,6 +4,7 @@ import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel, HvIcon
|
|
|
4
4
|
import { End } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { useClasses } from "./SidePanel.styles.js";
|
|
6
6
|
import { staticClasses } from "./SidePanel.styles.js";
|
|
7
|
+
import { useResizable } from "./useResizable.js";
|
|
7
8
|
import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
|
|
8
9
|
import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
|
|
9
10
|
const DEFAULT_LABELS = {
|
|
@@ -33,6 +34,12 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
|
|
|
33
34
|
tabProp,
|
|
34
35
|
tabs?.[0]?.id ?? "none"
|
|
35
36
|
);
|
|
37
|
+
const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable({
|
|
38
|
+
ref,
|
|
39
|
+
initialWidth: 320,
|
|
40
|
+
minWidth: 100,
|
|
41
|
+
maxWidth: 500
|
|
42
|
+
});
|
|
36
43
|
const handleTogglePanel = (event) => {
|
|
37
44
|
setOpen((prev) => !prev);
|
|
38
45
|
onToggle?.(event, !open);
|
|
@@ -45,12 +52,12 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
|
|
|
45
52
|
/* @__PURE__ */ jsxs(
|
|
46
53
|
"div",
|
|
47
54
|
{
|
|
48
|
-
ref,
|
|
49
55
|
id,
|
|
50
56
|
className: cx(classes.root, className, {
|
|
51
57
|
[classes.open]: open,
|
|
52
58
|
[classes.close]: !open
|
|
53
59
|
}),
|
|
60
|
+
...getContainerProps({ style: { ...!open && { width: 0 } } }),
|
|
54
61
|
...others,
|
|
55
62
|
children: [
|
|
56
63
|
tabs && /* @__PURE__ */ jsx(
|
|
@@ -82,6 +89,7 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
|
|
|
82
89
|
]
|
|
83
90
|
}
|
|
84
91
|
),
|
|
92
|
+
/* @__PURE__ */ jsx("div", { ...getSeparatorProps() }),
|
|
85
93
|
/* @__PURE__ */ jsx(
|
|
86
94
|
HvIconButton,
|
|
87
95
|
{
|
|
@@ -92,7 +100,11 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
|
|
|
92
100
|
[classes.handleOpen]: open,
|
|
93
101
|
[classes.handleClose]: !open
|
|
94
102
|
}),
|
|
95
|
-
|
|
103
|
+
style: {
|
|
104
|
+
left: open ? width : 0,
|
|
105
|
+
transition: isDragging ? "none" : void 0
|
|
106
|
+
},
|
|
107
|
+
children: /* @__PURE__ */ jsx(End, { rotate: open })
|
|
96
108
|
}
|
|
97
109
|
)
|
|
98
110
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvPanel,\n useControlled,\n useDefaultProps,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n open: \"Open\",\n close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n /** When controlled, defines id the panel is open or not. */\n open?: boolean;\n /** When uncontrolled, defines the initial state of the panel. */\n defaultOpen?: boolean;\n /** List of tabs visible on the panel. */\n tabs?: {\n id: string | number;\n content: React.ReactNode;\n }[];\n /** Id of the selected tab if it needs to be controlled. */\n tab?: string | number;\n /** Callback triggered whenever the panel toggles. */\n onToggle?: (\n event: React.MouseEvent | React.KeyboardEvent,\n open: boolean,\n ) => void;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | number | null,\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** The content that will be rendered within the canvas panel. */\n children?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n HTMLDivElement,\n HvCanvasSidePanelProps\n>((props, ref) => {\n const {\n id: idProp,\n tab: tabProp,\n open: openProp,\n defaultOpen = false,\n tabs,\n onToggle,\n onTabChange,\n labels: labelsProp,\n className,\n children,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n tabProp,\n tabs?.[0]?.id ?? \"none\",\n );\n\n const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\n onToggle?.(event, !open);\n };\n\n const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n tabId,\n ) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <>\n <div\n
|
|
1
|
+
{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvPanel,\n useControlled,\n useDefaultProps,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n open: \"Open\",\n close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n /** When controlled, defines id the panel is open or not. */\n open?: boolean;\n /** When uncontrolled, defines the initial state of the panel. */\n defaultOpen?: boolean;\n /** List of tabs visible on the panel. */\n tabs?: {\n id: string | number;\n content: React.ReactNode;\n }[];\n /** Id of the selected tab if it needs to be controlled. */\n tab?: string | number;\n /** Callback triggered whenever the panel toggles. */\n onToggle?: (\n event: React.MouseEvent | React.KeyboardEvent,\n open: boolean,\n ) => void;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | number | null,\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** The content that will be rendered within the canvas panel. */\n children?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n HTMLDivElement,\n HvCanvasSidePanelProps\n>((props, ref) => {\n const {\n id: idProp,\n tab: tabProp,\n open: openProp,\n defaultOpen = false,\n tabs,\n onToggle,\n onTabChange,\n labels: labelsProp,\n className,\n children,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n tabProp,\n tabs?.[0]?.id ?? \"none\",\n );\n\n const { width, isDragging, getContainerProps, getSeparatorProps } =\n useResizable({\n ref,\n initialWidth: 320,\n minWidth: 100,\n maxWidth: 500,\n });\n\n const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n setOpen((prev) => !prev);\n onToggle?.(event, !open);\n };\n\n const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n tabId,\n ) => {\n setSelectedTab(tabId);\n onTabChange?.(event, tabId);\n };\n\n return (\n <>\n <div\n id={id}\n className={cx(classes.root, className, {\n [classes.open]: open,\n [classes.close]: !open,\n })}\n {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\n {...others}\n >\n {tabs && (\n <HvCanvasPanelTabs\n className={classes.tabs}\n value={selectedTab}\n onChange={handleTabChange}\n >\n {tabs.map((tab) => (\n <HvCanvasPanelTab\n key={tab.id}\n id={`${id}-${tab.id}`}\n value={tab.id}\n >\n {tab.content}\n </HvCanvasPanelTab>\n ))}\n </HvCanvasPanelTabs>\n )}\n <HvPanel\n role={tabs ? \"tabpanel\" : undefined}\n aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n className={classes.content}\n >\n {children}\n </HvPanel>\n </div>\n <div {...getSeparatorProps()} />\n <HvIconButton\n variant=\"primaryGhost\"\n title={open ? labels.close : labels.open}\n onClick={handleTogglePanel}\n className={cx(classes.handle, {\n [classes.handleOpen]: open,\n [classes.handleClose]: !open,\n })}\n style={{\n left: open ? width : 0,\n transition: isDragging ? \"none\" : undefined,\n }}\n >\n <End rotate={open} />\n </HvIconButton>\n </>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasSidePanel\",\n {\n root: {\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n boxShadow,\n backgroundColor: \"transparent\",\n transition: \"visibility 0.3s ease, width 0.3s ease\",\n overflow: \"hidden\",\n \"&$open\": {\n width: 320,\n visibility: \"visible\",\n },\n \"&$close\": {\n width: 0,\n visibility: \"hidden\",\n },\n },\n tabs: {},\n content: {\n height: \"100%\",\n },\n handle: {\n height:
|
|
1
|
+
{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasSidePanel\",\n {\n root: {\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n boxShadow,\n backgroundColor: \"transparent\",\n transition: \"visibility 0.3s ease, width 0.3s ease\",\n overflow: \"hidden\",\n \"&$open\": {\n width: 320,\n visibility: \"visible\",\n },\n \"&$close\": {\n width: 0,\n visibility: \"hidden\",\n },\n },\n tabs: {},\n content: {\n height: \"100%\",\n },\n handle: {\n height: 44,\n width: 44,\n display: \"flex\",\n justifyContent: \"center\",\n boxShadow,\n backgroundColor: theme.colors.atmo1,\n borderRadius: \"0px 16px 16px 0px\",\n position: \"absolute\",\n transition: \"left 0.3s ease\",\n top: \"calc(50% - 86px)\",\n \"&$handleOpen\": {\n left: 320,\n },\n \"&$handleClose\": {\n left: 0,\n },\n },\n open: {},\n close: {},\n handleOpen: {},\n handleClose: {},\n },\n);\n"],"names":[],"mappings":";AAEA,MAAM,YAAY,oBAAoB,MAAM,MAAM,aAAa,KAAK,CAAC;AAExD,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAA;AAAA,EAAC;AAElB;"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { useState, useRef } from "react";
|
|
2
|
+
import { useForkRef } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
const useResizable = (resizableOptions) => {
|
|
4
|
+
const {
|
|
5
|
+
ref,
|
|
6
|
+
initialWidth = 320,
|
|
7
|
+
minWidth = 100,
|
|
8
|
+
maxWidth = 600
|
|
9
|
+
} = resizableOptions;
|
|
10
|
+
const [width, setWidth] = useState(initialWidth);
|
|
11
|
+
const [isHover, setIsHover] = useState(false);
|
|
12
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
13
|
+
const panelRef = useRef(null);
|
|
14
|
+
const forkedRef = useForkRef(ref, panelRef);
|
|
15
|
+
const mouseMove = (event) => {
|
|
16
|
+
if (panelRef.current) {
|
|
17
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
18
|
+
const newWidth = event.clientX - rect.left;
|
|
19
|
+
if (newWidth >= minWidth && newWidth <= maxWidth) {
|
|
20
|
+
setWidth(newWidth);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const handleMouseMove = (event) => {
|
|
25
|
+
if (panelRef.current) {
|
|
26
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
27
|
+
const isHoverBorder = event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;
|
|
28
|
+
setIsHover(isHoverBorder);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const handleMouseUp = () => {
|
|
32
|
+
if (!panelRef.current) return;
|
|
33
|
+
panelRef.current.style.userSelect = "";
|
|
34
|
+
panelRef.current?.parentElement?.removeEventListener(
|
|
35
|
+
"mousemove",
|
|
36
|
+
mouseMove
|
|
37
|
+
);
|
|
38
|
+
panelRef.current?.parentElement?.removeEventListener(
|
|
39
|
+
"mouseup",
|
|
40
|
+
handleMouseUp
|
|
41
|
+
);
|
|
42
|
+
setIsDragging(false);
|
|
43
|
+
};
|
|
44
|
+
const startResizing = () => {
|
|
45
|
+
if (!panelRef.current) return;
|
|
46
|
+
panelRef.current.style.userSelect = "none";
|
|
47
|
+
panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
|
|
48
|
+
panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
|
|
49
|
+
setIsDragging(true);
|
|
50
|
+
};
|
|
51
|
+
const getContainerProps = (overrides = {}) => ({
|
|
52
|
+
ref: forkedRef,
|
|
53
|
+
style: {
|
|
54
|
+
width,
|
|
55
|
+
transition: isDragging ? "none" : void 0,
|
|
56
|
+
...overrides.style
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
const getSeparatorProps = (overrides = {}) => ({
|
|
60
|
+
style: {
|
|
61
|
+
left: width,
|
|
62
|
+
position: "absolute",
|
|
63
|
+
top: 0,
|
|
64
|
+
bottom: 0,
|
|
65
|
+
width: 5,
|
|
66
|
+
cursor: "col-resize",
|
|
67
|
+
...overrides.style
|
|
68
|
+
},
|
|
69
|
+
onMouseMove: handleMouseMove,
|
|
70
|
+
onMouseLeave: () => setIsHover(false),
|
|
71
|
+
onMouseDown: () => {
|
|
72
|
+
if (isHover) startResizing();
|
|
73
|
+
},
|
|
74
|
+
role: "separator"
|
|
75
|
+
});
|
|
76
|
+
return { width, isDragging, getContainerProps, getSeparatorProps };
|
|
77
|
+
};
|
|
78
|
+
export {
|
|
79
|
+
useResizable
|
|
80
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResizable.js","sources":["../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\ninterface ContainerProps {\n ref: any;\n style: React.CSSProperties;\n}\n\ninterface SeparatorProps {\n style: React.CSSProperties;\n onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n onMouseLeave?: () => void;\n onMouseDown?: () => void;\n role: string;\n}\n\ninterface ResizableProps {\n ref: any;\n initialWidth?: number;\n minWidth?: number;\n maxWidth?: number;\n}\n\nexport const useResizable = (\n resizableOptions: ResizableProps,\n): {\n width: number;\n isDragging: boolean;\n getContainerProps: (overrides: any) => ContainerProps;\n getSeparatorProps: () => SeparatorProps;\n} => {\n const {\n ref,\n initialWidth = 320,\n minWidth = 100,\n maxWidth = 600,\n } = resizableOptions;\n\n const [width, setWidth] = useState(initialWidth);\n const [isHover, setIsHover] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n\n const panelRef = useRef<HTMLDivElement>(null);\n\n const forkedRef = useForkRef(ref, panelRef);\n\n const mouseMove = (event: MouseEvent) => {\n if (panelRef.current) {\n const rect = panelRef.current.getBoundingClientRect();\n const newWidth = event.clientX - rect.left;\n if (newWidth >= minWidth && newWidth <= maxWidth) {\n setWidth(newWidth);\n }\n }\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (panelRef.current) {\n const rect = panelRef.current.getBoundingClientRect();\n const isHoverBorder =\n event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;\n setIsHover(isHoverBorder);\n }\n };\n\n const handleMouseUp = () => {\n if (!panelRef.current) return;\n\n panelRef.current.style.userSelect = \"\";\n panelRef.current?.parentElement?.removeEventListener(\n \"mousemove\",\n mouseMove,\n );\n panelRef.current?.parentElement?.removeEventListener(\n \"mouseup\",\n handleMouseUp,\n );\n setIsDragging(false);\n };\n\n const startResizing = () => {\n if (!panelRef.current) return;\n\n panelRef.current.style.userSelect = \"none\";\n panelRef.current.parentElement?.addEventListener(\"mousemove\", mouseMove);\n panelRef.current.parentElement?.addEventListener(\"mouseup\", handleMouseUp);\n setIsDragging(true);\n };\n\n const getContainerProps = (\n overrides: Partial<ContainerProps> = {},\n ): ContainerProps => ({\n ref: forkedRef,\n style: {\n width,\n transition: isDragging ? \"none\" : undefined,\n ...overrides.style,\n },\n });\n\n const getSeparatorProps = (\n overrides: Partial<SeparatorProps> = {},\n ): SeparatorProps => ({\n style: {\n left: width,\n position: \"absolute\",\n top: 0,\n bottom: 0,\n width: 5,\n cursor: \"col-resize\",\n ...overrides.style,\n },\n onMouseMove: handleMouseMove,\n onMouseLeave: () => setIsHover(false),\n onMouseDown: () => {\n if (isHover) startResizing();\n },\n role: \"separator\",\n });\n\n return { width, isDragging, getContainerProps, getSeparatorProps };\n};\n"],"names":[],"mappings":";;AAuBa,MAAA,eAAe,CAC1B,qBAMG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,IACT;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAE5C,QAAA,WAAW,OAAuB,IAAI;AAEtC,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,YAAY,CAAC,UAAsB;AACvC,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,WAAW,MAAM,UAAU,KAAK;AAClC,UAAA,YAAY,YAAY,YAAY,UAAU;AAChD,iBAAS,QAAQ;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAEM,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,gBACJ,MAAM,WAAW,KAAK,QAAQ,KAAK,MAAM,WAAW,KAAK,QAAQ;AACnE,iBAAW,aAAa;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,QAAQ,eAAe,iBAAiB,aAAa,SAAS;AACvE,aAAS,QAAQ,eAAe,iBAAiB,WAAW,aAAa;AACzE,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,YAAY,aAAa,SAAS;AAAA,MAClC,GAAG,UAAU;AAAA,IAAA;AAAA,EACf;AAGF,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,UAAU;AAAA,IACf;AAAA,IACA,aAAa;AAAA,IACb,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,aAAa,MAAM;AACjB,UAAI,QAAuB,eAAA;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAY,mBAAmB,kBAAkB;AACnE;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-pentaho",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "UI Kit Pentaho+ React components.",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@emotion/css": "^11.11.0",
|
|
33
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
34
|
-
"@hitachivantara/uikit-react-icons": "^5.
|
|
35
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
33
|
+
"@hitachivantara/uikit-react-core": "^5.82.0",
|
|
34
|
+
"@hitachivantara/uikit-react-icons": "^5.13.0",
|
|
35
|
+
"@hitachivantara/uikit-react-utils": "^0.2.16",
|
|
36
36
|
"@mui/base": "^5.0.0-beta.40",
|
|
37
37
|
"react-resize-detector": "^8.1.0"
|
|
38
38
|
},
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"access": "public",
|
|
44
44
|
"directory": "package"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "0ef2da44e0bc8356acb31fe409df28e35bd254bc",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"types": "./dist/types/index.d.ts",
|