@oneblink/apps-react 2.0.0-beta.2 → 2.0.0

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.
Files changed (14) hide show
  1. package/dist/components/formStore/table/ColumnFilters.js +4 -12
  2. package/dist/components/formStore/table/ColumnFilters.js.map +1 -1
  3. package/dist/components/pickers/V4CompatibleDatePicker.d.ts +8 -6
  4. package/dist/components/pickers/V4CompatibleDatePicker.js +23 -10
  5. package/dist/components/pickers/V4CompatibleDatePicker.js.map +1 -1
  6. package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts +9 -6
  7. package/dist/components/pickers/V4CompatibleDateTimePicker.js +23 -10
  8. package/dist/components/pickers/V4CompatibleDateTimePicker.js.map +1 -1
  9. package/dist/components/pickers/V4CompatibleTimePicker.d.ts +8 -6
  10. package/dist/components/pickers/V4CompatibleTimePicker.js +23 -10
  11. package/dist/components/pickers/V4CompatibleTimePicker.js.map +1 -1
  12. package/dist/styles.css +55 -78
  13. package/dist/styles.css.map +1 -1
  14. package/package.json +3 -3
package/dist/components/formStore/table/ColumnFilters.js CHANGED
@@ -66,9 +66,7 @@ function ColumnFilters({ filter }) {
66
66
  case 'DATE': {
67
67
  return (React.createElement(Grid, { container: true, spacing: 1 },
68
68
  React.createElement(Grid, { item: true, xs: 6 },
69
- React.createElement(V4CompatibleDatePicker, { label: "After",
70
- // @ts-expect-error ???
71
- 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) &&
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) &&
72
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) => {
73
71
  var _a;
74
72
  const newValue = newDate
@@ -82,9 +80,7 @@ function ColumnFilters({ filter }) {
82
80
  : undefined, false);
83
81
  }, endIconButton: true, iconButtonEdge: "end" })),
84
82
  React.createElement(Grid, { item: true, xs: 6 },
85
- React.createElement(V4CompatibleDatePicker, { label: "Before",
86
- // @ts-expect-error ???
87
- 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) &&
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) &&
88
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) => {
89
85
  var _a;
90
86
  const newValue = newDate
@@ -101,9 +97,7 @@ function ColumnFilters({ filter }) {
101
97
  case 'DATETIME': {
102
98
  return (React.createElement(Grid, { container: true, spacing: 1 },
103
99
  React.createElement(Grid, { item: true, xs: 6 },
104
- React.createElement(V4CompatibleDateTimePicker, { label: "After",
105
- // @ts-expect-error ???
106
- 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) &&
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) &&
107
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) => {
108
102
  var _a;
109
103
  const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
@@ -115,9 +109,7 @@ function ColumnFilters({ filter }) {
115
109
  : undefined, false);
116
110
  }, endIconButton: true, iconButtonEdge: "end" })),
117
111
  React.createElement(Grid, { item: true, xs: 6 },
118
- React.createElement(V4CompatibleDateTimePicker, { label: "Before",
119
- // @ts-expect-error ???
120
- 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) &&
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) &&
121
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) => {
122
114
  var _a;
123
115
  const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
package/dist/components/formStore/table/ColumnFilters.js.map CHANGED
@@ -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 // @ts-expect-error ???\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 // @ts-expect-error ???\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 // @ts-expect-error ???\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 // @ts-expect-error ???\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.DynamicChoiceElementOption[]\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 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.DynamicChoiceElementOption[]\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"]}
package/dist/components/pickers/V4CompatibleDatePicker.d.ts CHANGED
@@ -5,15 +5,15 @@ declare type RemainingPickerProps = Omit<MobileDatePickerProps<string | Date, Da
5
5
  declare type TextFieldProps = React.ComponentProps<typeof TextField>;
6
6
  declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
7
7
  declare type Props = RemainingPickerProps & {
8
- name?: string;
9
- label?: string;
8
+ name?: TextFieldProps['name'];
9
+ label?: TextFieldProps['label'];
10
10
  maxDate?: string | Date;
11
11
  maxDateMessage?: string;
12
12
  minDate?: string | Date;
13
13
  minDateMessage?: string;
14
14
  margin?: TextFieldProps['margin'];
15
15
  size?: TextFieldProps['size'];
16
- placeholder?: string;
16
+ placeholder?: TextFieldProps['placeholder'];
17
17
  InputProps?: TextFieldProps['InputProps'];
18
18
  inputVariant?: TextFieldProps['variant'];
19
19
  onBlur?: TextFieldProps['onBlur'];
@@ -21,9 +21,11 @@ declare type Props = RemainingPickerProps & {
21
21
  endIconButton?: boolean;
22
22
  iconButtonEdge?: IconButtonProps['edge'];
23
23
  iconButtonSize?: IconButtonProps['size'];
24
- helperText?: string | React.ReactNode;
25
- error?: boolean;
26
- required?: boolean;
24
+ helperText?: TextFieldProps['helperText'];
25
+ error?: TextFieldProps['error'];
26
+ required?: TextFieldProps['required'];
27
+ showTodayButton?: boolean;
28
+ clearable?: boolean;
27
29
  'data-cypress'?: string;
28
30
  };
29
31
  declare const _default: React.NamedExoticComponent<Props>;
package/dist/components/pickers/V4CompatibleDatePicker.js CHANGED
@@ -4,10 +4,8 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
4
4
  import { DateRange } from '@mui/icons-material';
5
5
  import useBooleanState from '../../hooks/useBooleanState';
6
6
  import { localisationService } from '@oneblink/apps';
7
- const emptyFn = () => {
8
- //
9
- };
10
- const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
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);
11
9
  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
12
10
  const [helperText, setHelperText] = React.useState(undefined);
13
11
  const handleError = React.useCallback((error) => {
@@ -37,12 +35,25 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
37
35
  }
38
36
  }, [minDate]);
39
37
  const onAccept = React.useCallback((date) => {
40
- const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
38
+ const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
41
39
  if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
42
40
  onChange(date);
43
41
  }
44
- }, [onChange, rest.value]);
45
- 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: {
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: {
46
57
  startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
47
58
  React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
48
59
  React.createElement(DateRange, null)))) : undefined,
@@ -50,9 +61,11 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
50
61
  React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
51
62
  React.createElement(DateRange, null)))) : undefined,
