venice-ui 2.0.35 → 2.0.36
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.
- package/dist/cjs/Theme/Theme.js +2 -2
- package/dist/cjs/components/DatePicker/Calendar.js +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.js +1 -1
- package/dist/cjs/components/Dropdown/Dropdown.js +2 -2
- package/dist/cjs/components/File/File.js +2 -2
- package/dist/cjs/components/Input/Input.js +2 -2
- package/dist/esm/Theme/Theme.js +2 -2
- package/dist/esm/components/DatePicker/Calendar.js +1 -0
- package/dist/esm/components/DatePicker/DatePicker.js +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js +2 -2
- package/dist/esm/components/File/File.js +2 -2
- package/dist/esm/components/Input/Input.js +2 -2
- package/dist/types/components/Dropdown/DropdownElements.d.ts +1 -1
- package/dist/types/components/Form/formTypes.d.ts +1 -1
- package/dist/types/components/Input/Input.styles.d.ts +1 -1
- package/dist/types/types/types.d.ts +2 -1
- package/package.json +1 -1
package/dist/cjs/Theme/Theme.js
CHANGED
|
@@ -74,7 +74,7 @@ exports.mainTheme = {
|
|
|
74
74
|
disabledText: exports.Theme.colors.gray_1,
|
|
75
75
|
errorBackgroundColor: exports.Theme.colors.red,
|
|
76
76
|
errorBackgroundColorHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.red),
|
|
77
|
-
errorBackgroundColorHoverLight: (0, polished_1.lighten)(0.
|
|
77
|
+
errorBackgroundColorHoverLight: (0, polished_1.lighten)(0.6, exports.Theme.colors.red),
|
|
78
78
|
//icon
|
|
79
79
|
iconColor: exports.Theme.colors.text,
|
|
80
80
|
iconHoverColor: exports.Theme.colors.primary,
|
|
@@ -93,7 +93,7 @@ exports.mainTheme = {
|
|
|
93
93
|
inputDisabledBackground: exports.Theme.colors.gray_4,
|
|
94
94
|
inputDisabledBorder: exports.Theme.colors.gray_1,
|
|
95
95
|
inputDisabledTextColor: exports.Theme.colors.gray_1,
|
|
96
|
-
inputErrorBackground: (0, polished_1.lighten)(0.
|
|
96
|
+
inputErrorBackground: (0, polished_1.lighten)(0.6, exports.Theme.colors.red),
|
|
97
97
|
inputErrorBorder: exports.Theme.colors.red,
|
|
98
98
|
inputErrorTextColor: exports.Theme.colors.red,
|
|
99
99
|
// global
|
|
@@ -35,7 +35,7 @@ const react_dom_1 = require("react-dom");
|
|
|
35
35
|
const Calendar_1 = require("./Calendar");
|
|
36
36
|
const date_fns_1 = require("date-fns");
|
|
37
37
|
const Icons_1 = require("../Icons");
|
|
38
|
-
const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
|
|
38
|
+
const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
|
|
39
39
|
const [open, toogleOpen] = (0, react_1.useState)(false);
|
|
40
40
|
const sourceRef = (0, react_1.useRef)(null);
|
|
41
41
|
const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
|
|
@@ -33,7 +33,7 @@ const common_1 = require("../common");
|
|
|
33
33
|
const react_dom_1 = require("react-dom");
|
|
34
34
|
const Icons_1 = require("../Icons");
|
|
35
35
|
const Theme_1 = require("../../Theme");
|
|
36
|
-
const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
|
|
36
|
+
const Dropdown = ({ 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
37
|
const [open, toogleOpen] = (0, react_1.useState)(false);
|
|
38
38
|
const ref = (0, react_1.useRef)(null);
|
|
39
39
|
const sourceRef = (0, react_1.useRef)(null);
|
|
@@ -87,6 +87,6 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
|
|
|
87
87
|
open &&
|
|
88
88
|
(0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
|
|
89
89
|
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),
|
|
90
|
-
error && react_1.default.createElement(Input_1.InputErrorMsg, null,
|
|
90
|
+
(error && errorMsg) && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
|
|
91
91
|
};
|
|
92
92
|
exports.Dropdown = Dropdown;
|
|
@@ -31,7 +31,7 @@ const Button_1 = require("../Button");
|
|
|
31
31
|
const File_styles_1 = require("./File.styles");
|
|
32
32
|
const Dropdown_1 = require("../Dropdown");
|
|
33
33
|
const Typography_1 = require("../Typography");
|
|
34
|
-
const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, subLabel }) => {
|
|
34
|
+
const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, errorMsg, placeholder, fileValue, subLabel }) => {
|
|
35
35
|
const fileRef = (0, react_1.useRef)(null);
|
|
36
36
|
const handleSelect = (e) => {
|
|
37
37
|
handleChange(e);
|
|
@@ -48,6 +48,6 @@ const File = ({ label, labelPosition = 'top', name, disabled = false, multiple =
|
|
|
48
48
|
react_1.default.createElement(Button_1.Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
|
|
49
49
|
subLabel && react_1.default.createElement(Typography_1.TextMicro, null, subLabel)),
|
|
50
50
|
react_1.default.createElement(File_styles_1.HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
|
|
51
|
-
error && react_1.default.createElement(Input_1.InputErrorMsg, null,
|
|
51
|
+
(error && errorMsg) && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg))));
|
|
52
52
|
};
|
|
53
53
|
exports.File = File;
|
|
@@ -30,7 +30,7 @@ const Aligment_1 = require("../Aligment");
|
|
|
30
30
|
const Input_styles_1 = require("./Input.styles");
|
|
31
31
|
const Icons_1 = require("../Icons");
|
|
32
32
|
const Theme_1 = require("../../Theme");
|
|
33
|
-
const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
|
|
33
|
+
const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
|
|
34
34
|
const calculateNumberValue = (numberValue) => {
|
|
35
35
|
return isNaN(parseFloat(numberValue))
|
|
36
36
|
? numberValue
|
|
@@ -99,6 +99,6 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
|
|
|
99
99
|
type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,
|
|
100
100
|
react_1.default.createElement(Icons_1.Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
|
|
101
101
|
react_1.default.createElement(Icons_1.Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
|
|
102
|
-
error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null,
|
|
102
|
+
(error && errorMsg) && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, errorMsg))))))));
|
|
103
103
|
};
|
|
104
104
|
exports.Input = Input;
|
package/dist/esm/Theme/Theme.js
CHANGED
|
@@ -71,7 +71,7 @@ export const mainTheme = {
|
|
|
71
71
|
disabledText: Theme.colors.gray_1,
|
|
72
72
|
errorBackgroundColor: Theme.colors.red,
|
|
73
73
|
errorBackgroundColorHover: lighten(0.3, Theme.colors.red),
|
|
74
|
-
errorBackgroundColorHoverLight: lighten(0.
|
|
74
|
+
errorBackgroundColorHoverLight: lighten(0.6, Theme.colors.red),
|
|
75
75
|
//icon
|
|
76
76
|
iconColor: Theme.colors.text,
|
|
77
77
|
iconHoverColor: Theme.colors.primary,
|
|
@@ -90,7 +90,7 @@ export const mainTheme = {
|
|
|
90
90
|
inputDisabledBackground: Theme.colors.gray_4,
|
|
91
91
|
inputDisabledBorder: Theme.colors.gray_1,
|
|
92
92
|
inputDisabledTextColor: Theme.colors.gray_1,
|
|
93
|
-
inputErrorBackground: lighten(0.
|
|
93
|
+
inputErrorBackground: lighten(0.6, Theme.colors.red),
|
|
94
94
|
inputErrorBorder: Theme.colors.red,
|
|
95
95
|
inputErrorTextColor: Theme.colors.red,
|
|
96
96
|
// global
|
|
@@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
|
|
|
9
9
|
import { Calendar } from './Calendar';
|
|
10
10
|
import { format } from 'date-fns';
|
|
11
11
|
import { Icon } from '../Icons';
|
|
12
|
-
export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
|
|
12
|
+
export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
|
|
13
13
|
const [open, toogleOpen] = useState(false);
|
|
14
14
|
const sourceRef = useRef(null);
|
|
15
15
|
const [dropdownStyles, setDropdownStyles] = useState({
|
|
@@ -7,7 +7,7 @@ import { Panel, PanelOption } from '../common';
|
|
|
7
7
|
import { createPortal } from 'react-dom';
|
|
8
8
|
import { Icon } from '../Icons';
|
|
9
9
|
import { mainTheme } from '../../Theme';
|
|
10
|
-
export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
|
|
10
|
+
export const Dropdown = ({ 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
11
|
const [open, toogleOpen] = useState(false);
|
|
12
12
|
const ref = useRef(null);
|
|
13
13
|
const sourceRef = useRef(null);
|
|
@@ -61,5 +61,5 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
|
|
|
61
61
|
open &&
|
|
62
62
|
createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
|
|
63
63
|
options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
|
|
64
|
-
error && React.createElement(InputErrorMsg, null,
|
|
64
|
+
(error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg)))));
|
|
65
65
|
};
|
|
@@ -5,7 +5,7 @@ import { Button } from '../Button';
|
|
|
5
5
|
import { HiddenField } from './File.styles';
|
|
6
6
|
import { Field } from '../Dropdown';
|
|
7
7
|
import { TextMicro } from '../Typography';
|
|
8
|
-
export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, subLabel }) => {
|
|
8
|
+
export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, errorMsg, placeholder, fileValue, subLabel }) => {
|
|
9
9
|
const fileRef = useRef(null);
|
|
10
10
|
const handleSelect = (e) => {
|
|
11
11
|
handleChange(e);
|
|
@@ -22,5 +22,5 @@ export const File = ({ label, labelPosition = 'top', name, disabled = false, mul
|
|
|
22
22
|
React.createElement(Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
|
|
23
23
|
subLabel && React.createElement(TextMicro, null, subLabel)),
|
|
24
24
|
React.createElement(HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
|
|
25
|
-
error && React.createElement(InputErrorMsg, null,
|
|
25
|
+
(error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg))));
|
|
26
26
|
};
|
|
@@ -4,7 +4,7 @@ import { Aligment } from '../Aligment';
|
|
|
4
4
|
import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
|
|
5
5
|
import { Icon } from '../Icons';
|
|
6
6
|
import { mainTheme } from '../../Theme';
|
|
7
|
-
export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
|
|
7
|
+
export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
|
|
8
8
|
const calculateNumberValue = (numberValue) => {
|
|
9
9
|
return isNaN(parseFloat(numberValue))
|
|
10
10
|
? numberValue
|
|
@@ -73,5 +73,5 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
|
|
|
73
73
|
type === 'increase' && (React.createElement(IconsWrapper, null,
|
|
74
74
|
React.createElement(Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
|
|
75
75
|
React.createElement(Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
|
|
76
|
-
error && React.createElement(InputErrorMsg, null,
|
|
76
|
+
(error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg))))))));
|
|
77
77
|
};
|