@oneblink/apps-react 4.2.0-beta.2 → 4.2.0-beta.4
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.
|
@@ -8,9 +8,9 @@ type DatePickersProps = {
|
|
|
8
8
|
maxDate?: string;
|
|
9
9
|
minDate?: string;
|
|
10
10
|
};
|
|
11
|
-
export declare const FiltersDatePicker: (
|
|
11
|
+
export declare const FiltersDatePicker: (props: DatePickersProps) => JSX.Element;
|
|
12
12
|
type DateTimePickersProps = DatePickersProps & {
|
|
13
13
|
renderHelperText: (errorType: DateTimeValidationError) => void;
|
|
14
14
|
};
|
|
15
|
-
export declare const FiltersDateTimePicker: (
|
|
15
|
+
export declare const FiltersDateTimePicker: (props: DateTimePickersProps) => JSX.Element;
|
|
16
16
|
export {};
|
|
@@ -6,49 +6,53 @@ import { format } from 'date-fns';
|
|
|
6
6
|
import { localisationService } from '@oneblink/apps';
|
|
7
7
|
const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
|
|
8
8
|
const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
|
|
9
|
-
export const FiltersDatePicker = (
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
}, [value]);
|
|
14
|
-
const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : null), [maxDate]);
|
|
15
|
-
const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : null), [minDate]);
|
|
16
|
-
return (React.createElement(MobileDatePicker, { label: label, format: shortDateFormat, slots: {
|
|
17
|
-
textField: (params) => (React.createElement(TextField, { ...params, variant: "outlined", margin: "dense", size: "small", helperText: renderHelperText(errorType), InputProps: {
|
|
18
|
-
endAdornment: (React.createElement(IconButton, { edge: "end" },
|
|
19
|
-
React.createElement(CalendarIcon, null))),
|
|
20
|
-
} })),
|
|
21
|
-
}, slotProps: {
|
|
22
|
-
actionBar: {
|
|
23
|
-
actions: ['clear', 'today', 'cancel', 'accept'],
|
|
24
|
-
},
|
|
25
|
-
}, maxDate: maxDateMemo, minDate: minDateMemo, value: valueMemo, onAccept: (newDate) => {
|
|
9
|
+
export const FiltersDatePicker = (props) => {
|
|
10
|
+
const { label, onChange } = props;
|
|
11
|
+
const commonProps = useCommonPickerProps(props);
|
|
12
|
+
return (React.createElement(MobileDatePicker, { label: label, format: shortDateFormat, ...commonProps, onAccept: (newDate) => {
|
|
26
13
|
if (!newDate)
|
|
27
14
|
return onChange(undefined);
|
|
28
15
|
const formattedDate = format(newDate, 'yyyy-MM-dd');
|
|
29
16
|
onChange(formattedDate);
|
|
30
|
-
}
|
|
17
|
+
} }));
|
|
31
18
|
};
|
|
32
|
-
export const FiltersDateTimePicker = (
|
|
19
|
+
export const FiltersDateTimePicker = (props) => {
|
|
20
|
+
const { label, onChange } = props;
|
|
21
|
+
const commonProps = useCommonPickerProps(props);
|
|
22
|
+
return (React.createElement(MobileDateTimePicker, { label: label, format: shortDateTimeFormat, ...commonProps, onAccept: (newDate) => {
|
|
23
|
+
if (!newDate)
|
|
24
|
+
return onChange(undefined);
|
|
25
|
+
onChange(newDate.toISOString());
|
|
26
|
+
} }));
|
|
27
|
+
};
|
|
28
|
+
const useCommonPickerProps = ({ renderHelperText, value, maxDate, minDate, }) => {
|
|
33
29
|
const [errorType, setErrorType] = useNullableState(null);
|
|
34
30
|
const valueMemo = React.useMemo(() => {
|
|
35
31
|
return value ? new Date(value) : null;
|
|
36
32
|
}, [value]);
|
|
37
33
|
const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : null), [maxDate]);
|
|
38
34
|
const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : null), [minDate]);
|
|
39
|
-
return
|
|
35
|
+
return {
|
|
36
|
+
slots: {
|
|
40
37
|
textField: (params) => (React.createElement(TextField, { ...params, variant: "outlined", margin: "dense", size: "small", helperText: renderHelperText(errorType), InputProps: {
|
|
41
38
|
endAdornment: (React.createElement(IconButton, { edge: "end" },
|
|
42
39
|
React.createElement(CalendarIcon, null))),
|
|
43
40
|
} })),
|
|
44
|
-
},
|
|
41
|
+
},
|
|
42
|
+
slotProps: {
|
|
45
43
|
actionBar: {
|
|
46
|
-
actions: [
|
|
44
|
+
actions: [
|
|
45
|
+
'clear',
|
|
46
|
+
'today',
|
|
47
|
+
'cancel',
|
|
48
|
+
'accept',
|
|
49
|
+
],
|
|
47
50
|
},
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
},
|
|
52
|
+
maxDate: maxDateMemo,
|
|
53
|
+
minDate: minDateMemo,
|
|
54
|
+
value: valueMemo,
|
|
55
|
+
onError: setErrorType,
|
|
56
|
+
};
|
|
53
57
|
};
|
|
54
58
|
//# sourceMappingURL=Pickers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pickers.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/Pickers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Pickers.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/Pickers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconButton, TextField, TextFieldProps } from '@mui/material'\nimport {\n MobileDatePicker,\n DateValidationError,\n DateTimeValidationError,\n CalendarIcon,\n MobileDateTimePicker,\n PickersActionBarAction,\n} from '@mui/x-date-pickers'\nimport * as React from 'react'\nimport useNullableState from '../../../hooks/useNullableState'\nimport { format } from 'date-fns'\nimport { localisationService } from '@oneblink/apps'\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\nconst shortDateTimeFormat =\n localisationService.getDateFnsFormats().shortDateTime\n\ntype DatePickersProps = {\n label: string\n value: string | undefined\n onChange: (newDate: string | undefined) => void\n renderHelperText: (errorType: DateValidationError) => void\n maxDate?: string\n minDate?: string\n}\nexport const FiltersDatePicker = (props: DatePickersProps) => {\n const { label, onChange } = props\n const commonProps = useCommonPickerProps(props)\n\n return (\n <MobileDatePicker\n label={label}\n format={shortDateFormat}\n {...commonProps}\n onAccept={(newDate) => {\n if (!newDate) return onChange(undefined)\n\n const formattedDate = format(newDate, 'yyyy-MM-dd')\n onChange(formattedDate)\n }}\n />\n )\n}\n\ntype DateTimePickersProps = DatePickersProps & {\n renderHelperText: (errorType: DateTimeValidationError) => void\n}\nexport const FiltersDateTimePicker = (props: DateTimePickersProps) => {\n const { label, onChange } = props\n const commonProps = useCommonPickerProps(props)\n\n return (\n <MobileDateTimePicker\n label={label}\n format={shortDateTimeFormat}\n {...commonProps}\n onAccept={(newDate) => {\n if (!newDate) return onChange(undefined)\n onChange(newDate.toISOString())\n }}\n />\n )\n}\n\nconst useCommonPickerProps = <T,>({\n renderHelperText,\n value,\n maxDate,\n minDate,\n}: {\n renderHelperText: (errorType: T | null) => void\n value: string | undefined\n maxDate?: string\n minDate?: string\n}) => {\n const [errorType, setErrorType] = useNullableState<T>(null)\n\n const valueMemo = React.useMemo(() => {\n return value ? new Date(value) : null\n }, [value])\n\n const maxDateMemo = React.useMemo(\n () => (maxDate ? new Date(maxDate) : null),\n [maxDate],\n )\n const minDateMemo = React.useMemo(\n () => (minDate ? new Date(minDate) : null),\n [minDate],\n )\n\n return {\n slots: {\n textField: (params: React.PropsWithChildren<TextFieldProps>) => (\n <TextField\n {...params}\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n helperText={renderHelperText(errorType)}\n InputProps={{\n endAdornment: (\n <IconButton edge=\"end\">\n <CalendarIcon />\n </IconButton>\n ),\n }}\n />\n ),\n },\n slotProps: {\n actionBar: {\n actions: [\n 'clear',\n 'today',\n 'cancel',\n 'accept',\n ] as PickersActionBarAction[],\n },\n },\n maxDate: maxDateMemo,\n minDate: minDateMemo,\n value: valueMemo,\n onError: setErrorType,\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "4.2.0-beta.
|
|
4
|
+
"version": "4.2.0-beta.4",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@babel/preset-env": "^7.21.4",
|
|
46
46
|
"@microsoft/eslint-plugin-sdl": "^0.2.0",
|
|
47
|
-
"@mui/lab": "^5.0.0-alpha.
|
|
47
|
+
"@mui/lab": "^5.0.0-alpha.135",
|
|
48
48
|
"@mui/material": "^5.10.1",
|
|
49
49
|
"@mui/x-date-pickers": "^6.9.1",
|
|
50
50
|
"@oneblink/apps": "^5.2.0-beta.1",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"main": "./dist/index.js",
|
|
105
105
|
"module": "./dist/index.js",
|
|
106
106
|
"peerDependencies": {
|
|
107
|
-
"@mui/lab": "^5.0.0 || ^5.0.0-alpha.
|
|
107
|
+
"@mui/lab": "^5.0.0 || ^5.0.0-alpha.135",
|
|
108
108
|
"@mui/material": "^5.6.1",
|
|
109
109
|
"@mui/x-date-pickers": "^6.9.1",
|
|
110
110
|
"@oneblink/apps": "*",
|