@rolster/react-components 18.13.5 → 18.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/assets/{index-LjAadYQE.css → index--xgdaD5z.css} +460 -468
- package/dist/cjs/index.js +1023 -1025
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-LjAadYQE.css → index--xgdaD5z.css} +460 -468
- package/dist/es/index.js +1004 -1007
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.css +2 -2
- package/dist/esm/components/atoms/Input/Input.js +1 -8
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/atoms/InputMoney/InputMoney.css +0 -2
- package/dist/esm/components/atoms/InputNumber/InputNumber.css +0 -2
- package/dist/esm/components/atoms/InputPassword/InputPassword.css +0 -2
- package/dist/esm/components/atoms/InputText/InputText.css +0 -2
- package/dist/esm/components/molecules/FieldMoney/FieldMoney.css +6 -0
- package/dist/esm/components/molecules/{MoneyField/MoneyField.d.ts → FieldMoney/FieldMoney.d.ts} +3 -3
- package/dist/esm/components/molecules/FieldMoney/FieldMoney.js +13 -0
- package/dist/esm/components/molecules/FieldMoney/FieldMoney.js.map +1 -0
- package/dist/esm/components/molecules/FieldNumber/FieldNumber.css +6 -0
- package/dist/esm/components/molecules/{NumberField/NumberField.d.ts → FieldNumber/FieldNumber.d.ts} +3 -3
- package/dist/esm/components/molecules/FieldNumber/FieldNumber.js +13 -0
- package/dist/esm/components/molecules/FieldNumber/FieldNumber.js.map +1 -0
- package/dist/esm/components/molecules/{PasswordField/PasswordField.css → FieldPassword/FieldPassword.css} +3 -3
- package/dist/esm/components/molecules/{PasswordField/PasswordField.d.ts → FieldPassword/FieldPassword.d.ts} +3 -3
- package/dist/esm/components/molecules/FieldPassword/FieldPassword.js +18 -0
- package/dist/esm/components/molecules/FieldPassword/FieldPassword.js.map +1 -0
- package/dist/esm/components/molecules/FieldText/FieldText.css +6 -0
- package/dist/esm/components/molecules/{TextField/TextField.d.ts → FieldText/FieldText.d.ts} +3 -3
- package/dist/esm/components/molecules/FieldText/FieldText.js +13 -0
- package/dist/esm/components/molecules/FieldText/FieldText.js.map +1 -0
- package/dist/esm/components/molecules/{CheckBoxLabel/CheckBoxLabel.css → LabelCheckBox/LabelCheckBox.css} +5 -5
- package/dist/esm/components/molecules/{CheckBoxLabel/CheckBoxLabel.d.ts → LabelCheckBox/LabelCheckBox.d.ts} +3 -3
- package/dist/esm/components/molecules/{CheckBoxLabel/CheckBoxLabel.js → LabelCheckBox/LabelCheckBox.js} +5 -5
- package/dist/esm/components/molecules/{CheckBoxLabel/CheckBoxLabel.js.map → LabelCheckBox/LabelCheckBox.js.map} +1 -1
- package/dist/esm/components/molecules/{RadioButtonLabel/RadioButtonLabel.css → LabelRadioButton/LabelRadioButton.css} +5 -5
- package/dist/esm/components/molecules/{RadioButtonLabel/RadioButtonLabel.d.ts → LabelRadioButton/LabelRadioButton.d.ts} +3 -3
- package/dist/esm/components/molecules/{RadioButtonLabel/RadioButtonLabel.js → LabelRadioButton/LabelRadioButton.js} +5 -5
- package/dist/esm/components/molecules/{RadioButtonLabel/RadioButtonLabel.js.map → LabelRadioButton/LabelRadioButton.js.map} +1 -1
- package/dist/esm/components/molecules/{SwitchLabel/SwitchLabel.css → LabelSwitch/LabelSwitch.css} +5 -5
- package/dist/esm/components/molecules/{SwitchLabel/SwitchLabel.d.ts → LabelSwitch/LabelSwitch.d.ts} +3 -3
- package/dist/esm/components/molecules/{SwitchLabel/SwitchLabel.js → LabelSwitch/LabelSwitch.js} +4 -4
- package/dist/esm/components/molecules/{SwitchLabel/SwitchLabel.js.map → LabelSwitch/LabelSwitch.js.map} +1 -1
- package/dist/esm/components/molecules/MessageFormError/MesageFormError.css +0 -0
- package/dist/esm/components/molecules/MessageFormError/MesageFormError.d.ts +7 -0
- package/dist/esm/components/molecules/MessageFormError/MesageFormError.js +6 -0
- package/dist/esm/components/molecules/MessageFormError/MesageFormError.js.map +1 -0
- package/dist/esm/components/molecules/{DayPicker/DayPicker.css → PickerDay/PickerDay.css} +13 -13
- package/dist/esm/components/molecules/{DayPicker/DayPicker.d.ts → PickerDay/PickerDay.d.ts} +3 -3
- package/dist/esm/components/molecules/{DayPicker/DayPicker.js → PickerDay/PickerDay.js} +5 -5
- package/dist/esm/components/molecules/{DayPicker/DayPicker.js.map → PickerDay/PickerDay.js.map} +1 -1
- package/dist/esm/components/molecules/{DayRangePicker/DayRangePicker.css → PickerDayRange/PickerDayRange.css} +14 -14
- package/dist/esm/components/molecules/{DayRangePicker/DayRangePicker.d.ts → PickerDayRange/PickerDayRange.d.ts} +3 -3
- package/dist/esm/components/molecules/{DayRangePicker/DayRangePicker.js → PickerDayRange/PickerDayRange.js} +5 -5
- package/dist/esm/components/molecules/{DayRangePicker/DayRangePicker.js.map → PickerDayRange/PickerDayRange.js.map} +1 -1
- package/dist/esm/components/molecules/{MonthPicker/MonthPicker.css → PickerMonth/PickerMonth.css} +8 -8
- package/dist/esm/components/molecules/{MonthPicker/MonthPicker.d.ts → PickerMonth/PickerMonth.d.ts} +3 -3
- package/dist/esm/components/molecules/{MonthPicker/MonthPicker.js → PickerMonth/PickerMonth.js} +5 -5
- package/dist/esm/components/molecules/{MonthPicker/MonthPicker.js.map → PickerMonth/PickerMonth.js.map} +1 -1
- package/dist/esm/components/molecules/{MonthTitlePicker/MonthTitlePicker.css → PickerMonthTitle/PickerMonthTitle.css} +3 -3
- package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.d.ts +15 -0
- package/dist/esm/components/molecules/{MonthTitlePicker/MonthTitlePicker.js → PickerMonthTitle/PickerMonthTitle.js} +5 -5
- package/dist/esm/components/molecules/{MonthTitlePicker/MonthTitlePicker.js.map → PickerMonthTitle/PickerMonthTitle.js.map} +1 -1
- package/dist/esm/components/molecules/{YearPicker/YearPicker.css → PickerYear/PickerYear.css} +14 -14
- package/dist/esm/components/molecules/{YearPicker/YearPicker.d.ts → PickerYear/PickerYear.d.ts} +3 -3
- package/dist/esm/components/molecules/{YearPicker/YearPicker.js → PickerYear/PickerYear.js} +5 -5
- package/dist/esm/components/molecules/{YearPicker/YearPicker.js.map → PickerYear/PickerYear.js.map} +1 -1
- package/dist/esm/components/molecules/index.d.ts +13 -12
- package/dist/esm/components/molecules/index.js +13 -12
- package/dist/esm/components/molecules/index.js.map +1 -1
- package/dist/esm/components/organisms/{AutocompleteField/AutocompleteField.css → FieldAutocomplete/FieldAutocomplete.css} +15 -15
- package/dist/esm/components/organisms/{AutocompleteField/AutocompleteField.d.ts → FieldAutocomplete/FieldAutocomplete.d.ts} +5 -5
- package/dist/esm/components/organisms/{AutocompleteField/AutocompleteField.js → FieldAutocomplete/FieldAutocomplete.js} +13 -13
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -0
- package/dist/esm/components/organisms/{AutocompleteField/AutocompleteFieldHook.d.ts → FieldAutocomplete/FieldAutocompleteHook.d.ts} +3 -3
- package/dist/esm/components/organisms/{AutocompleteField/AutocompleteFieldHook.js → FieldAutocomplete/FieldAutocompleteHook.js} +2 -2
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteHook.js.map +1 -0
- package/dist/esm/components/organisms/{DateField/DateField.css → FieldDate/FieldDate.css} +8 -8
- package/dist/esm/components/organisms/{DateField/DateField.d.ts → FieldDate/FieldDate.d.ts} +3 -3
- package/dist/esm/components/organisms/{DateField/DateField.js → FieldDate/FieldDate.js} +7 -6
- package/dist/esm/components/organisms/FieldDate/FieldDate.js.map +1 -0
- package/dist/esm/components/organisms/{DateRangeField/DateRangeField.css → FieldDateRange/FieldDateRange.css} +6 -6
- package/dist/esm/components/organisms/{DateRangeField/DateRangeField.d.ts → FieldDateRange/FieldDateRange.d.ts} +3 -3
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js +34 -0
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js.map +1 -0
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.css +10 -0
- package/dist/esm/components/organisms/{SelectField/SelectField.d.ts → FieldSelect/FieldSelect.d.ts} +5 -5
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +27 -0
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -0
- package/dist/esm/components/organisms/{SelectField/SelectFieldHook.d.ts → FieldSelect/FieldSelectHook.d.ts} +3 -3
- package/dist/esm/components/organisms/{SelectField/SelectFieldHook.js → FieldSelect/FieldSelectHook.js} +2 -2
- package/dist/esm/components/organisms/FieldSelect/FieldSelectHook.js.map +1 -0
- package/dist/esm/components/organisms/{DatePicker/DatePicker.css → PickerDate/PickerDate.css} +17 -17
- package/dist/esm/components/organisms/{DatePicker/DatePicker.d.ts → PickerDate/PickerDate.d.ts} +3 -3
- package/dist/esm/components/organisms/{DatePicker/DatePicker.js → PickerDate/PickerDate.js} +6 -6
- package/dist/esm/components/organisms/{DatePicker/DatePicker.js.map → PickerDate/PickerDate.js.map} +1 -1
- package/dist/esm/components/organisms/{DateRangePicker/DateRangePicker.css → PickerDateRange/PickerDateRange.css} +16 -16
- package/dist/esm/components/organisms/{DateRangePicker/DateRangePicker.d.ts → PickerDateRange/PickerDateRange.d.ts} +3 -3
- package/dist/esm/components/organisms/{DateRangePicker/DateRangePicker.js → PickerDateRange/PickerDateRange.js} +7 -7
- package/dist/esm/components/organisms/{DateRangePicker/DateRangePicker.js.map → PickerDateRange/PickerDateRange.js.map} +1 -1
- package/dist/esm/components/organisms/index.d.ts +6 -6
- package/dist/esm/components/organisms/index.js +6 -6
- package/dist/esm/components/organisms/index.js.map +1 -1
- package/package.json +2 -2
- package/dist/esm/components/molecules/MoneyField/MoneyField.css +0 -6
- package/dist/esm/components/molecules/MoneyField/MoneyField.js +0 -12
- package/dist/esm/components/molecules/MoneyField/MoneyField.js.map +0 -1
- package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.d.ts +0 -15
- package/dist/esm/components/molecules/NumberField/NumberField.css +0 -6
- package/dist/esm/components/molecules/NumberField/NumberField.js +0 -12
- package/dist/esm/components/molecules/NumberField/NumberField.js.map +0 -1
- package/dist/esm/components/molecules/PasswordField/PasswordField.js +0 -17
- package/dist/esm/components/molecules/PasswordField/PasswordField.js.map +0 -1
- package/dist/esm/components/molecules/TextField/TextField.css +0 -6
- package/dist/esm/components/molecules/TextField/TextField.js +0 -12
- package/dist/esm/components/molecules/TextField/TextField.js.map +0 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js.map +0 -1
- package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js.map +0 -1
- package/dist/esm/components/organisms/DateField/DateField.js.map +0 -1
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +0 -33
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +0 -1
- package/dist/esm/components/organisms/SelectField/SelectField.css +0 -10
- package/dist/esm/components/organisms/SelectField/SelectField.js +0 -27
- package/dist/esm/components/organisms/SelectField/SelectField.js.map +0 -1
- package/dist/esm/components/organisms/SelectField/SelectFieldHook.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qCAAqC,CAAC;AACpD,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
.rls-autocomplete
|
|
1
|
+
.rls-field-autocomplete {
|
|
2
2
|
--pvt-control-width: 100%;
|
|
3
3
|
--pvt-control-opacity: 1;
|
|
4
4
|
}
|
|
5
|
-
.rls-autocomplete
|
|
5
|
+
.rls-field-autocomplete.rls-field-box--selected {
|
|
6
6
|
--pvt-control-width: calc(100% - var(--rls-sizing-x14));
|
|
7
7
|
}
|
|
8
|
-
.rls-autocomplete
|
|
8
|
+
.rls-field-autocomplete.rls-field-box--disabled {
|
|
9
9
|
--pvt-control-opacity: 0.5;
|
|
10
10
|
}
|
|
11
|
-
.rls-autocomplete
|
|
11
|
+
.rls-field-autocomplete .rls-field-list__control {
|
|
12
12
|
width: var(--pvt-control-width);
|
|
13
13
|
text-overflow: ellipsis;
|
|
14
14
|
overflow: hidden;
|
|
15
15
|
white-space: nowrap;
|
|
16
16
|
opacity: var(--pvt-control-opacity);
|
|
17
17
|
}
|
|
18
|
-
.rls-autocomplete
|
|
18
|
+
.rls-field-autocomplete .rls-field-list__ul__search {
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
21
|
width: 100%;
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
padding: var(--rls-sizing-x4);
|
|
27
27
|
box-sizing: border-box;
|
|
28
28
|
}
|
|
29
|
-
.rls-autocomplete
|
|
29
|
+
.rls-field-autocomplete .rls-field-list__ul__search button {
|
|
30
30
|
color: var(--rls-app-color-300);
|
|
31
31
|
background: transparent;
|
|
32
32
|
}
|
|
33
|
-
.rls-autocomplete
|
|
34
|
-
.rls-
|
|
33
|
+
.rls-field-autocomplete
|
|
34
|
+
.rls-field-list__ul__search
|
|
35
35
|
button:not(:disabled):hover {
|
|
36
36
|
color: var(--rls-theme-color-300);
|
|
37
37
|
}
|
|
38
|
-
.rls-autocomplete
|
|
38
|
+
.rls-field-autocomplete .rls-field-list__ul__search button:disabled {
|
|
39
39
|
opacity: 0.5;
|
|
40
40
|
}
|
|
41
|
-
.rls-autocomplete
|
|
41
|
+
.rls-field-autocomplete .rls-field-list__ul__control {
|
|
42
42
|
width: 100%;
|
|
43
43
|
height: var(--rls-sizing-x12);
|
|
44
44
|
line-height: var(--rls-sizing-x12);
|
|
@@ -52,20 +52,20 @@
|
|
|
52
52
|
font-weight: var(--rls-font-weight-medium);
|
|
53
53
|
letter-spacing: var(--rls-input-letter-spacing);
|
|
54
54
|
}
|
|
55
|
-
.rls-autocomplete
|
|
55
|
+
.rls-field-autocomplete .rls-field-list__ul__control::placeholder {
|
|
56
56
|
color: var(--rls-app-color-100);
|
|
57
57
|
}
|
|
58
|
-
.rls-autocomplete
|
|
58
|
+
.rls-field-autocomplete .rls-field-list__ul__control::selection {
|
|
59
59
|
background: var(--rls-theme-color-700);
|
|
60
60
|
color: var(--rls-light-color-500);
|
|
61
61
|
}
|
|
62
|
-
.rls-autocomplete
|
|
62
|
+
.rls-field-autocomplete .rls-field-list__ul__control:disabled {
|
|
63
63
|
opacity: 0.5;
|
|
64
64
|
}
|
|
65
|
-
.rls-autocomplete
|
|
65
|
+
.rls-field-autocomplete .rls-field-list__ul .rls-progress-bar {
|
|
66
66
|
margin-bottom: var(--rls-sizing-x8);
|
|
67
67
|
}
|
|
68
|
-
.rls-autocomplete
|
|
68
|
+
.rls-field-autocomplete .rls-field-list__element .rls-ballot__title label {
|
|
69
69
|
background: var(--rls-theme-color-100);
|
|
70
70
|
color: var(--rls-theme-color-500);
|
|
71
71
|
padding: 0rem var(--rls-sizing-x2);
|
|
@@ -2,8 +2,8 @@ import { AbstractAutocompleteElement as Element, AutocompleteElement } from '@ro
|
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
import { RlsComponent } from '../../definitions';
|
|
5
|
-
import './
|
|
6
|
-
interface
|
|
5
|
+
import './FieldAutocomplete.css';
|
|
6
|
+
interface FieldAutocompleteProps<T = unknown, E extends Element<T> = Element<T>> extends RlsComponent {
|
|
7
7
|
suggestions: E[];
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
formControl?: ReactControl<HTMLElement, T>;
|
|
@@ -14,9 +14,9 @@ interface AutocompleteFieldProps<T = unknown, E extends Element<T> = Element<T>>
|
|
|
14
14
|
onSelect?: (value: T) => void;
|
|
15
15
|
onValue?: (value?: T) => void;
|
|
16
16
|
}
|
|
17
|
-
interface
|
|
17
|
+
interface FieldAutocompleteTemplateProps<T = unknown, E extends Element<T> = Element<T>> extends FieldAutocompleteProps<T, E> {
|
|
18
18
|
render: (element: E) => ReactNode;
|
|
19
19
|
}
|
|
20
|
-
export declare function
|
|
21
|
-
export declare function
|
|
20
|
+
export declare function RlsFieldAutocompleteTemplate<T = unknown, E extends Element<T> = Element<T>>({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }: FieldAutocompleteTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function RlsFieldAutocomplete<T = unknown>(props: FieldAutocompleteProps<T, AutocompleteElement<T>>): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
export {};
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import reactI18n from '../../../i18n';
|
|
3
3
|
import { renderClassStatus } from '../../../helpers/css';
|
|
4
|
-
import {
|
|
5
|
-
import { RlsBallot } from '../../molecules';
|
|
6
|
-
import {
|
|
7
|
-
import './
|
|
8
|
-
export function
|
|
9
|
-
const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } =
|
|
4
|
+
import { RlsIcon, RlsProgressBar } from '../../atoms';
|
|
5
|
+
import { RlsBallot, RlsMessageFormError } from '../../molecules';
|
|
6
|
+
import { useFieldAutocomplete } from './FieldAutocompleteHook';
|
|
7
|
+
import './FieldAutocomplete.css';
|
|
8
|
+
export function RlsFieldAutocompleteTemplate({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }) {
|
|
9
|
+
const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } = useFieldAutocomplete({
|
|
10
10
|
suggestions,
|
|
11
11
|
disabled,
|
|
12
12
|
formControl,
|
|
13
13
|
onSelect,
|
|
14
14
|
onValue
|
|
15
15
|
});
|
|
16
|
-
return (_jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box
|
|
16
|
+
return (_jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', {
|
|
17
17
|
disabled,
|
|
18
18
|
focused: listControl.focused,
|
|
19
19
|
selected: !!listControl.value
|
|
20
|
-
}, 'rls-
|
|
20
|
+
}, 'rls-field-list rls-field-autocomplete'), "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("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (_jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (_jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (_jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "trash-2" }) }))] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
|
|
21
21
|
visible: listControl.visible,
|
|
22
22
|
hide: !listControl.visible,
|
|
23
23
|
higher: listControl.higher
|
|
24
|
-
}), children: [_jsx("div", { className: "rls-
|
|
24
|
+
}), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [_jsxs("div", { className: "rls-field-list__ul__search", children: [_jsx("input", { ref: listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
|
|
25
25
|
setPattern(value);
|
|
26
26
|
}, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: () => {
|
|
27
27
|
onSearch(pattern);
|
|
28
|
-
}, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-
|
|
28
|
+
}, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.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: reactI18n('listEmptyTitle') }), _jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] })] }));
|
|
29
29
|
}
|
|
30
|
-
export function
|
|
31
|
-
return (_jsx(
|
|
30
|
+
export function RlsFieldAutocomplete(props) {
|
|
31
|
+
return (_jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
|
|
32
32
|
}
|
|
33
|
-
//# sourceMappingURL=
|
|
33
|
+
//# sourceMappingURL=FieldAutocomplete.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { AbstractAutocompleteElement as Element } from '@rolster/helpers-compone
|
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
4
4
|
import { ListControl } from '../../../hooks';
|
|
5
|
-
export interface
|
|
5
|
+
export interface FieldAutocompleteControl<T = unknown, E extends Element<T> = Element<T>> {
|
|
6
6
|
coincidences: E[];
|
|
7
7
|
listControl: ListControl<T>;
|
|
8
8
|
onBlurInput: () => void;
|
|
@@ -16,12 +16,12 @@ export interface AutocompleteControl<T = unknown, E extends Element<T> = Element
|
|
|
16
16
|
pattern: string;
|
|
17
17
|
setPattern: (value: string) => void;
|
|
18
18
|
}
|
|
19
|
-
interface
|
|
19
|
+
interface FieldAutocompleteProps<T = unknown, E extends Element<T> = Element<T>> {
|
|
20
20
|
suggestions: E[];
|
|
21
21
|
disabled?: boolean;
|
|
22
22
|
formControl?: ReactControl<HTMLElement, T>;
|
|
23
23
|
onSelect?: (value: T) => void;
|
|
24
24
|
onValue?: (value?: T) => void;
|
|
25
25
|
}
|
|
26
|
-
export declare function
|
|
26
|
+
export declare function useFieldAutocomplete<T = unknown, E extends Element<T> = Element<T>>({ disabled, formControl, onSelect, onValue, suggestions }: FieldAutocompleteProps<T, E>): FieldAutocompleteControl<T, E>;
|
|
27
27
|
export {};
|
|
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
import { useListControl } from '../../../hooks';
|
|
4
4
|
const DURATION_ANIMATION = 240;
|
|
5
5
|
const MAX_ELEMENTS = 6;
|
|
6
|
-
export function
|
|
6
|
+
export function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, suggestions }) {
|
|
7
7
|
const [pattern, setPattern] = useState('');
|
|
8
8
|
const [coincidences, setCoincidences] = useState([]);
|
|
9
9
|
const currentStore = useRef({
|
|
@@ -141,4 +141,4 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
|
|
|
141
141
|
setPattern
|
|
142
142
|
};
|
|
143
143
|
}
|
|
144
|
-
//# sourceMappingURL=
|
|
144
|
+
//# sourceMappingURL=FieldAutocompleteHook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldAutocompleteHook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocompleteHook.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
.rls-date
|
|
2
|
-
--rlc-
|
|
1
|
+
.rls-field-date {
|
|
2
|
+
--rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
3
3
|
position: relative;
|
|
4
4
|
width: 100%;
|
|
5
5
|
box-sizing: border-box;
|
|
6
6
|
}
|
|
7
|
-
.rls-date
|
|
7
|
+
.rls-field-date .rls-field-box__body {
|
|
8
8
|
column-gap: var(--rls-sizing-x2);
|
|
9
9
|
}
|
|
10
|
-
.rls-
|
|
10
|
+
.rls-field-date__control {
|
|
11
11
|
position: relative;
|
|
12
12
|
width: calc(100% - var(--rls-sizing-x14));
|
|
13
13
|
height: var(--rls-sizing-x12);
|
|
@@ -22,19 +22,19 @@
|
|
|
22
22
|
font-size: var(--rlc-input-font-size);
|
|
23
23
|
letter-spacing: var(--rlc-input-letter-spacing);
|
|
24
24
|
}
|
|
25
|
-
.rls-
|
|
25
|
+
.rls-field-date__control::placeholder {
|
|
26
26
|
color: var(--rls-app-color-100);
|
|
27
27
|
}
|
|
28
|
-
.rls-
|
|
28
|
+
.rls-field-date__control:disabled {
|
|
29
29
|
opacity: 0.5;
|
|
30
30
|
}
|
|
31
|
-
.rls-
|
|
31
|
+
.rls-field-date__action {
|
|
32
32
|
color: var(--rls-app-color-300);
|
|
33
33
|
width: var(--rls-sizing-x12);
|
|
34
34
|
height: var(--rls-sizing-x12);
|
|
35
35
|
padding: 0rem;
|
|
36
36
|
background: transparent;
|
|
37
37
|
}
|
|
38
|
-
.rls-
|
|
38
|
+
.rls-field-date__action:disabled {
|
|
39
39
|
opacity: 0.5;
|
|
40
40
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactControl } from '@rolster/react-forms';
|
|
2
2
|
import { RlsComponent } from '../../definitions';
|
|
3
|
-
import './
|
|
4
|
-
interface
|
|
3
|
+
import './FieldDate.css';
|
|
4
|
+
interface FieldDateProps extends RlsComponent {
|
|
5
5
|
date?: Date;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
formControl?: ReactControl<HTMLElement, Date>;
|
|
@@ -10,5 +10,5 @@ interface DateFieldProps extends RlsComponent {
|
|
|
10
10
|
onValue?: (value?: Date) => void;
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
}
|
|
13
|
-
export declare function
|
|
13
|
+
export declare function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }: FieldDateProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -4,11 +4,12 @@ import { dateFormatTemplate } from '@rolster/helpers-date';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { DATE_RANGE_FORMAT } from '../../../constants';
|
|
6
6
|
import { renderClassStatus } from '../../../helpers';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { RlsIcon } from '../../atoms';
|
|
8
|
+
import { RlsMessageFormError } from '../../molecules';
|
|
9
9
|
import { RlsModal } from '../Modal/Modal';
|
|
10
|
-
import '
|
|
11
|
-
|
|
10
|
+
import { RlsPickerDate } from '../PickerDate/PickerDate';
|
|
11
|
+
import './FieldDate.css';
|
|
12
|
+
export function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
|
|
12
13
|
const today = new Date(); // Initial current date in component
|
|
13
14
|
const [value, setValue] = useState();
|
|
14
15
|
const [modalIsVisible, setModalIsVisible] = useState(false);
|
|
@@ -44,7 +45,7 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
|
|
|
44
45
|
setModalIsVisible(true);
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
|
-
return (_jsxs("div", { className: "rls-date
|
|
48
|
+
return (_jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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", { className: "rls-field-date__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
|
|
48
49
|
if (type !== PickerListenerType.Cancel) {
|
|
49
50
|
onChange(value, true);
|
|
50
51
|
}
|
|
@@ -54,4 +55,4 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
|
|
|
54
55
|
}
|
|
55
56
|
} }) })] }));
|
|
56
57
|
}
|
|
57
|
-
//# sourceMappingURL=
|
|
58
|
+
//# sourceMappingURL=FieldDate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDate/FieldDate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.rls-date-range
|
|
2
|
-
--rlc-
|
|
1
|
+
.rls-field-date-range {
|
|
2
|
+
--rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
|
|
3
3
|
position: relative;
|
|
4
4
|
width: 100%;
|
|
5
5
|
box-sizing: border-box;
|
|
6
6
|
}
|
|
7
|
-
.rls-date-
|
|
7
|
+
.rls-field-date-range__control {
|
|
8
8
|
position: relative;
|
|
9
9
|
width: calc(100% - var(--rls-sizing-x14));
|
|
10
10
|
height: var(--rls-sizing-x12);
|
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
font-size: var(--rlc-input-font-size);
|
|
20
20
|
letter-spacing: var(--rlc-input-letter-spacing);
|
|
21
21
|
}
|
|
22
|
-
.rls-date-
|
|
22
|
+
.rls-field-date-range__control::placeholder {
|
|
23
23
|
color: var(--rls-app-color-100);
|
|
24
24
|
}
|
|
25
|
-
.rls-date-
|
|
25
|
+
.rls-field-date-range__control:disabled {
|
|
26
26
|
opacity: 0.5;
|
|
27
27
|
}
|
|
28
|
-
.rls-date-
|
|
28
|
+
.rls-field-date-range__action {
|
|
29
29
|
color: var(--rls-app-color-300);
|
|
30
30
|
width: var(--rls-sizing-x12);
|
|
31
31
|
height: var(--rls-sizing-x12);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DateRange } from '@rolster/helpers-date';
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { RlsComponent } from '../../definitions';
|
|
4
|
-
import './
|
|
5
|
-
interface
|
|
4
|
+
import './FieldDateRange.css';
|
|
5
|
+
interface FieldDateRangeProps extends RlsComponent {
|
|
6
6
|
date?: Date;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
formControl?: ReactControl<HTMLElement, DateRange>;
|
|
@@ -10,5 +10,5 @@ interface DateRangeFieldProps extends RlsComponent {
|
|
|
10
10
|
minDate?: Date;
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
}
|
|
13
|
-
export declare function
|
|
13
|
+
export declare function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }: FieldDateRangeProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { DateRange } from '@rolster/helpers-date';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { rangeFormatTemplate, renderClassStatus } from '../../../helpers';
|
|
5
|
+
import { RlsIcon } from '../../atoms';
|
|
6
|
+
import { RlsMessageFormError } from '../../molecules';
|
|
7
|
+
import { RlsModal } from '../Modal/Modal';
|
|
8
|
+
import { RlsPickerDateRange } from '../PickerDateRange/PickerDateRange';
|
|
9
|
+
import './FieldDateRange.css';
|
|
10
|
+
export function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
|
|
11
|
+
const currentRange = formControl?.state || DateRange.now();
|
|
12
|
+
const currentDate = datePicker || new Date();
|
|
13
|
+
const [value, setValue] = useState(currentRange);
|
|
14
|
+
const [modalIsVisible, setModalIsVisible] = useState(false);
|
|
15
|
+
function onClickInput() {
|
|
16
|
+
setModalIsVisible(true);
|
|
17
|
+
}
|
|
18
|
+
function onClickAction() {
|
|
19
|
+
if (value) {
|
|
20
|
+
formControl?.setState(undefined);
|
|
21
|
+
setValue(undefined);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
setModalIsVisible(true);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return (_jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
|
|
28
|
+
if (value) {
|
|
29
|
+
setValue(value);
|
|
30
|
+
}
|
|
31
|
+
setModalIsVisible(false);
|
|
32
|
+
} }) })] }));
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=FieldDateRange.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldDateRange.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDateRange/FieldDateRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,sBAAsB,CAAC;AAW9B,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,IAAI,EAAE,UAAU,EAChB,QAAQ,EACR,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACY;IACpB,MAAM,YAAY,GAAG,WAAW,EAAE,KAAK,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;IAC3D,MAAM,WAAW,GAAG,UAAU,IAAI,IAAI,IAAI,EAAE,CAAC;IAE7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,YAAY,CAAC,CAAC;IACvE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,YAAY;QACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,SAAS,aAAa;QACpB,IAAI,KAAK,EAAE,CAAC;YACV,WAAW,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,eAAY,QAAQ,aACvD,eAAK,SAAS,EAAE,iBAAiB,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,CAAC,aAC7D,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EAEvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9C,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,GAClB,EAEF,iBACE,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,GAAI,GAC3C,IACL,GACF,EAEN,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,IACE,EAEN,KAAC,QAAQ,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,YACnD,KAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;wBACxB,IAAI,KAAK,EAAE,CAAC;4BACV,QAAQ,CAAC,KAAK,CAAC,CAAC;wBAClB,CAAC;wBAED,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBAC3B,CAAC,GACD,GACO,IACP,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
.rls-field-select .rls-field-list__control {
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.rls-field-select .rls-field-list__action {
|
|
6
|
+
transition: transform 160ms 0ms var(--rls-sharp-curve);
|
|
7
|
+
}
|
|
8
|
+
.rls-field-select .rls-field-list__action--visible {
|
|
9
|
+
transform: rotate(180deg);
|
|
10
|
+
}
|
package/dist/esm/components/organisms/{SelectField/SelectField.d.ts → FieldSelect/FieldSelect.d.ts}
RENAMED
|
@@ -2,8 +2,8 @@ import { AbstractListElement as Element, ListElement } from '@rolster/helpers-co
|
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
import { RlsComponent } from '../../definitions';
|
|
5
|
-
import './
|
|
6
|
-
interface
|
|
5
|
+
import './FieldSelect.css';
|
|
6
|
+
interface FieldSelectProps<T = unknown, E extends Element<T> = Element<T>> extends RlsComponent {
|
|
7
7
|
suggestions: E[];
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
formControl?: ReactControl<HTMLElement, T>;
|
|
@@ -11,9 +11,9 @@ interface SelectFieldProps<T = unknown, E extends Element<T> = Element<T>> exten
|
|
|
11
11
|
onSelect?: (value: T) => void;
|
|
12
12
|
onValue?: (value?: T) => void;
|
|
13
13
|
}
|
|
14
|
-
interface
|
|
14
|
+
interface FieldSelectTemplateProps<T = unknown, E extends Element<T> = Element<T>> extends FieldSelectProps<T, E> {
|
|
15
15
|
render: (element: E) => ReactNode;
|
|
16
16
|
}
|
|
17
|
-
export declare function
|
|
18
|
-
export declare function
|
|
17
|
+
export declare function RlsFieldSelectTemplate<T = unknown, E extends Element<T> = Element<T>>({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }: FieldSelectTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function RlsFieldSelect<T = unknown>(props: FieldSelectProps<T, ListElement<T>>): import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import reactI18n from '../../../i18n';
|
|
3
|
+
import { renderClassStatus } from '../../../helpers/css';
|
|
4
|
+
import { RlsIcon } from '../../atoms';
|
|
5
|
+
import { RlsBallot, RlsMessageFormError } from '../../molecules';
|
|
6
|
+
import { useFieldSelect } from './FieldSelectHook';
|
|
7
|
+
import './FieldSelect.css';
|
|
8
|
+
export function RlsFieldSelectTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
|
|
9
|
+
const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useFieldSelect({
|
|
10
|
+
suggestions,
|
|
11
|
+
disabled,
|
|
12
|
+
formControl,
|
|
13
|
+
onSelect,
|
|
14
|
+
onValue
|
|
15
|
+
});
|
|
16
|
+
return (_jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', { focused: listControl.focused, disabled }, 'rls-field-list rls-field-select'), "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: listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-field-list__action', {
|
|
17
|
+
visible: listControl.visible
|
|
18
|
+
}), disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
|
|
19
|
+
visible: listControl.visible,
|
|
20
|
+
hide: !listControl.visible,
|
|
21
|
+
higher: listControl.higher
|
|
22
|
+
}), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: 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: reactI18n('listEmptyTitle') }), _jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] })] }));
|
|
23
|
+
}
|
|
24
|
+
export function RlsFieldSelect(props) {
|
|
25
|
+
return (_jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=FieldSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { AbstractListElement as Element } from '@rolster/helpers-components';
|
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
4
4
|
import { ListControl } from '../../../hooks';
|
|
5
|
-
export interface
|
|
5
|
+
export interface FieldSelectControl<T = unknown, E extends Element<T> = Element<T>> {
|
|
6
6
|
listControl: ListControl<T>;
|
|
7
7
|
onBlurInput: () => void;
|
|
8
8
|
onClickAction: () => void;
|
|
@@ -13,12 +13,12 @@ export interface SelectControl<T = unknown, E extends Element<T> = Element<T>> {
|
|
|
13
13
|
onKeydownElement: (element: E) => KeyboardEventHandler;
|
|
14
14
|
onKeydownInput: (event: KeyboardEvent) => void;
|
|
15
15
|
}
|
|
16
|
-
interface
|
|
16
|
+
interface FieldSelectProps<T = unknown, E extends Element<T> = Element<T>> {
|
|
17
17
|
suggestions: E[];
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
formControl?: ReactControl<HTMLElement, T>;
|
|
20
20
|
onSelect?: (value: T) => void;
|
|
21
21
|
onValue?: (value?: T) => void;
|
|
22
22
|
}
|
|
23
|
-
export declare function
|
|
23
|
+
export declare function useFieldSelect<T = unknown, E extends Element<T> = Element<T>>({ suggestions, formControl, onSelect, onValue }: FieldSelectProps<T, E>): FieldSelectControl<T, E>;
|
|
24
24
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
|
2
2
|
import { useListControl } from '../../../hooks';
|
|
3
|
-
export function
|
|
3
|
+
export function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
|
|
4
4
|
const listControl = useListControl({ suggestions, formControl });
|
|
5
5
|
const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
|
|
6
6
|
const initializedState = useRef(false);
|
|
@@ -110,4 +110,4 @@ export function useSelectField({ suggestions, formControl, onSelect, onValue })
|
|
|
110
110
|
onKeydownInput
|
|
111
111
|
};
|
|
112
112
|
}
|
|
113
|
-
//# sourceMappingURL=
|
|
113
|
+
//# sourceMappingURL=FieldSelectHook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldSelectHook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectHook.ts"],"names":[],"mappings":"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"}
|