@availity/mui-datepicker 0.3.1 → 0.4.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.
- package/CHANGELOG.md +7 -0
- package/package.json +2 -2
- package/src/lib/Datepicker.stories.tsx +42 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.4.0](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.3.1...@availity/mui-datepicker@0.4.0) (2024-02-08)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **theme:** legacy datepicker ([44c334d](https://github.com/Availity/element/commit/44c334db86701314dbbcc34adb5ed8b863056a01))
|
|
11
|
+
|
|
5
12
|
## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-datepicker@0.3.0...@availity/mui-datepicker@0.3.1) (2024-01-12)
|
|
6
13
|
|
|
7
14
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-datepicker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Availity MUI Datepicker Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@availity/mui-textfield": "0.5.
|
|
35
|
+
"@availity/mui-textfield": "0.5.10",
|
|
36
36
|
"@mui/x-date-pickers": "^5.0.15",
|
|
37
37
|
"dayjs": "^1.11.9"
|
|
38
38
|
},
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
// Each exported component in the package should have its own stories file
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { CalendarPicker } from '@mui/x-date-pickers/CalendarPicker';
|
|
4
|
+
import { MonthPicker } from '@mui/x-date-pickers/MonthPicker';
|
|
5
|
+
import { YearPicker } from '@mui/x-date-pickers/YearPicker';
|
|
3
6
|
import { useState } from 'react';
|
|
4
|
-
import { Dayjs } from 'dayjs';
|
|
7
|
+
import dayjs, { Dayjs } from 'dayjs';
|
|
5
8
|
import { Datepicker, DatepickerProps } from './Datepicker';
|
|
9
|
+
import { Unstable_Grid2 as Grid, Paper, Typography } from '@mui/material';
|
|
6
10
|
|
|
7
11
|
const meta: Meta<typeof Datepicker> = {
|
|
8
12
|
title: 'Components/Datepicker/Datepicker',
|
|
@@ -35,3 +39,40 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
|
|
|
35
39
|
},
|
|
36
40
|
},
|
|
37
41
|
};
|
|
42
|
+
|
|
43
|
+
export const _PickerViews: StoryObj<typeof Datepicker> = {
|
|
44
|
+
render: () => {
|
|
45
|
+
const minDate = dayjs('2020-01-01T00:00:00.000');
|
|
46
|
+
const maxDate = dayjs('2034-01-01T00:00:00.000');
|
|
47
|
+
const [date, setDate] = useState<Dayjs | null>(null);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<Grid container spacing={3}>
|
|
51
|
+
<Grid xs="auto">
|
|
52
|
+
<Typography variant="h3" component="span">
|
|
53
|
+
Day View
|
|
54
|
+
</Typography>
|
|
55
|
+
<Paper sx={{ width: 'min-content' }}>
|
|
56
|
+
<CalendarPicker date={date} onChange={(newDate) => setDate(newDate)} />
|
|
57
|
+
</Paper>
|
|
58
|
+
</Grid>
|
|
59
|
+
<Grid xs="auto">
|
|
60
|
+
<Typography variant="h3" component="span">
|
|
61
|
+
Month View
|
|
62
|
+
</Typography>
|
|
63
|
+
<Paper sx={{ width: 'min-content' }}>
|
|
64
|
+
<MonthPicker date={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
|
|
65
|
+
</Paper>
|
|
66
|
+
</Grid>
|
|
67
|
+
<Grid xs="auto">
|
|
68
|
+
<Typography variant="h3" component="span">
|
|
69
|
+
Year View
|
|
70
|
+
</Typography>
|
|
71
|
+
<Paper sx={{ width: '320px' }}>
|
|
72
|
+
<YearPicker date={date} minDate={minDate} maxDate={maxDate} onChange={(newDate) => setDate(newDate)} />
|
|
73
|
+
</Paper>
|
|
74
|
+
</Grid>
|
|
75
|
+
</Grid>
|
|
76
|
+
);
|
|
77
|
+
},
|
|
78
|
+
};
|