52
63
  ...(InputProps ? InputProps : {}),
53
- }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError,
54
- // This triggers every time a component of the while date changes within the picker
55
- onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
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 }));
56
69
  };
57
70
  export default React.memo(V4CompatibleDatePicker);
58
71
  //# sourceMappingURL=V4CompatibleDatePicker.js.map
package/dist/components/pickers/V4CompatibleDatePicker.js.map CHANGED
@@ -1 +1 @@
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'\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?: string\n label?: string\n maxDate?: string | Date\n maxDateMessage?: string\n minDate?: string | Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: string\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?: string | React.ReactNode\n error?: boolean\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst emptyFn = () => {\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 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\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 rest.value instanceof Date ? rest.value.toISOString() : rest.value\n\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, rest.value],\n )\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 // This triggers every time a component of the while date changes within the picker\n onChange={emptyFn}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}
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\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}
package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts CHANGED
@@ -5,24 +5,27 @@ declare type RemainingPickerProps = Omit<MobileDateTimePickerProps<string | Date
5
5
  declare type TextFieldProps = React.ComponentProps<typeof TextField>;
6
6
  declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
7
7
  declare type Props = RemainingPickerProps & {
8
- name?: string;
9
- label?: string;
8
+ name?: TextFieldProps['name'];
9
+ label?: TextFieldProps['label'];
10
10
  maxDate?: string | Date;
11
11
  maxDateMessage?: string;
12
12
  minDate?: string | Date;
13
13
  minDateMessage?: string;
14
14
  margin?: TextFieldProps['margin'];
15
15
  size?: TextFieldProps['size'];
16
- placeholder?: string;
16
+ placeholder?: TextFieldProps['placeholder'];
17
17
  InputProps?: TextFieldProps['InputProps'];
18
18
  inputVariant?: TextFieldProps['variant'];
19
+ onBlur?: TextFieldProps['onBlur'];
19
20
  startIconButton?: boolean;
20
21
  endIconButton?: boolean;
21
22
  iconButtonEdge?: IconButtonProps['edge'];
22
23
  iconButtonSize?: IconButtonProps['size'];
23
- helperText?: string;
24
- error?: boolean;
25
- required?: boolean;
24
+ helperText?: TextFieldProps['helperText'];
25
+ error?: TextFieldProps['error'];
26
+ required?: TextFieldProps['required'];
27
+ showTodayButton?: boolean;
28
+ clearable?: boolean;
26
29
  'data-cypress'?: string;
27
30
  };
28
31
  declare const _default: React.NamedExoticComponent<Props>;
package/dist/components/pickers/V4CompatibleDateTimePicker.js CHANGED
@@ -4,10 +4,8 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
4
4
  import { AccessTime, DateRange } from '@mui/icons-material';
5
5
  import useBooleanState from '../../hooks/useBooleanState';
