@rolster/react-components 18.20.7 → 18.21.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/assets/{index-Cp7p-Y-D.css → index-B4R0Qgg4.css} +21 -21
- package/dist/cjs/index.js +1080 -651
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-Cp7p-Y-D.css → index-B4R0Qgg4.css} +21 -21
- package/dist/es/index.js +1078 -649
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Avatar/Avatar.js +6 -2
- package/dist/esm/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.js +10 -3
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.js +6 -2
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/atoms/CheckBox/CheckBox.css +1 -1
- package/dist/esm/components/atoms/CheckBox/CheckBox.js +10 -5
- package/dist/esm/components/atoms/CheckBox/CheckBox.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Icon.js +6 -2
- package/dist/esm/components/atoms/Icon/Icon.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +9 -6
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/atoms/InputPassword/InputPassword.js +8 -5
- package/dist/esm/components/atoms/InputPassword/InputPassword.js.map +1 -1
- package/dist/esm/components/atoms/Poster/Poster.js +6 -2
- package/dist/esm/components/atoms/Poster/Poster.js.map +1 -1
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js +6 -2
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/esm/components/atoms/RadioButton/RadioButton.css +1 -1
- package/dist/esm/components/atoms/RadioButton/RadioButton.js +6 -2
- package/dist/esm/components/atoms/RadioButton/RadioButton.js.map +1 -1
- package/dist/esm/components/atoms/Switch/Switch.css +1 -1
- package/dist/esm/components/atoms/Switch/Switch.js +10 -5
- package/dist/esm/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/esm/components/definitions.d.ts +1 -1
- package/dist/esm/components/molecules/Alert/Alert.js +7 -3
- package/dist/esm/components/molecules/Alert/Alert.js.map +1 -1
- package/dist/esm/components/molecules/Ballot/Ballot.js +8 -3
- package/dist/esm/components/molecules/Ballot/Ballot.js.map +1 -1
- package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.js +8 -3
- package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.js.map +1 -1
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +2 -2
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.d.ts +1 -1
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js +11 -9
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js.map +1 -1
- package/dist/esm/components/molecules/FieldMoney/FieldMoney.js +14 -5
- package/dist/esm/components/molecules/FieldMoney/FieldMoney.js.map +1 -1
- package/dist/esm/components/molecules/FieldNumber/FieldNumber.js +14 -5
- package/dist/esm/components/molecules/FieldNumber/FieldNumber.js.map +1 -1
- package/dist/esm/components/molecules/FieldPassword/FieldPassword.js +15 -6
- package/dist/esm/components/molecules/FieldPassword/FieldPassword.js.map +1 -1
- package/dist/esm/components/molecules/FieldText/FieldText.js +14 -5
- package/dist/esm/components/molecules/FieldText/FieldText.js.map +1 -1
- package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.js +7 -7
- package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.js.map +1 -1
- package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.js +7 -7
- package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.js.map +1 -1
- package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.js +7 -7
- package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.js.map +1 -1
- package/dist/esm/components/molecules/MessageFormError/MessageFormError.js +16 -2
- package/dist/esm/components/molecules/MessageFormError/MessageFormError.js.map +1 -1
- package/dist/esm/components/molecules/Pagination/Pagination.js +23 -32
- package/dist/esm/components/molecules/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/molecules/PickerDay/PickerDay.d.ts +1 -1
- package/dist/esm/components/molecules/PickerDay/PickerDay.js +53 -24
- package/dist/esm/components/molecules/PickerDay/PickerDay.js.map +1 -1
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.d.ts +1 -1
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.js +55 -29
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.js.map +1 -1
- package/dist/esm/components/molecules/PickerMonth/PickerMonth.d.ts +1 -1
- package/dist/esm/components/molecules/PickerMonth/PickerMonth.js +57 -34
- package/dist/esm/components/molecules/PickerMonth/PickerMonth.js.map +1 -1
- package/dist/esm/components/molecules/{PickerMonthTitle/PickerMonthTitle.css → PickerSelectorTitle/PickerSelectorTitle.css} +3 -3
- package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.d.ts +15 -0
- package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.js +65 -0
- package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.js.map +1 -0
- package/dist/esm/components/molecules/PickerYear/PickerYear.css +7 -7
- package/dist/esm/components/molecules/PickerYear/PickerYear.d.ts +1 -1
- package/dist/esm/components/molecules/PickerYear/PickerYear.js +45 -38
- package/dist/esm/components/molecules/PickerYear/PickerYear.js.map +1 -1
- package/dist/esm/components/molecules/index.d.ts +1 -1
- package/dist/esm/components/molecules/index.js +1 -1
- package/dist/esm/components/molecules/index.js.map +1 -1
- package/dist/esm/components/organisms/Card/Card.js +6 -2
- package/dist/esm/components/organisms/Card/Card.js.map +1 -1
- package/dist/esm/components/organisms/Confirmation/Confirmation.css +5 -5
- package/dist/esm/components/organisms/Confirmation/Confirmation.d.ts +1 -1
- package/dist/esm/components/organisms/Confirmation/Confirmation.js +7 -4
- package/dist/esm/components/organisms/Confirmation/Confirmation.js.map +1 -1
- package/dist/esm/components/organisms/Datatable/Datatable.js +31 -9
- package/dist/esm/components/organisms/Datatable/Datatable.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +5 -5
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +43 -18
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js +50 -41
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js.map +1 -1
- package/dist/esm/components/organisms/FieldDate/FieldDate.d.ts +5 -4
- package/dist/esm/components/organisms/FieldDate/FieldDate.js +39 -30
- package/dist/esm/components/organisms/FieldDate/FieldDate.js.map +1 -1
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.d.ts +5 -4
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js +35 -26
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +35 -13
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js +41 -29
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js.map +1 -1
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.js +6 -2
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.js.map +1 -1
- package/dist/esm/components/organisms/Modal/Modal.js +6 -2
- package/dist/esm/components/organisms/Modal/Modal.js.map +1 -1
- package/dist/esm/components/organisms/PickerDate/PickerDate.css +1 -1
- package/dist/esm/components/organisms/PickerDate/PickerDate.js +76 -53
- package/dist/esm/components/organisms/PickerDate/PickerDate.js.map +1 -1
- package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.d.ts +1 -1
- package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.js +61 -40
- package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.js.map +1 -1
- package/dist/esm/components/organisms/Snackbar/Snackbar.d.ts +1 -1
- package/dist/esm/components/organisms/Snackbar/Snackbar.js +32 -22
- package/dist/esm/components/organisms/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/context.js +6 -5
- package/dist/esm/context.js.map +1 -1
- package/dist/esm/controllers/ListController.js +7 -5
- package/dist/esm/controllers/ListController.js.map +1 -1
- package/dist/esm/controllers/index.d.ts +0 -1
- package/dist/esm/controllers/index.js +0 -1
- package/dist/esm/controllers/index.js.map +1 -1
- package/dist/esm/helpers/css.js +7 -10
- package/dist/esm/helpers/css.js.map +1 -1
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/index.js +1 -0
- package/dist/esm/helpers/index.js.map +1 -1
- package/dist/esm/helpers/language.d.ts +4 -0
- package/dist/esm/helpers/language.js +102 -0
- package/dist/esm/helpers/language.js.map +1 -0
- package/package.json +6 -6
- package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.d.ts +0 -15
- package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.js +0 -53
- package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.js.map +0 -1
- package/dist/esm/controllers/RenderClassStatusController.d.ts +0 -2
- package/dist/esm/controllers/RenderClassStatusController.js +0 -10
- package/dist/esm/controllers/RenderClassStatusController.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldDateRange.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDateRange/FieldDateRange.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldDateRange.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDateRange/FieldDateRange.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,23 +1,45 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { i18nSubscribe } from '@rolster/i18n';
|
|
3
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { renderClassStatus } from '../../../helpers';
|
|
3
5
|
import { reactI18n } from '../../../i18n';
|
|
4
|
-
import { RlsIcon } from '../../atoms';
|
|
5
|
-
import { RlsBallot
|
|
6
|
+
import { RlsIcon } from '../../atoms/Icon/Icon';
|
|
7
|
+
import { RlsBallot } from '../../molecules/Ballot/Ballot';
|
|
8
|
+
import { RlsMessageFormError } from '../../molecules/MessageFormError/MessageFormError';
|
|
6
9
|
import { useFieldSelect } from './FieldSelectController';
|
|
7
10
|
import './FieldSelect.css';
|
|
8
11
|
export function RlsFieldSelectTemplate(props) {
|
|
9
12
|
const select = useFieldSelect(props);
|
|
10
13
|
const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
const [labels, setLabels] = useState({
|
|
15
|
+
listEmptyDescription: reactI18n('listEmptyDescription'),
|
|
16
|
+
listEmptyTitle: reactI18n('listEmptyTitle')
|
|
17
|
+
});
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
return i18nSubscribe(() => {
|
|
20
|
+
setLabels({
|
|
21
|
+
listEmptyDescription: reactI18n('listEmptyDescription'),
|
|
22
|
+
listEmptyTitle: reactI18n('listEmptyTitle')
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
}, []);
|
|
26
|
+
const _disabled = useMemo(() => {
|
|
27
|
+
return formControl?.disabled || props.disabled;
|
|
28
|
+
}, [formControl?.disabled, props.disabled]);
|
|
29
|
+
const className = useMemo(() => {
|
|
30
|
+
return renderClassStatus('rls-field-box', {
|
|
31
|
+
disabled: _disabled,
|
|
32
|
+
error: formControl?.wrong,
|
|
33
|
+
focused: select.focused && !_disabled
|
|
34
|
+
}, 'rls-field-list rls-field-select');
|
|
35
|
+
}, [formControl?.wrong, select.focused, _disabled]);
|
|
36
|
+
const classNameList = useMemo(() => {
|
|
37
|
+
return renderClassStatus('rls-field-list__suggestions', {
|
|
38
|
+
higher: select.higher,
|
|
39
|
+
visible: select.modalIsVisible
|
|
40
|
+
});
|
|
41
|
+
}, [select.modalIsVisible, select.higher]);
|
|
42
|
+
return (_jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), _jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: _jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsx("div", { className: classNameList, children: select.modalIsVisible && (_jsxs(_Fragment, { children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__empty__description", children: [_jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), _jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), _jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })) })] }));
|
|
21
43
|
}
|
|
22
44
|
export function RlsFieldSelect(props) {
|
|
23
45
|
return (_jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: _jsx("span", { children: element.title }) })) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
1
2
|
import { useListController } from '../../../controllers';
|
|
2
3
|
export function useFieldSelect(props) {
|
|
3
4
|
const controller = useListController(props);
|
|
4
|
-
|
|
5
|
+
const onFocusInput = useCallback(() => {
|
|
5
6
|
controller.setState({ focused: true });
|
|
6
|
-
}
|
|
7
|
-
|
|
7
|
+
}, [controller.setState]);
|
|
8
|
+
const onBlurInput = useCallback(() => {
|
|
8
9
|
controller.setState({ focused: false });
|
|
9
|
-
}
|
|
10
|
-
|
|
10
|
+
}, [controller.setState]);
|
|
11
|
+
const onClickInput = useCallback(() => {
|
|
11
12
|
controller.setState({ modalIsVisible: true });
|
|
12
|
-
}
|
|
13
|
-
|
|
13
|
+
}, [controller.setState]);
|
|
14
|
+
const onKeydownInput = useCallback((event) => {
|
|
14
15
|
switch (event.code) {
|
|
15
16
|
case 'Space':
|
|
16
17
|
case 'Enter':
|
|
@@ -24,8 +25,8 @@ export function useFieldSelect(props) {
|
|
|
24
25
|
controller.navigationInput(event);
|
|
25
26
|
break;
|
|
26
27
|
}
|
|
27
|
-
}
|
|
28
|
-
|
|
28
|
+
}, [controller.setState, controller.navigationInput]);
|
|
29
|
+
const onClickAction = useCallback(() => {
|
|
29
30
|
const removable = !props.unremovable && !!controller.value;
|
|
30
31
|
if (removable) {
|
|
31
32
|
controller.setState({ modalIsVisible: false });
|
|
@@ -37,35 +38,46 @@ export function useFieldSelect(props) {
|
|
|
37
38
|
controller.setState({ modalIsVisible });
|
|
38
39
|
modalIsVisible && controller.inputRef?.current?.focus();
|
|
39
40
|
}
|
|
40
|
-
}
|
|
41
|
-
|
|
41
|
+
}, [
|
|
42
|
+
controller.modalIsVisible,
|
|
43
|
+
controller.value,
|
|
44
|
+
controller.setState,
|
|
45
|
+
controller.setFormValue,
|
|
46
|
+
props.unremovable,
|
|
47
|
+
props.onValue
|
|
48
|
+
]);
|
|
49
|
+
const onClickBackdrop = useCallback(() => {
|
|
42
50
|
controller.setState({ modalIsVisible: false });
|
|
43
|
-
}
|
|
44
|
-
|
|
51
|
+
}, [controller.setState]);
|
|
52
|
+
const onChange = useCallback((element) => {
|
|
53
|
+
controller.inputRef?.current?.focus();
|
|
54
|
+
if (props.onSelect) {
|
|
55
|
+
controller.setState({ modalIsVisible: false });
|
|
56
|
+
element.value && props.onSelect(element.value);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
controller.setFormValue(element);
|
|
60
|
+
controller.setState({ modalIsVisible: false });
|
|
61
|
+
}
|
|
62
|
+
props.onValue && props.onValue(element.value);
|
|
63
|
+
}, [
|
|
64
|
+
controller.setState,
|
|
65
|
+
controller.setFormValue,
|
|
66
|
+
props.onSelect,
|
|
67
|
+
props.onValue
|
|
68
|
+
]);
|
|
69
|
+
const onClickElement = useCallback((element) => {
|
|
45
70
|
return () => {
|
|
46
71
|
onChange(element);
|
|
47
72
|
};
|
|
48
|
-
}
|
|
49
|
-
|
|
73
|
+
}, []);
|
|
74
|
+
const onKeydownElement = useCallback((element) => {
|
|
50
75
|
return (event) => {
|
|
51
76
|
event.code === 'Enter'
|
|
52
77
|
? onChange(element)
|
|
53
78
|
: controller.navigationElement(event);
|
|
54
79
|
};
|
|
55
|
-
}
|
|
56
|
-
function onChange(element) {
|
|
57
|
-
const { onSelect, onValue } = props;
|
|
58
|
-
controller.inputRef?.current?.focus();
|
|
59
|
-
if (onSelect) {
|
|
60
|
-
controller.setState({ modalIsVisible: false });
|
|
61
|
-
element.value && onSelect(element.value);
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
controller.setFormValue(element);
|
|
65
|
-
controller.setState({ modalIsVisible: false });
|
|
66
|
-
}
|
|
67
|
-
onValue && onValue(element.value);
|
|
68
|
-
}
|
|
80
|
+
}, [controller.navigationElement]);
|
|
69
81
|
return {
|
|
70
82
|
...controller,
|
|
71
83
|
onBlurInput,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldSelectController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectController.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldSelectController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectController.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { renderClassStatus } from '../../../helpers';
|
|
3
4
|
import './FormNavigation.css';
|
|
4
5
|
export function RlsFormNavigation({ children, visible, rlsTheme }) {
|
|
5
|
-
|
|
6
|
+
const className = useMemo(() => {
|
|
7
|
+
return renderClassStatus('rls-form-navigation', { visible });
|
|
8
|
+
}, [visible]);
|
|
9
|
+
return (_jsx("div", { className: className, "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-form-navigation__body", children: children }) }));
|
|
6
10
|
}
|
|
7
11
|
//# sourceMappingURL=FormNavigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormNavigation.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FormNavigation/FormNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"FormNavigation.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FormNavigation/FormNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,sBAAsB,CAAC;AAM9B,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,QAAQ,EACY;IACpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,eAAa,QAAQ,YAC5C,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,GACvD,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
2
3
|
import ReactDOM from 'react-dom';
|
|
3
|
-
import {
|
|
4
|
+
import { renderClassStatus } from '../../../helpers';
|
|
4
5
|
import './Modal.css';
|
|
5
6
|
export function RlsModal({ children, overflow, visible, rlsTheme }) {
|
|
6
|
-
|
|
7
|
+
const className = useMemo(() => {
|
|
8
|
+
return renderClassStatus('rls-modal', { overflow, visible });
|
|
9
|
+
}, [overflow, visible]);
|
|
10
|
+
return ReactDOM.createPortal(_jsxs("div", { className: className, "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-modal__component", children: children }), _jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
|
|
7
11
|
}
|
|
8
12
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,aAAa,CAAC;AAOrB,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACG;IACX,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,iBAAiB,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,OAAO,QAAQ,CAAC,YAAY,CAC1B,eAAK,SAAS,EAAE,SAAS,eAAa,QAAQ,aAC5C,cAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,EAEtD,cAAK,SAAS,EAAC,qBAAqB,GAAO,IACvC,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ,CAAC"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
background: var(--rls-theme-color-100);
|
|
16
16
|
border-radius: var(--rls-sizing-x4);
|
|
17
17
|
}
|
|
18
|
-
.rls-picker-date__header .rls-picker-
|
|
18
|
+
.rls-picker-date__header .rls-picker-selector-title {
|
|
19
19
|
padding: 0rem var(--rls-sizing-x6);
|
|
20
20
|
box-sizing: border-box;
|
|
21
21
|
}
|
|
@@ -1,71 +1,94 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { itIsDefined } from '@rolster/commons';
|
|
3
2
|
import { PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
|
|
4
|
-
import {
|
|
3
|
+
import { dateFormatTemplate } from '@rolster/dates';
|
|
5
4
|
import { useReactControl } from '@rolster/react-forms';
|
|
6
|
-
import { useEffect, useState } from 'react';
|
|
7
|
-
import {
|
|
5
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
6
|
+
import { renderClassStatus } from '../../../helpers';
|
|
8
7
|
import { reactI18n } from '../../../i18n';
|
|
9
|
-
import { RlsButton } from '../../atoms';
|
|
10
|
-
import { RlsPickerDay
|
|
8
|
+
import { RlsButton } from '../../atoms/Button/Button';
|
|
9
|
+
import { RlsPickerDay } from '../../molecules/PickerDay/PickerDay';
|
|
10
|
+
import { RlsPickerMonth } from '../../molecules/PickerMonth/PickerMonth';
|
|
11
|
+
import { RlsPickerSelectorTitle } from '../../molecules/PickerSelectorTitle/PickerSelectorTitle';
|
|
12
|
+
import { RlsPickerYear } from '../../molecules/PickerYear/PickerYear';
|
|
11
13
|
import './PickerDate.css';
|
|
12
|
-
|
|
14
|
+
import { i18nSubscribe } from '@rolster/i18n';
|
|
15
|
+
const formatTitle = '{dw}, {mx} {dd} de {aa}';
|
|
13
16
|
export function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
|
|
14
|
-
const today = new Date(); // Initial current date in component
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
const
|
|
17
|
+
const today = useRef(new Date()); // Initial current date in component
|
|
18
|
+
const _date = useMemo(() => {
|
|
19
|
+
return formControl?.value ?? date ?? today.current;
|
|
20
|
+
}, [formControl?.value, date]);
|
|
21
|
+
const yearControl = useReactControl(_date.getFullYear());
|
|
22
|
+
const dayControl = useReactControl(_date.getDate());
|
|
23
|
+
const monthControl = useReactControl(_date.getMonth());
|
|
24
|
+
const [value, setValue] = useState(_date);
|
|
20
25
|
const [visibility, setVisibility] = useState('DAY');
|
|
26
|
+
const [labels, setLabels] = useState({
|
|
27
|
+
dateActionCancel: reactI18n('dateActionCancel'),
|
|
28
|
+
dateActionSelect: reactI18n('dateActionSelect'),
|
|
29
|
+
dateActionToday: reactI18n('dateActionToday')
|
|
30
|
+
});
|
|
31
|
+
const classNameComponent = useMemo(() => {
|
|
32
|
+
return renderClassStatus('rls-picker-date__component', {
|
|
33
|
+
day: visibility === 'DAY',
|
|
34
|
+
month: visibility === 'MONTH',
|
|
35
|
+
year: visibility === 'YEAR'
|
|
36
|
+
});
|
|
37
|
+
}, [visibility]);
|
|
38
|
+
const title = useMemo(() => {
|
|
39
|
+
return dateFormatTemplate(_date, formatTitle);
|
|
40
|
+
}, [_date]);
|
|
41
|
+
const itIsDisabledToday = useMemo(() => dateOutRange({
|
|
42
|
+
date: today.current,
|
|
43
|
+
maxDate,
|
|
44
|
+
minDate
|
|
45
|
+
}), [today.current, maxDate, minDate]);
|
|
21
46
|
useEffect(() => {
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
47
|
+
const date = verifyDateRange({ date: _date, minDate, maxDate });
|
|
48
|
+
setValue(date);
|
|
49
|
+
formControl?.setValue(date);
|
|
50
|
+
return i18nSubscribe(() => {
|
|
51
|
+
setLabels({
|
|
52
|
+
dateActionCancel: reactI18n('dateActionCancel'),
|
|
53
|
+
dateActionSelect: reactI18n('dateActionSelect'),
|
|
54
|
+
dateActionToday: reactI18n('dateActionToday')
|
|
55
|
+
});
|
|
26
56
|
});
|
|
27
|
-
setValue(dateRange);
|
|
28
|
-
formControl?.setValue(dateRange);
|
|
29
57
|
}, []);
|
|
30
58
|
useEffect(() => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
itIsDefined(monthControl.value) &&
|
|
36
|
-
setValue(assignMonthInDate(value, monthControl.value));
|
|
37
|
-
}, [monthControl.value]);
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
itIsDefined(dayControl.value) &&
|
|
40
|
-
setValue(assignDayInDate(value, dayControl.value));
|
|
41
|
-
}, [dayControl.value]);
|
|
42
|
-
function onVisibilityDay() {
|
|
59
|
+
setValue(new Date(yearControl.value, monthControl.value, dayControl.value));
|
|
60
|
+
}, [yearControl.value, monthControl.value, dayControl.value]);
|
|
61
|
+
const onVisibilityDay = useCallback(() => {
|
|
43
62
|
setVisibility('DAY');
|
|
44
|
-
}
|
|
45
|
-
|
|
63
|
+
}, []);
|
|
64
|
+
const onVisibilityMonth = useCallback(() => {
|
|
46
65
|
setVisibility('MONTH');
|
|
47
|
-
}
|
|
48
|
-
|
|
66
|
+
}, []);
|
|
67
|
+
const onVisibilityYear = useCallback(() => {
|
|
49
68
|
setVisibility('YEAR');
|
|
50
|
-
}
|
|
51
|
-
|
|
69
|
+
}, []);
|
|
70
|
+
const onCancel = useCallback(() => {
|
|
52
71
|
onListener && onListener({ event: PickerListenerEvent.Cancel });
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
yearControl.setValue(today.getFullYear());
|
|
56
|
-
dayControl.setValue(today.getDate());
|
|
57
|
-
monthControl.setValue(today.getMonth());
|
|
58
|
-
formControl?.setValue(today);
|
|
59
|
-
onListener &&
|
|
60
|
-
|
|
61
|
-
|
|
72
|
+
}, [onListener]);
|
|
73
|
+
const onToday = useCallback(() => {
|
|
74
|
+
yearControl.setValue(today.current.getFullYear());
|
|
75
|
+
dayControl.setValue(today.current.getDate());
|
|
76
|
+
monthControl.setValue(today.current.getMonth());
|
|
77
|
+
formControl?.setValue(today.current);
|
|
78
|
+
onListener &&
|
|
79
|
+
onListener({
|
|
80
|
+
event: PickerListenerEvent.Now,
|
|
81
|
+
value: today.current
|
|
82
|
+
});
|
|
83
|
+
}, [today.current, formControl, onListener]);
|
|
84
|
+
const onSelect = useCallback(() => {
|
|
62
85
|
formControl?.setValue(value);
|
|
63
|
-
onListener &&
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
86
|
+
onListener &&
|
|
87
|
+
onListener({
|
|
88
|
+
event: PickerListenerEvent.Select,
|
|
89
|
+
value
|
|
90
|
+
});
|
|
91
|
+
}, [formControl, value, onListener]);
|
|
92
|
+
return (_jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date__header", children: [_jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: title }) }), _jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), _jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), _jsxs("div", { className: classNameComponent, children: [_jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), _jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (_jsx("div", { className: "rls-picker-date__footer", children: _jsxs("div", { className: "rls-picker-date__actions", children: [_jsx("div", { className: "rls-picker-date__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), _jsx("div", { className: "rls-picker-date__actions--today", children: _jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: itIsDisabledToday, children: labels.dateActionToday }) }), _jsx("div", { className: "rls-picker-date__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
|
|
70
93
|
}
|
|
71
94
|
//# sourceMappingURL=PickerDate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/PickerDate/PickerDate.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"PickerDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/PickerDate/PickerDate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,5 +12,5 @@ interface PickerDateRangeProps extends RlsComponent {
|
|
|
12
12
|
minDate?: Date;
|
|
13
13
|
onListener?: (listener: PickerListener<DateRange>) => void;
|
|
14
14
|
}
|
|
15
|
-
export declare function RlsPickerDateRange({ automatic, date:
|
|
15
|
+
export declare function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }: PickerDateRangeProps): import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export {};
|
|
@@ -1,63 +1,84 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { itIsDefined } from '@rolster/commons';
|
|
2
3
|
import { PickerListenerEvent } from '@rolster/components';
|
|
3
4
|
import { DateRange, assignMonthInDate, assignYearInDate, normalizeMinTime } from '@rolster/dates';
|
|
5
|
+
import { i18nSubscribe } from '@rolster/i18n';
|
|
4
6
|
import { useReactControl } from '@rolster/react-forms';
|
|
5
|
-
import { useEffect, useState } from 'react';
|
|
6
|
-
import {
|
|
7
|
-
import { rangeFormatTemplate } from '../../../helpers';
|
|
7
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
8
|
+
import { rangeFormatTemplate, renderClassStatus } from '../../../helpers';
|
|
8
9
|
import { reactI18n } from '../../../i18n';
|
|
9
|
-
import { RlsButton } from '../../atoms';
|
|
10
|
-
import { RlsPickerDayRange
|
|
10
|
+
import { RlsButton } from '../../atoms/Button/Button';
|
|
11
|
+
import { RlsPickerDayRange } from '../../molecules/PickerDayRange/PickerDayRange';
|
|
12
|
+
import { RlsPickerMonth } from '../../molecules/PickerMonth/PickerMonth';
|
|
13
|
+
import { RlsPickerSelectorTitle } from '../../molecules/PickerSelectorTitle/PickerSelectorTitle';
|
|
14
|
+
import { RlsPickerYear } from '../../molecules/PickerYear/PickerYear';
|
|
11
15
|
import './PickerDateRange.css';
|
|
12
|
-
export function RlsPickerDateRange({ automatic, date:
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const yearControl = useReactControl(
|
|
16
|
-
const monthControl = useReactControl(
|
|
17
|
-
const
|
|
18
|
-
const [value, setValue] = useState(
|
|
19
|
-
const [date, setDate] = useState(
|
|
16
|
+
export function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
|
|
17
|
+
const _date = useMemo(() => normalizeMinTime(_picker ?? new Date()), [_picker]);
|
|
18
|
+
const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
|
|
19
|
+
const yearControl = useReactControl(_date.getFullYear());
|
|
20
|
+
const monthControl = useReactControl(_date.getMonth());
|
|
21
|
+
const rangeControl = useReactControl(_range);
|
|
22
|
+
const [value, setValue] = useState(_range);
|
|
23
|
+
const [date, setDate] = useState(_date);
|
|
20
24
|
const [visibility, setVisibility] = useState('DAY');
|
|
25
|
+
const [labels, setLabels] = useState({
|
|
26
|
+
dateActionCancel: reactI18n('dateActionCancel'),
|
|
27
|
+
dateActionSelect: reactI18n('dateActionSelect')
|
|
28
|
+
});
|
|
29
|
+
const classNameComponent = useMemo(() => {
|
|
30
|
+
return renderClassStatus('rls-picker-date-range__component', {
|
|
31
|
+
day: visibility === 'DAY',
|
|
32
|
+
month: visibility === 'MONTH',
|
|
33
|
+
year: visibility === 'YEAR'
|
|
34
|
+
});
|
|
35
|
+
}, [visibility]);
|
|
36
|
+
const classNameFooter = useMemo(() => {
|
|
37
|
+
return renderClassStatus('rls-picker-date-range__footer', { automatic });
|
|
38
|
+
}, [automatic]);
|
|
39
|
+
const title = useMemo(() => rangeFormatTemplate(value), [value]);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
return i18nSubscribe(() => {
|
|
42
|
+
setLabels({
|
|
43
|
+
dateActionCancel: reactI18n('dateActionCancel'),
|
|
44
|
+
dateActionSelect: reactI18n('dateActionSelect')
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
}, []);
|
|
21
48
|
useEffect(() => {
|
|
22
|
-
setDate((
|
|
23
|
-
return
|
|
24
|
-
? assignYearInDate(
|
|
25
|
-
:
|
|
49
|
+
setDate((date) => {
|
|
50
|
+
return itIsDefined(yearControl.value)
|
|
51
|
+
? assignYearInDate(date, yearControl.value)
|
|
52
|
+
: date;
|
|
26
53
|
});
|
|
27
54
|
}, [yearControl.value]);
|
|
28
55
|
useEffect(() => {
|
|
29
|
-
setDate((
|
|
30
|
-
return
|
|
31
|
-
? assignMonthInDate(
|
|
32
|
-
:
|
|
56
|
+
setDate((date) => {
|
|
57
|
+
return itIsDefined(monthControl.value)
|
|
58
|
+
? assignMonthInDate(date, monthControl.value)
|
|
59
|
+
: date;
|
|
33
60
|
});
|
|
34
61
|
}, [monthControl.value]);
|
|
35
62
|
useEffect(() => {
|
|
36
|
-
|
|
63
|
+
rangeControl.value && setValue(rangeControl.value);
|
|
37
64
|
setVisibility('DAY');
|
|
38
|
-
}, [
|
|
39
|
-
|
|
65
|
+
}, [rangeControl.value]);
|
|
66
|
+
const onVisibilityDay = useCallback(() => {
|
|
40
67
|
setVisibility('DAY');
|
|
41
|
-
}
|
|
42
|
-
|
|
68
|
+
}, []);
|
|
69
|
+
const onVisibilityMonth = useCallback(() => {
|
|
43
70
|
setVisibility('MONTH');
|
|
44
|
-
}
|
|
45
|
-
|
|
71
|
+
}, []);
|
|
72
|
+
const onVisibilityYear = useCallback(() => {
|
|
46
73
|
setVisibility('YEAR');
|
|
47
|
-
}
|
|
48
|
-
|
|
74
|
+
}, []);
|
|
75
|
+
const onCancel = useCallback(() => {
|
|
49
76
|
onListener && onListener({ event: PickerListenerEvent.Cancel });
|
|
50
|
-
}
|
|
51
|
-
|
|
77
|
+
}, [onListener]);
|
|
78
|
+
const onSelect = useCallback(() => {
|
|
52
79
|
formControl?.setValue(value);
|
|
53
80
|
onListener && onListener({ event: PickerListenerEvent.Select, value });
|
|
54
|
-
}
|
|
55
|
-
return (_jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date-range__header", children: [_jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: _jsx("span", { onClick: onVisibilityDay, children:
|
|
56
|
-
day: visibility === 'DAY',
|
|
57
|
-
month: visibility === 'MONTH',
|
|
58
|
-
year: visibility === 'YEAR'
|
|
59
|
-
}), children: [_jsx(RlsPickerDayRange, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), _jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), _jsx("div", { className: useRenderClassStatus('rls-picker-date-range__footer', {
|
|
60
|
-
automatic
|
|
61
|
-
}), children: _jsxs("div", { className: "rls-picker-date-range__actions", children: [_jsx("div", { className: "rls-picker-date-range__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), _jsx("div", { className: "rls-picker-date-range__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
|
|
81
|
+
}, [formControl, value, onListener]);
|
|
82
|
+
return (_jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date-range__header", children: [_jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: title }) }), _jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), _jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), _jsxs("div", { className: classNameComponent, children: [_jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), _jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), _jsx("div", { className: classNameFooter, children: _jsxs("div", { className: "rls-picker-date-range__actions", children: [_jsx("div", { className: "rls-picker-date-range__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), _jsx("div", { className: "rls-picker-date-range__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
|
|
62
83
|
}
|
|
63
84
|
//# sourceMappingURL=PickerDateRange.js.map
|