venice-ui 2.1.22 → 2.1.23

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/Selector/Selector.js +9 -4
  2. package/dist/cjs/components/Selector/Selector.styles.js +15 -7
  3. package/dist/esm/components/Selector/Selector.js +9 -4
  4. package/dist/esm/components/Selector/Selector.styles.js +17 -9
  5. package/dist/types/components/Selector/Selector.d.ts +1 -0
  6. package/dist/types/components/Selector/Selector.styles.d.ts +2 -1
  7. package/package.json +1 -1
package/dist/cjs/components/Selector/Selector.js CHANGED
@@ -34,7 +34,7 @@ const Modal_1 = require("../Modal");
34
34
  const common_1 = require("../common");
35
35
  const styled_components_1 = require("styled-components");
36
36
  const Typography_1 = require("../Typography");
37
- const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', }) => {
37
+ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
38
38
  const [open, toogleOpen] = (0, react_1.useState)(false);
39
39
  const selectOption = (selectedValue) => {
40
40
  handleSelect(name, selectedValue);
@@ -43,13 +43,18 @@ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', siz
43
43
  const getLabelForValue = (value) => {
44
44
  return options.find((option) => option.value === value).label;
45
45
  };
46
+ const handleOpen = () => {
47
+ if (!disabled) {
48
+ toogleOpen(true);
49
+ }
50
+ };
46
51
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
47
- react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
52
+ react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width, gap: 4 },
48
53
  label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
49
54
  react_1.default.createElement(Selector_styles_1.SelectorElement, null,
50
55
  value ? (react_1.default.createElement(react_1.default.Fragment, null,
51
- react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
52
- react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size) }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(true), size: (0, common_1.setIconSize)(size) })),
56
+ react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
57
+ react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size), isDisabled: disabled }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: handleOpen, size: (0, common_1.setIconSize)(size), isDisabled: disabled })),
53
58
  open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
54
59
  error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
55
60
  };
package/dist/cjs/components/Selector/Selector.styles.js CHANGED
@@ -9,19 +9,27 @@ const common_1 = require("../common");
9
9
  exports.SelectorElement = styled_components_1.default.div `
10
10
  position: relative;
11
11
  cursor: pointer;
12
- display:flex;
13
- box-sizing:border-box;
12
+ display: flex;
13
+ box-sizing: border-box;
14
14
  align-items: center;
15
15
  `;
16
16
  exports.SelectorValue = styled_components_1.default.div `
17
17
  ${common_1.defaultStyles}
18
18
  cursor: pointer;
19
- display:flex;
19
+ display: flex;
20
20
  align-items: center;
21
21
  ${(p) => (0, common_1.setSize)(p.size)}
22
- color:${p => p.theme.optionActiveColor};
23
- &:hover{
24
- background-color: ${p => p.theme.optionHoverBackground};
22
+ color:${(p) => p.theme.optionActiveColor};
23
+ &:hover {
24
+ background-color: ${(p) => p.theme.optionHoverBackground};
25
25
  }
26
-
26
+ ${(p) => p.isDisabled &&
27
+ `
28
+ cursor:not-allowed;
29
+ background-color: ${p.theme.inputDisabledBackground};
30
+ color: ${p.theme.inputDisabledTextColor};
31
+ &:hover{
32
+ background-color: ${p.theme.inputDisabledBackground};
33
+ }
34
+ `}
27
35
  `;
package/dist/esm/components/Selector/Selector.js CHANGED
@@ -8,7 +8,7 @@ import { Modal } from '../Modal';
8
8
  import { PanelOption, setIconSize } from '../common';
9
9
  import { ThemeProvider } from 'styled-components';
10
10
  import { Text } from '../Typography';
11
- export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', }) => {
11
+ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
12
12
  const [open, toogleOpen] = useState(false);
13
13
  const selectOption = (selectedValue) => {
14
14
  handleSelect(name, selectedValue);
@@ -17,13 +17,18 @@ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size
17
17
  const getLabelForValue = (value) => {
18
18
  return options.find((option) => option.value === value).label;
19
19
  };
20
+ const handleOpen = () => {
21
+ if (!disabled) {
22
+ toogleOpen(true);
23
+ }
24
+ };
20
25
  return (React.createElement(ThemeProvider, { theme: theme },
21
- React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
26
+ React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width, gap: 4 },
22
27
  label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
23
28
  React.createElement(SelectorElement, null,
24
29
  value ? (React.createElement(React.Fragment, null,
25
- React.createElement(SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
26
- React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size) }))) : (React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(true), size: setIconSize(size) })),
30
+ React.createElement(SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
31
+ React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size), isDisabled: disabled }))) : (React.createElement(Icon, { name: iconName, onClick: handleOpen, size: setIconSize(size), isDisabled: disabled })),
27
32
  open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
28
33
  error && React.createElement(InputErrorMsg, null, error)))));
29
34
  };
package/dist/esm/components/Selector/Selector.styles.js CHANGED
@@ -1,21 +1,29 @@
1
- import styled from "styled-components";
2
- import { defaultStyles, setSize } from "../common";
1
+ import styled from 'styled-components';
2
+ import { defaultStyles, setSize } from '../common';
3
3
  export const SelectorElement = styled.div `
4
4
  position: relative;
5
5
  cursor: pointer;
6
- display:flex;
7
- box-sizing:border-box;
6
+ display: flex;
7
+ box-sizing: border-box;
8
8
  align-items: center;
9
9
  `;
10
10
  export const SelectorValue = styled.div `
11
11
  ${defaultStyles}
12
12
  cursor: pointer;
13
- display:flex;
13
+ display: flex;
14
14
  align-items: center;
15
15
  ${(p) => setSize(p.size)}
16
- color:${p => p.theme.optionActiveColor};
17
- &:hover{
18
- background-color: ${p => p.theme.optionHoverBackground};
16
+ color:${(p) => p.theme.optionActiveColor};
17
+ &:hover {
18
+ background-color: ${(p) => p.theme.optionHoverBackground};
19
19
  }
20
-
20
+ ${(p) => p.isDisabled &&
21
+ `
22
+ cursor:not-allowed;
23
+ background-color: ${p.theme.inputDisabledBackground};
24
+ color: ${p.theme.inputDisabledTextColor};
25
+ &:hover{
26
+ background-color: ${p.theme.inputDisabledBackground};
27
+ }
28
+ `}
21
29
  `;
package/dist/types/components/Selector/Selector.d.ts CHANGED
@@ -15,5 +15,6 @@ export interface ISelectorProps {
15
15
  iconName?: string;
16
16
  optionsPanelTitle?: string;
17
17
  optionsPanelEmptyMsg?: string;
18
+ disabled?: boolean;
18
19
  }
19
20
  export declare const Selector: FC<ISelectorProps>;
package/dist/types/components/Selector/Selector.styles.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import { InputSize } from "../../types";
1
+ import { InputSize } from '../../types';
2
2
  export declare const SelectorElement: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  interface ISelectorValueStyle {
4
4
  size: InputSize;
5
5
  theme: any;
6
+ isDisabled?: boolean;
6
7
  }
7
8
  export declare const SelectorValue: import("styled-components").StyledComponent<"div", any, ISelectorValueStyle, never>;
8
9
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.1.22",
3
+ "version": "2.1.23",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",