linear-react-components-ui 1.1.24-beta.8 → 1.1.24-rc.1
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/lib/alerts/AlertProvider.js +1 -2
- package/lib/alerts/BaseAlert.js +1 -1
- package/lib/alerts/Message.js +2 -3
- package/lib/alerts/withAlert.js +1 -2
- package/lib/assets/styles/calendar.scss +137 -32
- package/lib/assets/styles/datepicker2.scss +4 -1
- package/lib/assets/styles/file.scss +8 -0
- package/lib/avatar/index.js +9 -11
- package/lib/badge/index.js +4 -4
- package/lib/buttons/Button.js +1 -2
- package/lib/buttons/DangerButton.js +1 -1
- package/lib/buttons/DefaultButton.js +5 -14
- package/lib/buttons/InfoButton.js +1 -1
- package/lib/buttons/PrimaryButton.js +1 -1
- package/lib/buttons/SuccessButton.js +1 -1
- package/lib/buttons/WarningButton.js +1 -1
- package/lib/buttons/button_container/index.js +1 -1
- package/lib/buttons/split_button/index.js +2 -2
- package/lib/calendar/base/helpers.js +2 -2
- package/lib/calendar/base/index.js +123 -44
- package/lib/checkbox/index.js +2 -3
- package/lib/dialog/Custom.js +2 -3
- package/lib/dialog/Question.js +5 -4
- package/lib/dialog/base/Content.js +2 -3
- package/lib/dialog/base/Header.js +3 -4
- package/lib/dialog/base/index.js +10 -9
- package/lib/dialog/form/index.js +6 -6
- package/lib/dialog/wizard/index.js +1 -2
- package/lib/dialog/wizard/progressbar.js +1 -1
- package/lib/dialog/wizard/step.js +1 -1
- package/lib/dialog/wizard/useWizard.js +1 -2
- package/lib/drawer/Content.js +1 -2
- package/lib/drawer/Drawer.js +5 -6
- package/lib/drawer/Header.js +2 -3
- package/lib/dropdown/Popup.js +7 -7
- package/lib/dropdown/helper.js +1 -1
- package/lib/dropdown/withDropdown.js +3 -4
- package/lib/fieldset/index.js +8 -9
- package/lib/form/Field.js +2 -3
- package/lib/form/FieldArray.js +2 -3
- package/lib/form/FieldNumber.js +4 -5
- package/lib/form/FieldPeriod.js +3 -4
- package/lib/form/index.js +3 -4
- package/lib/form/withFieldHOC.js +1 -2
- package/lib/form/withFormSecurity.js +1 -2
- package/lib/form2/helpers.js +1 -1
- package/lib/form2/index.d.ts +1 -1
- package/lib/form2/types.d.ts +0 -4
- package/lib/form2/useForm/index.js +17 -13
- package/lib/gridlayout/GridCol.js +5 -5
- package/lib/gridlayout/GridRow.js +1 -4
- package/lib/hint/index.js +1 -7
- package/lib/icons/index.js +9 -9
- package/lib/index-4b31b471.d.ts +15 -0
- package/lib/index-8a0c7463.d.ts +41 -0
- package/lib/index-9203efed.d.ts +26 -0
- package/lib/inputs/base/InputTextBase.js +9 -8
- package/lib/inputs/base/helpers.js +3 -7
- package/lib/inputs/base/types.d.ts +1 -1
- package/lib/inputs/color/index.js +2 -3
- package/lib/inputs/date/Dropdown.js +6 -4
- package/lib/inputs/date/index.js +31 -19
- package/lib/inputs/errorMessage/index.js +2 -3
- package/lib/inputs/file/DefaultFile.js +31 -31
- package/lib/inputs/file/DragDropFile.js +18 -17
- package/lib/inputs/file/File.js +6 -5
- package/lib/inputs/file/FileButtonSettings.js +0 -1
- package/lib/inputs/inputHOC.js +1 -2
- package/lib/inputs/mask/BaseMask.js +1 -2
- package/lib/inputs/mask/Cnpj.js +1 -2
- package/lib/inputs/mask/Cpf.js +1 -2
- package/lib/inputs/multiSelect/ActionButtons.js +1 -2
- package/lib/inputs/multiSelect/Dropdown.js +11 -11
- package/lib/inputs/multiSelect/helper.js +2 -1
- package/lib/inputs/multiSelect/index.js +10 -9
- package/lib/inputs/number/BaseNumber.js +1 -1
- package/lib/inputs/number/index.js +3 -3
- package/lib/inputs/period/Dropdown.js +7 -4
- package/lib/inputs/period/PeriodList.js +1 -1
- package/lib/inputs/period/helper.js +1 -3
- package/lib/inputs/period/index.js +66 -40
- package/lib/inputs/period/types.d.ts +4 -1
- package/lib/inputs/search/index.js +2 -3
- package/lib/inputs/select/ActionButtons.js +1 -1
- package/lib/inputs/select/Dropdown.js +3 -4
- package/lib/inputs/select/helper.js +13 -10
- package/lib/inputs/select/multiple/Selecteds.js +2 -2
- package/lib/inputs/select/multiple/index.js +14 -11
- package/lib/inputs/select/simple/index.js +19 -13
- package/lib/inputs/textarea/index.js +1 -1
- package/lib/inputs2/checkboxfield/index.d.ts +1 -1
- package/lib/inputs2/checkboxfield/index.js +15 -15
- package/lib/inputs2/colorfield/index.js +5 -5
- package/lib/inputs2/date/base/constants.js +2 -1
- package/lib/inputs2/date/base/index.js +7 -7
- package/lib/inputs2/date/datefield/calendarbox.d.ts +1 -1
- package/lib/inputs2/date/datefield/calendarbox.js +3 -2
- package/lib/inputs2/date/datefield/index.js +37 -28
- package/lib/inputs2/date/datefield/triggers.js +1 -2
- package/lib/inputs2/date/dateperiodfield/calendarbox.d.ts +1 -1
- package/lib/inputs2/date/dateperiodfield/calendarbox.js +8 -6
- package/lib/inputs2/date/dateperiodfield/index.js +61 -44
- package/lib/inputs2/date/dateperiodfield/triggers.js +19 -14
- package/lib/inputs2/filefield/index.js +33 -27
- package/lib/inputs2/index.d.ts +3 -3
- package/lib/inputs2/index.js +1 -2
- package/lib/inputs2/mask/BaseMask.js +7 -7
- package/lib/inputs2/mask/Cnpj.js +4 -5
- package/lib/inputs2/mask/Cpf.js +4 -5
- package/lib/inputs2/mask/Phone.js +1 -2
- package/lib/inputs2/mask/ZipCode.js +1 -2
- package/lib/inputs2/numberfield/currency.js +6 -6
- package/lib/inputs2/numberfield/decimal.js +6 -6
- package/lib/inputs2/numberfield/index.js +6 -6
- package/lib/inputs2/radiofield/index.d.ts +1 -1
- package/lib/inputs2/radiofield/index.js +14 -13
- package/lib/inputs2/selectfield/index.d.ts +1 -1
- package/lib/inputs2/selectfield/index.js +71 -54
- package/lib/inputs2/selectfield/item.d.ts +1 -1
- package/lib/inputs2/selectfield/item.js +4 -4
- package/lib/inputs2/selectfield/listbox.d.ts +1 -1
- package/lib/inputs2/selectfield/listbox.js +7 -4
- package/lib/inputs2/selectfield/options.d.ts +1 -1
- package/lib/inputs2/selectfield/search.d.ts +1 -1
- package/lib/inputs2/selectfield/search.js +3 -4
- package/lib/inputs2/selectfield/selections.d.ts +1 -1
- package/lib/inputs2/selectfield/selections.js +3 -2
- package/lib/inputs2/selectfield/triggers.js +6 -5
- package/lib/inputs2/slot/index.d.ts +2 -2
- package/lib/inputs2/textareafield/index.js +21 -18
- package/lib/inputs2/textfield/index.js +15 -14
- package/lib/labelMessages/index.js +4 -6
- package/lib/labels/DefaultLabel.js +2 -6
- package/lib/labels/label_container/index.js +1 -1
- package/lib/list/Header.js +1 -1
- package/lib/list/Item.js +10 -12
- package/lib/list/index.js +2 -4
- package/lib/menus/float/MenuItem.js +3 -4
- package/lib/menus/float/SubMenuContainer.js +2 -3
- package/lib/menus/float/index.js +1 -1
- package/lib/menus/sidenav/ExpandMenu.js +1 -1
- package/lib/menus/sidenav/MenuLink.js +1 -2
- package/lib/menus/sidenav/NavMenuGroup.js +2 -3
- package/lib/menus/sidenav/NavMenuItem.js +10 -9
- package/lib/menus/sidenav/NavSubMenuItem.js +2 -3
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +6 -7
- package/lib/menus/sidenav/popup_menu_search/index.js +1 -2
- package/lib/panel/Content.js +9 -8
- package/lib/panel/Default.js +3 -4
- package/lib/panel/Header.js +4 -5
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/PopoverText.js +1 -2
- package/lib/popover/index.js +1 -1
- package/lib/progress/Bar.js +6 -6
- package/lib/radio/index.js +3 -4
- package/lib/shortcuts/index.js +1 -1
- package/lib/skeleton/SkeletonContainer.js +1 -2
- package/lib/skeleton/index.js +1 -4
- package/lib/spinner/index.js +3 -4
- package/lib/split/Split.js +2 -3
- package/lib/split/SplitSide.js +4 -5
- package/lib/table/Body.js +4 -5
- package/lib/table/Header.js +9 -7
- package/lib/table/HeaderColumn.js +2 -3
- package/lib/table/Row.js +4 -5
- package/lib/table/RowColumn.js +2 -3
- package/lib/table/index.js +2 -8
- package/lib/tabs/DropdownTabs.js +2 -3
- package/lib/tabs/Menu.js +1 -1
- package/lib/tabs/MenuTabs.js +4 -9
- package/lib/tabs/Panel.js +8 -7
- package/lib/tabs/context.js +7 -5
- package/lib/tabs/index.js +1 -2
- package/lib/textContent/index.js +2 -3
- package/lib/toolbar/ButtonBar.js +2 -3
- package/lib/toolbar/LabelBar.js +1 -2
- package/lib/toolbar/index.js +1 -1
- package/lib/tooltip/TooltipContent.js +8 -9
- package/lib/tooltip/useTooltip.js +8 -8
- package/lib/treetable/Body.js +2 -3
- package/lib/treetable/Header.js +3 -4
- package/lib/treetable/Row.js +9 -10
- package/lib/treeview/Header.js +1 -1
- package/lib/treeview/Node.js +5 -6
- package/lib/treeview/index.js +5 -6
- package/lib/uitour/index.js +9 -8
- package/package.json +1 -1
- package/lib/calendar/base/Day.d.ts +0 -8
- package/lib/calendar/base/Day.js +0 -36
- package/lib/calendar/base/Month.d.ts +0 -8
- package/lib/calendar/base/Month.js +0 -39
- package/lib/calendar/base/Week.d.ts +0 -8
- package/lib/calendar/base/Week.js +0 -35
- package/lib/index-118afd58.d.ts +0 -26
- package/lib/index-8f540f57.d.ts +0 -41
- package/lib/index-b2ef36a6.d.ts +0 -15
|
@@ -21,8 +21,7 @@ var _errorMessage = require("../errorMessage");
|
|
|
21
21
|
var _textContent = _interopRequireDefault(require("../../textContent"));
|
|
22
22
|
var _popover = _interopRequireDefault(require("../../popover"));
|
|
23
23
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
|
-
function
|
|
25
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
24
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
26
25
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
26
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
27
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -43,7 +42,9 @@ const PeriodPicker = props => {
|
|
|
43
42
|
hintPosition = 'below',
|
|
44
43
|
themePopover = 'light',
|
|
45
44
|
popoverAlign = 'left',
|
|
46
|
-
gridLayout
|
|
45
|
+
gridLayout,
|
|
46
|
+
nameDateInitial = 'valueInitial',
|
|
47
|
+
nameDateFinal = 'valueFinal'
|
|
47
48
|
} = props;
|
|
48
49
|
const idValueInitial = (0, _react.useId)();
|
|
49
50
|
const idValueFinal = (0, _react.useId)();
|
|
@@ -66,10 +67,12 @@ const PeriodPicker = props => {
|
|
|
66
67
|
const inputFinalRef = (0, _react.useRef)(null);
|
|
67
68
|
const calendarContainerRef = (0, _react.useRef)(null);
|
|
68
69
|
const onScreenResize = () => {
|
|
69
|
-
|
|
70
|
+
var _inputContainerRef$cu;
|
|
71
|
+
setInputDimensions(inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect());
|
|
70
72
|
};
|
|
71
73
|
const onBlurWithoutWrapper = event => {
|
|
72
|
-
|
|
74
|
+
var _wrapperBaseInputPeri;
|
|
75
|
+
const focusOnAnotherField = !((_wrapperBaseInputPeri = wrapperBaseInputPeriodRef.current) !== null && _wrapperBaseInputPeri !== void 0 && _wrapperBaseInputPeri.contains(event.relatedTarget));
|
|
73
76
|
if (!showCalendarInDialog && showCalendarValueInitial && focusOnAnotherField) {
|
|
74
77
|
setShowCalendarValueInitial(false);
|
|
75
78
|
}
|
|
@@ -87,25 +90,29 @@ const PeriodPicker = props => {
|
|
|
87
90
|
targetElement.focus();
|
|
88
91
|
if (showCalendarValueInitial) {
|
|
89
92
|
if (targetElement.id !== 'valueInitial') {
|
|
90
|
-
|
|
93
|
+
var _inputInitialRef$curr;
|
|
94
|
+
(_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
|
|
91
95
|
}
|
|
92
96
|
setShowCalendarValueInitial(false);
|
|
93
97
|
}
|
|
94
98
|
if (showCalendarValueFinal) {
|
|
95
99
|
if (targetElement.id !== 'valueFinal') {
|
|
96
|
-
|
|
100
|
+
var _inputFinalRef$curren;
|
|
101
|
+
(_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
|
|
97
102
|
}
|
|
98
103
|
setShowCalendarValueFinal(false);
|
|
99
104
|
}
|
|
100
105
|
if (showPeriodSelection) {
|
|
106
|
+
var _inputFinalRef$curren2;
|
|
101
107
|
setShowPeriodSelection(false);
|
|
102
|
-
inputFinalRef.current
|
|
108
|
+
(_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
|
|
103
109
|
setShowCalendarValueFinal(false);
|
|
104
110
|
}
|
|
105
111
|
}
|
|
106
112
|
if (calendarContainerRef.current && event && event.key && event.key === 'Tab') {
|
|
107
|
-
|
|
108
|
-
const
|
|
113
|
+
var _calendarContainerRef, _calendarContainerRef2;
|
|
114
|
+
const buttonForNavigateCalendar = (_calendarContainerRef = calendarContainerRef.current) === null || _calendarContainerRef === void 0 ? void 0 : _calendarContainerRef.getElementsByClassName('navbutton');
|
|
115
|
+
const datePicked = (_calendarContainerRef2 = calendarContainerRef.current) === null || _calendarContainerRef2 === void 0 ? void 0 : _calendarContainerRef2.getElementsByClassName('-selectedday');
|
|
109
116
|
const buttonDatePicked = datePicked[0].firstChild;
|
|
110
117
|
const buttonsForFocus = Array.from([...buttonForNavigateCalendar, buttonDatePicked]);
|
|
111
118
|
const firstElement = buttonsForFocus[0];
|
|
@@ -116,34 +123,39 @@ const PeriodPicker = props => {
|
|
|
116
123
|
firstElement.focus();
|
|
117
124
|
}
|
|
118
125
|
if (event.shiftKey && calendarOpenedIsInitial && document.activeElement === firstElement) {
|
|
126
|
+
var _inputInitialRef$curr2;
|
|
119
127
|
event.preventDefault();
|
|
120
|
-
inputInitialRef.current
|
|
128
|
+
(_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
|
|
121
129
|
}
|
|
122
130
|
if (!event.shiftKey && calendarOpenedIsInitial && document.activeElement === lastElement) {
|
|
131
|
+
var _inputFinalRef$curren3;
|
|
123
132
|
event.preventDefault();
|
|
124
|
-
inputFinalRef.current
|
|
133
|
+
(_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
|
|
125
134
|
}
|
|
126
135
|
}
|
|
127
136
|
event.stopPropagation();
|
|
128
137
|
};
|
|
129
138
|
const keepPositionCalendarByScroll = () => {
|
|
130
|
-
|
|
139
|
+
var _inputContainerRef$cu2;
|
|
140
|
+
const inputDateDimensions = (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 ? void 0 : _inputContainerRef$cu2.getBoundingClientRect();
|
|
131
141
|
const positionTop = inputDateDimensions && inputDateDimensions.bottom;
|
|
132
142
|
if (dropdownCalendarContainer && dropdownCalendarContainer.current && inputDateDimensions) {
|
|
133
143
|
dropdownCalendarContainer.current.style.top = String(positionTop).concat('px');
|
|
134
144
|
}
|
|
135
145
|
};
|
|
136
146
|
(0, _react.useEffect)(() => {
|
|
147
|
+
var _document$getElementB;
|
|
137
148
|
window.addEventListener('resize', onScreenResize);
|
|
138
149
|
document.addEventListener('scroll', keepPositionCalendarByScroll);
|
|
139
|
-
document.getElementById('modal-dialog-content')
|
|
150
|
+
(_document$getElementB = document.getElementById('modal-dialog-content')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.addEventListener('scroll', keepPositionCalendarByScroll);
|
|
140
151
|
if (inputContainerRef.current) onScreenResize();
|
|
141
152
|
if (inputInitialRef && inputInitialRef.current) inputInitialRef.current.id = idValueInitial;
|
|
142
153
|
if (inputFinalRef && inputFinalRef.current) inputFinalRef.current.id = idValueFinal;
|
|
143
154
|
return () => {
|
|
155
|
+
var _document$getElementB2;
|
|
144
156
|
window.removeEventListener('resize', onScreenResize);
|
|
145
157
|
document.removeEventListener('scroll', keepPositionCalendarByScroll);
|
|
146
|
-
document.getElementById('modal-dialog-content')
|
|
158
|
+
(_document$getElementB2 = document.getElementById('modal-dialog-content')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeEventListener('scroll', keepPositionCalendarByScroll);
|
|
147
159
|
};
|
|
148
160
|
}, []);
|
|
149
161
|
(0, _react.useEffect)(() => {
|
|
@@ -175,10 +187,12 @@ const PeriodPicker = props => {
|
|
|
175
187
|
setCurrentTypeDate('valueInitial');
|
|
176
188
|
setShowCalendarValueFinal(false);
|
|
177
189
|
if (!showCalendarValueInitial) {
|
|
178
|
-
|
|
190
|
+
var _inputInitialRef$curr3;
|
|
191
|
+
(_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
|
|
179
192
|
if (showCalendarInDialog) {
|
|
180
193
|
setTimeout(() => {
|
|
181
|
-
|
|
194
|
+
var _currentDateButtonRef;
|
|
195
|
+
(_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.focus();
|
|
182
196
|
}, 100);
|
|
183
197
|
}
|
|
184
198
|
setShowCalendarValueInitial(true);
|
|
@@ -188,10 +202,12 @@ const PeriodPicker = props => {
|
|
|
188
202
|
setCurrentTypeDate('valueFinal');
|
|
189
203
|
setShowCalendarValueInitial(false);
|
|
190
204
|
if (!showCalendarValueFinal) {
|
|
191
|
-
|
|
205
|
+
var _inputFinalRef$curren4;
|
|
206
|
+
(_inputFinalRef$curren4 = inputFinalRef.current) === null || _inputFinalRef$curren4 === void 0 ? void 0 : _inputFinalRef$curren4.focus();
|
|
192
207
|
if (showCalendarInDialog) {
|
|
193
208
|
setTimeout(() => {
|
|
194
|
-
|
|
209
|
+
var _currentDateButtonRef2;
|
|
210
|
+
(_currentDateButtonRef2 = currentDateButtonRef.current) === null || _currentDateButtonRef2 === void 0 ? void 0 : _currentDateButtonRef2.focus();
|
|
195
211
|
}, 100);
|
|
196
212
|
}
|
|
197
213
|
setShowCalendarValueFinal(true);
|
|
@@ -203,10 +219,12 @@ const PeriodPicker = props => {
|
|
|
203
219
|
};
|
|
204
220
|
const closeCalendar = calendarName => {
|
|
205
221
|
if (calendarName === 'valueInitial') {
|
|
206
|
-
|
|
222
|
+
var _inputInitialRef$curr4;
|
|
223
|
+
(_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
|
|
207
224
|
}
|
|
208
225
|
if (calendarName === 'valueFinal') {
|
|
209
|
-
|
|
226
|
+
var _inputFinalRef$curren5;
|
|
227
|
+
(_inputFinalRef$curren5 = inputFinalRef.current) === null || _inputFinalRef$curren5 === void 0 ? void 0 : _inputFinalRef$curren5.focus();
|
|
210
228
|
}
|
|
211
229
|
setShowCalendarValueInitial(false);
|
|
212
230
|
setShowCalendarValueFinal(false);
|
|
@@ -214,16 +232,19 @@ const PeriodPicker = props => {
|
|
|
214
232
|
const onCloseDateDialog = calendarName => {
|
|
215
233
|
setTimeout(() => {
|
|
216
234
|
if (calendarName === 'valueInitial') {
|
|
217
|
-
|
|
235
|
+
var _inputInitialRef$curr5;
|
|
236
|
+
(_inputInitialRef$curr5 = inputInitialRef.current) === null || _inputInitialRef$curr5 === void 0 ? void 0 : _inputInitialRef$curr5.focus();
|
|
218
237
|
setShowCalendarValueInitial(false);
|
|
219
238
|
}
|
|
220
239
|
if (calendarName === 'valueFinal') {
|
|
221
|
-
|
|
240
|
+
var _inputFinalRef$curren6;
|
|
241
|
+
(_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.focus();
|
|
222
242
|
setShowCalendarValueFinal(false);
|
|
223
243
|
}
|
|
224
244
|
if (calendarName === 'periodSelection') {
|
|
245
|
+
var _inputFinalRef$curren7;
|
|
225
246
|
setShowPeriodSelection(false);
|
|
226
|
-
inputFinalRef.current
|
|
247
|
+
(_inputFinalRef$curren7 = inputFinalRef.current) === null || _inputFinalRef$curren7 === void 0 ? void 0 : _inputFinalRef$curren7.focus();
|
|
227
248
|
setShowCalendarValueFinal(false);
|
|
228
249
|
}
|
|
229
250
|
}, 100);
|
|
@@ -244,7 +265,7 @@ const PeriodPicker = props => {
|
|
|
244
265
|
name: changingAux
|
|
245
266
|
} = event.target;
|
|
246
267
|
if (value && value.replace(/\D/g, '').trim().length !== 0) {
|
|
247
|
-
if (changingAux ===
|
|
268
|
+
if (changingAux === nameDateInitial) {
|
|
248
269
|
setValueInitial(undefined);
|
|
249
270
|
} else {
|
|
250
271
|
setValueFinal(undefined);
|
|
@@ -263,26 +284,27 @@ const PeriodPicker = props => {
|
|
|
263
284
|
}
|
|
264
285
|
};
|
|
265
286
|
const setValue = function (event, value) {
|
|
287
|
+
var _inputInitialRef$curr6, _inputFinalRef$curren8;
|
|
266
288
|
let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
267
289
|
const valueDateName = event ? event.target.name : '';
|
|
268
290
|
const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
|
|
269
|
-
if (showCalendarValueInitial) inputInitialRef.current
|
|
270
|
-
if (showCalendarValueFinal) inputFinalRef.current
|
|
271
|
-
if (valueDateName ===
|
|
291
|
+
if (showCalendarValueInitial) (_inputInitialRef$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
|
|
292
|
+
if (showCalendarValueFinal) (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
|
|
293
|
+
if (valueDateName === nameDateFinal && valueInitial && dateObj.isBefore(valueInitial)) {
|
|
272
294
|
setValueInitial(dateObj);
|
|
273
295
|
setValueFinal(valueInitial);
|
|
274
296
|
onDateChange({
|
|
275
297
|
initial: dateObj,
|
|
276
298
|
final: valueInitial
|
|
277
299
|
});
|
|
278
|
-
} else if (valueDateName ===
|
|
300
|
+
} else if (valueDateName === nameDateInitial && valueFinal && dateObj.isAfter(valueFinal)) {
|
|
279
301
|
setValueInitial(valueFinal);
|
|
280
302
|
setValueFinal(dateObj);
|
|
281
303
|
onDateChange({
|
|
282
304
|
initial: valueFinal,
|
|
283
305
|
final: dateObj
|
|
284
306
|
});
|
|
285
|
-
} else if (valueDateName ===
|
|
307
|
+
} else if (valueDateName === nameDateInitial) {
|
|
286
308
|
setValueInitial(dateObj);
|
|
287
309
|
onDateChange({
|
|
288
310
|
initial: dateObj,
|
|
@@ -295,8 +317,9 @@ const PeriodPicker = props => {
|
|
|
295
317
|
final: dateObj
|
|
296
318
|
});
|
|
297
319
|
}
|
|
298
|
-
if (valueDateName ===
|
|
299
|
-
|
|
320
|
+
if (valueDateName === nameDateInitial && !valueFinal && shouldOpenDropdown) {
|
|
321
|
+
var _inputFinalRef$curren9;
|
|
322
|
+
(_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
|
|
300
323
|
setTimeout(() => setShowCalendarValueFinal(true), 100);
|
|
301
324
|
}
|
|
302
325
|
if (shouldCloseOnSelect) {
|
|
@@ -346,8 +369,9 @@ const PeriodPicker = props => {
|
|
|
346
369
|
}
|
|
347
370
|
};
|
|
348
371
|
const closePeriodSelection = () => {
|
|
372
|
+
var _inputFinalRef$curren0;
|
|
349
373
|
setShowPeriodSelection(false);
|
|
350
|
-
inputFinalRef.current
|
|
374
|
+
(_inputFinalRef$curren0 = inputFinalRef.current) === null || _inputFinalRef$curren0 === void 0 ? void 0 : _inputFinalRef$curren0.focus();
|
|
351
375
|
setShowCalendarValueFinal(false);
|
|
352
376
|
};
|
|
353
377
|
const getButtonSelectPeriod = (0, _react.useCallback)(() => {
|
|
@@ -380,8 +404,10 @@ const PeriodPicker = props => {
|
|
|
380
404
|
currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement
|
|
381
405
|
});
|
|
382
406
|
const setPeriodDates = (selected, dates) => {
|
|
407
|
+
var _inputFinalRef$curren1;
|
|
383
408
|
if (selected === 'custom') {
|
|
384
|
-
|
|
409
|
+
var _inputInitialRef$curr7;
|
|
410
|
+
(_inputInitialRef$curr7 = inputInitialRef.current) === null || _inputInitialRef$curr7 === void 0 ? void 0 : _inputInitialRef$curr7.focus();
|
|
385
411
|
setValuePeriodSelection(selected);
|
|
386
412
|
setShowPeriodSelection(false);
|
|
387
413
|
return;
|
|
@@ -394,7 +420,7 @@ const PeriodPicker = props => {
|
|
|
394
420
|
if (shouldCloseOnSelect) {
|
|
395
421
|
setShowPeriodSelection(false);
|
|
396
422
|
}
|
|
397
|
-
inputFinalRef.current
|
|
423
|
+
(_inputFinalRef$curren1 = inputFinalRef.current) === null || _inputFinalRef$curren1 === void 0 ? void 0 : _inputFinalRef$curren1.focus();
|
|
398
424
|
setShowCalendarValueFinal(false);
|
|
399
425
|
};
|
|
400
426
|
const getCalendarInitial = () => {
|
|
@@ -405,7 +431,7 @@ const PeriodPicker = props => {
|
|
|
405
431
|
handlerClose: () => onCloseDateDialog('valueInitial'),
|
|
406
432
|
dialogSize: dialogSize,
|
|
407
433
|
onOpenChange: setShowCalendarValueInitial
|
|
408
|
-
}, getCalendar(valueInitial, calendarColorStyle,
|
|
434
|
+
}, getCalendar(valueInitial, calendarColorStyle, nameDateInitial));
|
|
409
435
|
}
|
|
410
436
|
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
411
437
|
containerRef: wrapperBaseInputPeriodRef,
|
|
@@ -424,7 +450,7 @@ const PeriodPicker = props => {
|
|
|
424
450
|
handlerClose: () => onCloseDateDialog('valueFinal'),
|
|
425
451
|
dialogSize: dialogSize,
|
|
426
452
|
onOpenChange: setShowCalendarValueFinal
|
|
427
|
-
}, getCalendar(valueFinal, calendarColorStyle,
|
|
453
|
+
}, getCalendar(valueFinal, calendarColorStyle, nameDateFinal));
|
|
428
454
|
}
|
|
429
455
|
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
430
456
|
containerRef: wrapperBaseInputPeriodRef,
|
|
@@ -469,7 +495,7 @@ const PeriodPicker = props => {
|
|
|
469
495
|
display: 'flex'
|
|
470
496
|
}
|
|
471
497
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
472
|
-
className:
|
|
498
|
+
className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase'),
|
|
473
499
|
style: {
|
|
474
500
|
alignSelf: 'center'
|
|
475
501
|
}
|
|
@@ -486,10 +512,10 @@ const PeriodPicker = props => {
|
|
|
486
512
|
width: 20
|
|
487
513
|
}
|
|
488
514
|
}, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
|
|
489
|
-
className:
|
|
515
|
+
className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
|
|
490
516
|
value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
|
|
491
517
|
disabled: shouldDisable()
|
|
492
|
-
}))
|
|
518
|
+
}))),
|
|
493
519
|
ref: inputContainerRef
|
|
494
520
|
}, /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
|
|
495
521
|
gridLayout: undefined,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Moment } from 'moment';
|
|
2
|
-
import { ReactNode, RefObject } from 'react';
|
|
2
|
+
import { ReactNode, RefObject, MouseEvent } from 'react';
|
|
3
3
|
import { ColorStyles } from '../../@types/ColorStyles.js';
|
|
4
4
|
import { Period } from '../../@types/Period.js';
|
|
5
5
|
import { PermissionAttr } from '../../@types/PermissionAttr.js';
|
|
@@ -55,11 +55,14 @@ interface IPeriodPickerProps {
|
|
|
55
55
|
calendarColorStyle?: ColorStyles;
|
|
56
56
|
required?: boolean;
|
|
57
57
|
onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
|
|
58
|
+
onClick?: (event?: MouseEvent) => void;
|
|
58
59
|
disabled?: boolean;
|
|
59
60
|
permissionAttr?: PermissionAttr;
|
|
60
61
|
errorMessages?: string[];
|
|
61
62
|
name?: string;
|
|
62
63
|
hint?: string;
|
|
64
|
+
nameDateInitial?: string;
|
|
65
|
+
nameDateFinal?: string;
|
|
63
66
|
hintPosition?: 'below' | 'onLabelRight';
|
|
64
67
|
onBlur?: (e: CustomInputEvent) => void;
|
|
65
68
|
onFocus?: (e: CustomInputEvent) => void;
|
|
@@ -12,8 +12,7 @@ require("../../assets/styles/search.scss");
|
|
|
12
12
|
var _drawer = _interopRequireWildcard(require("../../drawer"));
|
|
13
13
|
const _excluded = ["headerTitle", "content", "onStateChange"];
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
function
|
|
16
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
16
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
18
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -49,7 +48,7 @@ const SearchField = props => {
|
|
|
49
48
|
};
|
|
50
49
|
const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
|
|
51
50
|
const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
|
|
52
|
-
const hideContent = onDenied
|
|
51
|
+
const hideContent = onDenied === null || onDenied === void 0 ? void 0 : onDenied.hideContent;
|
|
53
52
|
const buttonProps = () => {
|
|
54
53
|
const disableCallbacks = shouldBeReadOnly() || shouldDisable() || hideContent;
|
|
55
54
|
let propsButton = {
|
|
@@ -17,7 +17,7 @@ const ActionButtons = props => {
|
|
|
17
17
|
customClassForSideButtons
|
|
18
18
|
} = props;
|
|
19
19
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
20
|
-
className:
|
|
20
|
+
className: "actionbuttonsselect ".concat(customClassForSideButtons)
|
|
21
21
|
}, showClearButton && /*#__PURE__*/_react.default.createElement("button", {
|
|
22
22
|
disabled: disabled,
|
|
23
23
|
tabIndex: -1,
|
|
@@ -10,8 +10,7 @@ var _avatar = _interopRequireDefault(require("../../avatar"));
|
|
|
10
10
|
var helper = _interopRequireWildcard(require("./helper"));
|
|
11
11
|
var _Popup = _interopRequireDefault(require("../../dropdown/Popup"));
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
-
function
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
14
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
15
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
16
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -50,7 +49,7 @@ const Dropdown = props => {
|
|
|
50
49
|
align: "left",
|
|
51
50
|
leftPosition: dropdownDynamicStyles.left,
|
|
52
51
|
topPosition: dropdownDynamicStyles.top,
|
|
53
|
-
targetRef: selectFieldRef
|
|
52
|
+
targetRef: selectFieldRef === null || selectFieldRef === void 0 ? void 0 : selectFieldRef.current
|
|
54
53
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
55
54
|
className: "select-dropdown",
|
|
56
55
|
ref: dropdownRef,
|
|
@@ -82,7 +81,7 @@ const Dropdown = props => {
|
|
|
82
81
|
const disabled = currents && currents.length > 0 ? currents.some(s => s[idKey] === item[idKey]) : false;
|
|
83
82
|
const itemSelected = Boolean(selected && selected[idKey] === item[idKey]);
|
|
84
83
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
-
key:
|
|
84
|
+
key: "dropdowmIten ".concat(item[idKey], "}"),
|
|
86
85
|
className: helper.getDropdownItemCssClass(itemSelected, disabled, striped)
|
|
87
86
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
88
87
|
className: "menubutton",
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.returnDropdownDynamicStyles = exports.getFilteredSimpleDataCombo = exports.getFilteredMultipleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
|
|
7
|
-
const contentClass = props =>
|
|
7
|
+
const contentClass = props => "content ".concat(props.showClearButton ? '' : 'noclear');
|
|
8
8
|
exports.contentClass = contentClass;
|
|
9
9
|
const getDropdownItemCssClass = (selected, disabled, striped) => {
|
|
10
10
|
let className = 'item';
|
|
@@ -21,10 +21,12 @@ const getFilteredSimpleDataCombo = _ref => {
|
|
|
21
21
|
inputText
|
|
22
22
|
} = _ref;
|
|
23
23
|
return dataSource && dataSource.filter(item => {
|
|
24
|
+
var _descriptionKey;
|
|
24
25
|
if (typeof descriptionKey === 'string') {
|
|
25
|
-
|
|
26
|
+
var _item$descriptionKey;
|
|
27
|
+
return ((_item$descriptionKey = item[descriptionKey]) === null || _item$descriptionKey === void 0 ? void 0 : _item$descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
|
|
26
28
|
}
|
|
27
|
-
return descriptionKey(item)
|
|
29
|
+
return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
|
|
28
30
|
});
|
|
29
31
|
};
|
|
30
32
|
exports.getFilteredSimpleDataCombo = getFilteredSimpleDataCombo;
|
|
@@ -36,10 +38,11 @@ const getFilteredMultipleDataCombo = _ref2 => {
|
|
|
36
38
|
currents
|
|
37
39
|
} = _ref2;
|
|
38
40
|
return dataSource.filter(item => {
|
|
41
|
+
var _descriptionKey2;
|
|
39
42
|
if (typeof descriptionKey === 'string') {
|
|
40
|
-
return item[descriptionKey].toLowerCase().indexOf(inputText
|
|
43
|
+
return item[descriptionKey].toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase()) > -1 && !currents.includes(item);
|
|
41
44
|
}
|
|
42
|
-
return descriptionKey(item)
|
|
45
|
+
return ((_descriptionKey2 = descriptionKey(item)) === null || _descriptionKey2 === void 0 ? void 0 : _descriptionKey2.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1 && !currents.includes(item);
|
|
43
46
|
});
|
|
44
47
|
};
|
|
45
48
|
exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
|
|
@@ -51,7 +54,7 @@ const returnDropdownPosition = function (_ref3) {
|
|
|
51
54
|
} = _ref3;
|
|
52
55
|
let aboveDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
53
56
|
const DEFAULT_MARGIN_BOTTOM = 10;
|
|
54
|
-
if (aboveDropdown && dropdownRef
|
|
57
|
+
if (aboveDropdown && dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current && dropdownRects !== null && dropdownRects !== void 0 && dropdownRects.height) {
|
|
55
58
|
return selectFieldRects.top + window.scrollY - (dropdownRef.current && dropdownRects.height) - DEFAULT_MARGIN_BOTTOM;
|
|
56
59
|
}
|
|
57
60
|
return selectFieldRects.top + window.scrollY + selectFieldRects.height;
|
|
@@ -62,10 +65,10 @@ const returnDropdownDynamicStyles = _ref4 => {
|
|
|
62
65
|
dropdownMaxHeight,
|
|
63
66
|
dropdownRef
|
|
64
67
|
} = _ref4;
|
|
65
|
-
const selectFieldRects = selectFieldRef
|
|
66
|
-
const dropdownRects = dropdownRef
|
|
67
|
-
const selectFieldRectsBottom = selectFieldRects ? selectFieldRects
|
|
68
|
-
const selectFieldRectsTop = selectFieldRects ? selectFieldRects
|
|
68
|
+
const selectFieldRects = selectFieldRef !== null && selectFieldRef !== void 0 && selectFieldRef.current ? selectFieldRef.current.getBoundingClientRect() : undefined;
|
|
69
|
+
const dropdownRects = dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current ? dropdownRef.current.getBoundingClientRect() : undefined;
|
|
70
|
+
const selectFieldRectsBottom = selectFieldRects ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.bottom : 0;
|
|
71
|
+
const selectFieldRectsTop = selectFieldRects ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.top : 0;
|
|
69
72
|
const dropdownBottomDistance = window.innerHeight - selectFieldRectsBottom;
|
|
70
73
|
const bottomOffset = 30;
|
|
71
74
|
let maxDropdownBottomDistance = 200;
|
|
@@ -15,8 +15,8 @@ const Selecteds = _ref => {
|
|
|
15
15
|
handlerOnUnselect
|
|
16
16
|
} = _ref;
|
|
17
17
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
|
|
18
|
-
className:
|
|
19
|
-
key:
|
|
18
|
+
className: "selecteditem ".concat(disabled ? '-disabled' : ''),
|
|
19
|
+
key: "selected-".concat(selected[idKey])
|
|
20
20
|
}, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("button", {
|
|
21
21
|
disabled: disabled,
|
|
22
22
|
className: "close",
|
|
@@ -15,8 +15,7 @@ var _InputTextBase = _interopRequireDefault(require("../../base/InputTextBase"))
|
|
|
15
15
|
var _helper = require("../helper");
|
|
16
16
|
var _hint = _interopRequireDefault(require("../../../hint"));
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
|
-
function
|
|
19
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
20
19
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
21
20
|
const MultipleSelect = props => {
|
|
22
21
|
const {
|
|
@@ -45,7 +44,7 @@ const MultipleSelect = props => {
|
|
|
45
44
|
const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
|
|
46
45
|
const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
|
|
47
46
|
const [valueFromProps, setValueFromProps] = (0, _react.useState)([]);
|
|
48
|
-
const componentId =
|
|
47
|
+
const componentId = "select-component".concat(uuid.v1());
|
|
49
48
|
const componentRef = (0, _react.useRef)(null);
|
|
50
49
|
const dropdownRef = (0, _react.useRef)(null);
|
|
51
50
|
const selectWrapper = (0, _react.useRef)();
|
|
@@ -65,10 +64,11 @@ const MultipleSelect = props => {
|
|
|
65
64
|
}
|
|
66
65
|
};
|
|
67
66
|
const onMouseMove = event => {
|
|
67
|
+
var _dropdownRef$current, _dropdownRef$current$;
|
|
68
68
|
const target = event.target;
|
|
69
|
-
const idDropdown = dropdownRef.current
|
|
69
|
+
const idDropdown = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : (_dropdownRef$current$ = _dropdownRef$current.parentElement) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.id) || '';
|
|
70
70
|
const dropdownElement = document.getElementById(idDropdown);
|
|
71
|
-
const keepDropdownOpen = Boolean(dropdownElement
|
|
71
|
+
const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
|
|
72
72
|
setInsideComponent(keepDropdownOpen);
|
|
73
73
|
};
|
|
74
74
|
const onClearClick = () => {
|
|
@@ -105,6 +105,7 @@ const MultipleSelect = props => {
|
|
|
105
105
|
setDropdownWidth(dropdownWidthFocus);
|
|
106
106
|
};
|
|
107
107
|
const onSelect = select => {
|
|
108
|
+
var _dropdownRef$current2;
|
|
108
109
|
if (select === null) return;
|
|
109
110
|
const currentsSelect = [...currents, select];
|
|
110
111
|
setCurrents(currentsSelect);
|
|
@@ -112,16 +113,17 @@ const MultipleSelect = props => {
|
|
|
112
113
|
setInputValue([]);
|
|
113
114
|
if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
|
|
114
115
|
if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
|
|
115
|
-
dropdownRef.current
|
|
116
|
+
(_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
|
|
116
117
|
};
|
|
117
118
|
const onUnselect = id => {
|
|
118
119
|
if (currents) {
|
|
120
|
+
var _dropdownRef$current3;
|
|
119
121
|
const result = currents.filter(item => item[idKey] !== id);
|
|
120
122
|
setCurrents(result);
|
|
121
123
|
if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
|
|
122
124
|
setOpened(false);
|
|
123
125
|
if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
|
|
124
|
-
dropdownRef.current
|
|
126
|
+
(_dropdownRef$current3 = dropdownRef.current) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.focus();
|
|
125
127
|
}
|
|
126
128
|
};
|
|
127
129
|
const onOpenClose = () => {
|
|
@@ -141,7 +143,8 @@ const MultipleSelect = props => {
|
|
|
141
143
|
const onInputKeyDown = e => {
|
|
142
144
|
if (e.keyCode) {
|
|
143
145
|
if ((e.keyCode === constants.keyCodes.ENTER || e.key === constants.keys.TAB) && selected && opened) {
|
|
144
|
-
|
|
146
|
+
var _e$preventDefault;
|
|
147
|
+
if (e.keyCode === constants.keyCodes.ENTER) (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
|
|
145
148
|
if (!currents.some(current => current[idKey] === selected[idKey])) {
|
|
146
149
|
onSelect(selected);
|
|
147
150
|
}
|
|
@@ -188,7 +191,7 @@ const MultipleSelect = props => {
|
|
|
188
191
|
}, []);
|
|
189
192
|
(0, _react.useEffect)(() => {
|
|
190
193
|
if (props.gridLayout) {
|
|
191
|
-
const gridEl = document.querySelector(
|
|
194
|
+
const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
|
|
192
195
|
if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;
|
|
193
196
|
}
|
|
194
197
|
}, []);
|
|
@@ -241,8 +244,8 @@ const MultipleSelect = props => {
|
|
|
241
244
|
onClick: onFocus,
|
|
242
245
|
onKeyDown: onInputKeyDown,
|
|
243
246
|
customClassForLabel: customClassForLabel,
|
|
244
|
-
customClassForWrapper:
|
|
245
|
-
customClassForInputContent:
|
|
247
|
+
customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable', " ").concat(customClassForWrapper),
|
|
248
|
+
customClassForInputContent: "multiselect ".concat(customClassForInputContent),
|
|
246
249
|
inputBaseRef: r => {
|
|
247
250
|
selectWrapper.current = r;
|
|
248
251
|
},
|