venice-ui 2.0.21 → 2.0.22
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.
|
@@ -31,7 +31,7 @@ const DropdownElements_1 = require("./DropdownElements");
|
|
|
31
31
|
const Input_1 = require("../Input");
|
|
32
32
|
const common_1 = require("../common");
|
|
33
33
|
const react_dom_1 = require("react-dom");
|
|
34
|
-
const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, }) => {
|
|
34
|
+
const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, }) => {
|
|
35
35
|
const [open, toogleOpen] = (0, react_1.useState)(false);
|
|
36
36
|
const ref = (0, react_1.useRef)(null);
|
|
37
37
|
const sourceRef = (0, react_1.useRef)(null);
|
|
@@ -78,11 +78,11 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
|
|
|
78
78
|
}, [open]);
|
|
79
79
|
return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
|
|
80
80
|
label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
|
|
81
|
-
react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
|
|
81
|
+
readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
|
|
82
82
|
react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
|
|
83
83
|
open &&
|
|
84
84
|
(0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
|
|
85
85
|
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),
|
|
86
|
-
error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
|
|
86
|
+
error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
|
|
87
87
|
};
|
|
88
88
|
exports.Dropdown = Dropdown;
|
|
@@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
|
|
|
2
2
|
import { Aligment } from '../Aligment';
|
|
3
3
|
import { DropdownElement } from './Dropdown.styles';
|
|
4
4
|
import { Field } from './DropdownElements';
|
|
5
|
-
import { InputErrorMsg, InputLabelElement } from '../Input';
|
|
5
|
+
import { InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
|
|
6
6
|
import { Panel, PanelOption } from '../common';
|
|
7
7
|
import { createPortal } from 'react-dom';
|
|
8
|
-
export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, }) => {
|
|
8
|
+
export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, }) => {
|
|
9
9
|
const [open, toogleOpen] = useState(false);
|
|
10
10
|
const ref = useRef(null);
|
|
11
11
|
const sourceRef = useRef(null);
|
|
@@ -52,10 +52,10 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
|
|
|
52
52
|
}, [open]);
|
|
53
53
|
return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
|
|
54
54
|
label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
|
|
55
|
-
React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
|
|
55
|
+
readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
|
|
56
56
|
React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
|
|
57
57
|
open &&
|
|
58
58
|
createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
|
|
59
59
|
options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
|
|
60
|
-
error && React.createElement(InputErrorMsg, null, error))));
|
|
60
|
+
error && React.createElement(InputErrorMsg, null, error)))));
|
|
61
61
|
};
|