venice-ui 2.4.7 → 2.4.9

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 (20) hide show
  1. package/dist/cjs/Theme/Theme.js +3 -1
  2. package/dist/cjs/components/DatePicker/Calendar.js +21 -1
  3. package/dist/cjs/components/Dropdown/Dropdown.js +5 -1
  4. package/dist/cjs/components/Form/Form.js +5 -5
  5. package/dist/cjs/components/Input/Input.js +6 -2
  6. package/dist/cjs/components/List/List.js +6 -3
  7. package/dist/cjs/components/Table/Table.js +7 -1
  8. package/dist/esm/Theme/Theme.js +3 -1
  9. package/dist/esm/components/DatePicker/Calendar.js +22 -2
  10. package/dist/esm/components/Dropdown/Dropdown.js +5 -1
  11. package/dist/esm/components/Form/Form.js +5 -5
  12. package/dist/esm/components/Input/Input.js +6 -2
  13. package/dist/esm/components/List/List.js +7 -4
  14. package/dist/esm/components/Table/Table.js +8 -2
  15. package/dist/types/Theme/Theme.d.ts +2 -0
  16. package/dist/types/components/Dropdown/Dropdown.d.ts +2 -0
  17. package/dist/types/components/Form/Form.d.ts +2 -0
  18. package/dist/types/components/Input/Input.d.ts +2 -0
  19. package/dist/types/components/List/List.d.ts +4 -0
  20. package/package.json +1 -1
package/dist/cjs/Theme/Theme.js CHANGED
@@ -24,7 +24,9 @@ exports.Theme = {
24
24
  gray_4: '#f3f3f3',
25
25
  white: "#ffffff",
26
26
  overlayer: 'rgba(0,0,0,0.4)',
27
- red: '#ad1616'
27
+ red: '#ad1616',
28
+ orange: '#de890a',
29
+ green: '#179334'
28
30
  },
29
31
  fontSize: {
30
32
  xxs: '10px',
package/dist/cjs/components/DatePicker/Calendar.js CHANGED
@@ -65,6 +65,7 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
65
65
  };
66
66
  });
67
67
  const [selectedDate, setSellectedDate] = (0, react_1.useState)(() => (value !== undefined ? new Date(value) : new Date()));
