@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.
@@ -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, _v, _w, _x, _y, _z, _0, _1, _2;
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(V4CompatibleDatePicker, { label: "After", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", maxDate: (_g = filter.value) === null || _g === void 0 ? void 0 : _g.$lte, maxDateMessage: ((_h = filter.value) === null || _h === void 0 ? void 0 : _h.$lte) &&
70
- `Must be before "${format(new Date((_j = filter.value) === null || _j === void 0 ? void 0 : _j.$lte), shortDateFormat)}"`, value: ((_k = filter.value) === null || _k === void 0 ? void 0 : _k.$gte) || null, onChange: (newDate) => {
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
- const newValue = newDate
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: newValue,
78
+ $gte: newDate,
79
79
  }
80
80
  : undefined, false);
81
- }, endIconButton: true, iconButtonEdge: "end" })),
81
+ } })),
82
82
  React.createElement(Grid, { item: true, xs: 6 },
83
- React.createElement(V4CompatibleDatePicker, { label: "Before", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", minDate: (_l = filter.value) === null || _l === void 0 ? void 0 : _l.$gte, minDateMessage: ((_m = filter.value) === null || _m === void 0 ? void 0 : _m.$lte) &&
84
- `Must be after "${format(new Date((_o = filter.value) === null || _o === void 0 ? void 0 : _o.$lte), shortDateFormat)}"`, value: ((_p = filter.value) === null || _p === void 0 ? void 0 : _p.$lte) || null, onChange: (newDate) => {
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
- const newValue = newDate
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: newValue,
93
+ $lte: newDate,
93
94
  }
94
95
  : undefined, false);
95
- }, endIconButton: true, iconButtonEdge: "end" }))));
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(V4CompatibleDateTimePicker, { label: "After", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", maxDate: (_q = filter.value) === null || _q === void 0 ? void 0 : _q.$lte, maxDateMessage: ((_r = filter.value) === null || _r === void 0 ? void 0 : _r.$lte) &&
101
- `Must be before "${format(new Date((_s = filter.value) === null || _s === void 0 ? void 0 : _s.$lte), shortDateFormat)}"`, value: ((_t = filter.value) === null || _t === void 0 ? void 0 : _t.$gte) || null, onChange: (momentDate) => {
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
- const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
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: newValue,
111
+ $gte: newDate,
108
112
  }
109
113
  : undefined, false);
110
- }, endIconButton: true, iconButtonEdge: "end" })),
114
+ } })),
111
115
  React.createElement(Grid, { item: true, xs: 6 },
112
- React.createElement(V4CompatibleDateTimePicker, { label: "Before", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", minDate: (_u = filter.value) === null || _u === void 0 ? void 0 : _u.$gte, minDateMessage: ((_v = filter.value) === null || _v === void 0 ? void 0 : _v.$lte) &&
113
- `Must be after "${format(new Date((_w = filter.value) === null || _w === void 0 ? void 0 : _w.$lte), shortDateFormat)}"`, value: ((_x = filter.value) === null || _x === void 0 ? void 0 : _x.$lte) || null, onChange: (momentDate) => {
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
- const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
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: newValue,
126
+ $lte: newDate,
120
127
  }
121
128
  : undefined, false);
122
- }, endIconButton: true, iconButtonEdge: "end" }))));
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: ((_z = (_y = filter.value) === null || _y === void 0 ? void 0 : _y.$eq) === null || _z === void 0 ? void 0 : _z.toString()) || 'null', onChange: (e) => {
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: (_0 = filter.value) === null || _0 === void 0 ? void 0 : _0.$in, onChange: (newValue) => {
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: (_2 = (_1 = filter.value) === null || _1 === void 0 ? void 0 : _1.$elemMatch) === null || _2 === void 0 ? void 0 : _2.$in, onChange: (newValue) => {
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":"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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 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,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC1G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,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 MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker'\nexport { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker'\nexport { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker'\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\n\nexport * from './types/form'\n"]}
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.1",
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": "^5.0.0-beta.6",
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": "^5.0.0 || ^5.0.0-alpha.6",
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"]}