@dktunited-techoff/techoff-suite-ui 1.13.9 → 1.13.10
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/esm/components/TsMenuButton/TsMenuButton.css +1 -1
- package/esm/components/TsMenuButton/TsMenuButton.js +17 -7
- package/esm/components/TsMenuButton/TsMenuButton.js.map +1 -1
- package/esm/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx +3 -3
- package/esm/hooks/use-click-outside.js +2 -2
- package/esm/hooks/use-click-outside.js.map +1 -1
- package/lib/components/TsMenuButton/TsMenuButton.css +1 -1
- package/lib/components/TsMenuButton/TsMenuButton.js +17 -7
- package/lib/components/TsMenuButton/TsMenuButton.js.map +1 -1
- package/lib/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx +3 -3
- package/lib/hooks/use-click-outside.js +2 -2
- package/lib/hooks/use-click-outside.js.map +1 -1
- package/package.json +1 -1
- package/src/components/TsMenuButton/TsMenuButton.css +1 -1
- package/src/components/TsMenuButton/TsMenuButton.tsx +38 -19
- package/src/components/TsMenuButton/__stories__/TsMenuButton.stories.mdx +3 -3
- package/src/hooks/use-click-outside.tsx +2 -2
|
@@ -3,14 +3,12 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import { TsButton } from '../TsButton/TsButton';
|
|
5
5
|
import { TsIcon } from '../TsIcon/TsIcon';
|
|
6
|
-
import { useClickOutside } from '../../hooks/use-click-outside';
|
|
7
6
|
import './TsMenuButton.css';
|
|
8
7
|
export const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
|
|
9
8
|
const [showMenu, setShowMenu] = useState(false);
|
|
10
9
|
const [menuStyle, setMenuStyle] = useState({});
|
|
11
10
|
const buttonRef = useRef(null);
|
|
12
11
|
const menuRef = useRef(null);
|
|
13
|
-
const containerRef = useClickOutside(() => setShowMenu(false));
|
|
14
12
|
// ########
|
|
15
13
|
// Hanlders
|
|
16
14
|
const handleShowMenu = (e) => {
|
|
@@ -31,13 +29,25 @@ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
|
|
|
31
29
|
});
|
|
32
30
|
}
|
|
33
31
|
}, [showMenu]);
|
|
34
|
-
const menu = showMenu && (React.createElement(
|
|
35
|
-
action.
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
const menu = showMenu && (React.createElement(React.Fragment, null,
|
|
33
|
+
React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`, style: menuStyle, ref: menuRef }, actions.map(action => !action.divider ? (React.createElement("button", { className: "ts-menu-item", onClick: e => {
|
|
34
|
+
e.stopPropagation();
|
|
35
|
+
action.onClick && action.onClick(e);
|
|
36
|
+
} },
|
|
37
|
+
action.icon && (React.createElement("div", { className: "ts-menu-item-icon" },
|
|
38
|
+
React.createElement(TsIcon, { name: action.icon, size: "16" }))),
|
|
39
|
+
React.createElement("div", { className: "ts-menu-item-label" }, action.label))) : (React.createElement("div", { className: "ts-menu-divider" })))),
|
|
40
|
+
React.createElement("div", { onClick: () => setShowMenu(false), style: {
|
|
41
|
+
position: 'fixed',
|
|
42
|
+
top: 0,
|
|
43
|
+
left: 0,
|
|
44
|
+
width: '100vw',
|
|
45
|
+
height: '100vh',
|
|
46
|
+
zIndex: 99,
|
|
47
|
+
} })));
|
|
38
48
|
// #########
|
|
39
49
|
// Rendering
|
|
40
|
-
return (React.createElement("div", { className: "ts-menu-button"
|
|
50
|
+
return (React.createElement("div", { className: "ts-menu-button" },
|
|
41
51
|
React.createElement("div", { ref: buttonRef },
|
|
42
52
|
React.createElement(TsButton, { ...buttonProps, onClick: handleShowMenu })),
|
|
43
53
|
createPortal(menu, document.body)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -26,10 +26,10 @@ A MenuButton can be used to group a set of actions that are related.
|
|
|
26
26
|
menuAlignment: 'bottom-start',
|
|
27
27
|
buttonProps: { icon: 'dots-vertical', variant: 'secondary' },
|
|
28
28
|
actions: [
|
|
29
|
-
{ icon: 'edit', label: 'Edit' },
|
|
30
|
-
{ icon: 'file-copy', label: 'Duplicate' },
|
|
29
|
+
{ icon: 'edit', label: 'Edit', onClick: () => console.log('Edit') },
|
|
30
|
+
{ icon: 'file-copy', label: 'Duplicate', onClick: () => console.log('Duplicate') },
|
|
31
31
|
{ divider: true },
|
|
32
|
-
{ icon: 'delete-bin', label: 'Delete' },
|
|
32
|
+
{ icon: 'delete-bin', label: 'Delete', onClick: () => console.log('Delete') },
|
|
33
33
|
],
|
|
34
34
|
}}
|
|
35
35
|
argTypes={menuButtonArgTypes}
|
|
@@ -6,8 +6,8 @@ export const useClickOutside = (callback) => {
|
|
|
6
6
|
callback();
|
|
7
7
|
};
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
document.addEventListener('
|
|
10
|
-
return () => document.removeEventListener('
|
|
9
|
+
document.addEventListener('click', handleClickOutside);
|
|
10
|
+
return () => document.removeEventListener('click', handleClickOutside);
|
|
11
11
|
}, []);
|
|
12
12
|
return ref;
|
|
13
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}
|
|
@@ -6,14 +6,12 @@ const react_1 = require("react");
|
|
|
6
6
|
const react_dom_1 = require("react-dom");
|
|
7
7
|
const TsButton_1 = require("../TsButton/TsButton");
|
|
8
8
|
const TsIcon_1 = require("../TsIcon/TsIcon");
|
|
9
|
-
const use_click_outside_1 = require("../../hooks/use-click-outside");
|
|
10
9
|
require("./TsMenuButton.css");
|
|
11
10
|
const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
|
|
12
11
|
const [showMenu, setShowMenu] = (0, react_1.useState)(false);
|
|
13
12
|
const [menuStyle, setMenuStyle] = (0, react_1.useState)({});
|
|
14
13
|
const buttonRef = (0, react_1.useRef)(null);
|
|
15
14
|
const menuRef = (0, react_1.useRef)(null);
|
|
16
|
-
const containerRef = (0, use_click_outside_1.useClickOutside)(() => setShowMenu(false));
|
|
17
15
|
// ########
|
|
18
16
|
// Hanlders
|
|
19
17
|
const handleShowMenu = (e) => {
|
|
@@ -34,13 +32,25 @@ const TsMenuButton = ({ actions, buttonProps, menuAlignment }) => {
|
|
|
34
32
|
});
|
|
35
33
|
}
|
|
36
34
|
}, [showMenu]);
|
|
37
|
-
const menu = showMenu && (React.createElement(
|
|
38
|
-
action.
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
const menu = showMenu && (React.createElement(React.Fragment, null,
|
|
36
|
+
React.createElement("div", { className: `ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`, style: menuStyle, ref: menuRef }, actions.map(action => !action.divider ? (React.createElement("button", { className: "ts-menu-item", onClick: e => {
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
action.onClick && action.onClick(e);
|
|
39
|
+
} },
|
|
40
|
+
action.icon && (React.createElement("div", { className: "ts-menu-item-icon" },
|
|
41
|
+
React.createElement(TsIcon_1.TsIcon, { name: action.icon, size: "16" }))),
|
|
42
|
+
React.createElement("div", { className: "ts-menu-item-label" }, action.label))) : (React.createElement("div", { className: "ts-menu-divider" })))),
|
|
43
|
+
React.createElement("div", { onClick: () => setShowMenu(false), style: {
|
|
44
|
+
position: 'fixed',
|
|
45
|
+
top: 0,
|
|
46
|
+
left: 0,
|
|
47
|
+
width: '100vw',
|
|
48
|
+
height: '100vh',
|
|
49
|
+
zIndex: 99,
|
|
50
|
+
} })));
|
|
41
51
|
// #########
|
|
42
52
|
// Rendering
|
|
43
|
-
return (React.createElement("div", { className: "ts-menu-button"
|
|
53
|
+
return (React.createElement("div", { className: "ts-menu-button" },
|
|
44
54
|
React.createElement("div", { ref: buttonRef },
|
|
45
55
|
React.createElement(TsButton_1.TsButton, { ...buttonProps, onClick: handleShowMenu })),
|
|
46
56
|
(0, react_dom_1.createPortal)(menu, document.body)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA+E;AAC/E,yCAAyC;AACzC,mDAAgD;AAChD,6CAA0C;
|
|
1
|
+
{"version":3,"file":"TsMenuButton.js","sourceRoot":"","sources":["../../../src/components/TsMenuButton/TsMenuButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -26,10 +26,10 @@ A MenuButton can be used to group a set of actions that are related.
|
|
|
26
26
|
menuAlignment: 'bottom-start',
|
|
27
27
|
buttonProps: { icon: 'dots-vertical', variant: 'secondary' },
|
|
28
28
|
actions: [
|
|
29
|
-
{ icon: 'edit', label: 'Edit' },
|
|
30
|
-
{ icon: 'file-copy', label: 'Duplicate' },
|
|
29
|
+
{ icon: 'edit', label: 'Edit', onClick: () => console.log('Edit') },
|
|
30
|
+
{ icon: 'file-copy', label: 'Duplicate', onClick: () => console.log('Duplicate') },
|
|
31
31
|
{ divider: true },
|
|
32
|
-
{ icon: 'delete-bin', label: 'Delete' },
|
|
32
|
+
{ icon: 'delete-bin', label: 'Delete', onClick: () => console.log('Delete') },
|
|
33
33
|
],
|
|
34
34
|
}}
|
|
35
35
|
argTypes={menuButtonArgTypes}
|
|
@@ -9,8 +9,8 @@ const useClickOutside = (callback) => {
|
|
|
9
9
|
callback();
|
|
10
10
|
};
|
|
11
11
|
(0, react_1.useEffect)(() => {
|
|
12
|
-
document.addEventListener('
|
|
13
|
-
return () => document.removeEventListener('
|
|
12
|
+
document.addEventListener('click', handleClickOutside);
|
|
13
|
+
return () => document.removeEventListener('click', handleClickOutside);
|
|
14
14
|
}, []);
|
|
15
15
|
return ref;
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":";;;AAAA,iCAA0C;AAEnC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":";;;AAAA,iCAA0C;AAEnC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAbW,QAAA,eAAe,mBAa1B"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,6 @@ import { CSSProperties, MouseEvent, useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import { TsButton } from '../TsButton/TsButton';
|
|
5
5
|
import { TsIcon } from '../TsIcon/TsIcon';
|
|
6
|
-
import { useClickOutside } from '../../hooks/use-click-outside';
|
|
7
6
|
import { TsMenuButtonProps } from './TsMenuButton.types';
|
|
8
7
|
import './TsMenuButton.css';
|
|
9
8
|
|
|
@@ -12,7 +11,6 @@ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }: TsMenuButt
|
|
|
12
11
|
const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
|
|
13
12
|
const buttonRef = useRef<HTMLDivElement>(null);
|
|
14
13
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
15
|
-
const containerRef = useClickOutside(() => setShowMenu(false));
|
|
16
14
|
|
|
17
15
|
// ########
|
|
18
16
|
// Hanlders
|
|
@@ -38,29 +36,50 @@ export const TsMenuButton = ({ actions, buttonProps, menuAlignment }: TsMenuButt
|
|
|
38
36
|
}, [showMenu]);
|
|
39
37
|
|
|
40
38
|
const menu = showMenu && (
|
|
41
|
-
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
39
|
+
<>
|
|
40
|
+
<div className={`ts-menu-button-menu ts-menu-button-menu--${menuAlignment}`} style={menuStyle} ref={menuRef}>
|
|
41
|
+
{actions.map(action =>
|
|
42
|
+
!action.divider ? (
|
|
43
|
+
<button
|
|
44
|
+
className="ts-menu-item"
|
|
45
|
+
onClick={e => {
|
|
46
|
+
e.stopPropagation();
|
|
47
|
+
action.onClick && action.onClick(e);
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
{action.icon && (
|
|
51
|
+
<div className="ts-menu-item-icon">
|
|
52
|
+
<TsIcon name={action.icon} size="16" />
|
|
53
|
+
</div>
|
|
54
|
+
)}
|
|
50
55
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
<div className="ts-menu-item-label">{action.label}</div>
|
|
57
|
+
</button>
|
|
58
|
+
) : (
|
|
59
|
+
<div className="ts-menu-divider" />
|
|
60
|
+
),
|
|
61
|
+
)}
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
{/* Outside click layer */}
|
|
65
|
+
<div
|
|
66
|
+
onClick={() => setShowMenu(false)}
|
|
67
|
+
style={{
|
|
68
|
+
position: 'fixed',
|
|
69
|
+
top: 0,
|
|
70
|
+
left: 0,
|
|
71
|
+
width: '100vw',
|
|
72
|
+
height: '100vh',
|
|
73
|
+
zIndex: 99,
|
|
74
|
+
}}
|
|
75
|
+
/>
|
|
76
|
+
</>
|
|
58
77
|
);
|
|
59
78
|
|
|
60
79
|
// #########
|
|
61
80
|
// Rendering
|
|
62
81
|
return (
|
|
63
|
-
<div className="ts-menu-button"
|
|
82
|
+
<div className="ts-menu-button">
|
|
64
83
|
<div ref={buttonRef}>
|
|
65
84
|
<TsButton {...buttonProps} onClick={handleShowMenu} />
|
|
66
85
|
</div>
|
|
@@ -26,10 +26,10 @@ A MenuButton can be used to group a set of actions that are related.
|
|
|
26
26
|
menuAlignment: 'bottom-start',
|
|
27
27
|
buttonProps: { icon: 'dots-vertical', variant: 'secondary' },
|
|
28
28
|
actions: [
|
|
29
|
-
{ icon: 'edit', label: 'Edit' },
|
|
30
|
-
{ icon: 'file-copy', label: 'Duplicate' },
|
|
29
|
+
{ icon: 'edit', label: 'Edit', onClick: () => console.log('Edit') },
|
|
30
|
+
{ icon: 'file-copy', label: 'Duplicate', onClick: () => console.log('Duplicate') },
|
|
31
31
|
{ divider: true },
|
|
32
|
-
{ icon: 'delete-bin', label: 'Delete' },
|
|
32
|
+
{ icon: 'delete-bin', label: 'Delete', onClick: () => console.log('Delete') },
|
|
33
33
|
],
|
|
34
34
|
}}
|
|
35
35
|
argTypes={menuButtonArgTypes}
|
|
@@ -8,8 +8,8 @@ export const useClickOutside = (callback: () => void) => {
|
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
useEffect(() => {
|
|
11
|
-
document.addEventListener('
|
|
12
|
-
return () => document.removeEventListener('
|
|
11
|
+
document.addEventListener('click', handleClickOutside);
|
|
12
|
+
return () => document.removeEventListener('click', handleClickOutside);
|
|
13
13
|
}, []);
|
|
14
14
|
|
|
15
15
|
return ref;
|