venice-ui 2.1.13 → 2.1.15

package/dist/cjs/components/FillSelect/FillSelect.js

@@ -34,16 +34,15 @@ const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
 const Dropdown_1 = require("../Dropdown");
 const Dropdown_styles_1 = require("../Dropdown/Dropdown.styles");
-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, }) => {
+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, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
-    const [optionScope, setOptionScope] = (0, react_1.useState)(options);
     const [inputValue, setInputValue] = (0, react_1.useState)('');
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
     const textRef = (0, react_1.useRef)(null);
     const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
     const getLabelForValue = (value) => {
-        return optionScope.find((option) => option.value === value).label;
+        return options.find((option) => option.value === value).label;
     };
     const handleOpen = () => {
         if (!disabled) {
@@ -73,15 +72,11 @@ const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled =
     };
     const addToScope = () => {
         if (inputValue !== '') {
-            const isExist = optionScope.find((_item) => _item.label === inputValue || _item.value === inputValue);
+            const isExist = options.find((_item) => _item.label === inputValue || _item.value === inputValue);
             if (!isExist) {
-                const newOptionsScope = [
-                    { value: inputValue, label: inputValue },
-                    ...optionScope,
-                ];
-                setOptionScope(newOptionsScope);
-                handleSelect(name, inputValue);
-                setInputValue("");
+                handleSelect(inputValue, inputValue);
+                handleAddToScope && handleAddToScope(inputValue);
+                setInputValue('');
                 toogleOpen(false);
             }
         }
@@ -111,7 +106,7 @@ const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled =
     }, [open]);
     return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
         label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
+        readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value ? getLabelForValue(value) : '')) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
             react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
                 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" })),
@@ -120,8 +115,8 @@ const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disabled =
                     react_1.default.createElement(FillSelect_styles_1.InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
                         react_1.default.createElement(Input_1.Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
                         react_1.default.createElement(Icons_1.Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
-                    optionScope &&
-                        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),
+                    options &&
+                        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),
             error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
 };
 exports.FillSelect = FillSelect;

package/dist/cjs/components/Form/Form.js

@@ -52,7 +52,7 @@ const Form = ({ formData, size = 'medium', read }) => {
             case 'select':
                 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 }));
             case 'fill':
-                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 }));
+                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 }));
             case 'file':
                 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 }));
             case 'date':

package/dist/esm/components/FillSelect/FillSelect.js

@@ -8,16 +8,15 @@ import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
 import { Field } from '../Dropdown';
 import { DropdownElement } from '../Dropdown/Dropdown.styles';
-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, }) => {
+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, }) => {
     const [open, toogleOpen] = useState(false);
-    const [optionScope, setOptionScope] = useState(options);
     const [inputValue, setInputValue] = useState('');
     const ref = useRef(null);
     const sourceRef = useRef(null);
     const textRef = useRef(null);
     const [dropdownStyles, setDropdownStyles] = useState({});
     const getLabelForValue = (value) => {
-        return optionScope.find((option) => option.value === value).label;
+        return options.find((option) => option.value === value).label;
     };
     const handleOpen = () => {
         if (!disabled) {
@@ -47,15 +46,11 @@ export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disa
     };
     const addToScope = () => {
         if (inputValue !== '') {
-            const isExist = optionScope.find((_item) => _item.label === inputValue || _item.value === inputValue);
+            const isExist = options.find((_item) => _item.label === inputValue || _item.value === inputValue);
             if (!isExist) {
-                const newOptionsScope = [
-                    { value: inputValue, label: inputValue },
-                    ...optionScope,
-                ];
-                setOptionScope(newOptionsScope);
-                handleSelect(name, inputValue);
-                setInputValue("");
+                handleSelect(inputValue, inputValue);
+                handleAddToScope && handleAddToScope(inputValue);
+                setInputValue('');
                 toogleOpen(false);
             }
         }
@@ -85,7 +80,7 @@ export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disa
     }, [open]);
     return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
+        readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value ? getLabelForValue(value) : '')) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, rightPadding: true }, value ? getLabelForValue(value) : placeholder),
             React.createElement(EyeIconWrapper, { size: size },
                 React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
@@ -94,7 +89,7 @@ export const FillSelect = ({ size = 'medium', label, labelPosition = 'top', disa
                     React.createElement(InputArea, { ref: textRef, onClick: (e) => e.stopPropagation() },
                         React.createElement(Input, { value: inputValue, handleChange: updateNewOption, name: 'newOption' }),
                         React.createElement(Icon, { name: 'add_circle', size: 24, onClick: addToScope })),
-                    optionScope &&
-                        optionScope.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
+                    options &&
+                        options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
             error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
 };

package/dist/esm/components/Form/Form.js

@@ -46,7 +46,7 @@ export const Form = ({ formData, size = 'medium', read }) => {
             case 'select':
                 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 }));
             case 'fill':
-                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 }));
+                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 }));
             case 'file':
                 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 }));
             case 'date':

package/dist/types/components/FillSelect/FillSelect.d.ts

@@ -3,6 +3,7 @@ import { IFormElement, IOption } from '../../types';
 export interface IFillSelectProps extends IFormElement {
     options: IOption[];
     handleSelect: (name: string, value: string | number) => void;
+    handleAddToScope?: (name: string | number) => void;
     position?: string;
     zIndex?: number;
     theme?: any;

package/dist/types/components/Form/formTypes.d.ts

@@ -16,6 +16,7 @@ export interface FormDataProps {
     error?: boolean;
     subLabel?: string;
     placeholder?: string;
+    handleAddToScope?: (name: string | number) => void;
 }
 interface FormDataParentProps {
     row: FormDataProps[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",