linear-react-components-ui 1.1.0-beta.6 → 1.1.0
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/babel.config.json +2 -2
- package/lib/alerts/AlertContainer.js +46 -54
- package/lib/alerts/AlertProvider.js +36 -53
- package/lib/alerts/BaseAlert.js +14 -20
- package/lib/alerts/Message.js +37 -46
- package/lib/alerts/helpers.js +3 -3
- package/lib/alerts/index.js +5 -5
- package/lib/alerts/withAlert.js +11 -11
- package/lib/assets/styles/checkbox.scss +0 -8
- package/lib/avatar/index.js +42 -41
- package/lib/badge/index.js +15 -16
- package/lib/buttons/ActivateButton.js +6 -8
- package/lib/buttons/AddButton.js +9 -11
- package/lib/buttons/Button.js +11 -11
- package/lib/buttons/ButtonGroups.js +8 -6
- package/lib/buttons/CancelButton.js +9 -7
- package/lib/buttons/DangerButton.js +9 -7
- package/lib/buttons/DefaultButton.js +66 -85
- package/lib/buttons/DestroyButton.js +10 -8
- package/lib/buttons/EditButton.js +6 -8
- package/lib/buttons/InactivateButton.js +6 -8
- package/lib/buttons/InfoButton.js +9 -7
- package/lib/buttons/PrimaryButton.js +9 -7
- package/lib/buttons/RestoreButton.js +6 -8
- package/lib/buttons/SaveButton.js +9 -7
- package/lib/buttons/SuccessButton.js +9 -7
- package/lib/buttons/WarningButton.js +9 -7
- package/lib/buttons/button_container/index.js +16 -19
- package/lib/buttons/index.js +31 -31
- package/lib/buttons/split_button/index.js +24 -26
- package/lib/calendar/DangerCalendar.js +9 -7
- package/lib/calendar/InfoCalendar.js +9 -7
- package/lib/calendar/PrimaryCalendar.js +9 -7
- package/lib/calendar/SuccessCalendar.js +9 -7
- package/lib/calendar/WarningCalendar.js +9 -7
- package/lib/calendar/base/Day.js +16 -14
- package/lib/calendar/base/Month.js +15 -19
- package/lib/calendar/base/Week.js +15 -19
- package/lib/calendar/base/helpers.js +17 -15
- package/lib/calendar/base/index.js +38 -51
- package/lib/calendar/index.js +13 -13
- package/lib/checkbox/Label.js +10 -8
- package/lib/checkbox/index.d.ts +1 -1
- package/lib/checkbox/index.js +75 -97
- package/lib/checkbox/types.d.ts +0 -1
- package/lib/dialog/Alert.js +7 -7
- package/lib/dialog/Custom.js +20 -23
- package/lib/dialog/Error.js +7 -7
- package/lib/dialog/Information.js +7 -7
- package/lib/dialog/Question.js +16 -16
- package/lib/dialog/Warning.js +7 -7
- package/lib/dialog/base/Content.js +9 -7
- package/lib/dialog/base/Footer.js +6 -8
- package/lib/dialog/base/Header.js +32 -34
- package/lib/dialog/base/index.js +64 -72
- package/lib/dialog/base/style.js +8 -10
- package/lib/dialog/form/index.js +35 -38
- package/lib/dialog/index.js +15 -15
- package/lib/drawer/Content.js +14 -12
- package/lib/drawer/Drawer.js +68 -82
- package/lib/drawer/Header.js +45 -48
- package/lib/drawer/helpers.js +4 -4
- package/lib/drawer/index.js +7 -7
- package/lib/dropdown/Popup.js +37 -40
- package/lib/dropdown/helper.js +6 -6
- package/lib/dropdown/withDropdown.js +44 -63
- package/lib/fieldset/index.js +49 -56
- package/lib/form/Field.js +73 -79
- package/lib/form/FieldArray.js +76 -85
- package/lib/form/FieldNumber.js +34 -42
- package/lib/form/FieldPeriod.js +54 -59
- package/lib/form/helpers.js +29 -28
- package/lib/form/index.js +121 -151
- package/lib/form/withFieldHOC.js +36 -42
- package/lib/form/withFormSecurity.js +27 -35
- package/lib/gridlayout/GridCol.js +16 -15
- package/lib/gridlayout/GridRow.js +11 -12
- package/lib/gridlayout/index.js +5 -5
- package/lib/hint/index.js +25 -29
- package/lib/icons/helper.js +2 -2
- package/lib/icons/index.js +37 -48
- package/lib/index.js +19 -19
- package/lib/inputs/base/InputTextBase.js +99 -109
- package/lib/inputs/base/helpers.js +29 -23
- package/lib/inputs/color/index.js +34 -44
- package/lib/inputs/date/Dialog.js +10 -8
- package/lib/inputs/date/Dropdown.js +14 -12
- package/lib/inputs/date/helpers.js +18 -14
- package/lib/inputs/date/index.js +96 -133
- package/lib/inputs/file/DefaultFile.js +50 -74
- package/lib/inputs/file/DragDropFile.js +119 -172
- package/lib/inputs/file/File.js +22 -28
- package/lib/inputs/file/FileButtonSettings.js +14 -16
- package/lib/inputs/file/helpers.js +6 -7
- package/lib/inputs/file/index.js +7 -7
- package/lib/inputs/inputHOC.js +23 -35
- package/lib/inputs/mask/BaseMask.js +33 -27
- package/lib/inputs/mask/Cnpj.js +19 -31
- package/lib/inputs/mask/Cpf.js +20 -35
- package/lib/inputs/mask/Phone.js +8 -6
- package/lib/inputs/mask/ZipCode.js +6 -8
- package/lib/inputs/mask/helpers.js +21 -26
- package/lib/inputs/mask/imaskHOC.js +102 -122
- package/lib/inputs/mask/index.js +11 -11
- package/lib/inputs/multiSelect/ActionButtons.js +18 -18
- package/lib/inputs/multiSelect/Dropdown.js +63 -75
- package/lib/inputs/multiSelect/helper.js +9 -7
- package/lib/inputs/multiSelect/index.js +85 -136
- package/lib/inputs/number/BaseNumber.js +23 -21
- package/lib/inputs/number/Currency.js +9 -8
- package/lib/inputs/number/Decimal.js +4 -6
- package/lib/inputs/number/format_number.js +9 -6
- package/lib/inputs/number/index.js +13 -13
- package/lib/inputs/period/Dialog.js +10 -8
- package/lib/inputs/period/Dropdown.js +12 -12
- package/lib/inputs/period/PeriodList.js +19 -17
- package/lib/inputs/period/helper.js +38 -37
- package/lib/inputs/period/index.js +147 -196
- package/lib/inputs/search/index.js +45 -67
- package/lib/inputs/select/ActionButtons.js +18 -18
- package/lib/inputs/select/Dropdown.js +51 -65
- package/lib/inputs/select/helper.js +55 -44
- package/lib/inputs/select/index.js +13 -11
- package/lib/inputs/select/multiple/Selecteds.js +20 -22
- package/lib/inputs/select/multiple/index.js +90 -143
- package/lib/inputs/select/simple/index.js +103 -156
- package/lib/inputs/text/index.js +4 -6
- package/lib/inputs/textarea/index.js +11 -10
- package/lib/internals/colorStyles.js +3 -3
- package/lib/internals/constants.js +2 -2
- package/lib/internals/withTooltip.js +54 -68
- package/lib/labelMessages/index.js +28 -47
- package/lib/labels/DangerLabel.js +9 -7
- package/lib/labels/DefaultLabel.js +29 -42
- package/lib/labels/InfoLabel.js +9 -7
- package/lib/labels/PrimaryLabel.js +9 -7
- package/lib/labels/SuccessLabel.js +9 -7
- package/lib/labels/WarningLabel.js +9 -7
- package/lib/labels/index.js +15 -15
- package/lib/labels/label_container/index.js +11 -10
- package/lib/list/Header.js +12 -10
- package/lib/list/Item.js +58 -72
- package/lib/list/Separator.js +6 -8
- package/lib/list/helpers.js +3 -3
- package/lib/list/index.js +81 -107
- package/lib/menus/float/MenuItem.js +27 -27
- package/lib/menus/float/SubMenuContainer.js +39 -44
- package/lib/menus/float/helpers.js +4 -4
- package/lib/menus/float/index.js +25 -25
- package/lib/menus/index.js +3 -3
- package/lib/menus/sidenav/ExpandMenu.js +12 -10
- package/lib/menus/sidenav/MenuLink.js +12 -10
- package/lib/menus/sidenav/NavMenuGroup.js +15 -13
- package/lib/menus/sidenav/NavMenuItem.js +56 -69
- package/lib/menus/sidenav/NavSubMenuItem.js +24 -28
- package/lib/menus/sidenav/helpers.js +7 -7
- package/lib/menus/sidenav/index.js +92 -119
- package/lib/menus/sidenav/popup_menu_search/EmptyList.js +12 -11
- package/lib/menus/sidenav/popup_menu_search/index.js +64 -84
- package/lib/noPermission/index.js +15 -17
- package/lib/panel/Content.js +46 -58
- package/lib/panel/DangerPanel.js +6 -8
- package/lib/panel/Default.js +45 -59
- package/lib/panel/Header.js +37 -34
- package/lib/panel/InfoPanel.js +6 -8
- package/lib/panel/PrimaryPanel.js +6 -8
- package/lib/panel/SuccessPanel.js +6 -8
- package/lib/panel/ToolBar.js +8 -6
- package/lib/panel/WarningPanel.js +6 -8
- package/lib/panel/helpers.js +13 -11
- package/lib/panel/index.js +17 -17
- package/lib/permissionValidations.js +26 -28
- package/lib/popover/PopoverText.js +8 -6
- package/lib/popover/PopoverTitle.js +8 -6
- package/lib/popover/index.js +21 -24
- package/lib/progress/Bar.js +34 -39
- package/lib/progress/index.js +19 -20
- package/lib/radio/index.js +37 -57
- package/lib/shortcuts/index.js +13 -11
- package/lib/skeleton/SkeletonContainer.js +12 -12
- package/lib/skeleton/index.js +27 -33
- package/lib/spinner/SpinnerLoading.js +46 -46
- package/lib/spinner/index.js +27 -40
- package/lib/split/Split.js +97 -113
- package/lib/split/SplitSide.js +22 -20
- package/lib/split/helpers.js +4 -4
- package/lib/split/index.js +5 -5
- package/lib/table/Body.js +47 -49
- package/lib/table/Header.js +39 -41
- package/lib/table/HeaderColumn.js +22 -22
- package/lib/table/Row.js +48 -50
- package/lib/table/RowColumn.js +37 -35
- package/lib/table/helpers.js +9 -12
- package/lib/table/index.js +89 -108
- package/lib/tabs/DropdownTabs.js +39 -43
- package/lib/tabs/Menu.js +20 -19
- package/lib/tabs/MenuTabs.js +48 -55
- package/lib/tabs/Panel.js +54 -73
- package/lib/tabs/context.js +62 -93
- package/lib/tabs/index.js +30 -35
- package/lib/tabs/tabHelpers.js +24 -21
- package/lib/toolbar/ButtonBar.js +49 -52
- package/lib/toolbar/LabelBar.js +38 -41
- package/lib/toolbar/Separator.js +6 -8
- package/lib/toolbar/ToolBarGroup.js +9 -8
- package/lib/toolbar/helpers.js +3 -3
- package/lib/toolbar/index.js +25 -26
- package/lib/tooltip/index.js +29 -33
- package/lib/treetable/Body.js +22 -33
- package/lib/treetable/Header.js +13 -15
- package/lib/treetable/Row.d.ts +1 -1
- package/lib/treetable/Row.js +107 -158
- package/lib/treetable/helpers.d.ts +1 -1
- package/lib/treetable/helpers.js +18 -24
- package/lib/treetable/index.d.ts +2 -2
- package/lib/treetable/index.js +11 -12
- package/lib/treeview/Header.js +11 -9
- package/lib/treeview/Node.js +109 -148
- package/lib/treeview/constants.js +2 -2
- package/lib/treeview/index.js +156 -221
- package/lib/uitour/helpers.js +3 -3
- package/lib/uitour/index.js +67 -106
- package/package.json +5 -14
- /package/lib/{types.d-BfM3lUbt.d.ts → types.d-DvJcBS8L.d.ts} +0 -0
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
8
|
var _moment = _interopRequireDefault(require("moment"));
|
|
10
9
|
var _PeriodList = _interopRequireDefault(require("./PeriodList"));
|
|
@@ -17,83 +16,52 @@ var _Dialog = _interopRequireDefault(require("./Dialog"));
|
|
|
17
16
|
var _hint = _interopRequireDefault(require("../../hint"));
|
|
18
17
|
var helperBase = _interopRequireWildcard(require("../base/helpers"));
|
|
19
18
|
require("../../assets/styles/periodpicker.scss");
|
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
21
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
22
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
+
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); }
|
|
21
|
+
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; }
|
|
23
22
|
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; }
|
|
24
23
|
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; }
|
|
25
24
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
26
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" ==
|
|
27
|
-
function _toPrimitive(t, r) { if ("object" !=
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
showButtonOpen = _props$showButtonOpen === void 0 ? true : _props$showButtonOpen,
|
|
37
|
-
_props$openOnFocus = props.openOnFocus,
|
|
38
|
-
openOnFocus = _props$openOnFocus === void 0 ? true : _props$openOnFocus,
|
|
39
|
-
_props$shouldCloseOnS = props.shouldCloseOnSelect,
|
|
40
|
-
shouldCloseOnSelect = _props$shouldCloseOnS === void 0 ? true : _props$shouldCloseOnS,
|
|
41
|
-
calendarColorStyle = props.calendarColorStyle,
|
|
42
|
-
_props$showCalendarIn = props.showCalendarInDialog,
|
|
43
|
-
showCalendarInDialog = _props$showCalendarIn === void 0 ? false : _props$showCalendarIn,
|
|
44
|
-
_props$dialogSize = props.dialogSize,
|
|
45
|
-
dialogSize = _props$dialogSize === void 0 ? {
|
|
25
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
26
|
+
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); }
|
|
27
|
+
const PeriodPicker = props => {
|
|
28
|
+
const {
|
|
29
|
+
showButtonOpen = true,
|
|
30
|
+
openOnFocus = true,
|
|
31
|
+
shouldCloseOnSelect = true,
|
|
32
|
+
calendarColorStyle,
|
|
33
|
+
showCalendarInDialog = false,
|
|
34
|
+
dialogSize = {
|
|
46
35
|
width: '350px',
|
|
47
36
|
height: '350px'
|
|
48
|
-
}
|
|
49
|
-
hint
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
showCalendarValueFinal = _useState10[0],
|
|
69
|
-
setShowCalendarValueFinal = _useState10[1];
|
|
70
|
-
var _useState11 = (0, _react.useState)(false),
|
|
71
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
72
|
-
showPeriodSelection = _useState12[0],
|
|
73
|
-
setShowPeriodSelection = _useState12[1];
|
|
74
|
-
var _useState13 = (0, _react.useState)(),
|
|
75
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
76
|
-
inputDimensions = _useState14[0],
|
|
77
|
-
setInputDimensions = _useState14[1];
|
|
78
|
-
var _useState15 = (0, _react.useState)(),
|
|
79
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
80
|
-
onDenied = _useState16[0],
|
|
81
|
-
setOnDenied = _useState16[1];
|
|
82
|
-
var wrapperBaseInputPeriodRef = (0, _react.useRef)(null);
|
|
83
|
-
var inputContainerRef = (0, _react.useRef)(null);
|
|
84
|
-
var inputInitialRef = (0, _react.useRef)(null);
|
|
85
|
-
var buttonOpenRef = (0, _react.useRef)(null);
|
|
86
|
-
var buttonSelectPeriodRef = (0, _react.useRef)(null);
|
|
87
|
-
var dropdownCalendarContainer = (0, _react.useRef)(null);
|
|
88
|
-
var dropdownPeriodContainer = (0, _react.useRef)(null);
|
|
89
|
-
var inputFinalRef = (0, _react.useRef)(null);
|
|
90
|
-
var onScreenResize = function onScreenResize() {
|
|
37
|
+
},
|
|
38
|
+
hint
|
|
39
|
+
} = props;
|
|
40
|
+
const [valueInitial, setValueInitial] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.initial, 'DD/MM/YYYY'));
|
|
41
|
+
const [valueFinal, setValueFinal] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.final, 'DD/MM/YYYY'));
|
|
42
|
+
const [valuePeriodSelection, setValuePeriodSelection] = (0, _react.useState)('week');
|
|
43
|
+
const [showCalendarValueInitial, setShowCalendarValueInitial] = (0, _react.useState)(false);
|
|
44
|
+
const [showCalendarValueFinal, setShowCalendarValueFinal] = (0, _react.useState)(false);
|
|
45
|
+
const [showPeriodSelection, setShowPeriodSelection] = (0, _react.useState)(false);
|
|
46
|
+
const [inputDimensions, setInputDimensions] = (0, _react.useState)();
|
|
47
|
+
const [onDenied, setOnDenied] = (0, _react.useState)();
|
|
48
|
+
const wrapperBaseInputPeriodRef = (0, _react.useRef)(null);
|
|
49
|
+
const inputContainerRef = (0, _react.useRef)(null);
|
|
50
|
+
const inputInitialRef = (0, _react.useRef)(null);
|
|
51
|
+
const buttonOpenRef = (0, _react.useRef)(null);
|
|
52
|
+
const buttonSelectPeriodRef = (0, _react.useRef)(null);
|
|
53
|
+
const dropdownCalendarContainer = (0, _react.useRef)(null);
|
|
54
|
+
const dropdownPeriodContainer = (0, _react.useRef)(null);
|
|
55
|
+
const inputFinalRef = (0, _react.useRef)(null);
|
|
56
|
+
const onScreenResize = () => {
|
|
91
57
|
var _inputContainerRef$cu;
|
|
92
|
-
|
|
58
|
+
const inputDimensionsAux = inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect();
|
|
93
59
|
setInputDimensions(inputDimensionsAux);
|
|
94
60
|
};
|
|
95
|
-
|
|
96
|
-
|
|
61
|
+
const onClickOutside = event => {
|
|
62
|
+
const {
|
|
63
|
+
target
|
|
64
|
+
} = event;
|
|
97
65
|
if (target === inputContainerRef.current || target === inputInitialRef.current || target === inputFinalRef.current || target === buttonOpenRef.current || target === buttonSelectPeriodRef.current) {
|
|
98
66
|
return;
|
|
99
67
|
}
|
|
@@ -105,7 +73,7 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
105
73
|
setShowCalendarValueFinal(false);
|
|
106
74
|
setShowPeriodSelection(false);
|
|
107
75
|
};
|
|
108
|
-
|
|
76
|
+
const onCloseCalendarWithoutFocus = event => {
|
|
109
77
|
if (event.key === 'Tab') {
|
|
110
78
|
if (wrapperBaseInputPeriodRef.current && wrapperBaseInputPeriodRef.current.contains(document.activeElement) && document.activeElement instanceof HTMLInputElement) {
|
|
111
79
|
setShowCalendarValueInitial(false);
|
|
@@ -113,48 +81,49 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
113
81
|
}
|
|
114
82
|
}
|
|
115
83
|
};
|
|
116
|
-
(0, _react.useEffect)(
|
|
84
|
+
(0, _react.useEffect)(() => {
|
|
117
85
|
window.addEventListener('resize', onScreenResize);
|
|
118
86
|
document.addEventListener('click', onClickOutside);
|
|
119
87
|
document.addEventListener('keydown', onCloseCalendarWithoutFocus);
|
|
120
88
|
if (inputContainerRef.current) onScreenResize();
|
|
121
|
-
return
|
|
89
|
+
return () => {
|
|
122
90
|
window.removeEventListener('resize', onScreenResize);
|
|
123
91
|
document.removeEventListener('click', onClickOutside);
|
|
124
92
|
document.removeEventListener('keydown', onCloseCalendarWithoutFocus);
|
|
125
93
|
};
|
|
126
94
|
}, []);
|
|
127
|
-
(0, _react.useEffect)(
|
|
128
|
-
if (valueFinal && valueInitial && (0, _moment
|
|
95
|
+
(0, _react.useEffect)(() => {
|
|
96
|
+
if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
|
|
129
97
|
setValueInitial(valueFinal);
|
|
130
98
|
setValueFinal(valueInitial);
|
|
131
99
|
} else if (props.onChange) {
|
|
132
|
-
|
|
133
|
-
|
|
100
|
+
const initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
|
|
101
|
+
const final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
|
|
134
102
|
props.onChange(undefined, '', {
|
|
135
|
-
initial
|
|
136
|
-
|
|
103
|
+
initial,
|
|
104
|
+
final
|
|
137
105
|
});
|
|
138
106
|
}
|
|
139
107
|
}, [valueInitial, valueFinal]);
|
|
140
|
-
(0, _react.useEffect)(
|
|
141
|
-
if (props.value && !((0, _moment
|
|
142
|
-
|
|
143
|
-
valueInitialProp
|
|
144
|
-
valueFinalProp
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
108
|
+
(0, _react.useEffect)(() => {
|
|
109
|
+
if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
|
|
110
|
+
const {
|
|
111
|
+
initial: valueInitialProp,
|
|
112
|
+
final: valueFinalProp
|
|
113
|
+
} = props.value;
|
|
114
|
+
let newValueInitial;
|
|
115
|
+
let newValueFinal;
|
|
116
|
+
if ((0, _moment.default)(valueInitialProp, 'YYYY-MM-DD', true).isValid()) {
|
|
117
|
+
newValueInitial = (0, _moment.default)(valueInitialProp, 'YYYY-MM-DD');
|
|
149
118
|
}
|
|
150
|
-
if ((0, _moment
|
|
151
|
-
newValueFinal = (0, _moment
|
|
119
|
+
if ((0, _moment.default)(valueFinalProp, 'YYYY-MM-DD', true).isValid()) {
|
|
120
|
+
newValueFinal = (0, _moment.default)(valueFinalProp, 'YYYY-MM-DD');
|
|
152
121
|
}
|
|
153
122
|
setValueInitial(newValueInitial);
|
|
154
123
|
setValueFinal(newValueFinal);
|
|
155
124
|
}
|
|
156
125
|
}, [props.value]);
|
|
157
|
-
|
|
126
|
+
const openCalendar = calendarName => {
|
|
158
127
|
if (calendarName === 'valueInitial') {
|
|
159
128
|
setShowCalendarValueFinal(false);
|
|
160
129
|
setShowCalendarValueInitial(true);
|
|
@@ -167,19 +136,21 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
167
136
|
setInputDimensions(inputContainerRef.current.getBoundingClientRect());
|
|
168
137
|
}
|
|
169
138
|
};
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
name
|
|
139
|
+
const onInputFocus = e => {
|
|
140
|
+
const {
|
|
141
|
+
name
|
|
142
|
+
} = e.target;
|
|
173
143
|
if (openOnFocus) openCalendar(name);
|
|
174
144
|
if (props.onFocus) props.onFocus(e);
|
|
175
145
|
};
|
|
176
|
-
|
|
146
|
+
const onInputBlur = e => {
|
|
177
147
|
if (props.onBlur) props.onBlur(e);
|
|
178
148
|
};
|
|
179
|
-
|
|
149
|
+
const onInputChange = (event, value) => {
|
|
180
150
|
if (event) {
|
|
181
|
-
|
|
182
|
-
changingAux
|
|
151
|
+
const {
|
|
152
|
+
name: changingAux
|
|
153
|
+
} = event.target;
|
|
183
154
|
if (value && value.replace(/\D/g, '').trim().length !== 0) {
|
|
184
155
|
if (changingAux === 'valueInitial') {
|
|
185
156
|
setValueInitial(undefined);
|
|
@@ -189,11 +160,11 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
189
160
|
}
|
|
190
161
|
}
|
|
191
162
|
};
|
|
192
|
-
|
|
163
|
+
const setValue = function (event, value) {
|
|
193
164
|
var _inputInitialRef$curr, _inputFinalRef$curren;
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
165
|
+
let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
166
|
+
const valueDateName = event ? event.target.name : '';
|
|
167
|
+
const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
|
|
197
168
|
if (showCalendarValueInitial) (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
|
|
198
169
|
if (showCalendarValueFinal) (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
|
|
199
170
|
if (valueDateName === 'valueInitial') {
|
|
@@ -204,47 +175,45 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
204
175
|
if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
|
|
205
176
|
var _inputFinalRef$curren2;
|
|
206
177
|
(_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
|
|
207
|
-
setTimeout(
|
|
208
|
-
return setShowCalendarValueFinal(true);
|
|
209
|
-
}, 100);
|
|
178
|
+
setTimeout(() => setShowCalendarValueFinal(true), 100);
|
|
210
179
|
}
|
|
211
180
|
if (shouldCloseOnSelect) {
|
|
212
181
|
setShowCalendarValueInitial(false);
|
|
213
182
|
setShowCalendarValueFinal(false);
|
|
214
183
|
}
|
|
215
184
|
};
|
|
216
|
-
|
|
217
|
-
|
|
185
|
+
const shouldDisable = () => {
|
|
186
|
+
const {
|
|
187
|
+
disabled
|
|
188
|
+
} = props;
|
|
218
189
|
return disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
|
|
219
190
|
};
|
|
220
|
-
|
|
191
|
+
const getButtonOpen = () => {
|
|
221
192
|
if (!showButtonOpen) return null;
|
|
222
|
-
return /*#__PURE__*/_react
|
|
193
|
+
return /*#__PURE__*/_react.default.createElement(_buttons.default, {
|
|
223
194
|
key: "button-open",
|
|
224
195
|
boxShadow: false,
|
|
225
|
-
icon: /*#__PURE__*/_react
|
|
196
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
226
197
|
name: "calendar"
|
|
227
198
|
}),
|
|
228
|
-
onClick:
|
|
199
|
+
onClick: () => {
|
|
229
200
|
var _inputInitialRef$curr2;
|
|
230
201
|
(_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
|
|
231
202
|
openCalendar('valueInitial');
|
|
232
203
|
},
|
|
233
204
|
customClass: "calendar-button",
|
|
234
205
|
tabIndex: -1,
|
|
235
|
-
targetRef:
|
|
206
|
+
targetRef: ref => {
|
|
236
207
|
buttonOpenRef.current = ref;
|
|
237
208
|
},
|
|
238
209
|
disabled: shouldDisable()
|
|
239
210
|
});
|
|
240
211
|
};
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
};
|
|
247
|
-
var openPeriodSelecion = function openPeriodSelecion() {
|
|
212
|
+
const getPeriodSelection = (valuePeriodSelectionAux, setPeriodDates) => /*#__PURE__*/_react.default.createElement(_PeriodList.default, {
|
|
213
|
+
selected: valuePeriodSelectionAux,
|
|
214
|
+
handleOnSelect: setPeriodDates
|
|
215
|
+
});
|
|
216
|
+
const openPeriodSelecion = () => {
|
|
248
217
|
setShowCalendarValueFinal(false);
|
|
249
218
|
setShowCalendarValueInitial(false);
|
|
250
219
|
setShowPeriodSelection(true);
|
|
@@ -252,43 +221,31 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
252
221
|
setInputDimensions(inputContainerRef.current.getBoundingClientRect());
|
|
253
222
|
}
|
|
254
223
|
};
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
})
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
currentDate: value !== undefined ? (0, _moment["default"])(value) : (0, _moment["default"])(),
|
|
281
|
-
onDateChange: function onDateChange(date) {
|
|
282
|
-
return setValue({
|
|
283
|
-
target: {
|
|
284
|
-
name: valueDateName
|
|
285
|
-
}
|
|
286
|
-
}, date);
|
|
287
|
-
},
|
|
288
|
-
colorStyle: calendarColorStyleCalendar
|
|
289
|
-
});
|
|
290
|
-
};
|
|
291
|
-
var setPeriodDates = function setPeriodDates(selected, dates) {
|
|
224
|
+
const getButtonSelectPeriod = () => /*#__PURE__*/_react.default.createElement(_buttons.default, {
|
|
225
|
+
key: "button-select-period",
|
|
226
|
+
boxShadow: false,
|
|
227
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
228
|
+
name: "more1"
|
|
229
|
+
}),
|
|
230
|
+
onBlur: () => setTimeout(() => setShowPeriodSelection(false), 100),
|
|
231
|
+
onClick: () => openPeriodSelecion(),
|
|
232
|
+
customClass: "calendar-button",
|
|
233
|
+
tabIndex: -1,
|
|
234
|
+
targetRef: ref => {
|
|
235
|
+
buttonSelectPeriodRef.current = ref;
|
|
236
|
+
},
|
|
237
|
+
disabled: shouldDisable()
|
|
238
|
+
});
|
|
239
|
+
const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
|
|
240
|
+
currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
|
|
241
|
+
onDateChange: date => setValue({
|
|
242
|
+
target: {
|
|
243
|
+
name: valueDateName
|
|
244
|
+
}
|
|
245
|
+
}, date),
|
|
246
|
+
colorStyle: calendarColorStyleCalendar
|
|
247
|
+
});
|
|
248
|
+
const setPeriodDates = (selected, dates) => {
|
|
292
249
|
if (selected === 'custom') {
|
|
293
250
|
var _inputInitialRef$curr3;
|
|
294
251
|
(_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
|
|
@@ -305,124 +262,118 @@ var PeriodPicker = function PeriodPicker(props) {
|
|
|
305
262
|
setShowPeriodSelection(false);
|
|
306
263
|
}
|
|
307
264
|
};
|
|
308
|
-
|
|
265
|
+
const getWrapperComponentCalendarValueInitial = () => {
|
|
309
266
|
if (onDenied && onDenied.readOnly) return null;
|
|
310
267
|
if (showCalendarInDialog) {
|
|
311
|
-
return /*#__PURE__*/_react
|
|
268
|
+
return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
|
|
312
269
|
dialogSize: dialogSize,
|
|
313
270
|
onOpenChange: setShowCalendarValueInitial
|
|
314
271
|
}, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
|
|
315
272
|
}
|
|
316
|
-
return /*#__PURE__*/_react
|
|
273
|
+
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
317
274
|
targetElement: inputContainerRef.current,
|
|
318
275
|
topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
|
|
319
276
|
leftPosition: inputDimensions ? inputDimensions.left : '',
|
|
320
277
|
width: inputDimensions ? inputDimensions.width : '',
|
|
321
|
-
dropdownRef:
|
|
278
|
+
dropdownRef: el => {
|
|
322
279
|
dropdownCalendarContainer.current = el;
|
|
323
280
|
}
|
|
324
281
|
}, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
|
|
325
282
|
};
|
|
326
|
-
|
|
283
|
+
const getWrapperComponentCalendarValueFinal = () => {
|
|
327
284
|
if (onDenied && onDenied.readOnly) return null;
|
|
328
285
|
if (showCalendarInDialog) {
|
|
329
|
-
return /*#__PURE__*/_react
|
|
286
|
+
return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
|
|
330
287
|
dialogSize: dialogSize,
|
|
331
288
|
onOpenChange: setShowCalendarValueFinal
|
|
332
289
|
}, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
|
|
333
290
|
}
|
|
334
|
-
return /*#__PURE__*/_react
|
|
291
|
+
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
335
292
|
targetElement: inputContainerRef.current,
|
|
336
293
|
topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
|
|
337
294
|
leftPosition: inputDimensions ? inputDimensions.left : '',
|
|
338
295
|
width: inputDimensions ? inputDimensions.width : '',
|
|
339
|
-
dropdownRef:
|
|
296
|
+
dropdownRef: el => {
|
|
340
297
|
dropdownCalendarContainer.current = el;
|
|
341
298
|
}
|
|
342
299
|
}, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
|
|
343
300
|
};
|
|
344
|
-
|
|
301
|
+
const getWrapperComponentPeriodSelection = () => {
|
|
345
302
|
if (showCalendarInDialog) {
|
|
346
|
-
return /*#__PURE__*/_react
|
|
303
|
+
return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
|
|
347
304
|
dialogSize: dialogSize,
|
|
348
305
|
onOpenChange: setShowPeriodSelection
|
|
349
306
|
}, getPeriodSelection(valuePeriodSelection, setPeriodDates));
|
|
350
307
|
}
|
|
351
|
-
return /*#__PURE__*/_react
|
|
308
|
+
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
352
309
|
targetElement: inputContainerRef.current,
|
|
353
310
|
topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
|
|
354
311
|
leftPosition: inputDimensions ? inputDimensions.left : '',
|
|
355
312
|
width: inputDimensions ? inputDimensions.width : '',
|
|
356
|
-
dropdownRef:
|
|
313
|
+
dropdownRef: el => {
|
|
357
314
|
dropdownPeriodContainer.current = el;
|
|
358
315
|
}
|
|
359
316
|
}, getPeriodSelection(valuePeriodSelection, setPeriodDates));
|
|
360
317
|
};
|
|
361
318
|
if (onDenied && onDenied.unvisible) return null;
|
|
362
|
-
return /*#__PURE__*/_react
|
|
319
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
363
320
|
ref: wrapperBaseInputPeriodRef,
|
|
364
321
|
className: "input-base-component"
|
|
365
|
-
}, props.label && /*#__PURE__*/_react
|
|
322
|
+
}, props.label && /*#__PURE__*/_react.default.createElement("div", {
|
|
366
323
|
className: "labelcontainer"
|
|
367
|
-
}, /*#__PURE__*/_react
|
|
324
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
368
325
|
className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase')
|
|
369
|
-
}, props.label, props.required && /*#__PURE__*/_react
|
|
326
|
+
}, props.label, props.required && /*#__PURE__*/_react.default.createElement("span", {
|
|
370
327
|
className: "-requiredlabel"
|
|
371
|
-
}, "*"))), /*#__PURE__*/_react
|
|
328
|
+
}, "*"))), /*#__PURE__*/_react.default.createElement("div", {
|
|
372
329
|
className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
|
|
373
|
-
value: !valueInitial ? '' : (0, _moment
|
|
330
|
+
value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
|
|
374
331
|
disabled: shouldDisable()
|
|
375
332
|
}))),
|
|
376
333
|
ref: inputContainerRef
|
|
377
|
-
}, /*#__PURE__*/_react
|
|
334
|
+
}, /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
|
|
378
335
|
permissionAttr: props.permissionAttr,
|
|
379
336
|
name: "valueInitial",
|
|
380
|
-
value: !valueInitial ? '' : (0, _moment
|
|
337
|
+
value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
|
|
381
338
|
mask: "00/00/0000",
|
|
382
|
-
onComplete:
|
|
339
|
+
onComplete: (e, date) => {
|
|
383
340
|
setValue(e, date, true);
|
|
384
341
|
},
|
|
385
342
|
onFocus: onInputFocus,
|
|
386
|
-
onBlur:
|
|
387
|
-
return onInputBlur(e);
|
|
388
|
-
},
|
|
343
|
+
onBlur: e => onInputBlur(e),
|
|
389
344
|
isDateField: true,
|
|
390
345
|
onChange: onInputChange,
|
|
391
|
-
inputRef:
|
|
346
|
+
inputRef: el => {
|
|
392
347
|
inputInitialRef.current = el;
|
|
393
348
|
},
|
|
394
|
-
handlerSetOnDenied:
|
|
349
|
+
handlerSetOnDenied: denied => {
|
|
395
350
|
setOnDenied(denied);
|
|
396
351
|
},
|
|
397
352
|
required: props.required
|
|
398
|
-
}), /*#__PURE__*/_react
|
|
353
|
+
}), /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
399
354
|
name: "arrow_right",
|
|
400
355
|
customClass: "separation_icon"
|
|
401
|
-
}), /*#__PURE__*/_react
|
|
356
|
+
}), /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
|
|
402
357
|
permissionAttr: props.permissionAttr,
|
|
403
358
|
name: "valueFinal",
|
|
404
|
-
value: !valueFinal ? '' : (0, _moment
|
|
359
|
+
value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
|
|
405
360
|
mask: "00/00/0000",
|
|
406
361
|
isDateField: true,
|
|
407
|
-
onComplete:
|
|
362
|
+
onComplete: (e, date) => {
|
|
408
363
|
setValue(e, date, true);
|
|
409
364
|
},
|
|
410
365
|
onFocus: onInputFocus,
|
|
411
|
-
onBlur:
|
|
412
|
-
return onInputBlur(e);
|
|
413
|
-
},
|
|
366
|
+
onBlur: e => onInputBlur(e),
|
|
414
367
|
onChange: onInputChange,
|
|
415
|
-
inputRef:
|
|
368
|
+
inputRef: el => {
|
|
416
369
|
inputFinalRef.current = el;
|
|
417
370
|
},
|
|
418
|
-
handlerSetOnDenied:
|
|
419
|
-
return setOnDenied(denied);
|
|
420
|
-
},
|
|
371
|
+
handlerSetOnDenied: denied => setOnDenied(denied),
|
|
421
372
|
required: props.required
|
|
422
|
-
}), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getWrapperComponentCalendarValueInitial(), showCalendarValueFinal && getWrapperComponentCalendarValueFinal(), showPeriodSelection && getWrapperComponentPeriodSelection(), /*#__PURE__*/_react
|
|
373
|
+
}), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getWrapperComponentCalendarValueInitial(), showCalendarValueFinal && getWrapperComponentCalendarValueFinal(), showPeriodSelection && getWrapperComponentPeriodSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
|
|
423
374
|
visible: !!hint,
|
|
424
375
|
customClass: "hint",
|
|
425
376
|
description: hint
|
|
426
377
|
}), props.errorMessages && helperBase.getErrorMessages(props.errorMessages));
|
|
427
378
|
};
|
|
428
|
-
var _default = exports
|
|
379
|
+
var _default = exports.default = PeriodPicker;
|