Skip to content

Commit facdad9

Browse files
treskotresko
committed
feat(animations): add annimations to datepicker
affects: @datepicker-react/styled
1 parent 7b7e355 commit facdad9

7 files changed

Lines changed: 339 additions & 257 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
> An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
88
9+
![example](./docs/datepicker.gif)
10+
911
## Live Playground
1012

1113
For examples of the datepicker in action, go to https://react-datepicker.netlify.com/.

‎docs/datepicker.gif‎

145 KB
Loading

‎package.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,24 @@
4949
"@babel/core": "^7.4.5",
5050
"@babel/preset-env": "^7.4.5",
5151
"@babel/preset-react": "^7.0.0",
52-
"@storybook/addon-actions": "^5.1.1",
53-
"@storybook/addon-knobs": "^5.1.1",
54-
"@storybook/addon-links": "^5.1.1",
55-
"@storybook/addons": "^5.1.1",
56-
"@storybook/react": "^5.1.1",
52+
"@storybook/addon-actions": "^5.1.3",
53+
"@storybook/addon-knobs": "^5.1.3",
54+
"@storybook/addon-links": "^5.1.3",
55+
"@storybook/addons": "^5.1.3",
56+
"@storybook/react": "^5.1.3",
5757
"@testing-library/react": "^8.0.1",
5858
"@types/jest": "^24.0.13",
5959
"@types/react": "^16.8.19",
60-
"@types/storybook__addon-actions": "^3.4.2",
61-
"@types/storybook__addon-knobs": "^5.0.0",
62-
"@types/storybook__react": "^4.0.1",
60+
"@types/storybook__addon-actions": "^3.4.3",
61+
"@types/storybook__addon-knobs": "^5.0.1",
62+
"@types/storybook__react": "^4.0.2",
6363
"@typescript-eslint/eslint-plugin": "^1.9.0",
6464
"@typescript-eslint/parser": "^1.9.0",
6565
"awesome-typescript-loader": "^5.2.1",
6666
"babel-eslint": "^10.0.1",
6767
"babel-loader": "^8.0.6",
6868
"commitizen": "^3.1.1",
69-
"coveralls": "^3.0.3",
69+
"coveralls": "^3.0.4",
7070
"cz-lerna-changelog": "^2.0.2",
7171
"date-fns": "^1.30.1",
7272
"eslint": "^5.16.0",
@@ -77,12 +77,12 @@
7777
"eslint-plugin-jsx-a11y": "^6.2.1",
7878
"eslint-plugin-react": "^7.13.0",
7979
"eslint-plugin-react-hooks": "^1.6.0",
80-
"husky": "^2.3.0",
80+
"husky": "^2.4.0",
8181
"is-ci-cli": "^1.1.1",
8282
"jest": "^24.8.0",
8383
"jest-config": "^24.8.0",
8484
"jest-date-mock": "^1.0.7",
85-
"jest-dom": "^3.4.0",
85+
"jest-dom": "^3.5.0",
8686
"jest-environment-jsdom": "^24.8.0",
8787
"jest-environment-node": "^24.8.0",
8888
"jest-runner-eslint": "^0.7.3",
@@ -91,9 +91,9 @@
9191
"jest-watch-select-projects": "^0.1.1",
9292
"jest-watch-typeahead": "^0.3.1",
9393
"lerna": "^3.14.1",
94-
"lint-staged": "^8.1.7",
94+
"lint-staged": "^8.2.0",
9595
"npm-run-all": "^4.1.5",
96-
"prettier": "^1.17.1",
96+
"prettier": "^1.18.2",
9797
"react": "^16.8.6",
9898
"react-dom": "^16.8.6",
9999
"react-hooks-testing-library": "^0.5.1",
@@ -108,7 +108,7 @@
108108
"rollup-plugin-terser": "^5.0.0",
109109
"rollup-plugin-typescript2": "^0.21.1",
110110
"rollup-plugin-visualizer": "^1.1.1",
111-
"stylelint": "^10.0.1",
111+
"stylelint": "^10.1.0",
112112
"stylelint-config-standard": "^18.3.0",
113113
"stylelint-config-styled-components": "^0.1.1",
114114
"stylelint-processor-styled-components": "^1.8.0",

‎packages/styled/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
> An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
88
9+
![example](../../docs/datepicker.gif)
10+
911
## Live Playground
1012

1113
For examples of the datepicker in action, go to https://react-datepicker.netlify.com/.

