venice-ui 2.1.13 → 2.1.14

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.
@@ -34,16 +34,15 @@ const Icons_1 = require("../Icons");
34
34
  const Theme_1 = require("../../Theme");
35
35
  const Dropdown_1 = require("../Dropdown");
36
36
  const Dropdown_styles_1 = require("../Dropdown/Dropdown.styles");
37
- const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
37
+ const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, handleAddToScope, theme = Theme_1.mainTheme, }) => {
38
38
  const [open, toogleOpen] = (0, react_1.useState)(false);
39
- const [optionScope, setOptionScope] = (0, react_1.useState)(options);
40
39
  const [inputValue, setInputValue] = (0, react_1.useState)('');
41
40
  const ref = (0, react_1.useRef)(null);
42
41
  const sourceRef = (0, react_1.useRef)(null);
43
42
  const textRef = (0, react_1.useRef)(null);
44
43
  const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
45
44
  const getLabelForValue = (value) => {
46
- return optionScope.find((option) => option.value === value).label;
45
+ return options.find((option) => option.value === value).label;
47
46
  };
48
47
  const handleOpen = () => {
49
48
  if (!disabled) {
@@ -73,15 +72,11 @@ const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled =
73
72
  };
74
73
  const addToScope = () => {
75
74
  if (inputValue !== '') {
76
- const isExist = optionScope.find((_item) => _item.label === inputValue || _item.value === inputValue);
75
+ const isExist = options.find((_item) => _item.label === inputValue || _item.value === inputValue);
77
76
  if (!isExist) {
78
- const newOptionsScope = [
79
- { value: inputValue, label: inputValue },
80
- ...optionScope,
81
- ];
82
- setOptionScope(newOptionsScope);
83
- handleSelect(name, inputValue);
84
- setInputValue("");
77
+ handleSelect(inputValue, inputValue);
78
+ handleAddToScope && handleAddToScope(inputValue);
79
+ setInputValue('');
85
80
  toogleOpen(false);
86
81
  }
87
82
  }
@@ -120,8 +115,8 @@ const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled =
120
115
  react_1.default.createElement(FillSelect_styles_1.InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
121
116
  react_1.default.createElement(Input_1.Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
122
117
  react_1.default.createElement(Icons_1.Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
123
- optionScope &&
124
- optionScope.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),
118
+ options &&
119
+ 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),
125
120
  error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
126
121
  };
127
122
  exports.FillSelect = FillSelect;
@@ -52,7 +52,7 @@ const Form = ({ formData, size = 'medium', read }) => {
52
52
  case 'select':
53
53
  return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
54
54
  case 'fill':
55
- return (react_1.default.createElement(FillSelect_1.FillSelect, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
55
+ return (react_1.default.createElement(FillSelect_1.FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
56
56
  case 'file':
57
57
  return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
58
58
  case 'date':
@@ -8,16 +8,15 @@ import { Icon } from '../Icons';
8
8
  import { mainTheme } from '../../Theme';
9
9
  import { Field } from '../Dropdown';
10
10
  import { DropdownElement } from '../Dropdown/Dropdown.styles';
11
- export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
11
+ export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, handleAddToScope, theme = mainTheme, }) => {
12
12
  const [open, toogleOpen] = useState(false);
13
- const [optionScope, setOptionScope] = useState(options);
14
13
  const [inputValue, setInputValue] = useState('');
15
14
  const ref = useRef(null);
16
15
  const sourceRef = useRef(null);
17
16
  const textRef = useRef(null);
18
17
  const [dropdownStyles, setDropdownStyles] = useState({});
19
18
  const getLabelForValue = (value) => {
20
- return optionScope.find((option) => option.value === value).label;
19
+ return options.find((option) => option.value === value).label;
21
20
  };
22
21
  const handleOpen = () => {
23
22
  if (!disabled) {
@@ -47,15 +46,11 @@ export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disa
47
46
  };
48
47
  const addToScope = () => {
49
48
  if (inputValue !== '') {
50
- const isExist = optionScope.find((_item) => _item.label === inputValue || _item.value === inputValue);
49
+ const isExist = options.find((_item) => _item.label === inputValue || _item.value === inputValue);
51
50
  if (!isExist) {
52
- const newOptionsScope = [
53
- { value: inputValue, label: inputValue },
54
- ...optionScope,
55
- ];
56
- setOptionScope(newOptionsScope);
57
- handleSelect(name, inputValue);
58
- setInputValue("");
51
+ handleSelect(inputValue, inputValue);
52
+ handleAddToScope && handleAddToScope(inputValue);
53
+ setInputValue('');
59
54
  toogleOpen(false);
60
55
  }
61
56
  }
@@ -94,7 +89,7 @@ export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disa
94
89
  React.createElement(InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
95
90
  React.createElement(Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
96
91
  React.createElement(Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
97
- optionScope &&
98
- optionScope.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
92
+ options &&
93
+ options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
99
94
  error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
100
95
  };
@@ -46,7 +46,7 @@ export const Form = ({ formData, size = 'medium', read }) => {
46
46
  case 'select':
47
47
  return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
48
48
  case 'fill':
49
- return (React.createElement(FillSelect, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
49
+ return (React.createElement(FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
50
50
  case 'file':
51
51
  return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
52
52
  case 'date':
@@ -3,6 +3,7 @@ import { IFormElement, IOption } from '../../types';
3
3
  export interface IFillSelectProps extends IFormElement {
4
4
  options: IOption[];
5
5
  handleSelect: (name: string, value: string | number) => void;
6
+ handleAddToScope?: (name: string | number) => void;
6
7
  position?: string;
7
8
  zIndex?: number;
8
9
  theme?: any;
@@ -16,6 +16,7 @@ export interface FormDataProps {
16
16
  error?: boolean;
17
17
  subLabel?: string;
18
18
  placeholder?: string;
19
+ handleAddToScope?: (name: string | number) => void;
19
20
  }
20
21
  interface FormDataParentProps {
21
22
  row: FormDataProps[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.1.13",
3
+ "version": "2.1.14",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",