@rolster/react-components 1.4.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/LICENSE +21 -0
- package/dist/cjs/assets/lib.cjs-7185a838.css +2080 -0
- package/dist/cjs/lib.cjs.js +3326 -0
- package/dist/cjs/lib.cjs.js.map +1 -0
- package/dist/es/assets/lib-7185a838.css +2080 -0
- package/dist/es/lib.js +3260 -0
- package/dist/es/lib.js.map +1 -0
- package/dist/esm/components/atoms/Amount/Amount.css +6 -0
- package/dist/esm/components/atoms/Amount/Amount.d.ts +8 -0
- package/dist/esm/components/atoms/Amount/Amount.js +8 -0
- package/dist/esm/components/atoms/Amount/Amount.js.map +1 -0
- package/dist/esm/components/atoms/Avatar/Avatar.css +28 -0
- package/dist/esm/components/atoms/Avatar/Avatar.d.ts +8 -0
- package/dist/esm/components/atoms/Avatar/Avatar.js +7 -0
- package/dist/esm/components/atoms/Avatar/Avatar.js.map +1 -0
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +57 -0
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.d.ts +10 -0
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.js +6 -0
- package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.js.map +1 -0
- package/dist/esm/components/atoms/Button/Button.css +133 -0
- package/dist/esm/components/atoms/Button/Button.d.ts +13 -0
- package/dist/esm/components/atoms/Button/Button.js +8 -0
- package/dist/esm/components/atoms/Button/Button.js.map +1 -0
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +93 -0
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.d.ts +11 -0
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.js +7 -0
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.js.map +1 -0
- package/dist/esm/components/atoms/CheckBox/CheckBox.css +33 -0
- package/dist/esm/components/atoms/CheckBox/CheckBox.d.ts +8 -0
- package/dist/esm/components/atoms/CheckBox/CheckBox.js +7 -0
- package/dist/esm/components/atoms/CheckBox/CheckBox.js.map +1 -0
- package/dist/esm/components/atoms/Icon/Icon.css +23 -0
- package/dist/esm/components/atoms/Icon/Icon.d.ts +7 -0
- package/dist/esm/components/atoms/Icon/Icon.js +7 -0
- package/dist/esm/components/atoms/Icon/Icon.js.map +1 -0
- package/dist/esm/components/atoms/Input/Input.css +63 -0
- package/dist/esm/components/atoms/Input/Input.d.ts +13 -0
- package/dist/esm/components/atoms/Input/Input.js +34 -0
- package/dist/esm/components/atoms/Input/Input.js.map +1 -0
- package/dist/esm/components/atoms/InputMoney/InputMoney.css +7 -0
- package/dist/esm/components/atoms/InputMoney/InputMoney.d.ts +12 -0
- package/dist/esm/components/atoms/InputMoney/InputMoney.js +15 -0
- package/dist/esm/components/atoms/InputMoney/InputMoney.js.map +1 -0
- package/dist/esm/components/atoms/InputNumber/InputNumber.css +7 -0
- package/dist/esm/components/atoms/InputNumber/InputNumber.d.ts +10 -0
- package/dist/esm/components/atoms/InputNumber/InputNumber.js +14 -0
- package/dist/esm/components/atoms/InputNumber/InputNumber.js.map +1 -0
- package/dist/esm/components/atoms/InputPassword/InputPassword.css +38 -0
- package/dist/esm/components/atoms/InputPassword/InputPassword.d.ts +12 -0
- package/dist/esm/components/atoms/InputPassword/InputPassword.js +24 -0
- package/dist/esm/components/atoms/InputPassword/InputPassword.js.map +1 -0
- package/dist/esm/components/atoms/InputText/InputText.css +7 -0
- package/dist/esm/components/atoms/InputText/InputText.d.ts +10 -0
- package/dist/esm/components/atoms/InputText/InputText.js +14 -0
- package/dist/esm/components/atoms/InputText/InputText.js.map +1 -0
- package/dist/esm/components/atoms/Poster/Poster.css +12 -0
- package/dist/esm/components/atoms/Poster/Poster.d.ts +3 -0
- package/dist/esm/components/atoms/Poster/Poster.js +6 -0
- package/dist/esm/components/atoms/Poster/Poster.js.map +1 -0
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +66 -0
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.d.ts +8 -0
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js +7 -0
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js.map +1 -0
- package/dist/esm/components/atoms/RadioButton/RadioButton.css +33 -0
- package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts +8 -0
- package/dist/esm/components/atoms/RadioButton/RadioButton.js +7 -0
- package/dist/esm/components/atoms/RadioButton/RadioButton.js.map +1 -0
- package/dist/esm/components/atoms/SearchInput/SearchInput.css +10 -0
- package/dist/esm/components/atoms/SearchInput/SearchInput.d.ts +9 -0
- package/dist/esm/components/atoms/SearchInput/SearchInput.js +8 -0
- package/dist/esm/components/atoms/SearchInput/SearchInput.js.map +1 -0
- package/dist/esm/components/atoms/Skeleton/Skeleton.css +36 -0
- package/dist/esm/components/atoms/Skeleton/Skeleton.d.ts +3 -0
- package/dist/esm/components/atoms/Skeleton/Skeleton.js +6 -0
- package/dist/esm/components/atoms/Skeleton/Skeleton.js.map +1 -0
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +59 -0
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.d.ts +7 -0
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.js +7 -0
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.js.map +1 -0
- package/dist/esm/components/atoms/Switch/Switch.css +35 -0
- package/dist/esm/components/atoms/Switch/Switch.d.ts +9 -0
- package/dist/esm/components/atoms/Switch/Switch.js +7 -0
- package/dist/esm/components/atoms/Switch/Switch.js.map +1 -0
- package/dist/esm/components/atoms/TabularText/TabularText.css +15 -0
- package/dist/esm/components/atoms/TabularText/TabularText.d.ts +6 -0
- package/dist/esm/components/atoms/TabularText/TabularText.js +11 -0
- package/dist/esm/components/atoms/TabularText/TabularText.js.map +1 -0
- package/dist/esm/components/atoms/index.d.ts +20 -0
- package/dist/esm/components/atoms/index.js +21 -0
- package/dist/esm/components/atoms/index.js.map +1 -0
- package/dist/esm/components/definitions.d.ts +6 -0
- package/dist/esm/components/definitions.js +2 -0
- package/dist/esm/components/definitions.js.map +1 -0
- package/dist/esm/components/index.d.ts +4 -0
- package/dist/esm/components/index.js +5 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/components/molecules/Ballot/Ballot.css +58 -0
- package/dist/esm/components/molecules/Ballot/Ballot.d.ts +11 -0
- package/dist/esm/components/molecules/Ballot/Ballot.js +8 -0
- package/dist/esm/components/molecules/Ballot/Ballot.js.map +1 -0
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +78 -0
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.d.ts +16 -0
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js +40 -0
- package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js.map +1 -0
- package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +40 -0
- package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.d.ts +10 -0
- package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.js +24 -0
- package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.js.map +1 -0
- package/dist/esm/components/molecules/DayPicker/DayPicker.css +66 -0
- package/dist/esm/components/molecules/DayPicker/DayPicker.d.ts +12 -0
- package/dist/esm/components/molecules/DayPicker/DayPicker.js +39 -0
- package/dist/esm/components/molecules/DayPicker/DayPicker.js.map +1 -0
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +68 -0
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.d.ts +13 -0
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js +37 -0
- package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js.map +1 -0
- package/dist/esm/components/molecules/MoneyField/MoneyField.css +7 -0
- package/dist/esm/components/molecules/MoneyField/MoneyField.d.ts +12 -0
- package/dist/esm/components/molecules/MoneyField/MoneyField.js +13 -0
- package/dist/esm/components/molecules/MoneyField/MoneyField.js.map +1 -0
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +40 -0
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.d.ts +12 -0
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.js +27 -0
- package/dist/esm/components/molecules/MonthPicker/MonthPicker.js.map +1 -0
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +16 -0
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.d.ts +12 -0
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js +43 -0
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js.map +1 -0
- package/dist/esm/components/molecules/NumberField/NumberField.css +7 -0
- package/dist/esm/components/molecules/NumberField/NumberField.d.ts +10 -0
- package/dist/esm/components/molecules/NumberField/NumberField.js +13 -0
- package/dist/esm/components/molecules/NumberField/NumberField.js.map +1 -0
- package/dist/esm/components/molecules/Pagination/Pagination.css +66 -0
- package/dist/esm/components/molecules/Pagination/Pagination.d.ts +27 -0
- package/dist/esm/components/molecules/Pagination/Pagination.js +219 -0
- package/dist/esm/components/molecules/Pagination/Pagination.js.map +1 -0
- package/dist/esm/components/molecules/PasswordField/PasswordField.css +12 -0
- package/dist/esm/components/molecules/PasswordField/PasswordField.d.ts +10 -0
- package/dist/esm/components/molecules/PasswordField/PasswordField.js +18 -0
- package/dist/esm/components/molecules/PasswordField/PasswordField.js.map +1 -0
- package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +40 -0
- package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.d.ts +11 -0
- package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.js +21 -0
- package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.js.map +1 -0
- package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +40 -0
- package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.d.ts +10 -0
- package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.js +21 -0
- package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.js.map +1 -0
- package/dist/esm/components/molecules/TextField/TextField.css +7 -0
- package/dist/esm/components/molecules/TextField/TextField.d.ts +10 -0
- package/dist/esm/components/molecules/TextField/TextField.js +13 -0
- package/dist/esm/components/molecules/TextField/TextField.js.map +1 -0
- package/dist/esm/components/molecules/Toolbar/Toolbar.css +50 -0
- package/dist/esm/components/molecules/Toolbar/Toolbar.d.ts +9 -0
- package/dist/esm/components/molecules/Toolbar/Toolbar.js +6 -0
- package/dist/esm/components/molecules/Toolbar/Toolbar.js.map +1 -0
- package/dist/esm/components/molecules/YearPicker/YearPicker.css +77 -0
- package/dist/esm/components/molecules/YearPicker/YearPicker.d.ts +12 -0
- package/dist/esm/components/molecules/YearPicker/YearPicker.js +46 -0
- package/dist/esm/components/molecules/YearPicker/YearPicker.js.map +1 -0
- package/dist/esm/components/molecules/index.d.ts +16 -0
- package/dist/esm/components/molecules/index.js +17 -0
- package/dist/esm/components/molecules/index.js.map +1 -0
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +71 -0
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.d.ts +14 -0
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js +161 -0
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js.map +1 -0
- package/dist/esm/components/organisms/Card/Card.css +11 -0
- package/dist/esm/components/organisms/Card/Card.d.ts +3 -0
- package/dist/esm/components/organisms/Card/Card.js +6 -0
- package/dist/esm/components/organisms/Card/Card.js.map +1 -0
- package/dist/esm/components/organisms/Confirmation/Confirmation.css +125 -0
- package/dist/esm/components/organisms/Confirmation/Confirmation.d.ts +38 -0
- package/dist/esm/components/organisms/Confirmation/Confirmation.js +64 -0
- package/dist/esm/components/organisms/Confirmation/Confirmation.js.map +1 -0
- package/dist/esm/components/organisms/Datatable/Datatable.d.ts +18 -0
- package/dist/esm/components/organisms/Datatable/Datatable.js +18 -0
- package/dist/esm/components/organisms/Datatable/Datatable.js.map +1 -0
- package/dist/esm/components/organisms/DateField/DateField.css +37 -0
- package/dist/esm/components/organisms/DateField/DateField.d.ts +13 -0
- package/dist/esm/components/organisms/DateField/DateField.js +35 -0
- package/dist/esm/components/organisms/DateField/DateField.js.map +1 -0
- package/dist/esm/components/organisms/DatePicker/DatePicker.css +75 -0
- package/dist/esm/components/organisms/DatePicker/DatePicker.d.ts +15 -0
- package/dist/esm/components/organisms/DatePicker/DatePicker.js +99 -0
- package/dist/esm/components/organisms/DatePicker/DatePicker.js.map +1 -0
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +37 -0
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.d.ts +14 -0
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +37 -0
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +1 -0
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +81 -0
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.d.ts +16 -0
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js +89 -0
- package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js.map +1 -0
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +29 -0
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.d.ts +7 -0
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.js +7 -0
- package/dist/esm/components/organisms/FormNavigation/FormNavigation.js.map +1 -0
- package/dist/esm/components/organisms/Modal/Modal.css +59 -0
- package/dist/esm/components/organisms/Modal/Modal.d.ts +7 -0
- package/dist/esm/components/organisms/Modal/Modal.js +8 -0
- package/dist/esm/components/organisms/Modal/Modal.js.map +1 -0
- package/dist/esm/components/organisms/SelectField/SelectField.css +10 -0
- package/dist/esm/components/organisms/SelectField/SelectField.d.ts +13 -0
- package/dist/esm/components/organisms/SelectField/SelectField.js +90 -0
- package/dist/esm/components/organisms/SelectField/SelectField.js.map +1 -0
- package/dist/esm/components/organisms/Snackbar/Snackbar.css +66 -0
- package/dist/esm/components/organisms/Snackbar/Snackbar.d.ts +22 -0
- package/dist/esm/components/organisms/Snackbar/Snackbar.js +54 -0
- package/dist/esm/components/organisms/Snackbar/Snackbar.js.map +1 -0
- package/dist/esm/components/organisms/index.d.ts +12 -0
- package/dist/esm/components/organisms/index.js +13 -0
- package/dist/esm/components/organisms/index.js.map +1 -0
- package/dist/esm/context.d.ts +9 -0
- package/dist/esm/context.js +15 -0
- package/dist/esm/context.js.map +1 -0
- package/dist/esm/hooks/form-control.hook.d.ts +15 -0
- package/dist/esm/hooks/form-control.hook.js +77 -0
- package/dist/esm/hooks/form-control.hook.js.map +1 -0
- package/dist/esm/hooks/form-group.hook.d.ts +2 -0
- package/dist/esm/hooks/form-group.hook.js +22 -0
- package/dist/esm/hooks/form-group.hook.js.map +1 -0
- package/dist/esm/hooks/index.d.ts +3 -0
- package/dist/esm/hooks/index.js +4 -0
- package/dist/esm/hooks/index.js.map +1 -0
- package/dist/esm/hooks/list-control.hook.d.ts +19 -0
- package/dist/esm/hooks/list-control.hook.js +139 -0
- package/dist/esm/hooks/list-control.hook.js.map +1 -0
- package/dist/esm/index.d.ts +5 -0
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/models.d.ts +54 -0
- package/dist/esm/models.js +42 -0
- package/dist/esm/models.js.map +1 -0
- package/dist/esm/types.d.ts +12 -0
- package/dist/esm/types.js +7 -0
- package/dist/esm/types.js.map +1 -0
- package/dist/esm/utils/css.d.ts +3 -0
- package/dist/esm/utils/css.js +12 -0
- package/dist/esm/utils/css.js.map +1 -0
- package/dist/esm/utils/date-picker.d.ts +1 -0
- package/dist/esm/utils/date-picker.js +9 -0
- package/dist/esm/utils/date-picker.js.map +1 -0
- package/dist/esm/utils/date-range-picker.d.ts +9 -0
- package/dist/esm/utils/date-range-picker.js +97 -0
- package/dist/esm/utils/date-range-picker.js.map +1 -0
- package/dist/esm/utils/day-picker.d.ts +9 -0
- package/dist/esm/utils/day-picker.js +84 -0
- package/dist/esm/utils/day-picker.js.map +1 -0
- package/dist/esm/utils/month-picker.d.ts +14 -0
- package/dist/esm/utils/month-picker.js +72 -0
- package/dist/esm/utils/month-picker.js.map +1 -0
- package/dist/esm/utils/year-picker.d.ts +17 -0
- package/dist/esm/utils/year-picker.js +83 -0
- package/dist/esm/utils/year-picker.js.map +1 -0
- package/package.json +72 -0
- package/readme.md +23 -0
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { useListControl } from '../../../hooks';
|
|
4
|
+
import { renderClassStatus } from '../../../utils/css';
|
|
5
|
+
import { RlsIcon } from '../../atoms';
|
|
6
|
+
import { RlsBallot } from '../../molecules';
|
|
7
|
+
import './SelectField.css';
|
|
8
|
+
export function RlsSelectField({ suggestions, children, disabled, formControl, placeholder, rlsTheme }) {
|
|
9
|
+
const { active, boxContentRef, higher, inputRef, listRef, suggestionsField, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl(suggestions);
|
|
10
|
+
const [changeInternal, setChangeInternal] = useState(false);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!changeInternal) {
|
|
13
|
+
setValue((formControl?.state &&
|
|
14
|
+
suggestionsField.hasElement(formControl?.state)?.description) ||
|
|
15
|
+
'');
|
|
16
|
+
}
|
|
17
|
+
setChangeInternal(false);
|
|
18
|
+
}, [formControl?.state]);
|
|
19
|
+
function onFocusInput() {
|
|
20
|
+
setActive(true);
|
|
21
|
+
}
|
|
22
|
+
function onBlurInput() {
|
|
23
|
+
setActive(false);
|
|
24
|
+
}
|
|
25
|
+
function onClickInput() {
|
|
26
|
+
setVisible(true);
|
|
27
|
+
}
|
|
28
|
+
function onKeydownInput(event) {
|
|
29
|
+
switch (event.code) {
|
|
30
|
+
case 'Space':
|
|
31
|
+
setVisible(true);
|
|
32
|
+
break;
|
|
33
|
+
case 'Enter':
|
|
34
|
+
setVisible(true);
|
|
35
|
+
break;
|
|
36
|
+
case 'Escape':
|
|
37
|
+
setVisible(false);
|
|
38
|
+
break;
|
|
39
|
+
case 'Tab':
|
|
40
|
+
setVisible(false);
|
|
41
|
+
break;
|
|
42
|
+
default:
|
|
43
|
+
navigationInput(event);
|
|
44
|
+
break;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
function onClickAction() {
|
|
48
|
+
const newVisible = !visible;
|
|
49
|
+
setVisible(newVisible);
|
|
50
|
+
if (newVisible) {
|
|
51
|
+
inputRef?.current?.focus();
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
function onClickBackdrop() {
|
|
55
|
+
setVisible(false);
|
|
56
|
+
}
|
|
57
|
+
function onClickElement(element) {
|
|
58
|
+
return () => {
|
|
59
|
+
onChange(element);
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
function onKeydownElement(element) {
|
|
63
|
+
return (event) => {
|
|
64
|
+
switch (event.code) {
|
|
65
|
+
case 'Enter':
|
|
66
|
+
onChange(element);
|
|
67
|
+
break;
|
|
68
|
+
default:
|
|
69
|
+
navigationElement(event);
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
function onChange({ description, value }) {
|
|
75
|
+
inputRef?.current?.focus();
|
|
76
|
+
setVisible(false);
|
|
77
|
+
if (formControl) {
|
|
78
|
+
setChangeInternal(true);
|
|
79
|
+
formControl.setState(value);
|
|
80
|
+
}
|
|
81
|
+
setValue(description);
|
|
82
|
+
}
|
|
83
|
+
return (_jsxs("div", { ref: boxContentRef, className: 'rls-select-field rls-list-field ' +
|
|
84
|
+
renderClassStatus('rls-box-field', { active, disabled }), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsxs("div", { className: "rls-box-field__body", children: [_jsx("input", { ref: inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-list-field__action', { visible }), disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), _jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
|
|
85
|
+
visible,
|
|
86
|
+
hide: !visible,
|
|
87
|
+
higher
|
|
88
|
+
}), children: [_jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: _jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !suggestions.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), _jsx("label", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
|
|
89
|
+
}
|
|
90
|
+
//# sourceMappingURL=SelectField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/SelectField/SelectField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
.rls-snackbar {
|
|
2
|
+
position: fixed;
|
|
3
|
+
display: flex;
|
|
4
|
+
bottom: 0rem;
|
|
5
|
+
left: var(--rls-snackbar-left);
|
|
6
|
+
z-index: 32;
|
|
7
|
+
width: auto;
|
|
8
|
+
height: auto;
|
|
9
|
+
max-width: 30rem;
|
|
10
|
+
padding: var(--sizing-12);
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
border-radius: var(--sizing-8);
|
|
13
|
+
background: var(--color-rolster-100);
|
|
14
|
+
box-shadow: var(--shadow-bottom-light-4);
|
|
15
|
+
border: var(--border-1-rolster-300);
|
|
16
|
+
will-change: transform;
|
|
17
|
+
transform: translate(-50%, 100%);
|
|
18
|
+
transition: transform 160ms 0ms var(--standard-curve);
|
|
19
|
+
}
|
|
20
|
+
.rls-snackbar--visible {
|
|
21
|
+
transform: translate(-50%, calc(0% - var(--sizing-16)));
|
|
22
|
+
}
|
|
23
|
+
.rls-snackbar__avatar {
|
|
24
|
+
background: var(--color-rolster-500);
|
|
25
|
+
width: var(--sizing-32);
|
|
26
|
+
height: var(--sizing-32);
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
border-radius: var(--sizing-8);
|
|
29
|
+
}
|
|
30
|
+
.rls-snackbar__avatar .rls-icon {
|
|
31
|
+
color: var(--color-light-500);
|
|
32
|
+
margin: var(--sizing-4);
|
|
33
|
+
}
|
|
34
|
+
.rls-snackbar__avatar + .rls-snackbar__component {
|
|
35
|
+
width: calc(100% - var(--sizing-40));
|
|
36
|
+
margin-left: var(--sizing-12);
|
|
37
|
+
}
|
|
38
|
+
.rls-snackbar__component {
|
|
39
|
+
margin: auto 0rem;
|
|
40
|
+
}
|
|
41
|
+
.rls-snackbar__title {
|
|
42
|
+
display: block;
|
|
43
|
+
width: 100%;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
text-overflow: ellipsis;
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
margin-bottom: var(--sizing-4);
|
|
48
|
+
color: var(--color-rolster-500);
|
|
49
|
+
font-size: var(--body-font-size);
|
|
50
|
+
font-weight: var(--font-weight-bold);
|
|
51
|
+
letter-spacing: var(--body-letter-spacing);
|
|
52
|
+
}
|
|
53
|
+
.rls-snackbar__message {
|
|
54
|
+
display: block;
|
|
55
|
+
line-height: var(--sizing-20);
|
|
56
|
+
color: var(--color-theme-300);
|
|
57
|
+
font-size: var(--label-font-size);
|
|
58
|
+
font-weight: var(--font-weight-medium);
|
|
59
|
+
letter-spacing: var(--label-letter-spacing);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@media only screen and (max-width: 375px) {
|
|
63
|
+
.rls-snackbar {
|
|
64
|
+
width: calc(100% - var(--sizing-24));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { RlsTheme } from '../../definitions';
|
|
3
|
+
import './Snackbar.css';
|
|
4
|
+
interface SnackbarBasic {
|
|
5
|
+
content?: ReactNode;
|
|
6
|
+
title?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface SnackbarConfig extends SnackbarBasic {
|
|
9
|
+
icon?: string;
|
|
10
|
+
rlsTheme?: RlsTheme;
|
|
11
|
+
}
|
|
12
|
+
interface Snackbar extends SnackbarConfig {
|
|
13
|
+
visible?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export type FnSnackbar = (config: SnackbarConfig) => void;
|
|
16
|
+
export interface SnackbarService {
|
|
17
|
+
RlsSnackbar: JSX.Element;
|
|
18
|
+
snackbar: FnSnackbar;
|
|
19
|
+
}
|
|
20
|
+
export declare function RlsSnackbar({ content, icon, title, visible, rlsTheme }: Snackbar): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function useSnackbarService(): SnackbarService;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { renderClassStatus } from '../../../utils/css';
|
|
4
|
+
import { RlsIcon } from '../../atoms';
|
|
5
|
+
import './Snackbar.css';
|
|
6
|
+
const DURATION_ANIMATION = 240;
|
|
7
|
+
const DURATION_CHAR = 75;
|
|
8
|
+
const DURATION_MAX = 9000;
|
|
9
|
+
const DURATION_MIN = 3000;
|
|
10
|
+
const DURATION_RESET = 480;
|
|
11
|
+
function calculateDuration({ length }) {
|
|
12
|
+
let duration = length * DURATION_CHAR;
|
|
13
|
+
if (duration < DURATION_MIN) {
|
|
14
|
+
duration = DURATION_MIN;
|
|
15
|
+
}
|
|
16
|
+
else if (duration > DURATION_MAX) {
|
|
17
|
+
duration = DURATION_MAX;
|
|
18
|
+
}
|
|
19
|
+
return duration + DURATION_RESET;
|
|
20
|
+
}
|
|
21
|
+
export function RlsSnackbar({ content, icon, title, visible, rlsTheme }) {
|
|
22
|
+
return (_jsxs("div", { className: renderClassStatus('rls-snackbar', { visible }), "rls-theme": rlsTheme, children: [icon && (_jsx("div", { className: "rls-snackbar__avatar", children: _jsx(RlsIcon, { value: icon }) })), _jsxs("div", { className: "rls-snackbar__component", children: [title && _jsx("label", { className: "rls-snackbar__title", children: title }), _jsx("div", { className: "rls-snackbar__message", children: content })] })] }));
|
|
23
|
+
}
|
|
24
|
+
export function useSnackbarService() {
|
|
25
|
+
const [config, setConfig] = useState({});
|
|
26
|
+
const [duration, setDuration] = useState(4000);
|
|
27
|
+
const [timeoutId, setTimeoutId] = useState();
|
|
28
|
+
const [visible, setVisible] = useState(false);
|
|
29
|
+
const rlsSnackbar = _jsx(RlsSnackbar, { ...config, visible: visible });
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (visible) {
|
|
32
|
+
const timeoutId = setTimeout(() => {
|
|
33
|
+
setVisible(false);
|
|
34
|
+
setTimeoutId(undefined);
|
|
35
|
+
}, duration);
|
|
36
|
+
setTimeoutId(timeoutId);
|
|
37
|
+
}
|
|
38
|
+
else if (timeoutId) {
|
|
39
|
+
clearTimeout(timeoutId);
|
|
40
|
+
setTimeout(() => snackbar(config), DURATION_ANIMATION);
|
|
41
|
+
}
|
|
42
|
+
}, [visible]);
|
|
43
|
+
function snackbar(config) {
|
|
44
|
+
const { content } = config;
|
|
45
|
+
setConfig(config);
|
|
46
|
+
setDuration(calculateDuration(String(content)));
|
|
47
|
+
setVisible(!visible);
|
|
48
|
+
}
|
|
49
|
+
return {
|
|
50
|
+
RlsSnackbar: rlsSnackbar,
|
|
51
|
+
snackbar
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=Snackbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,gBAAgB,CAAC;AAExB,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB,MAAM,YAAY,GAAG,IAAI,CAAC;AAC1B,MAAM,YAAY,GAAG,IAAI,CAAC;AAC1B,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,SAAS,iBAAiB,CAAC,EAAE,MAAM,EAAU;IAC3C,IAAI,QAAQ,GAAG,MAAM,GAAG,aAAa,CAAC;IAEtC,IAAI,QAAQ,GAAG,YAAY,EAAE;QAC3B,QAAQ,GAAG,YAAY,CAAC;KACzB;SAAM,IAAI,QAAQ,GAAG,YAAY,EAAE;QAClC,QAAQ,GAAG,YAAY,CAAC;KACzB;IAED,OAAO,QAAQ,GAAG,cAAc,CAAC;AACnC,CAAC;AAuBD,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACC;IACT,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,eAC9C,QAAQ,aAElB,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,sBAAsB,YACnC,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,GAAI,GACpB,CACP,EAED,eAAK,SAAS,EAAC,yBAAyB,aACrC,KAAK,IAAI,gBAAO,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAS,EAChE,cAAK,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAO,IAClD,IACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAO,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,KAAC,WAAW,OAAK,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,UAAU,CAAC,KAAK,CAAC,CAAC;gBAClB,YAAY,CAAC,SAAS,CAAC,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,CAAC;YAEb,YAAY,CAAC,SAAS,CAAC,CAAC;SACzB;aAAM,IAAI,SAAS,EAAE;YACpB,YAAY,CAAC,SAAS,CAAC,CAAC;YAExB,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC;SACxD;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,QAAQ,CAAC,MAAsB;QACtC,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;QAE3B,SAAS,CAAC,MAAM,CAAC,CAAC;QAElB,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAEhD,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,OAAO;QACL,WAAW,EAAE,WAAW;QACxB,QAAQ;KACT,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export * from './AutocompleteField/AutocompleteField';
|
|
2
|
+
export * from './Card/Card';
|
|
3
|
+
export * from './Confirmation/Confirmation';
|
|
4
|
+
export * from './Datatable/Datatable';
|
|
5
|
+
export * from './DateField/DateField';
|
|
6
|
+
export * from './DatePicker/DatePicker';
|
|
7
|
+
export * from './DateRangeField/DateRangeField';
|
|
8
|
+
export * from './DateRangePicker/DateRangePicker';
|
|
9
|
+
export * from './FormNavigation/FormNavigation';
|
|
10
|
+
export * from './Modal/Modal';
|
|
11
|
+
export * from './SelectField/SelectField';
|
|
12
|
+
export * from './Snackbar/Snackbar';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export * from './AutocompleteField/AutocompleteField';
|
|
2
|
+
export * from './Card/Card';
|
|
3
|
+
export * from './Confirmation/Confirmation';
|
|
4
|
+
export * from './Datatable/Datatable';
|
|
5
|
+
export * from './DateField/DateField';
|
|
6
|
+
export * from './DatePicker/DatePicker';
|
|
7
|
+
export * from './DateRangeField/DateRangeField';
|
|
8
|
+
export * from './DateRangePicker/DateRangePicker';
|
|
9
|
+
export * from './FormNavigation/FormNavigation';
|
|
10
|
+
export * from './Modal/Modal';
|
|
11
|
+
export * from './SelectField/SelectField';
|
|
12
|
+
export * from './Snackbar/Snackbar';
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FnConfirmation, FnSnackbar } from './components';
|
|
2
|
+
import { RlsComponent } from './components/definitions';
|
|
3
|
+
interface State {
|
|
4
|
+
confirmation: FnConfirmation;
|
|
5
|
+
snackbar: FnSnackbar;
|
|
6
|
+
}
|
|
7
|
+
export declare const RlsContext: import("react").Context<State>;
|
|
8
|
+
export declare function RlsApplication({ children }: RlsComponent): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createContext } from 'react';
|
|
3
|
+
import { ConfirmationResult, useConfirmationService, useSnackbarService } from './components';
|
|
4
|
+
export const RlsContext = createContext({
|
|
5
|
+
confirmation: () => {
|
|
6
|
+
return Promise.resolve(ConfirmationResult.approved());
|
|
7
|
+
},
|
|
8
|
+
snackbar: () => { }
|
|
9
|
+
});
|
|
10
|
+
export function RlsApplication({ children }) {
|
|
11
|
+
const { RlsConfirmation, confirmation } = useConfirmationService();
|
|
12
|
+
const { RlsSnackbar, snackbar } = useSnackbarService();
|
|
13
|
+
return (_jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [_jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EACL,kBAAkB,EAGlB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AAQtB,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAQ;IAC7C,YAAY,EAAE,GAAG,EAAE;QACjB,OAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,CAAC;IACD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAgB;IACvD,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACnE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAEvD,OAAO,CACL,MAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,aACpD,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,EAC9C,WAAW,EACX,eAAe,IACI,CACvB,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { AbstractControl, FormState, ValidatorFn } from '@rolster/helpers-forms';
|
|
2
|
+
import { LegacyRef } from 'react';
|
|
3
|
+
export interface ReactControl<E extends HTMLElement, T = any> extends AbstractControl<T> {
|
|
4
|
+
elementRef: LegacyRef<E>;
|
|
5
|
+
}
|
|
6
|
+
interface Props<T> {
|
|
7
|
+
state?: FormState<T>;
|
|
8
|
+
validators?: ValidatorFn<T>[];
|
|
9
|
+
}
|
|
10
|
+
export declare function useReactControl<E extends HTMLElement, T = any>(props?: Props<T>): ReactControl<E, T>;
|
|
11
|
+
type Element<T> = ReactControl<HTMLElement, T>;
|
|
12
|
+
type Input<T> = ReactControl<HTMLInputElement, T>;
|
|
13
|
+
export declare function useFormControl<T = any>(props?: Props<T>): Element<T>;
|
|
14
|
+
export declare function useInputControl<T = any>(props?: Props<T>): Input<T>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
export function useReactControl(props = {}) {
|
|
3
|
+
const [state, setState] = useState(props.state);
|
|
4
|
+
const [value, setValue] = useState(props.state);
|
|
5
|
+
const [dirty, setDirty] = useState(false);
|
|
6
|
+
const [active, setActive] = useState(false);
|
|
7
|
+
const [disabled, setDisabled] = useState(false);
|
|
8
|
+
const [initialValue] = useState(props.state);
|
|
9
|
+
const [valid, setValid] = useState(true);
|
|
10
|
+
const [invalid, setInvalid] = useState(false);
|
|
11
|
+
const [validators, setValidators] = useState(props.validators || []);
|
|
12
|
+
const [errors, setErrors] = useState([]);
|
|
13
|
+
const [error, setError] = useState();
|
|
14
|
+
const [subscribers] = useState(new Set());
|
|
15
|
+
const elementRef = useRef(null);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
updateValueAndValidity();
|
|
18
|
+
if (state) {
|
|
19
|
+
setValue(state);
|
|
20
|
+
}
|
|
21
|
+
subscribers.forEach((subscriber) => {
|
|
22
|
+
subscriber(state);
|
|
23
|
+
});
|
|
24
|
+
}, [state]);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
updateValueAndValidity();
|
|
27
|
+
}, [validators]);
|
|
28
|
+
function reset() {
|
|
29
|
+
setDirty(false);
|
|
30
|
+
setState(initialValue);
|
|
31
|
+
}
|
|
32
|
+
function subscribe(subscriber) {
|
|
33
|
+
subscribers.add(subscriber);
|
|
34
|
+
}
|
|
35
|
+
function updateValueAndValidity() {
|
|
36
|
+
const errors = validators.reduce((errors, validator) => {
|
|
37
|
+
const error = validator(state);
|
|
38
|
+
if (error) {
|
|
39
|
+
errors.push(error);
|
|
40
|
+
}
|
|
41
|
+
return errors;
|
|
42
|
+
}, []);
|
|
43
|
+
const [error] = errors;
|
|
44
|
+
setErrors(errors);
|
|
45
|
+
setError(error);
|
|
46
|
+
const validState = errors.length === 0;
|
|
47
|
+
setValid(validState);
|
|
48
|
+
setInvalid(!validState);
|
|
49
|
+
}
|
|
50
|
+
return {
|
|
51
|
+
active,
|
|
52
|
+
dirty,
|
|
53
|
+
disabled,
|
|
54
|
+
elementRef,
|
|
55
|
+
errors,
|
|
56
|
+
invalid,
|
|
57
|
+
valid,
|
|
58
|
+
value,
|
|
59
|
+
error,
|
|
60
|
+
state,
|
|
61
|
+
reset,
|
|
62
|
+
setActive,
|
|
63
|
+
setDirty,
|
|
64
|
+
setDisabled,
|
|
65
|
+
setValidators,
|
|
66
|
+
setState,
|
|
67
|
+
subscribe,
|
|
68
|
+
updateValueAndValidity
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
export function useFormControl(props = {}) {
|
|
72
|
+
return useReactControl(props);
|
|
73
|
+
}
|
|
74
|
+
export function useInputControl(props = {}) {
|
|
75
|
+
return useReactControl(props);
|
|
76
|
+
}
|
|
77
|
+
//# sourceMappingURL=form-control.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-control.hook.js","sourceRoot":"","sources":["../../../src/hooks/form-control.hook.ts"],"names":[],"mappings":"AAMA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAc/D,MAAM,UAAU,eAAe,CAC7B,QAAkB,EAAE;IAEpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,KAAK,CAAC,KAAU,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACzD,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,KAAK,CAAC,UAAU,IAAI,EAAE,CACvB,CAAC;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAkB,CAAC;IACrD,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAqB,IAAI,GAAG,EAAE,CAAC,CAAC;IAE9D,MAAM,UAAU,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,EAAE,CAAC;QAEzB,IAAI,KAAK,EAAE;YACT,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;QAED,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;YACjC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,KAAK;QACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC;IAED,SAAS,SAAS,CAAC,UAA0C;QAC3D,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC9B,CAAC;IAED,SAAS,sBAAsB;QAC7B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;YACrD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;YAE/B,IAAI,KAAK,EAAE;gBACT,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACpB;YAED,OAAO,MAAM,CAAC;QAChB,CAAC,EAAE,EAAsB,CAAC,CAAC;QAE3B,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC;QAEvB,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEhB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC;QAEvC,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC;IAED,OAAO;QACL,MAAM;QACN,KAAK;QACL,QAAQ;QACR,UAAU;QACV,MAAM;QACN,OAAO;QACP,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,SAAS;QACT,QAAQ;QACR,WAAW;QACX,aAAa;QACb,QAAQ;QACR,SAAS;QACT,sBAAsB;KACvB,CAAC;AACJ,CAAC;AAKD,MAAM,UAAU,cAAc,CAAU,QAAkB,EAAE;IAC1D,OAAO,eAAe,CAAiB,KAAK,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,eAAe,CAAU,QAAkB,EAAE;IAC3D,OAAO,eAAe,CAAsB,KAAK,CAAC,CAAC;AACrD,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export function useFormGroup(controls) {
|
|
2
|
+
function valid() {
|
|
3
|
+
return Object.values(controls).reduce((validState, { valid }) => validState && valid, true);
|
|
4
|
+
}
|
|
5
|
+
function invalid() {
|
|
6
|
+
return !valid();
|
|
7
|
+
}
|
|
8
|
+
function reset() {
|
|
9
|
+
Object.values(controls).forEach((control) => control.reset());
|
|
10
|
+
}
|
|
11
|
+
function json() {
|
|
12
|
+
return Object.entries(controls).reduce((json, [key, { state }]) => {
|
|
13
|
+
json[key] = state;
|
|
14
|
+
return json;
|
|
15
|
+
}, {});
|
|
16
|
+
}
|
|
17
|
+
function updateValueAndValidity() {
|
|
18
|
+
Object.values(controls).forEach((control) => control.updateValueAndValidity());
|
|
19
|
+
}
|
|
20
|
+
return { controls, invalid, json, reset, updateValueAndValidity, valid };
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=form-group.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-group.hook.js","sourceRoot":"","sources":["../../../src/hooks/form-group.hook.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,YAAY,CAC1B,QAAW;IAEX,SAAS,KAAK;QACZ,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,UAAU,IAAI,KAAK,EAC9C,IAAI,CACL,CAAC;IACJ,CAAC;IAED,SAAS,OAAO;QACd,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,SAAS,KAAK;QACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,SAAS,IAAI;QACX,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAM,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YACrE,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC;IAED,SAAS,sBAAsB;QAC7B,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAC1C,OAAO,CAAC,sBAAsB,EAAE,CACjC,CAAC;IACJ,CAAC;IAED,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,CAAC;AAC3E,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
|
|
2
|
+
import { ListFieldElement, ListFieldSuggestions } from '../models';
|
|
3
|
+
interface ListControl<T = unknown> {
|
|
4
|
+
active: boolean;
|
|
5
|
+
boxContentRef: RefObject<HTMLDivElement>;
|
|
6
|
+
higher: boolean;
|
|
7
|
+
inputRef: RefObject<HTMLInputElement>;
|
|
8
|
+
listRef: RefObject<HTMLUListElement>;
|
|
9
|
+
suggestionsField: ListFieldSuggestions<T>;
|
|
10
|
+
value: string;
|
|
11
|
+
visible: boolean;
|
|
12
|
+
setActive: Dispatch<SetStateAction<boolean>>;
|
|
13
|
+
setValue: Dispatch<SetStateAction<string>>;
|
|
14
|
+
setVisible: Dispatch<SetStateAction<boolean>>;
|
|
15
|
+
navigationElement: (event: KeyboardEvent) => void;
|
|
16
|
+
navigationInput: (event: KeyboardEvent) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare function useListControl<T = unknown>(suggestions: ListFieldElement<T>[], ignoreHigher?: boolean): ListControl;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { ListFieldSuggestions } from '../models';
|
|
3
|
+
const classElement = '.rls-list-field__element';
|
|
4
|
+
const MAX_POSITION_VISIBLE = 4;
|
|
5
|
+
const LIST_SIZE_REM = 16;
|
|
6
|
+
const ELEMENT_SIZE_REM = 4;
|
|
7
|
+
const BASE_SIZE_PX = 16;
|
|
8
|
+
const ELEMENT_SIZE_PX = BASE_SIZE_PX * ELEMENT_SIZE_REM;
|
|
9
|
+
const MAZ_LIST_SIZE_PX = BASE_SIZE_PX * LIST_SIZE_REM;
|
|
10
|
+
export function useListControl(suggestions, ignoreHigher = false) {
|
|
11
|
+
const boxContentRef = useRef(null);
|
|
12
|
+
const listRef = useRef(null);
|
|
13
|
+
const inputRef = useRef(null);
|
|
14
|
+
const [suggestionsField, setSuggestionsField] = useState(new ListFieldSuggestions([]));
|
|
15
|
+
const [active, setActive] = useState(false);
|
|
16
|
+
const [visible, setVisible] = useState(false);
|
|
17
|
+
const [value, setValue] = useState('');
|
|
18
|
+
const [higher, setHigher] = useState(false);
|
|
19
|
+
const [positionElement, setPositionElement] = useState(0);
|
|
20
|
+
const [listElements, setListElements] = useState(undefined);
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
function onCloseSuggestions(event) {
|
|
23
|
+
if (!boxContentRef?.current?.contains(event.target)) {
|
|
24
|
+
setVisible(false);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
document.addEventListener('click', onCloseSuggestions);
|
|
28
|
+
return () => {
|
|
29
|
+
document.removeEventListener('click', onCloseSuggestions);
|
|
30
|
+
};
|
|
31
|
+
}, []);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
setLocationList();
|
|
34
|
+
}, [visible]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
setSuggestionsField(new ListFieldSuggestions(suggestions));
|
|
37
|
+
}, [suggestions]);
|
|
38
|
+
function setLocationList() {
|
|
39
|
+
if (boxContentRef?.current) {
|
|
40
|
+
const { top, height } = boxContentRef.current.getBoundingClientRect();
|
|
41
|
+
const overflow = BASE_SIZE_PX / 2;
|
|
42
|
+
const positionEnd = top + height + MAZ_LIST_SIZE_PX + overflow;
|
|
43
|
+
setHigher(positionEnd > window.innerHeight);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
function navigationInput(event) {
|
|
47
|
+
switch (event.code) {
|
|
48
|
+
case 'ArrowUp':
|
|
49
|
+
if (visible && higher) {
|
|
50
|
+
navigationInputUp();
|
|
51
|
+
}
|
|
52
|
+
break;
|
|
53
|
+
case 'ArrowDown':
|
|
54
|
+
if (visible && (ignoreHigher || !higher)) {
|
|
55
|
+
navigationInputDown();
|
|
56
|
+
}
|
|
57
|
+
break;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function navigationElement(event) {
|
|
61
|
+
switch (event.code) {
|
|
62
|
+
case 'ArrowUp':
|
|
63
|
+
navigationElementUp();
|
|
64
|
+
break;
|
|
65
|
+
case 'ArrowDown':
|
|
66
|
+
navigationElementDown();
|
|
67
|
+
break;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function navigationInputUp() {
|
|
71
|
+
const elements = listRef?.current?.querySelectorAll(classElement);
|
|
72
|
+
if (elements?.length) {
|
|
73
|
+
const newPosition = elements.length - 1;
|
|
74
|
+
setListElements(elements);
|
|
75
|
+
setPositionElement(newPosition);
|
|
76
|
+
elements.item(newPosition).focus();
|
|
77
|
+
if (positionElement > MAX_POSITION_VISIBLE) {
|
|
78
|
+
const elementPosition = elements.length - MAX_POSITION_VISIBLE;
|
|
79
|
+
setTimeout(() => {
|
|
80
|
+
listRef?.current?.scroll({
|
|
81
|
+
top: ELEMENT_SIZE_PX * elementPosition,
|
|
82
|
+
behavior: 'smooth'
|
|
83
|
+
});
|
|
84
|
+
}, 100);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
function navigationInputDown() {
|
|
89
|
+
const elements = listRef?.current?.querySelectorAll(classElement);
|
|
90
|
+
if (elements?.length) {
|
|
91
|
+
setListElements(elements);
|
|
92
|
+
setPositionElement(0);
|
|
93
|
+
elements.item(0).focus();
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
listRef?.current?.scroll({
|
|
96
|
+
top: 0,
|
|
97
|
+
behavior: 'smooth'
|
|
98
|
+
});
|
|
99
|
+
}, 100);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
function navigationElementUp() {
|
|
103
|
+
if (positionElement > 0) {
|
|
104
|
+
const newPosition = positionElement - 1;
|
|
105
|
+
setPositionElement(newPosition);
|
|
106
|
+
listElements?.item(newPosition).focus();
|
|
107
|
+
}
|
|
108
|
+
else if (ignoreHigher || !higher) {
|
|
109
|
+
inputRef?.current?.focus();
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
function navigationElementDown() {
|
|
113
|
+
const newPosition = positionElement + 1;
|
|
114
|
+
const length = listElements?.length || 0;
|
|
115
|
+
if (newPosition < length) {
|
|
116
|
+
setPositionElement(newPosition);
|
|
117
|
+
listElements?.item(newPosition).focus();
|
|
118
|
+
}
|
|
119
|
+
else if (higher && !ignoreHigher) {
|
|
120
|
+
inputRef?.current?.focus();
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
return {
|
|
124
|
+
active,
|
|
125
|
+
boxContentRef,
|
|
126
|
+
higher,
|
|
127
|
+
inputRef,
|
|
128
|
+
listRef,
|
|
129
|
+
suggestionsField,
|
|
130
|
+
value,
|
|
131
|
+
visible,
|
|
132
|
+
setActive,
|
|
133
|
+
setValue,
|
|
134
|
+
setVisible,
|
|
135
|
+
navigationElement,
|
|
136
|
+
navigationInput
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
//# sourceMappingURL=list-control.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list-control.hook.js","sourceRoot":"","sources":["../../../src/hooks/list-control.hook.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}
|