68
+ const wrapperRef = (0, react_1.useRef)(null);
68
69
  (0, react_1.useEffect)(() => {
69
70
  updateCalendarSettings((prev) => ({
70
71
  ...prev,
@@ -103,8 +104,27 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
103
104
  const setToday = () => {
104
105
  setSellectedDate(new Date());
105
106
  };
107
+ (0, react_1.useEffect)(() => {
108
+ const handleOutside = (e) => {
109
+ const el = wrapperRef.current;
110
+ const target = e.target;
111
+ if (!el)
112
+ return;
113
+ const path = e.composedPath ? e.composedPath() : undefined;
114
+ const clickedOutside = path ? !path.includes(el) : !el.contains(target);
115
+ if (clickedOutside && !isAdvance) {
116
+ handleClose && handleClose();
117
+ }
118
+ };
119
+ document.addEventListener('mousedown', handleOutside);
120
+ document.addEventListener('touchstart', handleOutside);
121
+ return () => {
122
+ document.removeEventListener('mousedown', handleOutside);
123
+ document.removeEventListener('touchstart', handleOutside);
124
+ };
125
+ }, [isAdvance, handleClose]);
106
126
  return (react_1.default.createElement(react_1.default.Fragment, null,
107
- react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
127
+ react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { ref: wrapperRef, top: top, left: left, size: size, zIndex: zIndex },
108
128
  react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
109
129
  react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
110
130
  react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -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, errorMsg, 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, handleFieldFocus, handleFieldBlur, }) => {
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);
@@ -60,6 +60,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
60
60
  setDropdownStyles(positionStyle);
61
61
  }
62
62
  toogleOpen(!open);
63
+ handleFieldFocus && handleFieldFocus(name);
63
64
  }
64
65
  };
65
66
  const selectOption = (e, selectedValue, isDisabled) => {
@@ -67,17 +68,20 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
67
68
  if (!isDisabled) {
68
69
  handleSelect(name, selectedValue);
69
70
  toogleOpen(false);
71
+ handleFieldBlur && handleFieldBlur();
70
72
  }
71
73
  };
72
74
  (0, react_1.useEffect)(() => {
73
75
  const handleClickOutside = (event) => {
74
76
  if (ref.current && !ref.current.contains(event.target)) {
75
77
  toogleOpen(false);
78
+ handleFieldBlur && handleFieldBlur();
76
79
  }
77
80
  };
78
81
  const handleKeyDown = (e) => {
79
82
  if (e.key === 'Escape') {
80
83
  close();
84
+ handleFieldBlur && handleFieldBlur();
81
85
  }
82
86
  };
83
87
  if (open) {
package/dist/cjs/components/Form/Form.js CHANGED
@@ -11,7 +11,7 @@ const FormElements_1 = require("./FormElements");
11
11
  const Dropdown_1 = require("../Dropdown");
12
12
  const DatePicker_1 = require("../DatePicker");
13
13
  const FillSelect_1 = require("../FillSelect");
14
- const Form = ({ formData, size = 'medium', read }) => {
14
+ const Form = ({ formData, size = 'medium', read, handleFieldFocus, handleFieldBlur, }) => {
15
15
  const onChangeHandler = (name, value) => {
16
16
  formData.action(name, value);
17
17
  };
@@ -44,13 +44,13 @@ const Form = ({ formData, size = 'medium', read }) => {
44
44
  const selectType = (item) => {
45
45
  switch (item.type) {
46
46
  case 'text':
47
- return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
47
+ return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
48
48
  case 'number':
49
- return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder }));
49
+ return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
50
50
  case 'increase':
51
- return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder }));
51
+ return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
52
52
  case 'select':
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 }));
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, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
54
54
  case 'fill':
55
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':
package/dist/cjs/components/Input/Input.js CHANGED
@@ -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 = false, errorMsg, 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, handleFieldFocus, handleFieldBlur, }) => {
34
34
  const [inputValue, setInputValue] = (0, react_1.useState)(value);
35
35
  (0, react_1.useEffect)(() => {
36
36
  setInputValue(value);
@@ -61,9 +61,13 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
61
61
  validateValue = max;
62
62
  }
63
63
  }
64
+ handleFieldBlur && handleFieldBlur();
64
65
  handleChange(name, validateValue);
65
66
  }
66
67
  };
68
+ const onFocus = () => {
69
+ handleFieldFocus && handleFieldFocus(name);
70
+ };
67
71
  const onKeyDown = async (e) => {
68
72
  if (handleSubmit && e.key === 'Enter') {
69
73
  const currentValue = type === 'number' || type === 'increase'
@@ -100,7 +104,7 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
100
104
  label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
101
105
  react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
102
106
  react_1.default.createElement(react_1.default.Fragment, null, readOnly ? (react_1.default.createElement(Input_styles_1.InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
103
- react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
107
+ react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, onFocus: onFocus, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
104
108
  prefix && react_1.default.createElement(Input_styles_1.Prefix, { inputSize: size }, prefix),
105
109
  inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
106
110
  react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
package/dist/cjs/components/List/List.js CHANGED
@@ -13,7 +13,7 @@ const Icons_1 = require("../Icons");
13
13
  const Theme_1 = require("../../Theme");
14
14
  const Table_styles_1 = require("../Table/Table.styles");
15
15
  const DropdownMenu_1 = require("../DropdownMenu");
16
- const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, levelActions = [], }) => {
16
+ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, isStatus = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, levelActions = [], }) => {
17
17
  const updateItem = (items, rowID, updater) => {
18
18
  items.forEach((_item) => {
19
19
  if (_item.id === rowID) {
@@ -98,11 +98,14 @@ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false,
98
98
  }
99
99
  };
100
100
  const gerenrateRow = (row, level) => {
101
+ const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
101
102
  return (react_1.default.createElement(react_1.default.Fragment, null,
102
103
  react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
103
- isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
104
+ isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: (row.extend && row.children.length !== 0) || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
104
105
  e.stopPropagation();
105
- } }, row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
106
+ } },
107
+ row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),
108
+ row.children.length === 0 && isStatus && rowHaveStatus && (react_1.default.createElement(Icons_1.Icon, { name: row.statusError ? "error" : row.statusWarnning ? "warning" : "check_circle", size: 16, noPadding: true, iconColor: row.statusError ? Theme_1.Theme.colors.red : row.statusWarnning ? Theme_1.Theme.colors.orange : Theme_1.Theme.colors.green })))),
106
109
  isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
107
110
  react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
108
111
  react_1.default.createElement(list_styles_1.ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
package/dist/cjs/components/Table/Table.js CHANGED
@@ -123,6 +123,12 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
123
123
  setCurrentPage(1);
124
124
  setNoResultsMessage(null);
125
125
  }, [elements, setCurrentPage, setNoResultsMessage]);
