venice-ui 2.1.18 → 2.1.20

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.
Files changed (9) hide show
  1. package/dist/cjs/components/ButtonsFooter/ButtonsFooter.js +2 -2
  2. package/dist/cjs/components/DropdownMenu/DropdownMenu.js +14 -7
  3. package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js +1 -1
  4. package/dist/esm/components/ButtonsFooter/ButtonsFooter.js +2 -2
  5. package/dist/esm/components/DropdownMenu/DropdownMenu.js +14 -7
  6. package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js +1 -1
  7. package/dist/types/components/ButtonsFooter/ButtonsFooter.d.ts +1 -0
  8. package/dist/types/types/commonTypes.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/cjs/components/ButtonsFooter/ButtonsFooter.js CHANGED
@@ -10,7 +10,7 @@ const Button_1 = require("../Button");
10
10
  const Aligment_1 = require("../Aligment");
11
11
  const ButtonsFooter_style_1 = require("./ButtonsFooter.style");
12
12
  const Toogle_1 = require("../Toogle");
13
- const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional, submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, additionaNormalMode = false, }) => {
13
+ const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional, submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, additionaNormalMode = false, additionDisabled = false, }) => {
14
14
  const isAdditional = () => {
15
15
  return labelAdditional !== undefined && handleAdditional !== undefined;
16
16
  };
@@ -29,7 +29,7 @@ const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConf
29
29
  };
30
30
  return (react_1.default.createElement(Aligment_1.Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme_1.Theme.padding.l, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor },
31
31
  labelAdditional && handleAdditional && (react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null, !submitLoader && (react_1.default.createElement(react_1.default.Fragment, null,
32
- additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { errorVariant: !additionaNormalMode, mode: 'secondary', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
32
+ additionalType === 'button' && (react_1.default.createElement(Button_1.Button, { errorVariant: !additionaNormalMode, mode: "secondary", onClick: additionAction, text: labelAdditional, left: isMultiButtons(), disabled: additionDisabled })),
33
33
  additionalType === 'toogle' && (react_1.default.createElement(Toogle_1.Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
34
34
  react_1.default.createElement(ButtonsFooter_style_1.ButtonsFooterGroup, null,
35
35
  !submitLoader && (react_1.default.createElement(Button_1.Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),
package/dist/cjs/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -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
- action(targetID);
68
+ if (!disabled) {
69
+ action(targetID);
70
+ }
69
71
  }
70
72
  }
71
73
  else {
72
- action();
74
+ if (!disabled) {
75
+ action();
76
+ }
73
77
  }
74
78
  close();
75
79
  };
76
- const isDisable = (disableID) => {
77
- if (targetID) {
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;
package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js CHANGED
@@ -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:${(p) => p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor};
53
+ color: ${(p) => (p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor)};
54
54
  `;
package/dist/esm/components/ButtonsFooter/ButtonsFooter.js CHANGED
@@ -4,7 +4,7 @@ import { Button } from '../Button';
4
4
  import { Aligment } from '../Aligment';
5
5
  import { ButtonsFooterGroup } from './ButtonsFooter.style';
6
6
  import { Toogle } from '../Toogle';
7
- export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional, submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, additionaNormalMode = false, }) => {
7
+ export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, labelConfirm = 'Confirm', labelClose = 'Close', labelAdditional, submitDisabled, submitLoader, backgroundColor = 'transparent', additionalType = 'button', additionalValue = false, additionaNormalMode = false, additionDisabled = false, }) => {
8
8
  const isAdditional = () => {
9
9
  return labelAdditional !== undefined && handleAdditional !== undefined;
10
10
  };
@@ -23,7 +23,7 @@ export const ButtonsFooter = ({ handleConfirm, handleClose, handleAdditional, la
23
23
  };
24
24
  return (React.createElement(Aligment, { justify: isAdditional() ? 'space-between' : 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l, backgroundColor: backgroundColor },
25
25
  labelAdditional && handleAdditional && (React.createElement(ButtonsFooterGroup, null, !submitLoader && (React.createElement(React.Fragment, null,
26
- additionalType === 'button' && (React.createElement(Button, { errorVariant: !additionaNormalMode, mode: 'secondary', onClick: additionAction, text: labelAdditional, left: isMultiButtons() })),
26
+ additionalType === 'button' && (React.createElement(Button, { errorVariant: !additionaNormalMode, mode: "secondary", onClick: additionAction, text: labelAdditional, left: isMultiButtons(), disabled: additionDisabled })),
27
27
  additionalType === 'toogle' && (React.createElement(Toogle, { label: labelAdditional, value: additionalValue, handleClick: additionAction, labelPosition: "left", size: "medium" })))))),
28
28
  React.createElement(ButtonsFooterGroup, null,
29
29
  !submitLoader && (React.createElement(Button, { mode: isMultiButtons() ? 'secondary' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() })),
package/dist/esm/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -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
- action(targetID);
42
+ if (!disabled) {
43
+ action(targetID);
44
+ }
43
45
  }
44
46
  }
45
47
  else {
46
- action();
48
+ if (!disabled) {
49
+ action();
50
+ }
47
51
  }
48
52
  close();
49
53
  };
50
- const isDisable = (disableID) => {
51
- if (targetID) {
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
  };
package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js CHANGED
@@ -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:${(p) => p.isActive ? Theme.colors.primary : p.theme.optionColor};
47
+ color: ${(p) => (p.isActive ? Theme.colors.primary : p.theme.optionColor)};
48
48
  `;
package/dist/types/components/ButtonsFooter/ButtonsFooter.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IButtonsFooterProps {
12
12
  additionalType?: string;
13
13
  additionalValue?: boolean;
14
14
  additionaNormalMode?: boolean;
15
+ additionDisabled?: boolean;
15
16
  }
16
17
  export declare const ButtonsFooter: FC<IButtonsFooterProps>;
17
18
  export {};
package/dist/types/types/commonTypes.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface IAction {
7
7
  label: string | number;
8
8
  disableID?: string;
9
9
  isActive?: boolean;
10
+ diasbled?: boolean;
10
11
  }
11
12
  export interface IIconsActions {
12
13
  iconName: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.1.18",
3
+ "version": "2.1.20",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",