‎packages/styled/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,16 @@
3939
"styled-components": ">= 4.0.0"
4040
},
4141
"devDependencies": {
42+
"@types/react-transition-group": "^2.9.2",
4243
"@types/styled-components": "^4.1.16",
4344
"@types/styled-system": "^4.2.1",
4445
"csstype": "^2.6.5",
4546
"date-fns": "^1.30.1",
46-
"styled-components": "^4.2.1"
47+
"styled-components": "^4.3.1"
4748
},
4849
"dependencies": {
4950
"@datepicker-react/hooks": "^1.2.3-alpha.3",
51+
"react-transition-group": "^4.1.0",
5052
"styled-system": "^4.2.4"
5153
},
5254
"publishConfig": {

‎packages/styled/src/components/Datepicker/Datepicker.tsx‎

Lines changed: 65 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useRef} from 'react'
2-
import styled, {css} from 'styled-components'
2+
import styled, {css, keyframes} from 'styled-components'
33
import {
44
background,
55
BackgroundProps,
@@ -22,6 +22,7 @@ import {
2222
WidthProps,
2323
width,
2424
} from 'styled-system'
25+
import {CSSTransition, TransitionGroup} from 'react-transition-group'
2526
import {
2627
useDatepicker,
2728
MonthType,
@@ -50,6 +51,16 @@ import {DatepickerTheme} from '../../@types/theme'
5051
import useThemeProps from '../../hooks/useThemeProps'
5152
import globalStyles from '../../globalStyles'
5253

54+
const opacity0To100 = keyframes`
55+
from {
56+
opacity: 0;
57+
}
58+
59+
to {
60+
opacity: 1;
61+
}
62+
`
63+
5364
interface StyledDatepicker
5465
extends BackgroundProps,
5566
SpaceProps,
@@ -71,6 +82,24 @@ const StyledDatepicker = styled('div')<StyledDatepicker>`
7182
css`
7283
direction: rtl;
7384
`}
85+
86+
animation-name: ${opacity0To100};
87+
animation-duration: 0.15s;
88+
89+
.item-enter {
90+
opacity: 0;
91+
}
92+
.item-enter-active {
93+
opacity: 1;
94+
transition: opacity 250ms ease-in;
95+
}
96+
.item-exit {
97+
opacity: 1;
98+
}
99+
.item-exit-active {
100+
opacity: 0;
101+
transition: opacity 250ms ease-in;
102+
}
74103
`
75104

76105
const DateWrapper = styled('div')`
@@ -300,32 +329,41 @@ function Datepicker({
300329
)}
301330
<Box position="relative">
302331
<Box m={theme.datepickerMonthsWrapperMargin}>
303-
<MonthGrid
304-
data-testid="MonthGrid"
305-
overflow={theme.datepickerMonthsGridOverflow}
306-
height={theme.datepickerMonthsGridHeight}
307-
gridTemplateColumns={vertical ? '1fr' : `repeat(${numberOfMonths}, 1fr)`}
308-
gridGap={theme.datepickerMonthsGridGap}
309-
pr={rtl ? '1px' : '0'}
310-
ref={monthGridRef}
311-
onMouseLeave={() => {
312-
if (hoveredDate) {
313-
onDateHover(null)
314-
}
315-
}}
316-
>
317-
{activeMonths.map((month: MonthType) => (
318-
<Month
319-
key={`${month.year}-${month.month}`}
320-
year={month.year}
321-
month={month.month}
322-
firstDayOfWeek={firstDayOfWeek}
323-
dayLabelFormat={dayLabelFormat || dayLabelFormatFn}
324-
weekdayLabelFormat={weekdayLabelFormat || weekdayLabelFormatFn}
325-
monthLabelFormat={monthLabelFormat || monthLabelFormatFn}
326-
/>
327-
))}
328-
</MonthGrid>
332+
<TransitionGroup className="todo-list">
333+
<MonthGrid
334+
data-testid="MonthGrid"
335+
overflow={theme.datepickerMonthsGridOverflow}
336+
height={theme.datepickerMonthsGridHeight}
337+
gridTemplateColumns={vertical ? '1fr' : `repeat(${numberOfMonths}, 1fr)`}
338+
gridGap={theme.datepickerMonthsGridGap}
339+
pr={rtl ? '1px' : '0'}
340+
ref={monthGridRef}
341+
onMouseLeave={() => {
342+
if (hoveredDate) {
343+
onDateHover(null)
344+
}
345+
}}
346+
>
347+
{activeMonths.map((month: MonthType) => (
348+
<CSSTransition
349+
key={`${month.year}-${month.month}`}
350+
timeout={250}
351+
classNames="item"
352+
in
353+
>
354+
<Month
355+
key={`month-${month.year}-${month.month}`}
356+
year={month.year}
357+
month={month.month}
358+
firstDayOfWeek={firstDayOfWeek}
359+
dayLabelFormat={dayLabelFormat || dayLabelFormatFn}
360+
weekdayLabelFormat={weekdayLabelFormat || weekdayLabelFormatFn}
361+
monthLabelFormat={monthLabelFormat || monthLabelFormatFn}
362+
/>
363+
</CSSTransition>
364+
))}
365+
</MonthGrid>
366+
</TransitionGroup>
329367
</Box>
330368
<Flex alignItems="center">
331369
<>

0 commit comments

Comments
 (0)
⚡