6
6
  import { localisationService } from '@oneblink/apps';
7
- const emptyFn = () => {
8
- //
9
- };
10
- const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
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);
11
9
  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
12
10
  const [helperText, setHelperText] = React.useState(undefined);
13
11
  const handleError = React.useCallback((error) => {
@@ -37,12 +35,25 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
37
35
  }
38
36
  }, [minDate]);
39
37
  const onAccept = React.useCallback((date) => {
40
- const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
38
+ const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
41
39
  if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
42
40
  onChange(date);
43
41
  }
44
- }, [onChange, rest.value]);
45
- 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, InputProps: {
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(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: {
46
57
  startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
47
58
  React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
48
59
  React.createElement(DateRange, null)))) : undefined,
@@ -50,9 +61,11 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
50
61
  React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
51
62
  React.createElement(DateRange, null)))) : undefined,
52
63
  ...(InputProps ? InputProps : {}),
53
- }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, timeIcon: React.createElement(AccessTime, null), dateRangeIcon: React.createElement(DateRange, null),
54
- // This triggers everytime a component of the while date changes within the picker
55
- onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
64
+ }, "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: {
65
+ actionBar: {
66
+ actions,
67
+ },
68
+ }, ...rest }));
56
69
  };
57
70
  export default React.memo(V4CompatibleDateTimePicker);
58
71
  //# sourceMappingURL=V4CompatibleDateTimePicker.js.map
package/dist/components/pickers/V4CompatibleDateTimePicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,oBAAoB,GAErB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAyCpD,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,EAAE;AACJ,CAAC,CAAA;AACD,MAAM,0BAA0B,GAAG,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EAAE,cAAc,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACD,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,SAAS,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CACE,KAEI,EACJ,EAAE;QACF,QAAQ,KAAK,EAAE;YACb,KAAK,aAAa,CAAC,CAAC;gBAClB,OAAO,aAAa,CAAC,mBAAmB,CAAC,CAAA;aAC1C;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,aAAa,CAAC,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,EACD,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAiB,EAAE,EAAE;QACpB,MAAM,YAAY,GAChB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;QACpE,IAAI,YAAY,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,IAAI,CAAC,EAAE;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CACvB,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,IACnB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,cAAc,IAAI,UAAU,KACpC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC5B,SAAS,QACT,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE;gBACV,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;oBAC9B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAC5B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;oBAC5B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,kBACa,WAAW,GACzB,CACH,EACD,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,oBAAC,UAAU,OAAG,EACxB,aAAa,EAAE,oBAAC,SAAS,OAAG;QAC5B,kFAAkF;QAClF,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,EAClE,QAAQ,EAAE,QAAQ,KACd,IAAI,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,0BAA0B,CAAC,CAAA","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'\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?: string\n label?: string\n maxDate?: string | Date\n maxDateMessage?: string\n minDate?: string | Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: string\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: string\n error?: boolean\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst emptyFn = () => {\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 disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\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 }, [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 rest.value instanceof Date ? rest.value.toISOString() : rest.value\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, rest.value],\n )\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 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 // This triggers everytime a component of the while date changes within the picker\n onChange={emptyFn}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}
1
+ {"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,oBAAoB,GAErB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AA6CpD,MAAM,0BAA0B,GAAG,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EAAE,cAAc,EAC1B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACD,EAAE,EAAE;IACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAmB,IAAI,CAAC,CAAA;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,SAAS,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CACE,KAEI,EACJ,EAAE;QACF,QAAQ,KAAK,EAAE;YACb,KAAK,aAAa,CAAC,CAAC;gBAClB,OAAO,aAAa,CAAC,mBAAmB,CAAC,CAAA;aAC1C;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO,aAAa,CAAC,cAAc,CAAC,CAAA;aACrC;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,aAAa,CAAC,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,EACD,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAiB,EAAE,EAAE;QACpB,MAAM,YAAY,GAChB,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QACjE,IAAI,YAAY,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,IAAI,CAAC,EAAE;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAA;SACf;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAA;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,OAAO,GAA6B,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC9D,IAAI,eAAe,EAAE;YACnB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;SACzB;QACD,IAAI,SAAS,EAAE;YACb,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;SACzB;QACD,OAAO,OAAO,CAAA;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAA;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,oBAAC,oBAAoB,IACnB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,cAAc,IAAI,UAAU,EACxC,KAAK,EAAE,KAAK,EACZ,SAAS,QACT,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE;gBACV,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;oBAC9B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAC5B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;oBAC5B,oBAAC,UAAU,IACT,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;wBAElB,oBAAC,SAAS,OAAG,CACF,CACE,CAClB,CAAC,CAAC,CAAC,SAAS;gBACb,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,kBACa,WAAW,GACzB,CACH,EACD,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,oBAAC,UAAU,OAAG,EACxB,aAAa,EAAE,oBAAC,SAAS,OAAG,EAC5B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,EAClE,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE;YACf,SAAS,EAAE;gBACT,OAAO;aACR;SACF,KACG,IAAI,GACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,0BAA0B,CAAC,CAAA","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 }, [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 <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\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}
package/dist/components/pickers/V4CompatibleTimePicker.d.ts CHANGED
@@ -5,11 +5,11 @@ declare type RemainingPickerProps = Omit<MobileTimePickerProps<string | Date, Da
5
5
  declare type TextFieldProps = React.ComponentProps<typeof TextField>;
6
6
  declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
7
7
  declare type Props = RemainingPickerProps & {
8
- name?: string;
9
- label?: string;
8
+ name?: TextFieldProps['name'];
9
+ label?: TextFieldProps['label'];
10
10
  margin?: TextFieldProps['margin'];
11
11
  size?: TextFieldProps['size'];
12
- placeholder?: string;
12
+ placeholder?: TextFieldProps['placeholder'];
13
13
  InputProps?: TextFieldProps['InputProps'];
14
14
  inputVariant?: TextFieldProps['variant'];
15
15
  onBlur?: TextFieldProps['onBlur'];
@@ -17,9 +17,11 @@ declare type Props = RemainingPickerProps & {
17
17
  endIconButton?: boolean;
18
18
  iconButtonEdge?: IconButtonProps['edge'];
19
19
  iconButtonSize?: IconButtonProps['size'];
20
- helperText?: string | React.ReactNode;
21
- error?: boolean;
22
- required?: boolean;
20
+ helperText?: TextFieldProps['helperText'];
21
+ error?: TextFieldProps['error'];
22
+ required?: TextFieldProps['required'];
23
+ showTodayButton?: boolean;
24
+ clearable?: boolean;
23
25
  'data-cypress'?: string;
24
26
  };
25
27
  declare const _default: React.NamedExoticComponent<Props>;
package/dist/components/pickers/V4CompatibleTimePicker.js CHANGED
@@ -3,10 +3,8 @@ import { MobileTimePicker } from '@mui/x-date-pickers';
3
3
  import { TextField, InputAdornment, IconButton } from '@mui/material';
4
4
  import { AccessTime } from '@mui/icons-material';
5
5
  import useBooleanState from '../../hooks/useBooleanState';
6
- const emptyFn = () => {
7
- //
8
- };
9
- const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
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);
10
8
  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
11
9
  const [helperText, setHelperText] = React.useState(undefined);
12
10
  const handleError = React.useCallback((error) => {
@@ -20,12 +18,25 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
20
18
  }
21
19
  }, []);
