@rolster/react-components 18.15.41 → 18.16.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/dist/cjs/index.js +31 -31
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +32 -32
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/molecules/PickerDay/PickerDay.js +6 -6
- package/dist/esm/components/molecules/PickerDay/PickerDay.js.map +1 -1
- package/dist/esm/components/molecules/PickerMonth/PickerMonth.js +6 -6
- package/dist/esm/components/molecules/PickerMonth/PickerMonth.js.map +1 -1
- package/dist/esm/components/molecules/PickerYear/PickerYear.js +7 -7
- package/dist/esm/components/molecules/PickerYear/PickerYear.js.map +1 -1
- package/dist/esm/components/organisms/FieldDate/FieldDate.js +6 -6
- package/dist/esm/components/organisms/FieldDate/FieldDate.js.map +1 -1
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js +3 -3
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js.map +1 -1
- package/dist/esm/components/organisms/PickerDate/PickerDate.js +7 -7
- package/dist/esm/components/organisms/PickerDate/PickerDate.js.map +1 -1
- package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.js +3 -3
- package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.js.map +1 -1
- package/package.json +11 -11
package/dist/cjs/index.js
CHANGED
|
@@ -1734,17 +1734,17 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
|
|
|
1734
1734
|
const [weeks, setWeeks] = require$$0.useState([]);
|
|
1735
1735
|
const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getDate());
|
|
1736
1736
|
require$$0.useEffect(() => {
|
|
1737
|
-
const
|
|
1738
|
-
const day = components.
|
|
1739
|
-
day ? setDayValue(day) : setWeeks(components.createDayPicker(
|
|
1737
|
+
const options = createPickerOptions();
|
|
1738
|
+
const day = components.verifyDayPicker(options);
|
|
1739
|
+
day ? setDayValue(day) : setWeeks(components.createDayPicker(options));
|
|
1740
1740
|
}, [date, month, year, value, minDate, maxDate]);
|
|
1741
1741
|
require$$0.useEffect(() => {
|
|
1742
|
-
const day = components.
|
|
1742
|
+
const day = components.verifyDayPicker(createPickerOptions());
|
|
1743
1743
|
day
|
|
1744
1744
|
? formControl?.setValue(day)
|
|
1745
1745
|
: setValue(formControl?.value || currentDate.getDate());
|
|
1746
1746
|
}, [formControl?.value]);
|
|
1747
|
-
function
|
|
1747
|
+
function createPickerOptions() {
|
|
1748
1748
|
return {
|
|
1749
1749
|
date: currentDate,
|
|
1750
1750
|
day: formControl?.value || value,
|
|
@@ -1813,17 +1813,17 @@ function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate,
|
|
|
1813
1813
|
const [months, setMonths] = require$$0.useState([]);
|
|
1814
1814
|
const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getMonth());
|
|
1815
1815
|
require$$0.useEffect(() => {
|
|
1816
|
-
const
|
|
1817
|
-
const month = components.
|
|
1818
|
-
month ? setMonthValue(month) : setMonths(components.createMonthPicker(
|
|
1816
|
+
const options = createPickerOptions(); // MonthPickerProps
|
|
1817
|
+
const month = components.verifyMonthPicker(options);
|
|
1818
|
+
month ? setMonthValue(month) : setMonths(components.createMonthPicker(options));
|
|
1819
1819
|
}, [date, year, value, minDate, maxDate]);
|
|
1820
1820
|
require$$0.useEffect(() => {
|
|
1821
|
-
const month = components.
|
|
1821
|
+
const month = components.verifyMonthPicker(createPickerOptions());
|
|
1822
1822
|
commons.itIsDefined(month)
|
|
1823
1823
|
? formControl?.setValue(month)
|
|
1824
1824
|
: setValue(formControl?.value || currentDate.getMonth());
|
|
1825
1825
|
}, [formControl?.value]);
|
|
1826
|
-
function
|
|
1826
|
+
function createPickerOptions() {
|
|
1827
1827
|
return {
|
|
1828
1828
|
date: currentDate,
|
|
1829
1829
|
month: commons.itIsDefined(formControl?.value) ? formControl?.value : value,
|
|
@@ -1903,21 +1903,21 @@ function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, m
|
|
|
1903
1903
|
const currentDate = date || new Date();
|
|
1904
1904
|
const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getFullYear());
|
|
1905
1905
|
const [year, setYear] = require$$0.useState(formControl?.value || currentDate.getFullYear());
|
|
1906
|
-
const [template, setTemplate] = require$$0.useState(components.createYearPicker(
|
|
1906
|
+
const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
|
|
1907
1907
|
require$$0.useEffect(() => {
|
|
1908
|
-
const
|
|
1909
|
-
const year = components.
|
|
1908
|
+
const options = createPickerOptions(); // YearPickerProps
|
|
1909
|
+
const year = components.verifyYearPicker(options);
|
|
1910
1910
|
year
|
|
1911
1911
|
? setYearValue(year)
|
|
1912
|
-
: setTemplate(components.createYearPicker(
|
|
1912
|
+
: setTemplate(components.createYearPicker(createPickerOptions()));
|
|
1913
1913
|
}, [date, year, value, minDate, maxDate]);
|
|
1914
1914
|
require$$0.useEffect(() => {
|
|
1915
|
-
const year = components.
|
|
1915
|
+
const year = components.verifyYearPicker(createPickerOptions());
|
|
1916
1916
|
commons.itIsDefined(year)
|
|
1917
1917
|
? formControl?.setValue(year)
|
|
1918
1918
|
: setValue(formControl?.value || currentDate.getFullYear());
|
|
1919
1919
|
}, [formControl?.value]);
|
|
1920
|
-
function
|
|
1920
|
+
function createPickerOptions() {
|
|
1921
1921
|
return {
|
|
1922
1922
|
date: currentDate,
|
|
1923
1923
|
year,
|
|
@@ -2320,13 +2320,13 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
|
|
|
2320
2320
|
const [value, setValue] = require$$0.useState(dateInitial);
|
|
2321
2321
|
const [visibility, setVisibility] = require$$0.useState('DAY');
|
|
2322
2322
|
require$$0.useEffect(() => {
|
|
2323
|
-
const
|
|
2323
|
+
const dateRange = components.verifyDateRange({
|
|
2324
2324
|
date: formControl?.value || date || today,
|
|
2325
2325
|
minDate,
|
|
2326
2326
|
maxDate
|
|
2327
2327
|
});
|
|
2328
|
-
setValue(
|
|
2329
|
-
formControl?.setValue(
|
|
2328
|
+
setValue(dateRange);
|
|
2329
|
+
formControl?.setValue(dateRange);
|
|
2330
2330
|
}, []);
|
|
2331
2331
|
require$$0.useEffect(() => {
|
|
2332
2332
|
commons.itIsDefined(yearControl.value) &&
|
|
@@ -2350,18 +2350,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
|
|
|
2350
2350
|
setVisibility('YEAR');
|
|
2351
2351
|
}
|
|
2352
2352
|
function onCancel() {
|
|
2353
|
-
onListener && onListener({
|
|
2353
|
+
onListener && onListener({ event: components.PickerListenerEvent.Cancel });
|
|
2354
2354
|
}
|
|
2355
2355
|
function onToday() {
|
|
2356
2356
|
yearControl.setValue(today.getFullYear());
|
|
2357
2357
|
dayControl.setValue(today.getDate());
|
|
2358
2358
|
monthControl.setValue(today.getMonth());
|
|
2359
2359
|
formControl?.setValue(today);
|
|
2360
|
-
onListener && onListener({
|
|
2360
|
+
onListener && onListener({ event: components.PickerListenerEvent.Now, value: today });
|
|
2361
2361
|
}
|
|
2362
2362
|
function onSelect() {
|
|
2363
2363
|
formControl?.setValue(value);
|
|
2364
|
-
onListener && onListener({
|
|
2364
|
+
onListener && onListener({ event: components.PickerListenerEvent.Select, value });
|
|
2365
2365
|
}
|
|
2366
2366
|
return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dates.dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
|
|
2367
2367
|
day: visibility === 'DAY',
|
|
@@ -2376,13 +2376,13 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
|
|
|
2376
2376
|
const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
|
|
2377
2377
|
const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
|
|
2378
2378
|
require$$0.useEffect(() => {
|
|
2379
|
-
const
|
|
2379
|
+
const dateRange = components.verifyDateRange({
|
|
2380
2380
|
date: formControl?.value || date || today,
|
|
2381
2381
|
minDate,
|
|
2382
2382
|
maxDate
|
|
2383
2383
|
});
|
|
2384
|
-
setValue(
|
|
2385
|
-
formControl?.setValue(
|
|
2384
|
+
setValue(dateRange);
|
|
2385
|
+
formControl?.setValue(dateRange);
|
|
2386
2386
|
}, []);
|
|
2387
2387
|
function onChange(value) {
|
|
2388
2388
|
setValue(value);
|
|
@@ -2404,8 +2404,8 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
|
|
|
2404
2404
|
const valueInput = value
|
|
2405
2405
|
? dates.dateFormatTemplate(value, format || FORMAT_DATE)
|
|
2406
2406
|
: '';
|
|
2407
|
-
return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({
|
|
2408
|
-
|
|
2407
|
+
return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
|
|
2408
|
+
event !== components.PickerListenerEvent.Cancel && onChange(value);
|
|
2409
2409
|
formControl?.touch();
|
|
2410
2410
|
setModalIsVisible(false);
|
|
2411
2411
|
} }) })] }));
|
|
@@ -2448,11 +2448,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
|
|
|
2448
2448
|
setVisibility('YEAR');
|
|
2449
2449
|
}
|
|
2450
2450
|
function onCancel() {
|
|
2451
|
-
onListener && onListener({
|
|
2451
|
+
onListener && onListener({ event: components.PickerListenerEvent.Cancel });
|
|
2452
2452
|
}
|
|
2453
2453
|
function onSelect() {
|
|
2454
2454
|
formControl?.setValue(value);
|
|
2455
|
-
onListener && onListener({
|
|
2455
|
+
onListener && onListener({ event: components.PickerListenerEvent.Select, value });
|
|
2456
2456
|
}
|
|
2457
2457
|
return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
|
|
2458
2458
|
day: visibility === 'DAY',
|
|
@@ -2484,8 +2484,8 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
|
|
|
2484
2484
|
setValue(value);
|
|
2485
2485
|
onValue && onValue(value);
|
|
2486
2486
|
}
|
|
2487
|
-
return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({
|
|
2488
|
-
|
|
2487
|
+
return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
|
|
2488
|
+
event !== components.PickerListenerEvent.Cancel && onChange(value);
|
|
2489
2489
|
formControl?.touch();
|
|
2490
2490
|
setModalIsVisible(false);
|
|
2491
2491
|
} }) })] }));
|