linear-react-components-ui 1.1.20-beta.20 → 1.1.20-beta.21
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/BaseAlert.js +1 -1
- package/lib/alerts/Message.js +1 -1
- package/lib/avatar/index.js +9 -8
- package/lib/badge/index.js +4 -4
- package/lib/buttons/DangerButton.js +1 -1
- package/lib/buttons/DefaultButton.js +11 -2
- 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 +1 -1
- package/lib/calendar/base/Day.js +1 -1
- package/lib/calendar/base/Month.js +1 -1
- package/lib/calendar/base/helpers.js +2 -2
- package/lib/calendar/base/index.js +1 -1
- package/lib/checkbox/index.js +1 -1
- package/lib/dialog/Custom.js +1 -1
- package/lib/dialog/Question.js +2 -4
- package/lib/dialog/base/Content.js +1 -1
- package/lib/dialog/base/Header.js +2 -2
- package/lib/dialog/base/index.js +4 -5
- package/lib/dialog/form/index.js +1 -1
- package/lib/dialog/wizard/progressbar.js +1 -1
- package/lib/dialog/wizard/step.js +1 -1
- package/lib/drawer/Drawer.js +3 -3
- package/lib/drawer/Header.js +1 -1
- package/lib/dropdown/Popup.js +6 -6
- package/lib/dropdown/helper.js +1 -1
- package/lib/dropdown/withDropdown.js +2 -2
- package/lib/fieldset/index.js +7 -7
- package/lib/form/FieldArray.js +1 -1
- package/lib/form/FieldNumber.js +4 -4
- package/lib/form/FieldPeriod.js +2 -2
- package/lib/form/index.js +2 -2
- package/lib/gridlayout/GridCol.js +5 -5
- package/lib/gridlayout/GridRow.js +4 -1
- package/lib/hint/index.js +7 -1
- package/lib/icons/index.js +24 -27
- package/lib/inputs/base/InputTextBase.js +6 -8
- package/lib/inputs/base/Label.js +1 -1
- package/lib/inputs/base/helpers.js +7 -3
- package/lib/inputs/date/helpers.js +4 -1
- package/lib/inputs/date/index.js +9 -15
- package/lib/inputs/errorMessage/index.js +1 -1
- package/lib/inputs/file/DefaultFile.js +5 -6
- package/lib/inputs/file/DragDropFile.js +15 -17
- package/lib/inputs/file/File.js +3 -4
- package/lib/inputs/mask/BaseMask.js +1 -1
- package/lib/inputs/mask/helpers.d.ts +1 -1
- package/lib/inputs/multiSelect/Dropdown.js +9 -10
- package/lib/inputs/multiSelect/helper.js +1 -2
- package/lib/inputs/multiSelect/index.js +7 -9
- package/lib/inputs/period/PeriodList.js +1 -1
- package/lib/inputs/period/helper.js +3 -1
- package/lib/inputs/period/index.js +9 -14
- package/lib/inputs/search/index.js +1 -1
- package/lib/inputs/select/Dropdown.js +1 -1
- package/lib/inputs/select/helper.js +10 -13
- package/lib/inputs/select/multiple/Selecteds.js +1 -1
- package/lib/inputs/select/multiple/index.js +9 -14
- package/lib/inputs/select/simple/index.js +10 -17
- package/lib/inputs/textarea/index.js +1 -1
- package/lib/internals/withTooltip.js +9 -9
- package/lib/labelMessages/index.js +4 -3
- package/lib/labels/DefaultLabel.js +4 -1
- package/lib/labels/label_container/index.js +1 -1
- package/lib/list/Header.js +1 -1
- package/lib/list/Item.js +9 -7
- package/lib/list/index.js +2 -1
- package/lib/menus/float/MenuItem.js +2 -2
- package/lib/menus/float/SubMenuContainer.js +1 -1
- package/lib/menus/float/index.js +1 -1
- package/lib/menus/sidenav/ExpandMenu.js +1 -1
- package/lib/menus/sidenav/NavMenuGroup.js +1 -1
- package/lib/menus/sidenav/NavMenuItem.js +7 -9
- package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +5 -5
- package/lib/panel/Content.js +5 -7
- package/lib/panel/Default.js +2 -2
- package/lib/panel/Header.js +3 -3
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/index.js +1 -1
- package/lib/progress/Bar.js +6 -6
- package/lib/radio/index.js +2 -2
- package/lib/shortcuts/index.js +1 -1
- package/lib/skeleton/SkeletonContainer.js +2 -1
- package/lib/skeleton/index.js +4 -1
- package/lib/spinner/index.js +2 -2
- package/lib/split/Split.js +1 -1
- package/lib/split/SplitSide.js +3 -3
- package/lib/table/Body.js +3 -3
- package/lib/table/Header.js +8 -11
- package/lib/table/HeaderColumn.js +1 -1
- package/lib/table/Row.js +3 -3
- package/lib/table/RowColumn.js +1 -1
- package/lib/table/index.js +6 -1
- package/lib/tabs/DropdownTabs.js +1 -1
- package/lib/tabs/Menu.js +1 -1
- package/lib/tabs/MenuTabs.js +2 -2
- package/lib/tabs/Panel.js +5 -7
- package/lib/tabs/context.js +3 -6
- package/lib/textContent/index.js +1 -1
- package/lib/toolbar/ButtonBar.js +1 -1
- package/lib/toolbar/index.js +1 -1
- package/lib/tooltip/index.js +7 -7
- package/lib/treetable/Body.js +1 -1
- package/lib/treetable/Header.js +2 -2
- package/lib/treetable/Row.d.ts +1 -1
- package/lib/treetable/Row.js +9 -13
- package/lib/treetable/helpers.d.ts +1 -1
- package/lib/treetable/index.d.ts +2 -2
- package/lib/treeview/Header.js +1 -1
- package/lib/treeview/Node.js +5 -5
- package/lib/treeview/index.js +4 -4
- package/lib/{types.d-b477e076.d.ts → types.d-73cece43.d.ts} +0 -1
- package/lib/uitour/index.js +6 -8
- package/package.json +1 -1
- package/lib/checkbox/Label.js +0 -31
- package/lib/inputs/mask/imaskHOC.js +0 -203
- package/lib/menus/sidenav/popup_menu_help/index.js +0 -85
- package/lib/tabs/DropdownItems.js +0 -62
- package/lib/tabs/MenuItems.js +0 -70
- package/lib/treeview_old/Header.js +0 -29
- package/lib/treeview_old/Node.js +0 -68
- package/lib/treeview_old/index.js +0 -43
package/lib/icons/index.js
CHANGED
|
@@ -34,38 +34,35 @@ const Icon = _ref => {
|
|
|
34
34
|
const isUsingColorStyle = colorStyle !== 'default';
|
|
35
35
|
const colorFromProp = isUsingColorStyle || !color ? undefined : color;
|
|
36
36
|
const refSvg = (0, _react.useRef)(null);
|
|
37
|
-
const viewBoxFromIconOrSvgStrcut = name ? listIcon[name].viewbox : svgStruct
|
|
38
|
-
const getPaths = () => name ? listIcon[name].paths : svgStruct
|
|
39
|
-
const getSvg = () => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
key: value
|
|
61
|
-
})));
|
|
62
|
-
};
|
|
37
|
+
const viewBoxFromIconOrSvgStrcut = name ? listIcon[name].viewbox : svgStruct?.viewbox;
|
|
38
|
+
const getPaths = () => name ? listIcon[name].paths : svgStruct?.paths;
|
|
39
|
+
const getSvg = () => /*#__PURE__*/_react.default.createElement("svg", {
|
|
40
|
+
"data-testid": "icon",
|
|
41
|
+
"data-color-style": colorStyle,
|
|
42
|
+
onClick: () => {
|
|
43
|
+
if (onClick && !disabled) onClick();
|
|
44
|
+
},
|
|
45
|
+
ref: r => {
|
|
46
|
+
refSvg.current = r;
|
|
47
|
+
},
|
|
48
|
+
width: `${size}px`,
|
|
49
|
+
height: `${size}px`,
|
|
50
|
+
fill: disabled ? disabledIconColor : colorFromProp,
|
|
51
|
+
viewBox: viewBox || viewBoxFromIconOrSvgStrcut,
|
|
52
|
+
className: `icon-component ${customClass}`,
|
|
53
|
+
pointerEvents: pointerEvents,
|
|
54
|
+
style: style
|
|
55
|
+
}, getPaths()?.map(value => /*#__PURE__*/_react.default.createElement("path", {
|
|
56
|
+
"data-testid": "icon-path",
|
|
57
|
+
d: value,
|
|
58
|
+
key: value
|
|
59
|
+
})));
|
|
63
60
|
if (color && colorStyle !== 'default') throw new Error('Expected only one of the two properties: colorStyle or color');
|
|
64
61
|
if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
|
|
65
62
|
if (!visible) return null;
|
|
66
63
|
if (!tooltip) return getSvg();
|
|
67
64
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
68
|
-
className:
|
|
65
|
+
className: `icon-component-container ${customClassForContainer}`,
|
|
69
66
|
ref: r => {
|
|
70
67
|
if (targetRef && r) targetRef(r);
|
|
71
68
|
}
|
|
@@ -122,13 +122,11 @@ const InputTextBase = props => {
|
|
|
122
122
|
if (!disableCallbacks) {
|
|
123
123
|
propsInput = _objectSpread(_objectSpread({}, propsInput), {}, {
|
|
124
124
|
onFocus: e => {
|
|
125
|
-
|
|
126
|
-
(_props$onInputReceive = props.onInputReceiveFocus) === null || _props$onInputReceive === void 0 ? void 0 : _props$onInputReceive.call(props);
|
|
125
|
+
props.onInputReceiveFocus?.();
|
|
127
126
|
if (props.onFocus) props.onFocus(e);
|
|
128
127
|
},
|
|
129
128
|
onBlur: e => {
|
|
130
|
-
|
|
131
|
-
(_props$onInputLostFoc = props.onInputLostFocus) === null || _props$onInputLostFoc === void 0 ? void 0 : _props$onInputLostFoc.call(props);
|
|
129
|
+
props.onInputLostFocus?.();
|
|
132
130
|
if (props.onBlur) props.onBlur(e);
|
|
133
131
|
},
|
|
134
132
|
onKeyDown: e => {
|
|
@@ -192,7 +190,7 @@ const InputTextBase = props => {
|
|
|
192
190
|
if (!visible || unvisible) return null;
|
|
193
191
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
194
192
|
style: style,
|
|
195
|
-
className:
|
|
193
|
+
className: `input-base-component ${skeletonize ? '-skeletonized' : ''} ${customClass}`,
|
|
196
194
|
ref: inputBaseRef
|
|
197
195
|
}, label && /*#__PURE__*/_react.default.createElement("div", {
|
|
198
196
|
className: "labelcontainer",
|
|
@@ -214,7 +212,7 @@ const InputTextBase = props => {
|
|
|
214
212
|
display: 'flex'
|
|
215
213
|
}
|
|
216
214
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
217
|
-
className:
|
|
215
|
+
className: `label ${customClassForLabel} ${labelUppercase && ' -uppercase'}`,
|
|
218
216
|
style: {
|
|
219
217
|
alignSelf: 'center'
|
|
220
218
|
}
|
|
@@ -238,11 +236,11 @@ const InputTextBase = props => {
|
|
|
238
236
|
}))
|
|
239
237
|
}, leftElements && /*#__PURE__*/_react.default.createElement("div", {
|
|
240
238
|
style: styleForSideButtons,
|
|
241
|
-
className:
|
|
239
|
+
className: `sidebuttons ${customClassForSideButtons}`
|
|
242
240
|
}, leftElements), /*#__PURE__*/_react.default.createElement("div", {
|
|
243
241
|
"data-testid": "testInputContent",
|
|
244
242
|
style: styleForInputContent,
|
|
245
|
-
className:
|
|
243
|
+
className: `inputcontent ${customClassForInputContent}`
|
|
246
244
|
}, type === 'textarea' ? /*#__PURE__*/_react.default.createElement("textarea", _extends({
|
|
247
245
|
rows: props.rows,
|
|
248
246
|
cols: props.cols,
|
package/lib/inputs/base/Label.js
CHANGED
|
@@ -27,7 +27,7 @@ const Label = props => {
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
onMouseEnter: onHoverLabel,
|
|
30
|
-
className:
|
|
30
|
+
className: `label ${customClassForLabel} ${labelUppercase && ' -uppercase'}`
|
|
31
31
|
}, label, required && /*#__PURE__*/_react.default.createElement("span", {
|
|
32
32
|
className: "-requiredlabel"
|
|
33
33
|
}, "*"));
|
|
@@ -13,7 +13,7 @@ const getInputClass = _ref => {
|
|
|
13
13
|
readOnly,
|
|
14
14
|
readOnlyClass
|
|
15
15
|
} = _ref;
|
|
16
|
-
return
|
|
16
|
+
return `textinput text-align-${textAlign} ${readOnlyClass} ${readOnly ? ' -readonly' : ''}`;
|
|
17
17
|
};
|
|
18
18
|
exports.getInputClass = getInputClass;
|
|
19
19
|
const getInputWrapperClass = props => {
|
|
@@ -24,7 +24,11 @@ const getInputWrapperClass = props => {
|
|
|
24
24
|
errorMessages,
|
|
25
25
|
disabled
|
|
26
26
|
} = props;
|
|
27
|
-
return
|
|
27
|
+
return `inputwrapper ${inputHasFocus && ' -focusable'}
|
|
28
|
+
${customClassForWrapper}
|
|
29
|
+
${errorMessages && errorMessages.length > 0 && ' -requirederror'}
|
|
30
|
+
${rounded && ' -roundedborders'}
|
|
31
|
+
${disabled && ' -disabled'}`;
|
|
28
32
|
};
|
|
29
33
|
exports.getInputWrapperClass = getInputWrapperClass;
|
|
30
34
|
const getRightElements = (errorMessages, skeletonize, rightElements) => {
|
|
@@ -34,7 +38,7 @@ const getRightElements = (errorMessages, skeletonize, rightElements) => {
|
|
|
34
38
|
elements = [elements];
|
|
35
39
|
}
|
|
36
40
|
elements = elements.map((element, index) => element && /*#__PURE__*/_react.default.cloneElement(element, {
|
|
37
|
-
key:
|
|
41
|
+
key: `rightelement-${index + 1}`
|
|
38
42
|
}));
|
|
39
43
|
if (errorMessages) return elements;
|
|
40
44
|
return elements;
|
|
@@ -15,7 +15,10 @@ const getCalendarDropdownStyle = _ref => {
|
|
|
15
15
|
width,
|
|
16
16
|
minWidth
|
|
17
17
|
} = _ref;
|
|
18
|
-
return
|
|
18
|
+
return `top: ${topPosition}px;
|
|
19
|
+
left: ${leftPosition}px;
|
|
20
|
+
width: ${width}px;
|
|
21
|
+
min-width: ${minWidth}px;`;
|
|
19
22
|
};
|
|
20
23
|
exports.getCalendarDropdownStyle = getCalendarDropdownStyle;
|
|
21
24
|
const getMomentValue = value => {
|
package/lib/inputs/date/index.js
CHANGED
|
@@ -22,7 +22,6 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
22
22
|
const CALENDAR_BUTTON_WIDTH = 24;
|
|
23
23
|
const CALENDAR_MIN_WIDTH = 250;
|
|
24
24
|
const DatePicker = props => {
|
|
25
|
-
var _window;
|
|
26
25
|
const {
|
|
27
26
|
showButtonOpen = true,
|
|
28
27
|
openOnFocus = true,
|
|
@@ -54,16 +53,14 @@ const DatePicker = props => {
|
|
|
54
53
|
const dropdownContainer = (0, _react.useRef)();
|
|
55
54
|
const [insideDropdown, setInsideDropdown] = (0, _react.useState)(false);
|
|
56
55
|
const onScreenResize = () => {
|
|
57
|
-
|
|
58
|
-
setInputDimensions(inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.getBoundingClientRect());
|
|
56
|
+
setInputDimensions(inputRef?.current?.getBoundingClientRect());
|
|
59
57
|
};
|
|
60
58
|
const onClickOutside = event => {
|
|
61
|
-
var _buttonOpenRef$curren;
|
|
62
59
|
const {
|
|
63
60
|
target
|
|
64
61
|
} = event;
|
|
65
62
|
if (!dropdownContainer || target === inputRef.current || target === buttonOpenRef.current) return;
|
|
66
|
-
if (target !== dropdownContainer.current && dropdownContainer && dropdownContainer.current && !dropdownContainer.current.contains(target) && buttonOpenRef && !
|
|
63
|
+
if (target !== dropdownContainer.current && dropdownContainer && dropdownContainer.current && !dropdownContainer.current.contains(target) && buttonOpenRef && !buttonOpenRef?.current?.contains(target)) {
|
|
67
64
|
setShowCalendar(false);
|
|
68
65
|
}
|
|
69
66
|
};
|
|
@@ -109,8 +106,7 @@ const DatePicker = props => {
|
|
|
109
106
|
const onInputChange = function (event) {
|
|
110
107
|
let valueInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
111
108
|
if (typeof valueInput === 'string') {
|
|
112
|
-
|
|
113
|
-
const date = (_event$target$value = event.target.value) !== null && _event$target$value !== void 0 ? _event$target$value : '';
|
|
109
|
+
const date = event.target.value ?? '';
|
|
114
110
|
if (props.onChange) {
|
|
115
111
|
if (isValidDate(date)) {
|
|
116
112
|
const newValue = (0, _moment.default)(date, _helpers.PT_BR_FORMAT).format(_helpers.EN_US_FORMAT);
|
|
@@ -136,10 +132,9 @@ const DatePicker = props => {
|
|
|
136
132
|
}
|
|
137
133
|
};
|
|
138
134
|
const setValue = function () {
|
|
139
|
-
var _inputRef$current2;
|
|
140
135
|
let valueParam = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
141
136
|
let e = arguments.length > 1 ? arguments[1] : undefined;
|
|
142
|
-
if (showCalendar && setFocusOnSelect)
|
|
137
|
+
if (showCalendar && setFocusOnSelect) inputRef.current?.focus();
|
|
143
138
|
if (props.onComplete) props.onComplete(e, valueParam);
|
|
144
139
|
if (props.onChange) onInputChange({
|
|
145
140
|
target: {
|
|
@@ -184,7 +179,7 @@ const DatePicker = props => {
|
|
|
184
179
|
return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
|
|
185
180
|
dialogSize: dialogSize,
|
|
186
181
|
handlerClose: setShowCalendar
|
|
187
|
-
}, getCalendar(valueState, props
|
|
182
|
+
}, getCalendar(valueState, props?.calendarColorStyle));
|
|
188
183
|
}
|
|
189
184
|
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
190
185
|
topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
|
|
@@ -194,16 +189,16 @@ const DatePicker = props => {
|
|
|
194
189
|
dropdownRef: el => {
|
|
195
190
|
dropdownContainer.current = el;
|
|
196
191
|
}
|
|
197
|
-
}, getCalendar(valueState, props
|
|
192
|
+
}, getCalendar(valueState, props?.calendarColorStyle));
|
|
198
193
|
};
|
|
199
194
|
(0, _react.useEffect)(() => {
|
|
200
195
|
const screenWidth = window.innerWidth;
|
|
201
196
|
if (inputDimensions && screenWidth < inputDimensions.left + CALENDAR_MIN_WIDTH) {
|
|
202
197
|
setFormatedLeftPosition(inputDimensions.left - (CALENDAR_MIN_WIDTH - inputDimensions.width - CALENDAR_BUTTON_WIDTH));
|
|
203
198
|
} else {
|
|
204
|
-
setFormatedLeftPosition(inputDimensions
|
|
199
|
+
setFormatedLeftPosition(inputDimensions?.left);
|
|
205
200
|
}
|
|
206
|
-
}, [
|
|
201
|
+
}, [window?.innerWidth, inputDimensions]);
|
|
207
202
|
(0, _react.useEffect)(() => {
|
|
208
203
|
window.addEventListener('resize', onScreenResize);
|
|
209
204
|
document.addEventListener('click', onClickOutside);
|
|
@@ -233,8 +228,7 @@ const DatePicker = props => {
|
|
|
233
228
|
mask: "00/00/0000",
|
|
234
229
|
onComplete: e => {
|
|
235
230
|
if (e) {
|
|
236
|
-
|
|
237
|
-
setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.maskedValue, e);
|
|
231
|
+
setValue(e.target?.maskedValue, e);
|
|
238
232
|
}
|
|
239
233
|
},
|
|
240
234
|
onBlur: onInputBlur,
|
|
@@ -19,7 +19,7 @@ const ErrorMessage = exports.ErrorMessage = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
19
19
|
return /*#__PURE__*/_react.default.createElement("p", {
|
|
20
20
|
ref: ref,
|
|
21
21
|
style: style,
|
|
22
|
-
className:
|
|
22
|
+
className: `errormessages-component ${customClass}`
|
|
23
23
|
}, messages.join(', '));
|
|
24
24
|
});
|
|
25
25
|
ErrorMessage.displayName = 'ErrorMessage';
|
|
@@ -27,16 +27,16 @@ const DefaultFile = props => {
|
|
|
27
27
|
hint = [],
|
|
28
28
|
onChange
|
|
29
29
|
} = props;
|
|
30
|
-
const getFilesList = files => !
|
|
30
|
+
const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
|
|
31
31
|
const [fileList, setFileList] = (0, _react.useState)(defaultFiles);
|
|
32
32
|
const ifExistFiles = fileList instanceof Array && fileList.length > 0;
|
|
33
33
|
const popUpDescription = () => /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
-
className:
|
|
34
|
+
className: `size-position-icon ${!ifExistFiles ? '-disabled-popover' : ''}`
|
|
35
35
|
}, /*#__PURE__*/_react.default.createElement(_popover.default, {
|
|
36
36
|
iconSize: 16
|
|
37
37
|
}, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, null, /*#__PURE__*/_react.default.createElement("strong", null, "Arquivos"), /*#__PURE__*/_react.default.createElement("br", null), ifExistFiles && fileList.map(file => /*#__PURE__*/_react.default.createElement("div", {
|
|
38
38
|
className: "list-simple-file",
|
|
39
|
-
key:
|
|
39
|
+
key: `${file.name}${file.size}`
|
|
40
40
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
41
|
className: "file-name"
|
|
42
42
|
}, /*#__PURE__*/_react.default.createElement("span", null, file.name)))))));
|
|
@@ -55,11 +55,10 @@ const DefaultFile = props => {
|
|
|
55
55
|
})
|
|
56
56
|
});
|
|
57
57
|
const handleChange = e => {
|
|
58
|
-
|
|
59
|
-
(_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
|
|
58
|
+
e.preventDefault?.();
|
|
60
59
|
const files = getFilesList(e.target.files);
|
|
61
60
|
setFileList(files);
|
|
62
|
-
onChange
|
|
61
|
+
onChange?.(files, e);
|
|
63
62
|
};
|
|
64
63
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
65
64
|
className: "input-simple-file-container"
|
|
@@ -15,7 +15,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
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; }
|
|
17
17
|
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
|
-
const getFilesList = files => !
|
|
18
|
+
const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
|
|
19
19
|
const getAcceptFilesLabel = valueAccept => valueAccept.split(',').map(value => value.includes('.') ? value.split('.')[1] : value.split('/')[1]).join(', ');
|
|
20
20
|
const getAcceptFilesWithoutRemoveText = value => value.split(', ');
|
|
21
21
|
const DragDropFile = props => {
|
|
@@ -49,9 +49,8 @@ const DragDropFile = props => {
|
|
|
49
49
|
error: false
|
|
50
50
|
});
|
|
51
51
|
const handleDrag = e => {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
(_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
|
|
52
|
+
e.preventDefault?.();
|
|
53
|
+
e.stopPropagation?.();
|
|
55
54
|
};
|
|
56
55
|
const checkTypeNotAccept = (types, getTypesArray, e) => {
|
|
57
56
|
setTypeNotAccept(false);
|
|
@@ -72,7 +71,7 @@ const DragDropFile = props => {
|
|
|
72
71
|
setMessage({
|
|
73
72
|
class: 'disapprovedFile',
|
|
74
73
|
text: 'Por favor, verifique a extensão do(s) arquivo(s) inserido(s).',
|
|
75
|
-
subtitle:
|
|
74
|
+
subtitle: `Apenas as extensões ${getAcceptFilesLabel(accept)} são permitidas.`,
|
|
76
75
|
error: true
|
|
77
76
|
});
|
|
78
77
|
} else {
|
|
@@ -102,7 +101,7 @@ const DragDropFile = props => {
|
|
|
102
101
|
checkTypeNotAccept(arrayTypes, getTypesArray, e);
|
|
103
102
|
handleDrag(e);
|
|
104
103
|
setDragActive(true);
|
|
105
|
-
onDragEnter
|
|
104
|
+
onDragEnter?.(e);
|
|
106
105
|
};
|
|
107
106
|
const handleDragLeave = e => {
|
|
108
107
|
setMessage({
|
|
@@ -113,11 +112,11 @@ const DragDropFile = props => {
|
|
|
113
112
|
});
|
|
114
113
|
handleDrag(e);
|
|
115
114
|
setDragActive(false);
|
|
116
|
-
onDragLeave
|
|
115
|
+
onDragLeave?.(e);
|
|
117
116
|
};
|
|
118
117
|
const handleDragOver = e => {
|
|
119
118
|
handleDrag(e);
|
|
120
|
-
onDragOver
|
|
119
|
+
onDragOver?.(e);
|
|
121
120
|
};
|
|
122
121
|
const handleDrop = e => {
|
|
123
122
|
handleDrag(e);
|
|
@@ -135,8 +134,8 @@ const DragDropFile = props => {
|
|
|
135
134
|
return !ids.includes(name, index + 1);
|
|
136
135
|
});
|
|
137
136
|
setFileList(filtered);
|
|
138
|
-
onChange
|
|
139
|
-
onDrop
|
|
137
|
+
onChange?.(files, e);
|
|
138
|
+
onDrop?.(e);
|
|
140
139
|
}
|
|
141
140
|
}
|
|
142
141
|
setMessage({
|
|
@@ -147,8 +146,7 @@ const DragDropFile = props => {
|
|
|
147
146
|
});
|
|
148
147
|
};
|
|
149
148
|
const handleChange = e => {
|
|
150
|
-
|
|
151
|
-
(_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
|
|
149
|
+
e.preventDefault?.();
|
|
152
150
|
const files = getFilesList(e.target.files);
|
|
153
151
|
if (files.length > 0 && !typeNotAccept) {
|
|
154
152
|
const fileNoRepeat = fileList.concat(files);
|
|
@@ -160,7 +158,7 @@ const DragDropFile = props => {
|
|
|
160
158
|
return !ids.includes(name, index + 1);
|
|
161
159
|
});
|
|
162
160
|
setFileList(filesFiltered);
|
|
163
|
-
onChange
|
|
161
|
+
onChange?.(files, e);
|
|
164
162
|
}
|
|
165
163
|
};
|
|
166
164
|
const onButtonClickRemoveAll = () => setFileList([]);
|
|
@@ -168,7 +166,7 @@ const DragDropFile = props => {
|
|
|
168
166
|
setFileList(prevState => prevState.filter(file => file.name !== fileName));
|
|
169
167
|
};
|
|
170
168
|
const generateListArray = () => {
|
|
171
|
-
if (
|
|
169
|
+
if (fileList?.length === 1) {
|
|
172
170
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png' ? /*#__PURE__*/_react.default.createElement("img", {
|
|
173
171
|
alt: fileList[0].name,
|
|
174
172
|
src: URL.createObjectURL(fileList[0])
|
|
@@ -186,7 +184,7 @@ const DragDropFile = props => {
|
|
|
186
184
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
187
185
|
className: "file-list"
|
|
188
186
|
}, fileList.length > 0 && fileList.map(file => /*#__PURE__*/_react.default.createElement("li", {
|
|
189
|
-
key:
|
|
187
|
+
key: `${file.name}${file.size}`,
|
|
190
188
|
className: "file-card"
|
|
191
189
|
}, /*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
|
|
192
190
|
transparent: true,
|
|
@@ -214,9 +212,9 @@ const DragDropFile = props => {
|
|
|
214
212
|
onDragEnter: handleDragEnter,
|
|
215
213
|
onSubmit: e => e.preventDefault()
|
|
216
214
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
217
|
-
className:
|
|
215
|
+
className: `drag-content ${skeletonize ? '-skeletonized' : ''}`
|
|
218
216
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
219
|
-
className:
|
|
217
|
+
className: `${message.class} ${!skeletonize ? 'content' : ''}`
|
|
220
218
|
}, message.error || fileList.length === 0 ? /*#__PURE__*/_react.default.createElement("label", {
|
|
221
219
|
htmlFor: id
|
|
222
220
|
}, /*#__PURE__*/_react.default.createElement("h1", {
|
package/lib/inputs/file/File.js
CHANGED
|
@@ -26,8 +26,7 @@ const File = _ref => {
|
|
|
26
26
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
27
27
|
const inputFileRef = (0, _react.useRef)(null);
|
|
28
28
|
const onBtnClickInsert = () => {
|
|
29
|
-
|
|
30
|
-
(_inputFileRef$current = inputFileRef.current) === null || _inputFileRef$current === void 0 ? void 0 : _inputFileRef$current.click();
|
|
29
|
+
inputFileRef.current?.click();
|
|
31
30
|
};
|
|
32
31
|
const onBtnClickRemove = () => {
|
|
33
32
|
if (inputFileRef.current) {
|
|
@@ -36,10 +35,10 @@ const File = _ref => {
|
|
|
36
35
|
if (onBtnClickRemoveProp) onBtnClickRemoveProp();
|
|
37
36
|
};
|
|
38
37
|
(0, _react.useEffect)(() => {
|
|
39
|
-
if (inputFileRef
|
|
38
|
+
if (inputFileRef?.current && defaultFiles) {
|
|
40
39
|
inputFileRef.current.files = (0, _helpers.transformFilesToFileList)(defaultFiles);
|
|
41
40
|
}
|
|
42
|
-
}, [inputFileRef
|
|
41
|
+
}, [inputFileRef?.current]);
|
|
43
42
|
const component = applyDragDrop ? /*#__PURE__*/_react.default.createElement(_DragDropFile.default, _extends({}, rest, {
|
|
44
43
|
defaultFiles: defaultFiles,
|
|
45
44
|
inputRef: inputFileRef,
|
|
@@ -149,7 +149,7 @@ const BaseMask = _ref => {
|
|
|
149
149
|
}
|
|
150
150
|
});
|
|
151
151
|
(0, _react.useEffect)(() => {
|
|
152
|
-
if (typeof valueProp === 'number') setTypedValue(valueProp);else setValue(valueProp
|
|
152
|
+
if (typeof valueProp === 'number') setTypedValue(valueProp);else setValue(valueProp ?? '');
|
|
153
153
|
}, [valueProp]);
|
|
154
154
|
return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({
|
|
155
155
|
inputRef: r => {
|
|
@@ -42,7 +42,7 @@ declare const getMaskOptions: ({ isDateField, placeholderChar, min, max, lazy, p
|
|
|
42
42
|
mask?: any;
|
|
43
43
|
hint?: string | string[] | undefined;
|
|
44
44
|
hintPosition?: "below" | "onLabelRight" | undefined;
|
|
45
|
-
themePopover?: "
|
|
45
|
+
themePopover?: "light" | "dark" | undefined;
|
|
46
46
|
popoverAlign?: "left" | "right" | undefined;
|
|
47
47
|
placeholderChar: string;
|
|
48
48
|
min: any;
|
|
@@ -16,17 +16,16 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
|
|
|
16
16
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
17
17
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
18
18
|
const returnDropdownDynamicStyles = (selectFieldRef, dropdownMaxHeight) => {
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const offsetTop = selectFieldRef !== null && selectFieldRef !== void 0 && (_selectFieldRef$curre2 = selectFieldRef.current) !== null && _selectFieldRef$curre2 !== void 0 && _selectFieldRef$curre2.offsetTop ? selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre3 = selectFieldRef.current) === null || _selectFieldRef$curre3 === void 0 ? void 0 : _selectFieldRef$curre3.offsetTop : 0;
|
|
19
|
+
const selectFieldRects = selectFieldRef?.current?.getBoundingClientRect();
|
|
20
|
+
const bottom = selectFieldRects?.bottom ? selectFieldRects?.bottom : 0;
|
|
21
|
+
const offsetTop = selectFieldRef?.current?.offsetTop ? selectFieldRef?.current?.offsetTop : 0;
|
|
23
22
|
const dropdownBottomDistance = window.innerHeight - bottom;
|
|
24
23
|
let maxDropdownBottomDistance = 200;
|
|
25
24
|
let height = dropdownMaxHeight;
|
|
26
25
|
let dropdownPosition;
|
|
27
26
|
if (!height || height <= 0) {
|
|
28
27
|
if (dropdownBottomDistance < maxDropdownBottomDistance) {
|
|
29
|
-
height = selectFieldRects
|
|
28
|
+
height = selectFieldRects?.top ? selectFieldRects.top : 0;
|
|
30
29
|
dropdownPosition = window.innerHeight - offsetTop + 10;
|
|
31
30
|
} else {
|
|
32
31
|
height = dropdownBottomDistance;
|
|
@@ -38,8 +37,8 @@ const returnDropdownDynamicStyles = (selectFieldRef, dropdownMaxHeight) => {
|
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
return {
|
|
41
|
-
maxHeight:
|
|
42
|
-
bottom:
|
|
40
|
+
maxHeight: `${height - 30}px`,
|
|
41
|
+
bottom: `${dropdownPosition}px`
|
|
43
42
|
};
|
|
44
43
|
};
|
|
45
44
|
const Dropdown = props => {
|
|
@@ -103,11 +102,11 @@ const Dropdown = props => {
|
|
|
103
102
|
customClass: "checkboxicon"
|
|
104
103
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
105
104
|
className: "label"
|
|
106
|
-
}, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo
|
|
105
|
+
}, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo?.map(item => {
|
|
107
106
|
const isChecked = selecteds ? selecteds.find(selected => selected[idKey] === item[idKey]) : undefined;
|
|
108
107
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
109
|
-
key:
|
|
110
|
-
className:
|
|
108
|
+
key: `dropdowmItem ${item[idKey]}}`,
|
|
109
|
+
className: `item ${isChecked && '-selected'}`
|
|
111
110
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
112
111
|
className: "menubutton",
|
|
113
112
|
tabIndex: -1,
|
|
@@ -11,11 +11,10 @@ const getFilteredDataCombo = _ref => {
|
|
|
11
11
|
inputText
|
|
12
12
|
} = _ref;
|
|
13
13
|
return dataSource.filter(item => {
|
|
14
|
-
var _descriptionKey;
|
|
15
14
|
if (typeof descriptionKey === 'string') {
|
|
16
15
|
return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
|
|
17
16
|
}
|
|
18
|
-
return
|
|
17
|
+
return descriptionKey(item)?.toLowerCase().indexOf(inputText.toLowerCase()) > -1;
|
|
19
18
|
});
|
|
20
19
|
};
|
|
21
20
|
var _default = exports.default = getFilteredDataCombo;
|
|
@@ -33,7 +33,7 @@ const MultiSelectField = props => {
|
|
|
33
33
|
gridLayout,
|
|
34
34
|
dropdownAlignButton = 'left'
|
|
35
35
|
} = props;
|
|
36
|
-
const componentId =
|
|
36
|
+
const componentId = `multiSelect-component${uuid.v1()}`;
|
|
37
37
|
const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
|
|
38
38
|
const [selecteds, setSelecteds] = (0, _react.useState)();
|
|
39
39
|
const [inputValue, setInputValue] = (0, _react.useState)('');
|
|
@@ -68,8 +68,8 @@ const MultiSelectField = props => {
|
|
|
68
68
|
};
|
|
69
69
|
const onMouseMove = event => {
|
|
70
70
|
const target = event.target;
|
|
71
|
-
if (
|
|
72
|
-
const newInsideComponent = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target
|
|
71
|
+
if (target?.className === '') return;
|
|
72
|
+
const newInsideComponent = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target?.className);
|
|
73
73
|
setInsideComponent(newInsideComponent);
|
|
74
74
|
};
|
|
75
75
|
const onBlurComponent = e => {
|
|
@@ -109,11 +109,10 @@ const MultiSelectField = props => {
|
|
|
109
109
|
if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
|
|
110
110
|
};
|
|
111
111
|
const onClickOutSide = event => {
|
|
112
|
-
var _componentRef$current;
|
|
113
112
|
const {
|
|
114
113
|
target
|
|
115
114
|
} = event;
|
|
116
|
-
if (target !== componentRef.current && !
|
|
115
|
+
if (target !== componentRef.current && !componentRef.current?.contains(target)) {
|
|
117
116
|
setOpened(false);
|
|
118
117
|
setDataCombo(dataSource);
|
|
119
118
|
setInputValue('');
|
|
@@ -139,8 +138,7 @@ const MultiSelectField = props => {
|
|
|
139
138
|
};
|
|
140
139
|
(0, _react.useEffect)(() => {
|
|
141
140
|
if (gridLayout) {
|
|
142
|
-
|
|
143
|
-
const currentGridEl = (_selectWrapper$curren = selectWrapper.current) === null || _selectWrapper$curren === void 0 ? void 0 : _selectWrapper$curren.parentElement;
|
|
141
|
+
const currentGridEl = selectWrapper.current?.parentElement;
|
|
144
142
|
if (currentGridEl) setElementStyles(window.getComputedStyle(currentGridEl));
|
|
145
143
|
}
|
|
146
144
|
window.addEventListener('resize', onScreenResize);
|
|
@@ -154,10 +152,10 @@ const MultiSelectField = props => {
|
|
|
154
152
|
}, []);
|
|
155
153
|
(0, _react.useEffect)(() => {
|
|
156
154
|
if (dataSource && dataSource.length > 0) {
|
|
157
|
-
const newSelecteds = dataSource.filter(item => value
|
|
155
|
+
const newSelecteds = dataSource.filter(item => value?.includes(item[idKey]));
|
|
158
156
|
setSelecteds(newSelecteds);
|
|
159
157
|
}
|
|
160
|
-
}, [value
|
|
158
|
+
}, [value?.length, dataSource?.length]);
|
|
161
159
|
(0, _react.useEffect)(() => {
|
|
162
160
|
if (dataSource && dataCombo && !_lodash.default.isEqual(dataSource, dataCombo)) {
|
|
163
161
|
const newDataCombo = (0, _helper.default)(_objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -42,7 +42,7 @@ const PeriodList = _ref => {
|
|
|
42
42
|
role: "button",
|
|
43
43
|
tabIndex: -1,
|
|
44
44
|
onKeyDown: () => {},
|
|
45
|
-
key:
|
|
45
|
+
key: `item-${item.id}`,
|
|
46
46
|
className: (0, _helper.getDropdownItemCssClass)(itemSelected),
|
|
47
47
|
onClick: () => {
|
|
48
48
|
const dates = item.id !== 'custom' ? (0, _helper.CalcDatesByPeriod)(item.id) : null;
|
|
@@ -12,7 +12,9 @@ const getCalendarDropdownStyle = _ref => {
|
|
|
12
12
|
leftPosition,
|
|
13
13
|
width
|
|
14
14
|
} = _ref;
|
|
15
|
-
return
|
|
15
|
+
return `top: ${topPosition}px;
|
|
16
|
+
left: ${leftPosition}px;
|
|
17
|
+
width:${width}px`;
|
|
16
18
|
};
|
|
17
19
|
var _default = exports.default = getCalendarDropdownStyle;
|
|
18
20
|
const getDropdownItemCssClass = function () {
|