@rolster/react-components 18.13.2 → 18.13.3
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-X5U1vmfz.css → index-APeAYULv.css} +4 -4
- package/dist/cjs/index.js +9 -20
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-X5U1vmfz.css → index-APeAYULv.css} +4 -4
- package/dist/es/index.js +9 -20
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/organisms/DateField/DateField.css +2 -2
- package/dist/esm/components/organisms/DateField/DateField.js +2 -8
- package/dist/esm/components/organisms/DateField/DateField.js.map +1 -1
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +2 -2
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +9 -14
- package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +1 -1
- package/package.json +1 -1
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
outline: none;
|
|
19
19
|
background: transparent;
|
|
20
20
|
color: var(--rls-app-color-500);
|
|
21
|
-
font-size: var(--rls-input-font-size);
|
|
22
21
|
font-weight: var(--rls-font-weight-medium);
|
|
23
|
-
|
|
22
|
+
font-size: var(--rlc-input-font-size);
|
|
23
|
+
letter-spacing: var(--rlc-input-letter-spacing);
|
|
24
24
|
}
|
|
25
25
|
.rls-date-field__control::placeholder {
|
|
26
26
|
color: var(--rls-app-color-100);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { PickerListenerType, checkDateRange } from '@rolster/helpers-components';
|
|
3
3
|
import { dateFormatTemplate } from '@rolster/helpers-date';
|
|
4
|
-
import { useEffect,
|
|
4
|
+
import { useEffect, useState } from 'react';
|
|
5
5
|
import { DATE_RANGE_FORMAT } from '../../../constants';
|
|
6
6
|
import { renderClassStatus } from '../../../helpers';
|
|
7
7
|
import { RlsMessageIcon, RlsIcon } from '../../atoms';
|
|
@@ -12,7 +12,6 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
|
|
|
12
12
|
const today = new Date(); // Initial current date in component
|
|
13
13
|
const [value, setValue] = useState();
|
|
14
14
|
const [modalIsVisible, setModalIsVisible] = useState(false);
|
|
15
|
-
const description = useRef('');
|
|
16
15
|
useEffect(() => {
|
|
17
16
|
const dateCheck = checkDateRange({
|
|
18
17
|
date: formControl?.state || date || today,
|
|
@@ -22,11 +21,6 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
|
|
|
22
21
|
setValue(dateCheck);
|
|
23
22
|
formControl?.setState(dateCheck);
|
|
24
23
|
}, []);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
description.current = value
|
|
27
|
-
? dateFormatTemplate(value, DATE_RANGE_FORMAT)
|
|
28
|
-
: '';
|
|
29
|
-
}, [value]);
|
|
30
24
|
function onClickInput() {
|
|
31
25
|
setModalIsVisible(true);
|
|
32
26
|
}
|
|
@@ -50,7 +44,7 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
|
|
|
50
44
|
setModalIsVisible(true);
|
|
51
45
|
}
|
|
52
46
|
}
|
|
53
|
-
return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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", { className: "rls-date-field__control", type: "text", value:
|
|
47
|
+
return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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", { className: "rls-date-field__control", type: "text", value: value && dateFormatTemplate(value, DATE_RANGE_FORMAT), readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (_jsx("div", { className: "rls-box-field__error", children: _jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
|
|
54
48
|
if (type !== PickerListenerType.Cancel) {
|
|
55
49
|
onChange(value, true);
|
|
56
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateField/DateField.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateField/DateField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
outline: none;
|
|
16
16
|
color: var(--rlc-input-font-color);
|
|
17
17
|
background: transparent;
|
|
18
|
-
font-size: var(--rls-input-font-size);
|
|
19
18
|
font-weight: var(--rls-font-weight-medium);
|
|
20
|
-
|
|
19
|
+
font-size: var(--rlc-input-font-size);
|
|
20
|
+
letter-spacing: var(--rlc-input-letter-spacing);
|
|
21
21
|
}
|
|
22
22
|
.rls-date-range-field__control::placeholder {
|
|
23
23
|
color: var(--rls-app-color-100);
|
|
@@ -1,23 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { DateRange } from '@rolster/helpers-date';
|
|
3
|
-
import {
|
|
3
|
+
import { useState } from 'react';
|
|
4
4
|
import { rangeFormatTemplate } from '../../../helpers';
|
|
5
5
|
import { RlsIcon } from '../../atoms';
|
|
6
6
|
import { RlsDateRangePicker } from '../DateRangePicker/DateRangePicker';
|
|
7
7
|
import { RlsModal } from '../Modal/Modal';
|
|
8
8
|
import './DateRangeField.css';
|
|
9
9
|
export function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const [value, setValue] = useState(
|
|
13
|
-
const [
|
|
14
|
-
const [show, setShow] = useState(false);
|
|
15
|
-
const description = useRef('');
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
description.current = value ? rangeFormatTemplate(value) : '';
|
|
18
|
-
}, [value]);
|
|
10
|
+
const currentRange = formControl?.state || DateRange.now();
|
|
11
|
+
const currentDate = datePicker || new Date();
|
|
12
|
+
const [value, setValue] = useState(currentRange);
|
|
13
|
+
const [modalIsVisible, setModalIsVisible] = useState(false);
|
|
19
14
|
function onClickInput() {
|
|
20
|
-
|
|
15
|
+
setModalIsVisible(true);
|
|
21
16
|
}
|
|
22
17
|
function onClickAction() {
|
|
23
18
|
if (value) {
|
|
@@ -25,14 +20,14 @@ export function RlsDateRangeField({ children, date: datePicker, disabled, formCo
|
|
|
25
20
|
setValue(undefined);
|
|
26
21
|
}
|
|
27
22
|
else {
|
|
28
|
-
|
|
23
|
+
setModalIsVisible(true);
|
|
29
24
|
}
|
|
30
25
|
}
|
|
31
|
-
return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-box-field", 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", { className: "rls-date-field__control", type: "text", value:
|
|
26
|
+
return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-box-field", 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", { className: "rls-date-field__control", type: "text", value: value && rangeFormatTemplate(value), readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsDateRangePicker, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
|
|
32
27
|
if (value) {
|
|
33
28
|
setValue(value);
|
|
34
29
|
}
|
|
35
|
-
|
|
30
|
+
setModalIsVisible(false);
|
|
36
31
|
} }) })] }));
|
|
37
32
|
}
|
|
38
33
|
//# sourceMappingURL=DateRangeField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateRangeField/DateRangeField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DateRangeField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateRangeField/DateRangeField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,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,gBAAgB,eAAY,QAAQ,aACjD,eAAK,SAAS,EAAC,eAAe,aAC3B,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EAEvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAC1C,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,GAClB,EAEF,iBACE,SAAS,EAAC,wBAAwB,EAClC,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,IACF,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"}
|