venice-ui 2.1.18 → 2.1.19
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/components/DropdownMenu/DropdownMenu.js +14 -7
- package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js +1 -1
- package/dist/esm/components/DropdownMenu/DropdownMenu.js +14 -7
- package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js +1 -1
- package/dist/types/types/commonTypes.d.ts +1 -0
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
|
|
|
32
32
|
const Aligment_1 = require("../Aligment");
|
|
33
33
|
const Typography_1 = require("../Typography");
|
|
34
34
|
const react_dom_1 = require("react-dom");
|
|
35
|
-
const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false }) => {
|
|
35
|
+
const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false, }) => {
|
|
36
36
|
const [open, toogleOpen] = (0, react_1.useState)(false);
|
|
37
37
|
const ref = (0, react_1.useRef)(null);
|
|
38
38
|
const sourceRef = (0, react_1.useRef)(null);
|
|
@@ -62,19 +62,26 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
|
|
|
62
62
|
footerAction && footerAction();
|
|
63
63
|
close();
|
|
64
64
|
};
|
|
65
|
-
const handleClick = (action, disableID) => {
|
|
65
|
+
const handleClick = (action, disabled, disableID) => {
|
|
66
66
|
if (targetID) {
|
|
67
67
|
if (disableID !== targetID) {
|
|
68
|
-
|
|
68
|
+
if (!disabled) {
|
|
69
|
+
action(targetID);
|
|
70
|
+
}
|
|
69
71
|
}
|
|
70
72
|
}
|
|
71
73
|
else {
|
|
72
|
-
|
|
74
|
+
if (!disabled) {
|
|
75
|
+
action();
|
|
76
|
+
}
|
|
73
77
|
}
|
|
74
78
|
close();
|
|
75
79
|
};
|
|
76
|
-
const isDisable = (disableID) => {
|
|
77
|
-
if (
|
|
80
|
+
const isDisable = (disableID, disabled) => {
|
|
81
|
+
if (disabled) {
|
|
82
|
+
return true;
|
|
83
|
+
}
|
|
84
|
+
else if (targetID) {
|
|
78
85
|
return targetID === disableID;
|
|
79
86
|
}
|
|
80
87
|
return false;
|
|
@@ -118,7 +125,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
|
|
|
118
125
|
headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
|
|
119
126
|
headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
|
|
120
127
|
react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
|
|
121
|
-
options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
|
|
128
|
+
options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.diasbled), onClick: () => handleClick(option.action, option.diasbled ? option.diasbled : false, option.disableID), isActive: option.isActive }, option.label)))),
|
|
122
129
|
footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
|
|
123
130
|
};
|
|
124
131
|
exports.DropdownMenu = DropdownMenu;
|
|
@@ -50,5 +50,5 @@ exports.DropdownMenuOption = styled_components_1.default.div `
|
|
|
50
50
|
exports.DropdownMenuLabel = styled_components_1.default.div `
|
|
51
51
|
display: flex;
|
|
52
52
|
${(p) => (0, common_1.setSize)(p.size)};
|
|
53
|
-
color
|
|
53
|
+
color: ${(p) => (p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor)};
|
|
54
54
|
`;
|
|
@@ -6,7 +6,7 @@ import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownM
|
|
|
6
6
|
import { Aligment } from '../Aligment';
|
|
7
7
|
import { TextAccent, TextLabel, Text } from '../Typography';
|
|
8
8
|
import { createPortal } from 'react-dom';
|
|
9
|
-
export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false }) => {
|
|
9
|
+
export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false, }) => {
|
|
10
10
|
const [open, toogleOpen] = useState(false);
|
|
11
11
|
const ref = useRef(null);
|
|
12
12
|
const sourceRef = useRef(null);
|
|
@@ -36,19 +36,26 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
|
|
|
36
36
|
footerAction && footerAction();
|
|
37
37
|
close();
|
|
38
38
|
};
|
|
39
|
-
const handleClick = (action, disableID) => {
|
|
39
|
+
const handleClick = (action, disabled, disableID) => {
|
|
40
40
|
if (targetID) {
|
|
41
41
|
if (disableID !== targetID) {
|
|
42
|
-
|
|
42
|
+
if (!disabled) {
|
|
43
|
+
action(targetID);
|
|
44
|
+
}
|
|
43
45
|
}
|
|
44
46
|
}
|
|
45
47
|
else {
|
|
46
|
-
|
|
48
|
+
if (!disabled) {
|
|
49
|
+
action();
|
|
50
|
+
}
|
|
47
51
|
}
|
|
48
52
|
close();
|
|
49
53
|
};
|
|
50
|
-
const isDisable = (disableID) => {
|
|
51
|
-
if (
|
|
54
|
+
const isDisable = (disableID, disabled) => {
|
|
55
|
+
if (disabled) {
|
|
56
|
+
return true;
|
|
57
|
+
}
|
|
58
|
+
else if (targetID) {
|
|
52
59
|
return targetID === disableID;
|
|
53
60
|
}
|
|
54
61
|
return false;
|
|
@@ -92,6 +99,6 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
|
|
|
92
99
|
headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
|
|
93
100
|
headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
|
|
94
101
|
React.createElement(DropdownMenuContent, null, options &&
|
|
95
|
-
options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
|
|
102
|
+
options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.diasbled), onClick: () => handleClick(option.action, option.diasbled ? option.diasbled : false, option.disableID), isActive: option.isActive }, option.label)))),
|
|
96
103
|
footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
|
|
97
104
|
};
|
|
@@ -44,5 +44,5 @@ export const DropdownMenuOption = styled.div `
|
|
|
44
44
|
export const DropdownMenuLabel = styled.div `
|
|
45
45
|
display: flex;
|
|
46
46
|
${(p) => setSize(p.size)};
|
|
47
|
-
color
|
|
47
|
+
color: ${(p) => (p.isActive ? Theme.colors.primary : p.theme.optionColor)};
|
|
48
48
|
`;
|