22
20
  const onAccept = React.useCallback((date) => {
23
- const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
21
+ const currentValue = valueProp instanceof Date ? valueProp.toISOString() : valueProp;
24
22
  if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
25
23
  onChange(date);
26
24
  }
27
- }, [onChange, rest.value]);
28
- 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: {
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: {
29
40
  startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
30
41
  React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
31
42
  React.createElement(AccessTime, null)))) : undefined,
@@ -33,9 +44,11 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
33
44
  React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
34
45
  React.createElement(AccessTime, null)))) : undefined,
35
46
  ...(InputProps ? InputProps : {}),
36
- }, "data-cypress": dataCypress })), onError: handleError,
37
- // This triggers everytime a component of the while date changes within the picker
38
- onChange: emptyFn, onAccept: onAccept, disabled: disabled, ...rest }));
47
+ }, "data-cypress": dataCypress })), onError: handleError, onChange: setValue, value: value, onAccept: onAccept, disabled: disabled, componentsProps: {
48
+ actionBar: {
49
+ actions,
50
+ },
51
+ }, ...rest }));
39
52
  };
40
53
  export default React.memo(V4CompatibleTimePicker);
41
54
  //# sourceMappingURL=V4CompatibleTimePicker.js.map
package/dist/components/pickers/V4CompatibleTimePicker.js.map CHANGED
@@ -1 +1 @@
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'\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?: string\n label?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: string\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?: string | React.ReactNode\n error?: boolean\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst emptyFn = () => {\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 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\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 rest.value instanceof Date ? rest.value.toISOString() : rest.value\n\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, rest.value],\n )\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 // This triggers everytime a component of the while date changes within the picker\n onChange={emptyFn}\n onAccept={onAccept}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}
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\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}