@oneblink/apps-react 4.2.0-beta.1 → 4.2.0-beta.2
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/components/formStore/table/ColumnFilters.js +41 -34
- package/dist/components/formStore/table/ColumnFilters.js.map +1 -1
- package/dist/components/formStore/table/Pickers.d.ts +16 -0
- package/dist/components/formStore/table/Pickers.js +54 -0
- package/dist/components/formStore/table/Pickers.js.map +1 -0
- package/dist/index.d.ts +0 -3
- package/dist/index.js +0 -3
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/dist/components/pickers/V4CompatibleDatePicker.d.ts +0 -37
- package/dist/components/pickers/V4CompatibleDatePicker.js +0 -76
- package/dist/components/pickers/V4CompatibleDatePicker.js.map +0 -1
- package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts +0 -37
- package/dist/components/pickers/V4CompatibleDateTimePicker.js +0 -78
- package/dist/components/pickers/V4CompatibleDateTimePicker.js.map +0 -1
- package/dist/components/pickers/V4CompatibleTimePicker.d.ts +0 -33
- package/dist/components/pickers/V4CompatibleTimePicker.js +0 -59
- package/dist/components/pickers/V4CompatibleTimePicker.js.map +0 -1
@@ -1,16 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { Checkbox, FormControl, FormControlLabel, Grid, ListItemText, MenuItem, Radio, RadioGroup, TextField, } from '@mui/material';
|
3
|
-
import V4CompatibleDateTimePicker from '../../pickers/V4CompatibleDateTimePicker';
|
4
|
-
import V4CompatibleDatePicker from '../../pickers/V4CompatibleDatePicker';
|
5
3
|
import { styled } from '@mui/material/styles';
|
6
4
|
import { format } from 'date-fns';
|
7
5
|
import { localisationService } from '@oneblink/apps';
|
6
|
+
import { FiltersDatePicker, FiltersDateTimePicker } from './Pickers';
|
8
7
|
const StyledTextField = styled(TextField)(() => ({
|
9
8
|
width: '350px',
|
10
9
|
}));
|
11
10
|
const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
|
12
11
|
function ColumnFilters({ filter }) {
|
13
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u
|
12
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
14
13
|
switch (filter.type) {
|
15
14
|
case 'SUBMISSION_ID': {
|
16
15
|
return (React.createElement(StyledTextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "Filter", type: "text", fullWidth: true, value: ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$eq) || '', onChange: (e) => {
|
@@ -66,64 +65,72 @@ function ColumnFilters({ filter }) {
|
|
66
65
|
case 'DATE': {
|
67
66
|
return (React.createElement(Grid, { container: true, spacing: 1 },
|
68
67
|
React.createElement(Grid, { item: true, xs: 6 },
|
69
|
-
React.createElement(
|
70
|
-
|
68
|
+
React.createElement(FiltersDatePicker, { label: "After", maxDate: (_g = filter.value) === null || _g === void 0 ? void 0 : _g.$lte, value: (_h = filter.value) === null || _h === void 0 ? void 0 : _h.$gte, renderHelperText: (errorType) => {
|
69
|
+
var _a, _b;
|
70
|
+
if (errorType === 'maxDate' && ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte)) {
|
71
|
+
return `Must be before "${format(new Date((_b = filter.value) === null || _b === void 0 ? void 0 : _b.$lte), shortDateFormat)}"`;
|
72
|
+
}
|
73
|
+
}, onChange: (newDate) => {
|
71
74
|
var _a;
|
72
|
-
|
73
|
-
? format(newDate, 'yyyy-MM-dd')
|
74
|
-
: undefined;
|
75
|
-
filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || newValue !== undefined
|
75
|
+
return filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || !!newDate
|
76
76
|
? {
|
77
77
|
...filter.value,
|
78
|
-
$gte:
|
78
|
+
$gte: newDate,
|
79
79
|
}
|
80
80
|
: undefined, false);
|
81
|
-
}
|
81
|
+
} })),
|
82
82
|
React.createElement(Grid, { item: true, xs: 6 },
|
83
|
-
React.createElement(
|
84
|
-
|
83
|
+
React.createElement(FiltersDatePicker, { label: "Before", value: (_j = filter.value) === null || _j === void 0 ? void 0 : _j.$lte, minDate: (_k = filter.value) === null || _k === void 0 ? void 0 : _k.$gte, renderHelperText: (errorType) => {
|
84
|
+
var _a, _b;
|
85
|
+
if (errorType === 'minDate' && ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte)) {
|
86
|
+
return `Must be after "${format(new Date((_b = filter.value) === null || _b === void 0 ? void 0 : _b.$gte), shortDateFormat)}"`;
|
87
|
+
}
|
88
|
+
}, onChange: (newDate) => {
|
85
89
|
var _a;
|
86
|
-
|
87
|
-
? format(newDate, 'yyyy-MM-dd')
|
88
|
-
: undefined;
|
89
|
-
filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || newValue !== undefined
|
90
|
+
return filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || !!newDate
|
90
91
|
? {
|
91
92
|
...filter.value,
|
92
|
-
$lte:
|
93
|
+
$lte: newDate,
|
93
94
|
}
|
94
95
|
: undefined, false);
|
95
|
-
}
|
96
|
+
} }))));
|
96
97
|
}
|
97
98
|
case 'DATETIME': {
|
98
99
|
return (React.createElement(Grid, { container: true, spacing: 1 },
|
99
100
|
React.createElement(Grid, { item: true, xs: 6 },
|
100
|
-
React.createElement(
|
101
|
-
|
101
|
+
React.createElement(FiltersDateTimePicker, { label: "After", maxDate: (_l = filter.value) === null || _l === void 0 ? void 0 : _l.$lte, value: (_m = filter.value) === null || _m === void 0 ? void 0 : _m.$gte, renderHelperText: (errorType) => {
|
102
|
+
var _a, _b;
|
103
|
+
if (errorType === 'maxDate' && ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte)) {
|
104
|
+
return `Must be before "${format(new Date((_b = filter.value) === null || _b === void 0 ? void 0 : _b.$lte), shortDateFormat)}"`;
|
105
|
+
}
|
106
|
+
}, onChange: (newDate) => {
|
102
107
|
var _a;
|
103
|
-
|
104
|
-
filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || newValue !== undefined
|
108
|
+
return filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || !!newDate
|
105
109
|
? {
|
106
110
|
...filter.value,
|
107
|
-
$gte:
|
111
|
+
$gte: newDate,
|
108
112
|
}
|
109
113
|
: undefined, false);
|
110
|
-
}
|
114
|
+
} })),
|
111
115
|
React.createElement(Grid, { item: true, xs: 6 },
|
112
|
-
React.createElement(
|
113
|
-
|
116
|
+
React.createElement(FiltersDateTimePicker, { label: "Before", minDate: (_o = filter.value) === null || _o === void 0 ? void 0 : _o.$gte, value: (_p = filter.value) === null || _p === void 0 ? void 0 : _p.$lte, renderHelperText: (errorType) => {
|
117
|
+
var _a, _b;
|
118
|
+
if (errorType === 'minDate' && ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte)) {
|
119
|
+
return `Must be after "${format(new Date((_b = filter.value) === null || _b === void 0 ? void 0 : _b.$gte), shortDateFormat)}"`;
|
120
|
+
}
|
121
|
+
}, onChange: (newDate) => {
|
114
122
|
var _a;
|
115
|
-
|
116
|
-
filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || newValue !== undefined
|
123
|
+
return filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || !!newDate
|
117
124
|
? {
|
118
125
|
...filter.value,
|
119
|
-
$lte:
|
126
|
+
$lte: newDate,
|
120
127
|
}
|
121
128
|
: undefined, false);
|
122
|
-
}
|
129
|
+
} }))));
|
123
130
|
}
|
124
131
|
case 'BOOLEAN': {
|
125
132
|
return (React.createElement(FormControl, { component: "fieldset" },
|
126
|
-
React.createElement(RadioGroup, { "aria-label": "gender", name: "gender1", value: ((
|
133
|
+
React.createElement(RadioGroup, { "aria-label": "gender", name: "gender1", value: ((_r = (_q = filter.value) === null || _q === void 0 ? void 0 : _q.$eq) === null || _r === void 0 ? void 0 : _r.toString()) || 'null', onChange: (e) => {
|
127
134
|
filter.onChange({
|
128
135
|
$eq: e.target.value === 'true',
|
129
136
|
}, false);
|
@@ -132,7 +139,7 @@ function ColumnFilters({ filter }) {
|
|
132
139
|
React.createElement(FormControlLabel, { value: "false", control: React.createElement(Radio, null), label: "No" }))));
|
133
140
|
}
|
134
141
|
case 'OPTIONS_SINGLE': {
|
135
|
-
return (React.createElement(OptionsTextField, { options: filter.options, value: (
|
142
|
+
return (React.createElement(OptionsTextField, { options: filter.options, value: (_s = filter.value) === null || _s === void 0 ? void 0 : _s.$in, onChange: (newValue) => {
|
136
143
|
filter.onChange(newValue.length
|
137
144
|
? {
|
138
145
|
$in: newValue,
|
@@ -141,7 +148,7 @@ function ColumnFilters({ filter }) {
|
|
141
148
|
} }));
|
142
149
|
}
|
143
150
|
case 'OPTIONS_MULTIPLE': {
|
144
|
-
return (React.createElement(OptionsTextField, { options: filter.options, value: (
|
151
|
+
return (React.createElement(OptionsTextField, { options: filter.options, value: (_u = (_t = filter.value) === null || _t === void 0 ? void 0 : _t.$elemMatch) === null || _u === void 0 ? void 0 : _u.$in, onChange: (newValue) => {
|
145
152
|
filter.onChange(newValue.length
|
146
153
|
? {
|
147
154
|
$elemMatch: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ColumnFilters.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ColumnFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,GACV,MAAM,eAAe,CAAA;AACtB,OAAO,0BAA0B,MAAM,0CAA0C,CAAA;AACjF,OAAO,sBAAsB,MAAM,sCAAsC,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/C,KAAK,EAAE,OAAO;CACf,CAAC,CAAC,CAAA;AAMH,MAAM,eAAe,GAAG,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAA;AAEzE,SAAS,aAAa,CAAC,EAAE,MAAM,EAAS;;IACtC,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,eAAe,CAAC,CAAC;YACpB,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,SAAS,QACT,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,GAAG,KAAI,EAAE,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,CAAC,QAAQ,CACb,CAAC,CAAC,MAAM,CAAC,KAAK;wBACZ,CAAC,CAAC;4BACE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;yBACpB;wBACH,CAAC,CAAC,SAAS,EACb,IAAI,CACL,CAAA;gBACH,CAAC,GACD,CACH,CAAA;SACF;QACD,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,SAAS,QACT,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,MAAM,KAAI,EAAE,EACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,CAAC,QAAQ,CACb,CAAC,CAAC,MAAM,CAAC,KAAK;wBACZ,CAAC,CAAC;4BACE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;4BACtB,uDAAuD;4BACvD,QAAQ,EAAE,IAAI;yBACf;wBACH,CAAC,CAAC,SAAS,EACb,IAAI,CACL,CAAA;gBACH,CAAC,GACD,CACH,CAAA;SACF;QACD,KAAK,QAAQ,CAAC,CAAC;YACb,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;gBACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;oBACd,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,SAAS,QACT,KAAK,EAAE,CAAA,MAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,0CAAE,QAAQ,EAAE,KAAI,EAAE,EAC3C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;;4BACd,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;gCAC7B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;gCAC1B,CAAC,CAAC,SAAS,CAAA;4BACb,MAAM,CAAC,QAAQ,CACb,OAAO,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,CAAA,KAAK,QAAQ;gCACpC,QAAQ,KAAK,SAAS;gCACtB,CAAC,CAAC;oCACE,GAAG,MAAM,CAAC,KAAK;oCACf,IAAI,EAAE,QAAQ;iCACf;gCACH,CAAC,CAAC,SAAS,EACb,IAAI,CACL,CAAA;wBACH,CAAC,GACD,CACG;gBACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;oBACd,oBAAC,SAAS,IACR,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,SAAS,QACT,KAAK,EAAE,CAAA,MAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,0CAAE,QAAQ,EAAE,KAAI,EAAE,EAC3C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;;4BACd,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;gCAC7B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;gCAC1B,CAAC,CAAC,SAAS,CAAA;4BACb,MAAM,CAAC,QAAQ,CACb,OAAO,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,CAAA,KAAK,QAAQ;gCACpC,QAAQ,KAAK,SAAS;gCACtB,CAAC,CAAC;oCACE,GAAG,MAAM,CAAC,KAAK;oCACf,IAAI,EAAE,QAAQ;iCACf;gCACH,CAAC,CAAC,SAAS,EACb,IAAI,CACL,CAAA;wBACH,CAAC,GACD,CACG,CACF,CACR,CAAA;SACF;QACD,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;gBACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;oBACd,oBAAC,sBAAsB,IACrB,KAAK,EAAC,OAAO,EACb,eAAe,QACf,SAAS,QACT,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,UAAU,EACvB,OAAO,EAAE,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,EAC3B,cAAc,EACZ,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI;4BAClB,mBAAmB,MAAM,CACvB,IAAI,IAAI,CAAC,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,CAAC,EAC5B,eAAe,CAChB,GAAG,EAEN,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,IAAI,EACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;4BACpB,MAAM,QAAQ,GAAG,OAAO;gCACtB,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC;gCAC/B,CAAC,CAAC,SAAS,CAAA;4BACb,MAAM,CAAC,QAAQ,CACb,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,QAAQ,KAAK,SAAS;gCAC1C,CAAC,CAAC;oCACE,GAAG,MAAM,CAAC,KAAK;oCACf,IAAI,EAAE,QAAQ;iCACf;gCACH,CAAC,CAAC,SAAS,EACb,KAAK,CACN,CAAA;wBACH,CAAC,EACD,aAAa,QACb,cAAc,EAAC,KAAK,GACpB,CACG;gBACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;oBACd,oBAAC,sBAAsB,IACrB,KAAK,EAAC,QAAQ,EACd,eAAe,QACf,SAAS,QACT,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,UAAU,EACvB,OAAO,EAAE,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,EAC3B,cAAc,EACZ,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI;4BAClB,kBAAkB,MAAM,CACtB,IAAI,IAAI,CAAC,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,CAAC,EAC5B,eAAe,CAChB,GAAG,EAEN,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,IAAI,EACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;4BACpB,MAAM,QAAQ,GAAG,OAAO;gCACtB,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC;gCAC/B,CAAC,CAAC,SAAS,CAAA;4BACb,MAAM,CAAC,QAAQ,CACb,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,QAAQ,KAAK,SAAS;gCAC1C,CAAC,CAAC;oCACE,GAAG,MAAM,CAAC,KAAK;oCACf,IAAI,EAAE,QAAQ;iCACf;gCACH,CAAC,CAAC,SAAS,EACb,KAAK,CACN,CAAA;wBACH,CAAC,EACD,aAAa,QACb,cAAc,EAAC,KAAK,GACpB,CACG,CACF,CACR,CAAA;SACF;QACD,KAAK,UAAU,CAAC,CAAC;YACf,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;gBACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;oBACd,oBAAC,0BAA0B,IACzB,KAAK,EAAC,OAAO,EACb,eAAe,QACf,SAAS,QACT,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,UAAU,EACvB,OAAO,EAAE,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,EAC3B,cAAc,EACZ,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI;4BAClB,mBAAmB,MAAM,CACvB,IAAI,IAAI,CAAC,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,CAAC,EAC5B,eAAe,CAChB,GAAG,EAEN,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,IAAI,EACjC,QAAQ,EAAE,CAAC,UAAU,EAAE,EAAE;;4BACvB,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,EAAE,CAAA;4BAC1C,MAAM,CAAC,QAAQ,CACb,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,QAAQ,KAAK,SAAS;gCAC1C,CAAC,CAAC;oCACE,GAAG,MAAM,CAAC,KAAK;oCACf,IAAI,EAAE,QAAQ;iCACf;gCACH,CAAC,CAAC,SAAS,EACb,KAAK,CACN,CAAA;wBACH,CAAC,EACD,aAAa,QACb,cAAc,EAAC,KAAK,GACpB,CACG;gBACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;oBACd,oBAAC,0BAA0B,IACzB,KAAK,EAAC,QAAQ,EACd,eAAe,QACf,SAAS,QACT,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,UAAU,EACvB,OAAO,EAAE,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,EAC3B,cAAc,EACZ,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI;4BAClB,kBAAkB,MAAM,CACtB,IAAI,IAAI,CAAC,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,CAAC,EAC5B,eAAe,CAChB,GAAG,EAEN,KAAK,EAAE,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,IAAI,EACjC,QAAQ,EAAE,CAAC,UAAU,EAAE,EAAE;;4BACvB,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,EAAE,CAAA;4BAC1C,MAAM,CAAC,QAAQ,CACb,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,IAAI,KAAI,QAAQ,KAAK,SAAS;gCAC1C,CAAC,CAAC;oCACE,GAAG,MAAM,CAAC,KAAK;oCACf,IAAI,EAAE,QAAQ;iCACf;gCACH,CAAC,CAAC,SAAS,EACb,KAAK,CACN,CAAA;wBACH,CAAC,EACD,aAAa,QACb,cAAc,EAAC,KAAK,GACpB,CACG,CACF,CACR,CAAA;SACF;QACD,KAAK,SAAS,CAAC,CAAC;YACd,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU;gBAC/B,oBAAC,UAAU,kBACE,QAAQ,EACnB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,CAAA,MAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,GAAG,0CAAE,QAAQ,EAAE,KAAI,MAAM,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,MAAM,CAAC,QAAQ,CACb;4BACE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM;yBAC/B,EACD,KAAK,CACN,CAAA;oBACH,CAAC;oBAED,oBAAC,gBAAgB,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,oBAAC,KAAK,OAAG,EAAE,KAAK,EAAC,KAAK,GAAG;oBACjE,oBAAC,gBAAgB,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,oBAAC,KAAK,OAAG,EAAE,KAAK,EAAC,IAAI,GAAG,CACtD,CACD,CACf,CAAA;SACF;QACD,KAAK,gBAAgB,CAAC,CAAC;YACrB,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,KAAK,EAAE,MAAA,MAAM,CAAC,KAAK,0CAAE,GAAG,EACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACrB,MAAM,CAAC,QAAQ,CACb,QAAQ,CAAC,MAAM;wBACb,CAAC,CAAC;4BACE,GAAG,EAAE,QAAQ;yBACd;wBACH,CAAC,CAAC,SAAS,EACb,KAAK,CACN,CAAA;gBACH,CAAC,GACD,CACH,CAAA;SACF;QACD,KAAK,kBAAkB,CAAC,CAAC;YACvB,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,KAAK,EAAE,MAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,UAAU,0CAAE,GAAG,EACpC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACrB,MAAM,CAAC,QAAQ,CACb,QAAQ,CAAC,MAAM;wBACb,CAAC,CAAC;4BACE,UAAU,EAAE;gCACV,GAAG,EAAE,QAAQ;6BACd;yBACF;wBACH,CAAC,CAAC,SAAS,EACb,KAAK,CACN,CAAA;gBACH,CAAC,GACD,CACH,CAAA;SACF;QACD,OAAO,CAAC,CAAC;YACP,OAAO,IAAI,CAAA;SACZ;KACF;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;AAExC,SAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,KAAK,EACL,QAAQ,GAKT;IACC,OAAO,CACL,oBAAC,eAAe,IACd,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,MAAM,QACN,WAAW,EAAE;YACX,QAAQ,EAAE,IAAI;YACd,WAAW,EAAE,CAAC,WAAW,EAAE,EAAE;gBAC3B,OAAO,OAAO;qBACX,MAAM,CAAW,CAAC,cAAc,EAAE,MAAM,EAAE,EAAE;oBAC3C,IAAK,WAAwB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;wBACpD,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;qBAClC;oBACD,OAAO,cAAc,CAAA;gBACvB,CAAC,EAAE,EAAE,CAAC;qBACL,IAAI,CAAC,IAAI,CAAC,CAAA;YACf,CAAC;SACF,EACD,SAAS,QACT,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAA4B,CAAA;YACtD,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC,IAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK;QAC9C,oBAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,KAAK,CAAC,CAAA,GAAI;QAC/D,oBAAC,YAAY,QAAE,MAAM,CAAC,KAAK,CAAgB,CAClC,CACZ,CAAC,CACc,CACnB,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { HeaderGroup } from 'react-table'\nimport {\n Checkbox,\n FormControl,\n FormControlLabel,\n Grid,\n ListItemText,\n MenuItem,\n Radio,\n RadioGroup,\n TextField,\n} from '@mui/material'\nimport V4CompatibleDateTimePicker from '../../pickers/V4CompatibleDateTimePicker'\nimport V4CompatibleDatePicker from '../../pickers/V4CompatibleDatePicker'\nimport { styled } from '@mui/material/styles'\nimport { format } from 'date-fns'\nimport { localisationService } from '@oneblink/apps'\n\nconst StyledTextField = styled(TextField)(() => ({\n width: '350px',\n}))\n\ntype Props = {\n filter: NonNullable<HeaderGroup<FormStoreRecord>['filter']>\n}\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\nfunction ColumnFilters({ filter }: Props) {\n switch (filter.type) {\n case 'SUBMISSION_ID': {\n return (\n <StyledTextField\n autoFocus\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Filter\"\n type=\"text\"\n fullWidth\n value={filter.value?.$eq || ''}\n onChange={(e) => {\n filter.onChange(\n e.target.value\n ? {\n $eq: e.target.value,\n }\n : undefined,\n true,\n )\n }}\n />\n )\n }\n case 'TEXT': {\n return (\n <StyledTextField\n autoFocus\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Filter\"\n type=\"text\"\n fullWidth\n value={filter.value?.$regex || ''}\n onChange={(e) => {\n filter.onChange(\n e.target.value\n ? {\n $regex: e.target.value,\n // hard code case in-sensitive and multi-line searching\n $options: 'im',\n }\n : undefined,\n true,\n )\n }}\n />\n )\n }\n case 'NUMBER': {\n return (\n <Grid container spacing={1}>\n <Grid item xs={6}>\n <TextField\n autoFocus\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"More Than Or Equal To\"\n type=\"number\"\n fullWidth\n value={filter.value?.$gte?.toString() || ''}\n onChange={(e) => {\n const newValue = e.target.value\n ? parseInt(e.target.value)\n : undefined\n filter.onChange(\n typeof filter.value?.$lte === 'number' ||\n newValue !== undefined\n ? {\n ...filter.value,\n $gte: newValue,\n }\n : undefined,\n true,\n )\n }}\n />\n </Grid>\n <Grid item xs={6}>\n <TextField\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Less Than Or Equal To\"\n type=\"number\"\n fullWidth\n value={filter.value?.$lte?.toString() || ''}\n onChange={(e) => {\n const newValue = e.target.value\n ? parseInt(e.target.value)\n : undefined\n filter.onChange(\n typeof filter.value?.$gte === 'number' ||\n newValue !== undefined\n ? {\n ...filter.value,\n $lte: newValue,\n }\n : undefined,\n true,\n )\n }}\n />\n </Grid>\n </Grid>\n )\n }\n case 'DATE': {\n return (\n <Grid container spacing={1}>\n <Grid item xs={6}>\n <V4CompatibleDatePicker\n label=\"After\"\n showTodayButton\n clearable\n margin=\"dense\"\n size=\"small\"\n inputVariant=\"outlined\"\n maxDate={filter.value?.$lte}\n maxDateMessage={\n filter.value?.$lte &&\n `Must be before \"${format(\n new Date(filter.value?.$lte),\n shortDateFormat,\n )}\"`\n }\n value={filter.value?.$gte || null}\n onChange={(newDate) => {\n const newValue = newDate\n ? format(newDate, 'yyyy-MM-dd')\n : undefined\n filter.onChange(\n filter.value?.$lte || newValue !== undefined\n ? {\n ...filter.value,\n $gte: newValue,\n }\n : undefined,\n false,\n )\n }}\n endIconButton\n iconButtonEdge=\"end\"\n />\n </Grid>\n <Grid item xs={6}>\n <V4CompatibleDatePicker\n label=\"Before\"\n showTodayButton\n clearable\n margin=\"dense\"\n size=\"small\"\n inputVariant=\"outlined\"\n minDate={filter.value?.$gte}\n minDateMessage={\n filter.value?.$lte &&\n `Must be after \"${format(\n new Date(filter.value?.$lte),\n shortDateFormat,\n )}\"`\n }\n value={filter.value?.$lte || null}\n onChange={(newDate) => {\n const newValue = newDate\n ? format(newDate, 'yyyy-MM-dd')\n : undefined\n filter.onChange(\n filter.value?.$gte || newValue !== undefined\n ? {\n ...filter.value,\n $lte: newValue,\n }\n : undefined,\n false,\n )\n }}\n endIconButton\n iconButtonEdge=\"end\"\n />\n </Grid>\n </Grid>\n )\n }\n case 'DATETIME': {\n return (\n <Grid container spacing={1}>\n <Grid item xs={6}>\n <V4CompatibleDateTimePicker\n label=\"After\"\n showTodayButton\n clearable\n margin=\"dense\"\n size=\"small\"\n inputVariant=\"outlined\"\n maxDate={filter.value?.$lte}\n maxDateMessage={\n filter.value?.$lte &&\n `Must be before \"${format(\n new Date(filter.value?.$lte),\n shortDateFormat,\n )}\"`\n }\n value={filter.value?.$gte || null}\n onChange={(momentDate) => {\n const newValue = momentDate?.toISOString()\n filter.onChange(\n filter.value?.$lte || newValue !== undefined\n ? {\n ...filter.value,\n $gte: newValue,\n }\n : undefined,\n false,\n )\n }}\n endIconButton\n iconButtonEdge=\"end\"\n />\n </Grid>\n <Grid item xs={6}>\n <V4CompatibleDateTimePicker\n label=\"Before\"\n showTodayButton\n clearable\n margin=\"dense\"\n size=\"small\"\n inputVariant=\"outlined\"\n minDate={filter.value?.$gte}\n minDateMessage={\n filter.value?.$lte &&\n `Must be after \"${format(\n new Date(filter.value?.$lte),\n shortDateFormat,\n )}\"`\n }\n value={filter.value?.$lte || null}\n onChange={(momentDate) => {\n const newValue = momentDate?.toISOString()\n filter.onChange(\n filter.value?.$gte || newValue !== undefined\n ? {\n ...filter.value,\n $lte: newValue,\n }\n : undefined,\n false,\n )\n }}\n endIconButton\n iconButtonEdge=\"end\"\n />\n </Grid>\n </Grid>\n )\n }\n case 'BOOLEAN': {\n return (\n <FormControl component=\"fieldset\">\n <RadioGroup\n aria-label=\"gender\"\n name=\"gender1\"\n value={filter.value?.$eq?.toString() || 'null'}\n onChange={(e) => {\n filter.onChange(\n {\n $eq: e.target.value === 'true',\n },\n false,\n )\n }}\n >\n <FormControlLabel value=\"true\" control={<Radio />} label=\"Yes\" />\n <FormControlLabel value=\"false\" control={<Radio />} label=\"No\" />\n </RadioGroup>\n </FormControl>\n )\n }\n case 'OPTIONS_SINGLE': {\n return (\n <OptionsTextField\n options={filter.options}\n value={filter.value?.$in}\n onChange={(newValue) => {\n filter.onChange(\n newValue.length\n ? {\n $in: newValue,\n }\n : undefined,\n false,\n )\n }}\n />\n )\n }\n case 'OPTIONS_MULTIPLE': {\n return (\n <OptionsTextField\n options={filter.options}\n value={filter.value?.$elemMatch?.$in}\n onChange={(newValue) => {\n filter.onChange(\n newValue.length\n ? {\n $elemMatch: {\n $in: newValue,\n },\n }\n : undefined,\n false,\n )\n }}\n />\n )\n }\n default: {\n return null\n }\n }\n}\n\nexport default React.memo(ColumnFilters)\n\nfunction OptionsTextField({\n options,\n value,\n onChange,\n}: {\n options: FormTypes.ChoiceElementOption[]\n value: string[] | undefined\n onChange: (newValue: string[]) => void\n}) {\n return (\n <StyledTextField\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Filter\"\n select\n SelectProps={{\n multiple: true,\n renderValue: (selectedIds) => {\n return options\n .reduce<string[]>((selectedLabels, option) => {\n if ((selectedIds as string[]).includes(option.value)) {\n selectedLabels.push(option.label)\n }\n return selectedLabels\n }, [])\n .join(', ')\n },\n }}\n fullWidth\n value={value || []}\n onChange={(e) => {\n const newValue = e.target.value as unknown as string[]\n onChange(newValue)\n }}\n >\n {options.map((option) => (\n <MenuItem value={option.value} key={option.value}>\n <Checkbox checked={!!value?.some((v) => v === option.value)} />\n <ListItemText>{option.label}</ListItemText>\n </MenuItem>\n ))}\n </StyledTextField>\n )\n}\n"]}
|
1
|
+
{"version":3,"file":"ColumnFilters.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ColumnFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { HeaderGroup } from 'react-table'\nimport {\n Checkbox,\n FormControl,\n FormControlLabel,\n Grid,\n ListItemText,\n MenuItem,\n Radio,\n RadioGroup,\n TextField,\n} from '@mui/material'\nimport { styled } from '@mui/material/styles'\nimport { format } from 'date-fns'\nimport { localisationService } from '@oneblink/apps'\nimport { FiltersDatePicker, FiltersDateTimePicker } from './Pickers'\n\nconst StyledTextField = styled(TextField)(() => ({\n width: '350px',\n}))\n\ntype Props = {\n filter: NonNullable<HeaderGroup<FormStoreRecord>['filter']>\n}\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\nfunction ColumnFilters({ filter }: Props) {\n switch (filter.type) {\n case 'SUBMISSION_ID': {\n return (\n <StyledTextField\n autoFocus\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Filter\"\n type=\"text\"\n fullWidth\n value={filter.value?.$eq || ''}\n onChange={(e) => {\n filter.onChange(\n e.target.value\n ? {\n $eq: e.target.value,\n }\n : undefined,\n true,\n )\n }}\n />\n )\n }\n case 'TEXT': {\n return (\n <StyledTextField\n autoFocus\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Filter\"\n type=\"text\"\n fullWidth\n value={filter.value?.$regex || ''}\n onChange={(e) => {\n filter.onChange(\n e.target.value\n ? {\n $regex: e.target.value,\n // hard code case in-sensitive and multi-line searching\n $options: 'im',\n }\n : undefined,\n true,\n )\n }}\n />\n )\n }\n case 'NUMBER': {\n return (\n <Grid container spacing={1}>\n <Grid item xs={6}>\n <TextField\n autoFocus\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"More Than Or Equal To\"\n type=\"number\"\n fullWidth\n value={filter.value?.$gte?.toString() || ''}\n onChange={(e) => {\n const newValue = e.target.value\n ? parseInt(e.target.value)\n : undefined\n filter.onChange(\n typeof filter.value?.$lte === 'number' ||\n newValue !== undefined\n ? {\n ...filter.value,\n $gte: newValue,\n }\n : undefined,\n true,\n )\n }}\n />\n </Grid>\n <Grid item xs={6}>\n <TextField\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Less Than Or Equal To\"\n type=\"number\"\n fullWidth\n value={filter.value?.$lte?.toString() || ''}\n onChange={(e) => {\n const newValue = e.target.value\n ? parseInt(e.target.value)\n : undefined\n filter.onChange(\n typeof filter.value?.$gte === 'number' ||\n newValue !== undefined\n ? {\n ...filter.value,\n $lte: newValue,\n }\n : undefined,\n true,\n )\n }}\n />\n </Grid>\n </Grid>\n )\n }\n case 'DATE': {\n return (\n <Grid container spacing={1}>\n <Grid item xs={6}>\n <FiltersDatePicker\n label=\"After\"\n maxDate={filter.value?.$lte}\n value={filter.value?.$gte}\n renderHelperText={(errorType) => {\n if (errorType === 'maxDate' && filter.value?.$lte) {\n return `Must be before \"${format(\n new Date(filter.value?.$lte),\n shortDateFormat,\n )}\"`\n }\n }}\n onChange={(newDate) =>\n filter.onChange(\n filter.value?.$lte || !!newDate\n ? {\n ...filter.value,\n $gte: newDate,\n }\n : undefined,\n false,\n )\n }\n />\n </Grid>\n <Grid item xs={6}>\n <FiltersDatePicker\n label=\"Before\"\n value={filter.value?.$lte}\n minDate={filter.value?.$gte}\n renderHelperText={(errorType) => {\n if (errorType === 'minDate' && filter.value?.$gte) {\n return `Must be after \"${format(\n new Date(filter.value?.$gte),\n shortDateFormat,\n )}\"`\n }\n }}\n onChange={(newDate) =>\n filter.onChange(\n filter.value?.$gte || !!newDate\n ? {\n ...filter.value,\n $lte: newDate,\n }\n : undefined,\n false,\n )\n }\n />\n </Grid>\n </Grid>\n )\n }\n case 'DATETIME': {\n return (\n <Grid container spacing={1}>\n <Grid item xs={6}>\n <FiltersDateTimePicker\n label=\"After\"\n maxDate={filter.value?.$lte}\n value={filter.value?.$gte}\n renderHelperText={(errorType) => {\n if (errorType === 'maxDate' && filter.value?.$lte) {\n return `Must be before \"${format(\n new Date(filter.value?.$lte),\n shortDateFormat,\n )}\"`\n }\n }}\n onChange={(newDate) =>\n filter.onChange(\n filter.value?.$lte || !!newDate\n ? {\n ...filter.value,\n $gte: newDate,\n }\n : undefined,\n false,\n )\n }\n />\n </Grid>\n <Grid item xs={6}>\n <FiltersDateTimePicker\n label=\"Before\"\n minDate={filter.value?.$gte}\n value={filter.value?.$lte}\n renderHelperText={(errorType) => {\n if (errorType === 'minDate' && filter.value?.$gte) {\n return `Must be after \"${format(\n new Date(filter.value?.$gte),\n shortDateFormat,\n )}\"`\n }\n }}\n onChange={(newDate) =>\n filter.onChange(\n filter.value?.$gte || !!newDate\n ? {\n ...filter.value,\n $lte: newDate,\n }\n : undefined,\n false,\n )\n }\n />\n </Grid>\n </Grid>\n )\n }\n case 'BOOLEAN': {\n return (\n <FormControl component=\"fieldset\">\n <RadioGroup\n aria-label=\"gender\"\n name=\"gender1\"\n value={filter.value?.$eq?.toString() || 'null'}\n onChange={(e) => {\n filter.onChange(\n {\n $eq: e.target.value === 'true',\n },\n false,\n )\n }}\n >\n <FormControlLabel value=\"true\" control={<Radio />} label=\"Yes\" />\n <FormControlLabel value=\"false\" control={<Radio />} label=\"No\" />\n </RadioGroup>\n </FormControl>\n )\n }\n case 'OPTIONS_SINGLE': {\n return (\n <OptionsTextField\n options={filter.options}\n value={filter.value?.$in}\n onChange={(newValue) => {\n filter.onChange(\n newValue.length\n ? {\n $in: newValue,\n }\n : undefined,\n false,\n )\n }}\n />\n )\n }\n case 'OPTIONS_MULTIPLE': {\n return (\n <OptionsTextField\n options={filter.options}\n value={filter.value?.$elemMatch?.$in}\n onChange={(newValue) => {\n filter.onChange(\n newValue.length\n ? {\n $elemMatch: {\n $in: newValue,\n },\n }\n : undefined,\n false,\n )\n }}\n />\n )\n }\n default: {\n return null\n }\n }\n}\n\nexport default React.memo(ColumnFilters)\n\nfunction OptionsTextField({\n options,\n value,\n onChange,\n}: {\n options: FormTypes.ChoiceElementOption[]\n value: string[] | undefined\n onChange: (newValue: string[]) => void\n}) {\n return (\n <StyledTextField\n variant=\"outlined\"\n margin=\"dense\"\n size=\"small\"\n label=\"Filter\"\n select\n SelectProps={{\n multiple: true,\n renderValue: (selectedIds) => {\n return options\n .reduce<string[]>((selectedLabels, option) => {\n if ((selectedIds as string[]).includes(option.value)) {\n selectedLabels.push(option.label)\n }\n return selectedLabels\n }, [])\n .join(', ')\n },\n }}\n fullWidth\n value={value || []}\n onChange={(e) => {\n const newValue = e.target.value as unknown as string[]\n onChange(newValue)\n }}\n >\n {options.map((option) => (\n <MenuItem value={option.value} key={option.value}>\n <Checkbox checked={!!value?.some((v) => v === option.value)} />\n <ListItemText>{option.label}</ListItemText>\n </MenuItem>\n ))}\n </StyledTextField>\n )\n}\n"]}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { DateValidationError, DateTimeValidationError } from '@mui/x-date-pickers';
|
3
|
+
type DatePickersProps = {
|
4
|
+
label: string;
|
5
|
+
value: string | undefined;
|
6
|
+
onChange: (newDate: string | undefined) => void;
|
7
|
+
renderHelperText: (errorType: DateValidationError) => void;
|
8
|
+
maxDate?: string;
|
9
|
+
minDate?: string;
|
10
|
+
};
|
11
|
+
export declare const FiltersDatePicker: ({ label, value, onChange, renderHelperText, maxDate, minDate, }: DatePickersProps) => JSX.Element;
|
12
|
+
type DateTimePickersProps = DatePickersProps & {
|
13
|
+
renderHelperText: (errorType: DateTimeValidationError) => void;
|
14
|
+
};
|
15
|
+
export declare const FiltersDateTimePicker: ({ label, onChange, renderHelperText, value, maxDate, minDate, }: DateTimePickersProps) => JSX.Element;
|
16
|
+
export {};
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import { IconButton, TextField } from '@mui/material';
|
2
|
+
import { MobileDatePicker, CalendarIcon, MobileDateTimePicker, } from '@mui/x-date-pickers';
|
3
|
+
import * as React from 'react';
|
4
|
+
import useNullableState from '../../../hooks/useNullableState';
|
5
|
+
import { format } from 'date-fns';
|
6
|
+
import { localisationService } from '@oneblink/apps';
|
7
|
+
const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
|
8
|
+
const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
|
9
|
+
export const FiltersDatePicker = ({ label, value, onChange, renderHelperText, maxDate, minDate, }) => {
|
10
|
+
const [errorType, setErrorType] = useNullableState(null);
|
11
|
+
const valueMemo = React.useMemo(() => {
|
12
|
+
return value ? new Date(value) : null;
|
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) => {
|
26
|
+
if (!newDate)
|
27
|
+
return onChange(undefined);
|
28
|
+
const formattedDate = format(newDate, 'yyyy-MM-dd');
|
29
|
+
onChange(formattedDate);
|
30
|
+
}, onError: setErrorType }));
|
31
|
+
};
|
32
|
+
export const FiltersDateTimePicker = ({ label, onChange, renderHelperText, value, maxDate, minDate, }) => {
|
33
|
+
const [errorType, setErrorType] = useNullableState(null);
|
34
|
+
const valueMemo = React.useMemo(() => {
|
35
|
+
return value ? new Date(value) : null;
|
36
|
+
}, [value]);
|
37
|
+
const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : null), [maxDate]);
|
38
|
+
const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : null), [minDate]);
|
39
|
+
return (React.createElement(MobileDateTimePicker, { label: label, format: shortDateTimeFormat, slots: {
|
40
|
+
textField: (params) => (React.createElement(TextField, { ...params, variant: "outlined", margin: "dense", size: "small", helperText: renderHelperText(errorType), InputProps: {
|
41
|
+
endAdornment: (React.createElement(IconButton, { edge: "end" },
|
42
|
+
React.createElement(CalendarIcon, null))),
|
43
|
+
} })),
|
44
|
+
}, slotProps: {
|
45
|
+
actionBar: {
|
46
|
+
actions: ['clear', 'today', 'cancel', 'accept'],
|
47
|
+
},
|
48
|
+
}, maxDate: maxDateMemo, minDate: minDateMemo, value: valueMemo, onAccept: (newDate) => {
|
49
|
+
if (!newDate)
|
50
|
+
return onChange(undefined);
|
51
|
+
onChange(newDate.toISOString());
|
52
|
+
}, onError: setErrorType }));
|
53
|
+
};
|
54
|
+
//# sourceMappingURL=Pickers.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Pickers.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/Pickers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconButton, TextField } from '@mui/material'\nimport {\n MobileDatePicker,\n DateValidationError,\n DateTimeValidationError,\n CalendarIcon,\n MobileDateTimePicker,\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 = ({\n label,\n value,\n onChange,\n renderHelperText,\n maxDate,\n minDate,\n}: DatePickersProps) => {\n const [errorType, setErrorType] = useNullableState<DateValidationError>(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 <MobileDatePicker\n label={label}\n format={shortDateFormat}\n slots={{\n textField: (params) => (\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: ['clear', 'today', 'cancel', 'accept'],\n },\n }}\n maxDate={maxDateMemo}\n minDate={minDateMemo}\n value={valueMemo}\n onAccept={(newDate) => {\n if (!newDate) return onChange(undefined)\n\n const formattedDate = format(newDate, 'yyyy-MM-dd')\n onChange(formattedDate)\n }}\n onError={setErrorType}\n />\n )\n}\n\ntype DateTimePickersProps = DatePickersProps & {\n renderHelperText: (errorType: DateTimeValidationError) => void\n}\nexport const FiltersDateTimePicker = ({\n label,\n onChange,\n renderHelperText,\n value,\n maxDate,\n minDate,\n}: DateTimePickersProps) => {\n const [errorType, setErrorType] =\n useNullableState<DateTimeValidationError>(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 <MobileDateTimePicker\n label={label}\n format={shortDateTimeFormat}\n slots={{\n textField: (params) => (\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: ['clear', 'today', 'cancel', 'accept'],\n },\n }}\n maxDate={maxDateMemo}\n minDate={minDateMemo}\n value={valueMemo}\n onAccept={(newDate) => {\n if (!newDate) return onChange(undefined)\n onChange(newDate.toISOString())\n }}\n onError={setErrorType}\n />\n )\n}\n"]}
|
package/dist/index.d.ts
CHANGED
@@ -20,9 +20,6 @@ export { default as useDrafts, DraftsContextProvider, DraftsContextValue, } from
|
|
20
20
|
export { default as useLoadDataState, LoadDataState, } from './hooks/useLoadDataState';
|
21
21
|
export { default as useFormSubmissionState } from './hooks/useFormSubmissionState';
|
22
22
|
export { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState';
|
23
|
-
export { default as MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker';
|
24
|
-
export { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker';
|
25
|
-
export { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker';
|
26
23
|
export { default as ProgressBar } from './components/renderer/ProgressBar';
|
27
24
|
export { default as PaymentReceipt } from './PaymentReceipt';
|
28
25
|
export * from './types/form';
|
package/dist/index.js
CHANGED
@@ -20,9 +20,6 @@ export { default as useDrafts, DraftsContextProvider, } from './hooks/useDrafts'
|
|
20
20
|
export { default as useLoadDataState, } from './hooks/useLoadDataState';
|
21
21
|
export { default as useFormSubmissionState } from './hooks/useFormSubmissionState';
|
22
22
|
export { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState';
|
23
|
-
export { default as MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker';
|
24
|
-
export { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker';
|
25
|
-
export { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker';
|
26
23
|
export { default as ProgressBar } from './components/renderer/ProgressBar';
|
27
24
|
export { default as PaymentReceipt } from './PaymentReceipt';
|
28
25
|
export * from './types/form';
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EACL,OAAO,IAAI,OAAO,EAClB,mBAAmB,GAEpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,iCAAiC,GAElC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,qBAAqB,GAEtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAElG,OAAO,EAAE,OAAO,IAAI,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EACL,OAAO,IAAI,OAAO,EAClB,mBAAmB,GAEpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,iCAAiC,GAElC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,qBAAqB,GAEtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAElG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAE5D,cAAc,cAAc,CAAA","sourcesContent":["export {\n OneBlinkFormBaseProps,\n OneBlinkFormControlledProps,\n OneBlinkFormUncontrolled as OneBlinkForm,\n OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n default as useIsOffline,\n IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n default as useAuth,\n AuthContextProvider,\n AuthContextValue,\n} from './hooks/useAuth'\nexport {\n default as usePendingSubmissions,\n PendingSubmissionsContextProvider,\n PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n default as useDrafts,\n DraftsContextProvider,\n DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n default as useLoadDataState,\n LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\n\nexport * from './types/form'\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.2",
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
6
6
|
"bugs": {
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
@@ -46,7 +46,7 @@
|
|
46
46
|
"@microsoft/eslint-plugin-sdl": "^0.2.0",
|
47
47
|
"@mui/lab": "^5.0.0-alpha.95",
|
48
48
|
"@mui/material": "^5.10.1",
|
49
|
-
"@mui/x-date-pickers": "^
|
49
|
+
"@mui/x-date-pickers": "^6.9.1",
|
50
50
|
"@oneblink/apps": "^5.2.0-beta.1",
|
51
51
|
"@oneblink/release-cli": "^2.0.2",
|
52
52
|
"@oneblink/types": "github:oneblink/types",
|
@@ -106,7 +106,7 @@
|
|
106
106
|
"peerDependencies": {
|
107
107
|
"@mui/lab": "^5.0.0 || ^5.0.0-alpha.79",
|
108
108
|
"@mui/material": "^5.6.1",
|
109
|
-
"@mui/x-date-pickers": "^
|
109
|
+
"@mui/x-date-pickers": "^6.9.1",
|
110
110
|
"@oneblink/apps": "*",
|
111
111
|
"react": "^17.0.0",
|
112
112
|
"react-dom": "^17.0.0",
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MobileDatePickerProps } from '@mui/x-date-pickers';
|
3
|
-
import { TextField, IconButton } from '@mui/material';
|
4
|
-
type RemainingPickerProps = Omit<MobileDatePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
5
|
-
type TextFieldProps = React.ComponentProps<typeof TextField>;
|
6
|
-
type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
7
|
-
type Props = RemainingPickerProps & {
|
8
|
-
name?: TextFieldProps['name'];
|
9
|
-
label?: TextFieldProps['label'];
|
10
|
-
maxDate?: string | Date;
|
11
|
-
maxDateMessage?: string;
|
12
|
-
minDate?: string | Date;
|
13
|
-
minDateMessage?: string;
|
14
|
-
margin?: TextFieldProps['margin'];
|
15
|
-
size?: TextFieldProps['size'];
|
16
|
-
placeholder?: TextFieldProps['placeholder'];
|
17
|
-
InputProps?: TextFieldProps['InputProps'];
|
18
|
-
inputVariant?: TextFieldProps['variant'];
|
19
|
-
onBlur?: TextFieldProps['onBlur'];
|
20
|
-
startIconButton?: boolean;
|
21
|
-
endIconButton?: boolean;
|
22
|
-
iconButtonEdge?: IconButtonProps['edge'];
|
23
|
-
iconButtonSize?: IconButtonProps['size'];
|
24
|
-
helperText?: TextFieldProps['helperText'];
|
25
|
-
error?: TextFieldProps['error'];
|
26
|
-
required?: TextFieldProps['required'];
|
27
|
-
showTodayButton?: boolean;
|
28
|
-
clearable?: boolean;
|
29
|
-
'data-cypress'?: string;
|
30
|
-
};
|
31
|
-
/**
|
32
|
-
* @param props
|
33
|
-
* @returns
|
34
|
-
* @group Components
|
35
|
-
*/
|
36
|
-
declare const _default: React.NamedExoticComponent<Props>;
|
37
|
-
export default _default;
|
@@ -1,76 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MobileDatePicker } from '@mui/x-date-pickers';
|
3
|
-
import { TextField, InputAdornment, IconButton } from '@mui/material';
|
4
|
-
import { DateRange } from '@mui/icons-material';
|
5
|
-
import useBooleanState from '../../hooks/useBooleanState';
|
6
|
-
import { localisationService } from '@oneblink/apps';
|
7
|
-
const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
|
8
|
-
const [value, setValue] = React.useState(null);
|
9
|
-
const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
|
10
|
-
const [helperText, setHelperText] = React.useState(undefined);
|
11
|
-
const handleError = React.useCallback((error) => {
|
12
|
-
switch (error) {
|
13
|
-
case 'invalidDate': {
|
14
|
-
return setHelperText('Invalid Date Time');
|
15
|
-
}
|
16
|
-
case 'maxDate': {
|
17
|
-
return setHelperText(maxDateMessage);
|
18
|
-
}
|
19
|
-
case 'minDate': {
|
20
|
-
return setHelperText(minDateMessage);
|
21
|
-
}
|
22
|
-
default: {
|
23
|
-
return setHelperText(undefined);
|
24
|
-
}
|
25
|
-
}
|
26
|
-
}, [maxDateMessage, minDateMessage]);
|
27
|
-
const convertedMaxDate = React.useMemo(() => {
|
28
|
-
if (typeof maxDate === 'string') {
|
29
|
-
return new Date(maxDate);
|
30
|
-
}
|
31
|
-
}, [maxDate]);
|
32
|
-
const convertedMinDate = React.useMemo(() => {
|
33
|
-
if (typeof minDate === 'string') {
|
34
|
-
return new Date(minDate);
|
35
|
-
}
|
36
|
-
}, [minDate]);
|
37
|
-
const onAccept = React.useCallback((date) => {
|
38
|
-
const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
|
39
|
-
if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
|
40
|
-
onChange(date);
|
41
|
-
}
|
42
|
-
}, [onChange, valueProp]);
|
43
|
-
const actions = React.useMemo(() => {
|
44
|
-
const actions = ['cancel', 'accept'];
|
45
|
-
if (showTodayButton) {
|
46
|
-
actions.unshift('today');
|
47
|
-
}
|
48
|
-
if (clearable) {
|
49
|
-
actions.unshift('clear');
|
50
|
-
}
|
51
|
-
return actions;
|
52
|
-
}, [clearable, showTodayButton]);
|
53
|
-
React.useEffect(() => {
|
54
|
-
setValue(valueProp);
|
55
|
-
}, [valueProp]);
|
56
|
-
return (React.createElement(MobileDatePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
|
57
|
-
startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
|
58
|
-
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
59
|
-
React.createElement(DateRange, null)))) : undefined,
|
60
|
-
endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
|
61
|
-
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
62
|
-
React.createElement(DateRange, null)))) : undefined,
|
63
|
-
...(InputProps ? InputProps : {}),
|
64
|
-
}, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, onChange: setValue, value: value, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, componentsProps: {
|
65
|
-
actionBar: {
|
66
|
-
actions,
|
67
|
-
},
|
68
|
-
}, ...rest }));
|
69
|
-
};
|
70
|
-
/**
|
71
|
-
* @param props
|
72
|
-
* @returns
|
73
|
-
* @group Components
|
74
|
-
*/
|
75
|
-
export default React.memo(V4CompatibleDatePicker);
|
76
|
-
//# sourceMappingURL=V4CompatibleDatePicker.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"V4CompatibleDatePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileDatePicker, MobileDatePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n MobileDatePickerProps<string | Date, Date>,\n | 'onError'\n | 'renderInput'\n | 'toolbarFormat'\n | 'rightArrowIcon'\n | 'leftArrowIcon'\n | 'maxDate'\n | 'minDate'\n | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: TextFieldProps['name']\n label?: TextFieldProps['label']\n maxDate?: string | Date\n maxDateMessage?: string\n minDate?: string | Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: TextFieldProps['placeholder']\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: TextFieldProps['helperText']\n error?: TextFieldProps['error']\n required?: TextFieldProps['required']\n showTodayButton?: boolean\n clearable?: boolean\n 'data-cypress'?: string\n}\n\nconst V4CompatibleDatePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n showTodayButton,\n clearable,\n value: valueProp,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [value, setValue] = React.useState<typeof valueProp>(null)\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string | undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (\n error: Parameters<\n Required<MobileDatePickerProps<string | Date, Date>>['onError']\n >[0],\n ) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date | null) => {\n const currentValue =\n valueProp instanceof Date ? valueProp.toISOString() : valueProp\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, valueProp],\n )\n\n const actions = React.useMemo(() => {\n const actions: PickersActionBarAction[] = ['cancel', 'accept']\n if (showTodayButton) {\n actions.unshift('today')\n }\n if (clearable) {\n actions.unshift('clear')\n }\n return actions\n }, [clearable, showTodayButton])\n\n React.useEffect(() => {\n setValue(valueProp)\n }, [valueProp])\n\n return (\n <MobileDatePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp || helperText}\n error={error}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n onChange={setValue}\n value={value}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n componentsProps={{\n actionBar: {\n actions,\n },\n }}\n {...rest}\n />\n )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MobileDateTimePickerProps } from '@mui/x-date-pickers';
|
3
|
-
import { TextField, IconButton } from '@mui/material';
|
4
|
-
type RemainingPickerProps = Omit<MobileDateTimePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'timeIcon' | 'dateRangeIcon' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
5
|
-
type TextFieldProps = React.ComponentProps<typeof TextField>;
|
6
|
-
type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
7
|
-
type Props = RemainingPickerProps & {
|
8
|
-
name?: TextFieldProps['name'];
|
9
|
-
label?: TextFieldProps['label'];
|
10
|
-
maxDate?: string | Date;
|
11
|
-
maxDateMessage?: string;
|
12
|
-
minDate?: string | Date;
|
13
|
-
minDateMessage?: string;
|
14
|
-
margin?: TextFieldProps['margin'];
|
15
|
-
size?: TextFieldProps['size'];
|
16
|
-
placeholder?: TextFieldProps['placeholder'];
|
17
|
-
InputProps?: TextFieldProps['InputProps'];
|
18
|
-
inputVariant?: TextFieldProps['variant'];
|
19
|
-
onBlur?: TextFieldProps['onBlur'];
|
20
|
-
startIconButton?: boolean;
|
21
|
-
endIconButton?: boolean;
|
22
|
-
iconButtonEdge?: IconButtonProps['edge'];
|
23
|
-
iconButtonSize?: IconButtonProps['size'];
|
24
|
-
helperText?: TextFieldProps['helperText'];
|
25
|
-
error?: TextFieldProps['error'];
|
26
|
-
required?: TextFieldProps['required'];
|
27
|
-
showTodayButton?: boolean;
|
28
|
-
clearable?: boolean;
|
29
|
-
'data-cypress'?: string;
|
30
|
-
};
|
31
|
-
/**
|
32
|
-
* @param props
|
33
|
-
* @returns
|
34
|
-
* @group Components
|
35
|
-
*/
|
36
|
-
declare const _default: React.NamedExoticComponent<Props>;
|
37
|
-
export default _default;
|
@@ -1,78 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MobileDateTimePicker, } from '@mui/x-date-pickers';
|
3
|
-
import { TextField, InputAdornment, IconButton } from '@mui/material';
|
4
|
-
import { AccessTime, DateRange } from '@mui/icons-material';
|
5
|
-
import useBooleanState from '../../hooks/useBooleanState';
|
6
|
-
import { localisationService } from '@oneblink/apps';
|
7
|
-
const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
|
8
|
-
const [value, setValue] = React.useState(null);
|
9
|
-
const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
|
10
|
-
const [helperText, setHelperText] = React.useState(undefined);
|
11
|
-
const handleError = React.useCallback((error) => {
|
12
|
-
switch (error) {
|
13
|
-
case 'invalidDate': {
|
14
|
-
return setHelperText('Invalid Date Time');
|
15
|
-
}
|
16
|
-
case 'maxDate': {
|
17
|
-
return setHelperText(maxDateMessage);
|
18
|
-
}
|
19
|
-
case 'minDate': {
|
20
|
-
return setHelperText(minDateMessage);
|
21
|
-
}
|
22
|
-
default: {
|
23
|
-
return setHelperText(undefined);
|
24
|
-
}
|
25
|
-
}
|
26
|
-
}, [maxDateMessage, minDateMessage]);
|
27
|
-
const convertedMaxDate = React.useMemo(() => {
|
28
|
-
if (typeof maxDate === 'string') {
|
29
|
-
return new Date(maxDate);
|
30
|
-
}
|
31
|
-
return maxDate;
|
32
|
-
}, [maxDate]);
|
33
|
-
const convertedMinDate = React.useMemo(() => {
|
34
|
-
if (typeof minDate === 'string') {
|
35
|
-
return new Date(minDate);
|
36
|
-
}
|
37
|
-
return minDate;
|
38
|
-
}, [minDate]);
|
39
|
-
const onAccept = React.useCallback((date) => {
|
40
|
-
const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
|
41
|
-
if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
|
42
|
-
onChange(date);
|
43
|
-
}
|
44
|
-
}, [onChange, valueProp]);
|
45
|
-
const actions = React.useMemo(() => {
|
46
|
-
const actions = ['cancel', 'accept'];
|
47
|
-
if (showTodayButton) {
|
48
|
-
actions.unshift('today');
|
49
|
-
}
|
50
|
-
if (clearable) {
|
51
|
-
actions.unshift('clear');
|
52
|
-
}
|
53
|
-
return actions;
|
54
|
-
}, [clearable, showTodayButton]);
|
55
|
-
React.useEffect(() => {
|
56
|
-
setValue(valueProp);
|
57
|
-
}, [valueProp]);
|
58
|
-
return (React.createElement(MobileDateTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
|
59
|
-
startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
|
60
|
-
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
61
|
-
React.createElement(DateRange, null)))) : undefined,
|
62
|
-
endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
|
63
|
-
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
64
|
-
React.createElement(DateRange, null)))) : undefined,
|
65
|
-
...(InputProps ? InputProps : {}),
|
66
|
-
}, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, timeIcon: React.createElement(AccessTime, null), dateRangeIcon: React.createElement(DateRange, null), onChange: setValue, value: value, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, componentsProps: {
|
67
|
-
actionBar: {
|
68
|
-
actions,
|
69
|
-
},
|
70
|
-
}, ...rest }));
|
71
|
-
};
|
72
|
-
/**
|
73
|
-
* @param props
|
74
|
-
* @returns
|
75
|
-
* @group Components
|
76
|
-
*/
|
77
|
-
export default React.memo(V4CompatibleDateTimePicker);
|
78
|
-
//# sourceMappingURL=V4CompatibleDateTimePicker.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n MobileDateTimePicker,\n MobileDateTimePickerProps,\n} from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime, DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n MobileDateTimePickerProps<string | Date, Date>,\n | 'onError'\n | 'renderInput'\n | 'toolbarFormat'\n | 'timeIcon'\n | 'dateRangeIcon'\n | 'rightArrowIcon'\n | 'leftArrowIcon'\n | 'maxDate'\n | 'minDate'\n | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: TextFieldProps['name']\n label?: TextFieldProps['label']\n maxDate?: string | Date\n maxDateMessage?: string\n minDate?: string | Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: TextFieldProps['placeholder']\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: TextFieldProps['helperText']\n error?: TextFieldProps['error']\n required?: TextFieldProps['required']\n showTodayButton?: boolean\n clearable?: boolean\n 'data-cypress'?: string\n}\n\nconst V4CompatibleDateTimePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n showTodayButton,\n clearable,\n value: valueProp,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [value, setValue] = React.useState<typeof valueProp>(null)\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string | undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (\n error: Parameters<\n Required<MobileDateTimePickerProps<string | Date, Date>>['onError']\n >[0],\n ) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n return maxDate\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n return minDate\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date | null) => {\n const currentValue =\n valueProp instanceof Date ? valueProp.toISOString() : valueProp\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, valueProp],\n )\n\n const actions = React.useMemo(() => {\n const actions: PickersActionBarAction[] = ['cancel', 'accept']\n if (showTodayButton) {\n actions.unshift('today')\n }\n if (clearable) {\n actions.unshift('clear')\n }\n return actions\n }, [clearable, showTodayButton])\n\n React.useEffect(() => {\n setValue(valueProp)\n }, [valueProp])\n\n return (\n <MobileDateTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp || helperText}\n error={error}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n timeIcon={<AccessTime />}\n dateRangeIcon={<DateRange />}\n onChange={setValue}\n value={value}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n componentsProps={{\n actionBar: {\n actions,\n },\n }}\n {...rest}\n />\n )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MobileTimePickerProps } from '@mui/x-date-pickers';
|
3
|
-
import { TextField, IconButton } from '@mui/material';
|
4
|
-
type RemainingPickerProps = Omit<MobileTimePickerProps<string | Date, Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
|
5
|
-
type TextFieldProps = React.ComponentProps<typeof TextField>;
|
6
|
-
type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
7
|
-
type Props = RemainingPickerProps & {
|
8
|
-
name?: TextFieldProps['name'];
|
9
|
-
label?: TextFieldProps['label'];
|
10
|
-
margin?: TextFieldProps['margin'];
|
11
|
-
size?: TextFieldProps['size'];
|
12
|
-
placeholder?: TextFieldProps['placeholder'];
|
13
|
-
InputProps?: TextFieldProps['InputProps'];
|
14
|
-
inputVariant?: TextFieldProps['variant'];
|
15
|
-
onBlur?: TextFieldProps['onBlur'];
|
16
|
-
startIconButton?: boolean;
|
17
|
-
endIconButton?: boolean;
|
18
|
-
iconButtonEdge?: IconButtonProps['edge'];
|
19
|
-
iconButtonSize?: IconButtonProps['size'];
|
20
|
-
helperText?: TextFieldProps['helperText'];
|
21
|
-
error?: TextFieldProps['error'];
|
22
|
-
required?: TextFieldProps['required'];
|
23
|
-
showTodayButton?: boolean;
|
24
|
-
clearable?: boolean;
|
25
|
-
'data-cypress'?: string;
|
26
|
-
};
|
27
|
-
/**
|
28
|
-
* @param props
|
29
|
-
* @returns
|
30
|
-
* @group Components
|
31
|
-
*/
|
32
|
-
declare const _default: React.NamedExoticComponent<Props>;
|
33
|
-
export default _default;
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MobileTimePicker } from '@mui/x-date-pickers';
|
3
|
-
import { TextField, InputAdornment, IconButton } from '@mui/material';
|
4
|
-
import { AccessTime } from '@mui/icons-material';
|
5
|
-
import useBooleanState from '../../hooks/useBooleanState';
|
6
|
-
const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, showTodayButton, clearable, value: valueProp, 'data-cypress': dataCypress, ...rest }) => {
|
7
|
-
const [value, setValue] = React.useState(null);
|
8
|
-
const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
|
9
|
-
const [helperText, setHelperText] = React.useState(undefined);
|
10
|
-
const handleError = React.useCallback((error) => {
|
11
|
-
switch (error) {
|
12
|
-
case 'invalidDate': {
|
13
|
-
return setHelperText('Invalid Date Time');
|
14
|
-
}
|
15
|
-
default: {
|
16
|
-
return setHelperText(undefined);
|
17
|
-
}
|
18
|
-
}
|
19
|
-
}, []);
|
20
|
-
const onAccept = React.useCallback((date) => {
|
21
|
-
const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
|
22
|
-
if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
|
23
|
-
onChange(date);
|
24
|
-
}
|
25
|
-
}, [onChange, valueProp]);
|
26
|
-
const actions = React.useMemo(() => {
|
27
|
-
const actions = ['cancel', 'accept'];
|
28
|
-
if (showTodayButton) {
|
29
|
-
actions.unshift('today');
|
30
|
-
}
|
31
|
-
if (clearable) {
|
32
|
-
actions.unshift('clear');
|
33
|
-
}
|
34
|
-
return actions;
|
35
|
-
}, [clearable, showTodayButton]);
|
36
|
-
React.useEffect(() => {
|
37
|
-
setValue(valueProp);
|
38
|
-
}, [valueProp]);
|
39
|
-
return (React.createElement(MobileTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, error: error, fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
|
40
|
-
startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
|
41
|
-
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
42
|
-
React.createElement(AccessTime, null)))) : undefined,
|
43
|
-
endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
|
44
|
-
React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
|
45
|
-
React.createElement(AccessTime, null)))) : undefined,
|
46
|
-
...(InputProps ? InputProps : {}),
|
47
|
-
}, "data-cypress": dataCypress })), onError: handleError, onChange: setValue, value: value, onAccept: onAccept, disabled: disabled, componentsProps: {
|
48
|
-
actionBar: {
|
49
|
-
actions,
|
50
|
-
},
|
51
|
-
}, ...rest }));
|
52
|
-
};
|
53
|
-
/**
|
54
|
-
* @param props
|
55
|
-
* @returns
|
56
|
-
* @group Components
|
57
|
-
*/
|
58
|
-
export default React.memo(V4CompatibleTimePicker);
|
59
|
-
//# sourceMappingURL=V4CompatibleTimePicker.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"V4CompatibleTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleTimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileTimePicker, MobileTimePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n MobileTimePickerProps<string | Date, Date>,\n | 'onError'\n | 'renderInput'\n | 'toolbarFormat'\n | 'rightArrowIcon'\n | 'leftArrowIcon'\n | 'maxDate'\n | 'minDate'\n | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: TextFieldProps['name']\n label?: TextFieldProps['label']\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: TextFieldProps['placeholder']\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: TextFieldProps['helperText']\n error?: TextFieldProps['error']\n required?: TextFieldProps['required']\n showTodayButton?: boolean\n clearable?: boolean\n 'data-cypress'?: string\n}\n\nconst V4CompatibleTimePicker = ({\n name,\n label,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n showTodayButton,\n clearable,\n value: valueProp,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [value, setValue] = React.useState<typeof valueProp>(null)\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string | undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (\n error: Parameters<\n Required<MobileTimePickerProps<string | Date, Date>>['onError']\n >[0],\n ) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [],\n )\n\n const onAccept = React.useCallback(\n (date: Date | null) => {\n const currentValue =\n valueProp instanceof Date ? valueProp.toISOString() : valueProp\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, valueProp],\n )\n\n const actions = React.useMemo(() => {\n const actions: PickersActionBarAction[] = ['cancel', 'accept']\n if (showTodayButton) {\n actions.unshift('today')\n }\n if (clearable) {\n actions.unshift('clear')\n }\n return actions\n }, [clearable, showTodayButton])\n\n React.useEffect(() => {\n setValue(valueProp)\n }, [valueProp])\n\n return (\n <MobileTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp || helperText}\n error={error}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n onError={handleError}\n onChange={setValue}\n value={value}\n onAccept={onAccept}\n disabled={disabled}\n componentsProps={{\n actionBar: {\n actions,\n },\n }}\n {...rest}\n />\n )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}
|