@dilicorp/ui 0.1.7 → 0.1.9
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/atoms/input-datepicker.d.ts +1 -0
- package/dist/atoms/input-datepicker.d.ts.map +1 -1
- package/dist/atoms/input-datepicker.js +8 -2
- package/dist/components/form-builder/components/input.d.ts.map +1 -1
- package/dist/components/form-builder/components/input.js +6 -15
- package/dist/components/page-list/filters/filter-datepicker.d.ts +1 -0
- package/dist/components/page-list/filters/filter-datepicker.d.ts.map +1 -1
- package/dist/components/page-list/filters/filter-datepicker.js +7 -2
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ export declare type InputDatepickerProps = {
|
|
|
7
7
|
id?: string;
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
onChange?: (name: string, value: string) => void;
|
|
10
|
+
onBlur?: (name: string, value: string) => void;
|
|
10
11
|
locale?: SupportedLanguages;
|
|
11
12
|
dateFormat?: SupportedDateFormat;
|
|
12
13
|
minDate?: Date | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-datepicker.d.ts","sourceRoot":"","sources":["../../src/atoms/input-datepicker.tsx"],"names":[],"mappings":";AAQA,oBAAY,kBAAkB,GAAG,OAAO,GAAC,OAAO,GAAC,OAAO,GAAC,OAAO,CAAA;AAChE,oBAAY,mBAAmB,GAAG,YAAY,CAAA;AAO9C,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAGD,eAAO,MAAM,eAAe,UAAW,oBAAoB,
|
|
1
|
+
{"version":3,"file":"input-datepicker.d.ts","sourceRoot":"","sources":["../../src/atoms/input-datepicker.tsx"],"names":[],"mappings":";AAQA,oBAAY,kBAAkB,GAAG,OAAO,GAAC,OAAO,GAAC,OAAO,GAAC,OAAO,CAAA;AAChE,oBAAY,mBAAmB,GAAG,YAAY,CAAA;AAO9C,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAGD,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBA4D1D,CAAA"}
|
|
@@ -11,7 +11,7 @@ registerLocale('es-CO', es);
|
|
|
11
11
|
registerLocale('en-US', en);
|
|
12
12
|
// example use https://reactdatepicker.com
|
|
13
13
|
export const InputDatepicker = (props) => {
|
|
14
|
-
const { name, id = name, value, onChange, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue } = props;
|
|
14
|
+
const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue } = props;
|
|
15
15
|
const [date, setDate] = React.useState(dateHelper.stringToDate(currentValue || value));
|
|
16
16
|
const handleDateSelect = (currentDate) => {
|
|
17
17
|
if (onChange) {
|
|
@@ -19,9 +19,15 @@ export const InputDatepicker = (props) => {
|
|
|
19
19
|
}
|
|
20
20
|
setDate(currentDate);
|
|
21
21
|
};
|
|
22
|
+
const handleBlur = (event) => {
|
|
23
|
+
var _a;
|
|
24
|
+
if (onBlur) {
|
|
25
|
+
onBlur(name, (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
22
28
|
const mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
|
|
23
29
|
return (React.createElement(ReactDatePicker, { name: name, id: id, "data-testid": id, locale: locale, dateFormat: dateFormat, className: "form-control", selected: date, onChange: handleDateSelect, placeholderText: placeholder, autoComplete: "off",
|
|
24
30
|
// showMonthDropdown
|
|
25
31
|
// useShortMonthInDropdown
|
|
26
|
-
minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }) }));
|
|
32
|
+
minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }) }));
|
|
27
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form-builder/components/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,WAAW,EAAE,MAAM,QAAQ,CAAA;AAK/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,GAAC,QAAQ,GAAC,UAAU,GAAC,OAAO,GAAC,MAAM,GAAC,QAAQ,GAAC,QAAQ,GAAC,QAAQ,GAAC,OAAO,GAAC,OAAO,CAAA;IAC3F,IAAI,CAAC,EAAE,MAAM,GAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,aAAK,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IACnD,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,CAAA;CAC1B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAE,KAAK,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form-builder/components/input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,WAAW,EAAE,MAAM,QAAQ,CAAA;AAK/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,GAAC,QAAQ,GAAC,UAAU,GAAC,OAAO,GAAC,MAAM,GAAC,QAAQ,GAAC,QAAQ,GAAC,QAAQ,GAAC,OAAO,GAAC,OAAO,CAAA;IAC3F,IAAI,CAAC,EAAE,MAAM,GAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,aAAK,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IACnD,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,CAAA;CAC1B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAE,KAAK,EAAE,KAAK,eA+F1C"}
|
|
@@ -43,27 +43,18 @@ export default function Input(props) {
|
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
45
|
if (actions.setFieldValue) {
|
|
46
|
-
|
|
46
|
+
if (type === 'number') {
|
|
47
|
+
actions.setFieldValue(name, event.currentTarget.value.replace(/[^0-9.]/g, ''));
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
actions.setFieldValue(name, event.currentTarget.value);
|
|
51
|
+
}
|
|
47
52
|
}
|
|
48
53
|
};
|
|
49
54
|
const curValue = actions.values[name];
|
|
50
55
|
const classes = classNames(className, 'form-control');
|
|
51
56
|
const attrs = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
|
|
52
57
|
id, 'data-testid': id, type: type === 'number' ? 'text' : type, tabIndex, autoComplete: 'none', onChange: handleChange });
|
|
53
|
-
if (type === 'number') {
|
|
54
|
-
Object.assign(attrs, {
|
|
55
|
-
onKeyPress: (event) => {
|
|
56
|
-
if ('0123456789.'.indexOf(event.key) === -1) {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
onPaste: (event) => {
|
|
61
|
-
if (!/^\d.+$/.test(event.clipboardData.getData('text/plain'))) {
|
|
62
|
-
event.preventDefault();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
58
|
if (currency)
|
|
68
59
|
return React.createElement(InputCurrency, Object.assign({}, { name, attrs, currency, handleChange }));
|
|
69
60
|
if (mask)
|
|
@@ -10,6 +10,7 @@ declare type FilterDatepickerProps = {
|
|
|
10
10
|
minDate?: Date | null;
|
|
11
11
|
maxDate?: Date | null;
|
|
12
12
|
onChange?: (name: string, value: string) => void;
|
|
13
|
+
onBlur?: (name: string, value: string) => void;
|
|
13
14
|
currentValue?: string;
|
|
14
15
|
};
|
|
15
16
|
export declare const FilterDatepicker: React.FC<FilterDatepickerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/page-list/filters/filter-datepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAmB,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAE1G,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"filter-datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/page-list/filters/filter-datepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAmB,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAE1G,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,IAAI,GAAC,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuC5D,CAAA"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputDatepicker } from '../../../atoms/input-datepicker';
|
|
3
3
|
export const FilterDatepicker = (props) => {
|
|
4
|
-
const { name, id = name, value = '', placeholder, minDate, maxDate, onChange, currentValue } = props;
|
|
4
|
+
const { name, id = name, value = '', placeholder, minDate, maxDate, onChange, onBlur, currentValue } = props;
|
|
5
5
|
const handleChange = (name, value) => {
|
|
6
6
|
if (onChange) {
|
|
7
7
|
onChange(name, value);
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
|
+
const handleBlur = (name, value) => {
|
|
11
|
+
if (onBlur) {
|
|
12
|
+
onBlur(name, value);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
10
15
|
return (React.createElement("div", { className: "form-group" },
|
|
11
16
|
Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
|
|
12
17
|
placeholder,
|
|
13
18
|
":"),
|
|
14
|
-
React.createElement(InputDatepicker, Object.assign({}, props, { value: value || currentValue || '', id: id, minDate: minDate, maxDate: maxDate, onChange: handleChange }))));
|
|
19
|
+
React.createElement(InputDatepicker, Object.assign({}, props, { value: value || currentValue || '', id: id, minDate: minDate, maxDate: maxDate, onChange: handleChange, onBlur: handleBlur }))));
|
|
15
20
|
};
|