venice-ui 2.2.8 → 2.2.9

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 (7) hide show
  1. package/dist/cjs/components/Dropdown/Dropdown.js +6 -4
  2. package/dist/cjs/components/common/commonComponents.js +9 -5
  3. package/dist/esm/components/Dropdown/Dropdown.js +6 -4
  4. package/dist/esm/components/common/commonComponents.js +9 -5
  5. package/dist/types/components/common/commonComponents.d.ts +1 -0
  6. package/dist/types/types/commonTypes.d.ts +1 -0
  7. package/package.json +1 -1
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -62,10 +62,12 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
62
62
  toogleOpen(!open);
63
63
  }
64
64
  };
65
- const selectOption = (e, selectedValue) => {
65
+ const selectOption = (e, selectedValue, isDisabled) => {
66
66
  e.stopPropagation();
67
- handleSelect(name, selectedValue);
68
- toogleOpen(false);
67
+ if (!isDisabled) {
68
+ handleSelect(name, selectedValue);
69
+ toogleOpen(false);
70
+ }
69
71
  };
70
72
  (0, react_1.useEffect)(() => {
71
73
  const handleClickOutside = (event) => {
@@ -95,7 +97,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
95
97
  react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
96
98
  open &&
97
99
  (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
98
- options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
100
+ options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
99
101
  error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
100
102
  };
101
103
  exports.Dropdown = Dropdown;
package/dist/cjs/components/common/commonComponents.js CHANGED
@@ -26,7 +26,7 @@ exports.Panel = styled_components_1.default.div `
26
26
  height: ${(p) => (p.height ? p.height : 'auto')};
27
27
  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
28
28
  position: absolute;
29
- z-index: ${p => p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown};
29
+ z-index: ${(p) => (p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown)};
30
30
  top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
31
31
  border: 1px solid ${Theme_1.Theme.colors.gray_2};
32
32
  border-top: none;
@@ -34,12 +34,16 @@ exports.Panel = styled_components_1.default.div `
34
34
  `;
35
35
  exports.PanelOption = styled_components_1.default.div `
36
36
  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
37
- cursor: pointer;
37
+ cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
38
38
  white-space: nowrap;
39
- font-size:16px;
40
- color: ${(p) => (p.active ? Theme_1.Theme.colors.primary : Theme_1.Theme.colors.text)};
39
+ font-size: 16px;
40
+ color: ${(p) => p.active
41
+ ? Theme_1.Theme.colors.primary
42
+ : p.isDisabled
43
+ ? Theme_1.Theme.colors.gray_1
44
+ : Theme_1.Theme.colors.text};
41
45
  :hover {
42
- background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
46
+ background-color: ${(p) => p.isDisabled ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
43
47
  }
44
48
  ${(p) => p.width && `width:${p.width};`}
45
49
  `;
package/dist/esm/components/Dropdown/Dropdown.js CHANGED
@@ -36,10 +36,12 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
36
36
  toogleOpen(!open);
37
37
  }
38
38
  };
39
- const selectOption = (e, selectedValue) => {
39
+ const selectOption = (e, selectedValue, isDisabled) => {
40
40
  e.stopPropagation();
41
- handleSelect(name, selectedValue);
42
- toogleOpen(false);
41
+ if (!isDisabled) {
42
+ handleSelect(name, selectedValue);
43
+ toogleOpen(false);
44
+ }
43
45
  };
44
46
  useEffect(() => {
45
47
  const handleClickOutside = (event) => {
@@ -69,6 +71,6 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
69
71
  React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
70
72
  open &&
71
73
  createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
72
- options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
74
+ options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
73
75
  error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
74
76
  };
package/dist/esm/components/common/commonComponents.js CHANGED
@@ -20,7 +20,7 @@ export const Panel = styled.div `
20
20
  height: ${(p) => (p.height ? p.height : 'auto')};
21
21
  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
22
22
  position: absolute;
23
- z-index: ${p => p.zIndex ? p.zIndex : Theme.zIndex.dropdown};
23
+ z-index: ${(p) => (p.zIndex ? p.zIndex : Theme.zIndex.dropdown)};
24
24
  top: ${(p) => setPanelTop(p.size)};
25
25
  border: 1px solid ${Theme.colors.gray_2};
26
26
  border-top: none;
@@ -28,12 +28,16 @@ export const Panel = styled.div `
28
28
  `;
29
29
  export const PanelOption = styled.div `
30
30
  padding: ${Theme.padding.s} ${Theme.padding.m};
31
- cursor: pointer;
31
+ cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
32
32
  white-space: nowrap;
33
- font-size:16px;
34
- color: ${(p) => (p.active ? Theme.colors.primary : Theme.colors.text)};
33
+ font-size: 16px;
34
+ color: ${(p) => p.active
35
+ ? Theme.colors.primary
36
+ : p.isDisabled
37
+ ? Theme.colors.gray_1
38
+ : Theme.colors.text};
35
39
  :hover {
36
- background-color: ${lighten(0.4, Theme.colors.primary)};
40
+ background-color: ${(p) => p.isDisabled ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
37
41
  }
38
42
  ${(p) => p.width && `width:${p.width};`}
39
43
  `;
package/dist/types/components/common/commonComponents.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IPanelOptionStyle {
12
12
  active: boolean;
13
13
  width?: string;
14
14
  onClick?: any;
15
+ isDisabled?: boolean;
15
16
  }
16
17
  export declare const PanelOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
17
18
  export {};
package/dist/types/types/commonTypes.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export interface IOption {
2
2
  value: string | number;
3
3
  label: string | number;
4
+ disabled?: boolean;
4
5
  }
5
6
  export interface IAction {
6
7
  action: (id?: string) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.2.8",
3
+ "version": "2.2.9",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",