@coveord/plasma-mantine 56.1.5 → 56.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +56 -56
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/date-time-range-picker/EditableDateTimeRangePicker.d.ts.map +1 -1
- package/dist/cjs/components/date-time-range-picker/EditableDateTimeRangePicker.js +12 -2
- package/dist/cjs/components/date-time-range-picker/EditableDateTimeRangePicker.js.map +1 -1
- package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.d.ts.map +1 -1
- package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.js +10 -0
- package/dist/esm/components/date-time-range-picker/EditableDateTimeRangePicker.js.map +1 -1
- package/package.json +1 -1
- package/src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx +6 -0
- package/src/components/date-time-range-picker/__tests__/DateTimeRangePicker.spec.tsx +39 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableDateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,gCAAgC;IAC7C,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,gCAAgC,
|
|
1
|
+
{"version":3,"file":"EditableDateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,gCAAgC;IAC7C,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,gCAAgC,4CAoClC,CAAC"}
|
|
@@ -36,7 +36,12 @@ var EditableDateTimeRangePicker = function(param) {
|
|
|
36
36
|
value: value === null || value === void 0 ? void 0 : value[0],
|
|
37
37
|
onChange: onStartDateChange,
|
|
38
38
|
w: 150,
|
|
39
|
-
styles: _object_spread._({}, startProps.styles)
|
|
39
|
+
styles: _object_spread._({}, startProps.styles),
|
|
40
|
+
timePickerProps: {
|
|
41
|
+
popoverProps: {
|
|
42
|
+
withinPortal: false
|
|
43
|
+
}
|
|
44
|
+
}
|
|
40
45
|
}),
|
|
41
46
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DateTimePicker, {
|
|
42
47
|
clearable: false,
|
|
@@ -50,7 +55,12 @@ var EditableDateTimeRangePicker = function(param) {
|
|
|
50
55
|
]);
|
|
51
56
|
},
|
|
52
57
|
w: 150,
|
|
53
|
-
styles: _object_spread._({}, endProps.styles)
|
|
58
|
+
styles: _object_spread._({}, endProps.styles),
|
|
59
|
+
timePickerProps: {
|
|
60
|
+
popoverProps: {
|
|
61
|
+
withinPortal: false
|
|
62
|
+
}
|
|
63
|
+
}
|
|
54
64
|
})
|
|
55
65
|
]
|
|
56
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"sourcesContent":["import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateTimeRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateTimeRangePicker = ({\n value,\n onChange,\n startProps = {},\n endProps = {},\n}: EditableDateTimeRangePickerProps) => {\n const onStartDateChange = (startDate: string) => {\n if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {\n onChange?.([startDate, null]);\n } else {\n onChange?.([startDate, value?.[1]]);\n }\n };\n\n return (\n <>\n <DateTimePicker\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onStartDateChange}\n w={150}\n styles={{...startProps.styles}}\n />\n <DateTimePicker\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n minDate={value?.[0]}\n onChange={(endDate) => onChange?.([value?.[0], endDate])}\n w={150}\n styles={{...endProps.styles}}\n />\n </>\n );\n};\n"],"names":["EditableDateTimeRangePicker","value","onChange","startProps","endProps","onStartDateChange","startDate","dayjs","DateTimePicker","clearable","label","w","styles","minDate","endDate"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;qBAhBmE;8DAC9D;AAeX,IAAMA,8BAA8B;QACvCC,cAAAA,OACAC,iBAAAA,oCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,oBAAoB,SAACC;QACvB,IAAIL,CAAAA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAIM,IAAAA,cAAK,EAACD,aAAaC,IAAAA,cAAK,EAACN,KAAK,CAAC,EAAE,GAAG;YAClDC,qBAAAA,+BAAAA,SAAW;gBAACI;gBAAW;aAAK;QAChC,OAAO;YACHJ,qBAAAA,+BAAAA,SAAW;gBAACI;gBAAWL,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;aAAC;QACtC;IACJ;IAEA,qBACI;;0BACI,qBAACO,qBAAc;gBACXC,WAAW;gBACXC,OAAM;gBACNT,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUG;gBACVM,GAAG;gBACHC,QAAQ,qBAAIT,WAAWS,MAAM;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"sourcesContent":["import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateTimeRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateTimeRangePicker = ({\n value,\n onChange,\n startProps = {},\n endProps = {},\n}: EditableDateTimeRangePickerProps) => {\n const onStartDateChange = (startDate: string) => {\n if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {\n onChange?.([startDate, null]);\n } else {\n onChange?.([startDate, value?.[1]]);\n }\n };\n\n return (\n <>\n <DateTimePicker\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onStartDateChange}\n w={150}\n styles={{...startProps.styles}}\n timePickerProps={{\n popoverProps: {withinPortal: false},\n }}\n />\n <DateTimePicker\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n minDate={value?.[0]}\n onChange={(endDate) => onChange?.([value?.[0], endDate])}\n w={150}\n styles={{...endProps.styles}}\n timePickerProps={{\n popoverProps: {withinPortal: false},\n }}\n />\n </>\n );\n};\n"],"names":["EditableDateTimeRangePicker","value","onChange","startProps","endProps","onStartDateChange","startDate","dayjs","DateTimePicker","clearable","label","w","styles","timePickerProps","popoverProps","withinPortal","minDate","endDate"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;qBAhBmE;8DAC9D;AAeX,IAAMA,8BAA8B;QACvCC,cAAAA,OACAC,iBAAAA,oCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,oBAAoB,SAACC;QACvB,IAAIL,CAAAA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAIM,IAAAA,cAAK,EAACD,aAAaC,IAAAA,cAAK,EAACN,KAAK,CAAC,EAAE,GAAG;YAClDC,qBAAAA,+BAAAA,SAAW;gBAACI;gBAAW;aAAK;QAChC,OAAO;YACHJ,qBAAAA,+BAAAA,SAAW;gBAACI;gBAAWL,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;aAAC;QACtC;IACJ;IAEA,qBACI;;0BACI,qBAACO,qBAAc;gBACXC,WAAW;gBACXC,OAAM;gBACNT,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUG;gBACVM,GAAG;gBACHC,QAAQ,qBAAIT,WAAWS,MAAM;gBAC7BC,iBAAiB;oBACbC,cAAc;wBAACC,cAAc;oBAAK;gBACtC;;0BAEJ,qBAACP,qBAAc;gBACXC,WAAW;gBACXC,OAAM;gBACNT,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBe,OAAO,EAAEf,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACnBC,UAAU,SAACe;2BAAYf,qBAAAA,+BAAAA,SAAW;wBAACD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;wBAAEgB;qBAAQ;;gBACvDN,GAAG;gBACHC,QAAQ,qBAAIR,SAASQ,MAAM;gBAC3BC,iBAAiB;oBACbC,cAAc;wBAACC,cAAc;oBAAK;gBACtC;;;;AAIhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableDateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,gCAAgC;IAC7C,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,gCAAgC,
|
|
1
|
+
{"version":3,"file":"EditableDateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,gCAAgC;IAC7C,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,2BAA2B,GAAI,4CAKzC,gCAAgC,4CAoClC,CAAC"}
|
|
@@ -25,6 +25,11 @@ export const EditableDateTimeRangePicker = ({ value, onChange, startProps = {},
|
|
|
25
25
|
w: 150,
|
|
26
26
|
styles: {
|
|
27
27
|
...startProps.styles
|
|
28
|
+
},
|
|
29
|
+
timePickerProps: {
|
|
30
|
+
popoverProps: {
|
|
31
|
+
withinPortal: false
|
|
32
|
+
}
|
|
28
33
|
}
|
|
29
34
|
}),
|
|
30
35
|
/*#__PURE__*/ _jsx(DateTimePicker, {
|
|
@@ -39,6 +44,11 @@ export const EditableDateTimeRangePicker = ({ value, onChange, startProps = {},
|
|
|
39
44
|
w: 150,
|
|
40
45
|
styles: {
|
|
41
46
|
...endProps.styles
|
|
47
|
+
},
|
|
48
|
+
timePickerProps: {
|
|
49
|
+
popoverProps: {
|
|
50
|
+
withinPortal: false
|
|
51
|
+
}
|
|
42
52
|
}
|
|
43
53
|
})
|
|
44
54
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"sourcesContent":["import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateTimeRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateTimeRangePicker = ({\n value,\n onChange,\n startProps = {},\n endProps = {},\n}: EditableDateTimeRangePickerProps) => {\n const onStartDateChange = (startDate: string) => {\n if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {\n onChange?.([startDate, null]);\n } else {\n onChange?.([startDate, value?.[1]]);\n }\n };\n\n return (\n <>\n <DateTimePicker\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onStartDateChange}\n w={150}\n styles={{...startProps.styles}}\n />\n <DateTimePicker\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n minDate={value?.[0]}\n onChange={(endDate) => onChange?.([value?.[0], endDate])}\n w={150}\n styles={{...endProps.styles}}\n />\n </>\n );\n};\n"],"names":["DateTimePicker","dayjs","EditableDateTimeRangePicker","value","onChange","startProps","endProps","onStartDateChange","startDate","clearable","label","w","styles","minDate","endDate"],"mappings":";AAAA,SAA2DA,cAAc,QAAO,iBAAiB;AACjG,OAAOC,WAAW,QAAQ;AAe1B,OAAO,MAAMC,8BAA8B,CAAC,EACxCC,KAAK,EACLC,QAAQ,EACRC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACkB;IAC/B,MAAMC,oBAAoB,CAACC;QACvB,IAAIL,OAAO,CAAC,EAAE,IAAIF,MAAMO,aAAaP,MAAME,KAAK,CAAC,EAAE,GAAG;YAClDC,WAAW;gBAACI;gBAAW;aAAK;QAChC,OAAO;YACHJ,WAAW;gBAACI;gBAAWL,OAAO,CAAC,EAAE;aAAC;QACtC;IACJ;IAEA,qBACI;;0BACI,KAACH;gBACGS,WAAW;gBACXC,OAAM;gBACNP,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUG;gBACVI,GAAG;gBACHC,QAAQ;oBAAC,GAAGP,WAAWO,MAAM;gBAAA;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx"],"sourcesContent":["import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateTimeRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue | null>): void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateTimeRangePicker = ({\n value,\n onChange,\n startProps = {},\n endProps = {},\n}: EditableDateTimeRangePickerProps) => {\n const onStartDateChange = (startDate: string) => {\n if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {\n onChange?.([startDate, null]);\n } else {\n onChange?.([startDate, value?.[1]]);\n }\n };\n\n return (\n <>\n <DateTimePicker\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onStartDateChange}\n w={150}\n styles={{...startProps.styles}}\n timePickerProps={{\n popoverProps: {withinPortal: false},\n }}\n />\n <DateTimePicker\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n minDate={value?.[0]}\n onChange={(endDate) => onChange?.([value?.[0], endDate])}\n w={150}\n styles={{...endProps.styles}}\n timePickerProps={{\n popoverProps: {withinPortal: false},\n }}\n />\n </>\n );\n};\n"],"names":["DateTimePicker","dayjs","EditableDateTimeRangePicker","value","onChange","startProps","endProps","onStartDateChange","startDate","clearable","label","w","styles","timePickerProps","popoverProps","withinPortal","minDate","endDate"],"mappings":";AAAA,SAA2DA,cAAc,QAAO,iBAAiB;AACjG,OAAOC,WAAW,QAAQ;AAe1B,OAAO,MAAMC,8BAA8B,CAAC,EACxCC,KAAK,EACLC,QAAQ,EACRC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACkB;IAC/B,MAAMC,oBAAoB,CAACC;QACvB,IAAIL,OAAO,CAAC,EAAE,IAAIF,MAAMO,aAAaP,MAAME,KAAK,CAAC,EAAE,GAAG;YAClDC,WAAW;gBAACI;gBAAW;aAAK;QAChC,OAAO;YACHJ,WAAW;gBAACI;gBAAWL,OAAO,CAAC,EAAE;aAAC;QACtC;IACJ;IAEA,qBACI;;0BACI,KAACH;gBACGS,WAAW;gBACXC,OAAM;gBACNP,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUG;gBACVI,GAAG;gBACHC,QAAQ;oBAAC,GAAGP,WAAWO,MAAM;gBAAA;gBAC7BC,iBAAiB;oBACbC,cAAc;wBAACC,cAAc;oBAAK;gBACtC;;0BAEJ,KAACf;gBACGS,WAAW;gBACXC,OAAM;gBACNP,OAAOA,OAAO,CAAC,EAAE;gBACjBa,SAASb,OAAO,CAAC,EAAE;gBACnBC,UAAU,CAACa,UAAYb,WAAW;wBAACD,OAAO,CAAC,EAAE;wBAAEc;qBAAQ;gBACvDN,GAAG;gBACHC,QAAQ;oBAAC,GAAGN,SAASM,MAAM;gBAAA;gBAC3BC,iBAAiB;oBACbC,cAAc;wBAACC,cAAc;oBAAK;gBACtC;;;;AAIhB,EAAE"}
|
package/package.json
CHANGED
|
@@ -37,6 +37,9 @@ export const EditableDateTimeRangePicker = ({
|
|
|
37
37
|
onChange={onStartDateChange}
|
|
38
38
|
w={150}
|
|
39
39
|
styles={{...startProps.styles}}
|
|
40
|
+
timePickerProps={{
|
|
41
|
+
popoverProps: {withinPortal: false},
|
|
42
|
+
}}
|
|
40
43
|
/>
|
|
41
44
|
<DateTimePicker
|
|
42
45
|
clearable={false}
|
|
@@ -46,6 +49,9 @@ export const EditableDateTimeRangePicker = ({
|
|
|
46
49
|
onChange={(endDate) => onChange?.([value?.[0], endDate])}
|
|
47
50
|
w={150}
|
|
48
51
|
styles={{...endProps.styles}}
|
|
52
|
+
timePickerProps={{
|
|
53
|
+
popoverProps: {withinPortal: false},
|
|
54
|
+
}}
|
|
49
55
|
/>
|
|
50
56
|
</>
|
|
51
57
|
);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {useForm} from '@mantine/form';
|
|
2
|
-
import {render, screen, userEvent} from '@test-utils';
|
|
2
|
+
import {render, screen, userEvent, waitFor} from '@test-utils';
|
|
3
3
|
|
|
4
4
|
import {DatesRangeValue, DateStringValue} from '@mantine/dates';
|
|
5
5
|
import {DateTimeRangePicker} from '../DateTimeRangePicker.js';
|
|
@@ -42,4 +42,42 @@ describe('DateTimeRangePicker', () => {
|
|
|
42
42
|
|
|
43
43
|
expect(screen.getByTestId('json')).toHaveTextContent('["2000-01-01T00:00:00.000Z","2000-12-31T23:59:59.000Z"]');
|
|
44
44
|
});
|
|
45
|
+
|
|
46
|
+
it('can change the date and time', async () => {
|
|
47
|
+
const user = userEvent.setup();
|
|
48
|
+
const Fixture = () => {
|
|
49
|
+
const form = useForm<{dates: DatesRangeValue<DateStringValue | null>}>({
|
|
50
|
+
initialValues: {dates: [null, null]},
|
|
51
|
+
});
|
|
52
|
+
return (
|
|
53
|
+
<>
|
|
54
|
+
<DateTimeRangePicker
|
|
55
|
+
presets={{
|
|
56
|
+
year2k: {
|
|
57
|
+
label: 'Year 2K',
|
|
58
|
+
range: [new Date(2000, 0, 1, 0, 0, 0).toISOString(), null],
|
|
59
|
+
},
|
|
60
|
+
}}
|
|
61
|
+
{...form.getInputProps('dates')}
|
|
62
|
+
/>
|
|
63
|
+
<code data-testid="json">{JSON.stringify(form.values.dates)}</code>
|
|
64
|
+
</>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
render(<Fixture />);
|
|
68
|
+
|
|
69
|
+
await user.click(screen.getByRole('textbox', {name: 'Date range'}));
|
|
70
|
+
await user.click(screen.getByRole('option', {name: 'Year 2K'}));
|
|
71
|
+
|
|
72
|
+
await user.click(screen.getByRole('button', {name: /start/i}));
|
|
73
|
+
await waitFor(() => expect(screen.getByRole('dialog')).toBeVisible());
|
|
74
|
+
|
|
75
|
+
await user.click(screen.getAllByRole('button', {name: /15/i})[0]);
|
|
76
|
+
await user.click(screen.getAllByRole('spinbutton')[0]);
|
|
77
|
+
await user.click(screen.getAllByRole('button', {name: '01'})[0]);
|
|
78
|
+
await user.click(screen.getAllByRole('button', {name: '02'})[1]);
|
|
79
|
+
await user.click(screen.getByRole('button', {name: 'AM'}));
|
|
80
|
+
|
|
81
|
+
expect(screen.getByTestId('json')).toHaveTextContent('["2000-01-15 01:02:00",null]');
|
|
82
|
+
});
|
|
45
83
|
});
|