126
+ const tableElements = (0, react_1.useMemo)(() => {
127
+ if (ifPagination) {
128
+ return paginatedElements;
129
+ }
130
+ return tableProps.elements;
131
+ }, [ifPagination, paginatedElements, tableProps.elements]);
126
132
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
127
133
  filtrable && (react_1.default.createElement("div", { style: {
128
134
  display: 'flex',
@@ -141,7 +147,7 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
141
147
  react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
142
148
  react_1.default.createElement(Table_styles_1.TableHead, null,
143
149
  react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
144
- react_1.default.createElement("tbody", null, paginatedElements.map((item) => {
150
+ react_1.default.createElement("tbody", null, tableElements.map((item) => {
145
151
  return (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
146
152
  return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
147
153
  })));
package/dist/esm/Theme/Theme.js CHANGED
@@ -21,7 +21,9 @@ export const Theme = {
21
21
  gray_4: '#f3f3f3',
22
22
  white: "#ffffff",
23
23
  overlayer: 'rgba(0,0,0,0.4)',
24
- red: '#ad1616'
24
+ red: '#ad1616',
25
+ orange: '#de890a',
26
+ green: '#179334'
25
27
  },
26
28
  fontSize: {
27
29
  xxs: '10px',
package/dist/esm/components/DatePicker/Calendar.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { useEffect, useState, useRef } from 'react';
2
2
  import { CalendarOverlay, CalendarWrapper } from './DatePiocker.styles';
3
3
  import { Aligment } from '../Aligment';
4
4
  import { CalendarHeader } from './CalendarHeader';
@@ -39,6 +39,7 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
39
39
  };
40
40
  });
41
41
  const [selectedDate, setSellectedDate] = useState(() => (value !== undefined ? new Date(value) : new Date()));
42
+ const wrapperRef = useRef(null);
42
43
  useEffect(() => {
43
44
  updateCalendarSettings((prev) => ({
44
45
  ...prev,
@@ -77,8 +78,27 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, is
77
78
  const setToday = () => {
78
79
  setSellectedDate(new Date());
79
80
  };
81
+ useEffect(() => {
82
+ const handleOutside = (e) => {
83
+ const el = wrapperRef.current;
84
+ const target = e.target;
85
+ if (!el)
86
+ return;
87
+ const path = e.composedPath ? e.composedPath() : undefined;
88
+ const clickedOutside = path ? !path.includes(el) : !el.contains(target);
89
+ if (clickedOutside && !isAdvance) {
90
+ handleClose && handleClose();
91
+ }
92
+ };
93
+ document.addEventListener('mousedown', handleOutside);
94
+ document.addEventListener('touchstart', handleOutside);
95
+ return () => {
96
+ document.removeEventListener('mousedown', handleOutside);
97
+ document.removeEventListener('touchstart', handleOutside);
98
+ };
99
+ }, [isAdvance, handleClose]);
80
100
  return (React.createElement(React.Fragment, null,
81
- React.createElement(CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
101
+ React.createElement(CalendarWrapper, { ref: wrapperRef, top: top, left: left, size: size, zIndex: zIndex },
82
102
  React.createElement(Aligment, { direction: "row" },
83
103
  React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
84
104
  React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),
package/dist/esm/components/Dropdown/Dropdown.js CHANGED
@@ -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, errorMsg, 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, handleFieldFocus, handleFieldBlur, }) => {
11
11
  const [open, toogleOpen] = useState(false);
12
12
  const ref = useRef(null);
13
13
  const sourceRef = useRef(null);
@@ -34,6 +34,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
34
34
  setDropdownStyles(positionStyle);
35
35
  }
36
36
  toogleOpen(!open);
37
+ handleFieldFocus && handleFieldFocus(name);
37
38
  }
38
39
  };
39
40
  const selectOption = (e, selectedValue, isDisabled) => {
@@ -41,17 +42,20 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
41
42
  if (!isDisabled) {
42
43
  handleSelect(name, selectedValue);
43
44
  toogleOpen(false);
45
+ handleFieldBlur && handleFieldBlur();
44
46
  }
45
47
  };
46
48
  useEffect(() => {
47
49
  const handleClickOutside = (event) => {
48
50
  if (ref.current && !ref.current.contains(event.target)) {
49
51
  toogleOpen(false);
52
+ handleFieldBlur && handleFieldBlur();
50
53
  }
51
54
  };
52
55
  const handleKeyDown = (e) => {
53
56
  if (e.key === 'Escape') {
54
57
  close();
58
+ handleFieldBlur && handleFieldBlur();
55
59
  }
56
60
  };
57
61
  if (open) {
package/dist/esm/components/Form/Form.js CHANGED
@@ -5,7 +5,7 @@ import { FormRow, FormSubRow, FormWrapper } from './FormElements';
5
5
  import { Dropdown } from '../Dropdown';
6
6
  import { DatePicker } from '../DatePicker';
7
7
  import { FillSelect } from '../FillSelect';
8
- export const Form = ({ formData, size = 'medium', read }) => {
8
+ export const Form = ({ formData, size = 'medium', read, handleFieldFocus, handleFieldBlur, }) => {
9
9
  const onChangeHandler = (name, value) => {
10
10
  formData.action(name, value);
11
11
  };
@@ -38,13 +38,13 @@ export const Form = ({ formData, size = 'medium', read }) => {
38
38
  const selectType = (item) => {
39
39
  switch (item.type) {
40
40
  case 'text':
41
- return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
41
+ return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
42
42
  case 'number':
43
- return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder }));
43
+ return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
44
44
  case 'increase':
45
- return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder }));
45
+ return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
46
46
  case 'select':
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 }));
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, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
48
48
  case 'fill':
49
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':
package/dist/esm/components/Input/Input.js CHANGED
@@ -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 = false, errorMsg, 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, handleFieldFocus, handleFieldBlur, }) => {
8
8
  const [inputValue, setInputValue] = useState(value);
9
9
  useEffect(() => {
10
10
  setInputValue(value);
@@ -35,9 +35,13 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
35
35
  validateValue = max;
36
36
  }
37
37
  }
38
+ handleFieldBlur && handleFieldBlur();
38
39
  handleChange(name, validateValue);
39
40
  }
40
41
  };
42
+ const onFocus = () => {
43
+ handleFieldFocus && handleFieldFocus(name);
44
+ };
41
45
  const onKeyDown = async (e) => {
42
46
  if (handleSubmit && e.key === 'Enter') {
43
47
  const currentValue = type === 'number' || type === 'increase'
@@ -74,7 +78,7 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
74
78
  label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
75
79
  React.createElement(InputWrapper, { width: width },
76
80
  React.createElement(React.Fragment, null, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (React.createElement(React.Fragment, null,
77
- React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
81
+ React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, onFocus: onFocus, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
78
82
  prefix && React.createElement(Prefix, { inputSize: size }, prefix),
79
83
  inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
80
84
  React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
package/dist/esm/components/List/List.js CHANGED
@@ -4,10 +4,10 @@ import { ListIconWrapper, ListRow, ListRowExtend, ListText, MoreWrapper, } from
4
4
  import { Checkbox } from '../Checkbox';
5
5
  import { ThemeProvider } from 'styled-components';
6
6
  import { Icon } from '../Icons';
7
- import { mainTheme } from '../../Theme';
7
+ import { mainTheme, Theme } from '../../Theme';
8
8
  import { OptionTableCellWrapper } from '../Table/Table.styles';
9
9
  import { DropdownMenu } from '../DropdownMenu';
10
- export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = mainTheme, levelActions = [], }) => {
10
+ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, isStatus = false, items, handleChange, handleSelect, selected, theme = mainTheme, levelActions = [], }) => {
11
11
  const updateItem = (items, rowID, updater) => {
12
12
  items.forEach((_item) => {
13
13
  if (_item.id === rowID) {
@@ -92,11 +92,14 @@ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable =
92
92
  }
93
93
  };
94
94
  const gerenrateRow = (row, level) => {
95
+ const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
95
96
  return (React.createElement(React.Fragment, null,
96
97
  React.createElement(ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
97
- isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
98
+ isCollapsable && (React.createElement(ListIconWrapper, { extend: (row.extend && row.children.length !== 0) || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
98
99
  e.stopPropagation();
99
- } }, row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
100
+ } },
101
+ row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),
102
+ row.children.length === 0 && isStatus && rowHaveStatus && (React.createElement(Icon, { name: row.statusError ? "error" : row.statusWarnning ? "warning" : "check_circle", size: 16, noPadding: true, iconColor: row.statusError ? Theme.colors.red : row.statusWarnning ? Theme.colors.orange : Theme.colors.green })))),
100
103
  isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
101
104
  React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
102
105
  React.createElement(ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
package/dist/esm/components/Table/Table.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState, useCallback, useRef } from 'react';
1
+ import React, { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
2
2
  import { ThemeProvider } from 'styled-components';
3
3
  import { TableHead, TableRow, TableWrapper } from './Table.styles';
4
4
  import { mainTheme } from '../../Theme';
@@ -97,6 +97,12 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
97
97
  setCurrentPage(1);
98
98
  setNoResultsMessage(null);
99
99
  }, [elements, setCurrentPage, setNoResultsMessage]);
100
+ const tableElements = useMemo(() => {
101
+ if (ifPagination) {
102
+ return paginatedElements;
103
+ }
104
+ return tableProps.elements;
105
+ }, [ifPagination, paginatedElements, tableProps.elements]);
100
106
  return (React.createElement(ThemeProvider, { theme: theme },
101
107
  filtrable && (React.createElement("div", { style: {
102
108
  display: 'flex',
@@ -115,7 +121,7 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
115
121
  React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
116
122
  React.createElement(TableHead, null,
117
123
  React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
118
- React.createElement("tbody", null, paginatedElements.map((item) => {
124
+ React.createElement("tbody", null, tableElements.map((item) => {
119
125
  return (React.createElement(TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
120
126
  return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
121
127
  })));
package/dist/types/Theme/Theme.d.ts CHANGED
@@ -21,6 +21,8 @@ export declare const Theme: {
21
21
  white: string;
22
22
  overlayer: string;
23
23
  red: string;
24
+ orange: string;
25
+ green: string;
24
26
  };
25
27
  fontSize: {
26
28
  xxs: string;
package/dist/types/components/Dropdown/Dropdown.d.ts CHANGED
@@ -6,6 +6,8 @@ export interface IDropdownProps extends IFormElement {
6
6
  position?: string;
7
7
  zIndex?: number;
8
8
  theme?: any;
9
+ handleFieldFocus?: (name: string) => void;
10
+ handleFieldBlur?: () => void;
9
11
  }
10
12
  export interface IPositionStyle {
11
13
  top: number;
package/dist/types/components/Form/Form.d.ts CHANGED
@@ -5,6 +5,8 @@ export interface FormProps {
5
5
  formData: FormSourceData;
6
6
  size?: InputSize;
7
7
  read?: boolean;
8
+ handleFieldFocus?: (name: string) => void;
9
+ handleFieldBlur?: () => void;
8
10
  }
9
11
  export declare const Form: FC<FormProps>;
10
12
  export default Form;
package/dist/types/components/Input/Input.d.ts CHANGED
@@ -11,5 +11,7 @@ export interface IInputProps extends IFormElement {
11
11
  theme?: any;
12
12
  handleSubmit?: () => void;
13
13
  prefix?: string;
14
+ handleFieldFocus?: (name: string) => void;
15
+ handleFieldBlur?: () => void;
14
16
  }
15
17
  export declare const Input: FC<IInputProps>;
package/dist/types/components/List/List.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface IListProps {
11
11
  selected?: string;
12
12
  isCheckbox?: boolean;
13
13
  isCollapsable?: boolean;
14
+ isStatus?: boolean;
14
15
  isSelectable?: boolean;
15
16
  haveMoreOptions?: boolean;
16
17
  theme?: any;
@@ -22,5 +23,8 @@ export interface IListItem {
22
23
  children: IListItem[];
23
24
  selected?: boolean;
24
25
  extend?: boolean;
26
+ statusDone?: boolean;
27
+ statusError?: boolean;
28
+ statusWarnning?: boolean;
25
29
  }
26
30
  export declare const List: FC<IListProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.4.7",
3
+ "version": "2.4.9",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",