@chayns-components/date 5.0.0-beta.479 → 5.0.0-beta.482
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.
|
@@ -16,6 +16,12 @@ const MonthWrapper = _ref => {
|
|
|
16
16
|
width
|
|
17
17
|
} = _ref;
|
|
18
18
|
const [content, setContent] = useState();
|
|
19
|
+
const [prevSelectedDate, setPrevSelectedDate] = useState();
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (prevSelectedDate !== selectedDate) {
|
|
22
|
+
setPrevSelectedDate(selectedDate);
|
|
23
|
+
}
|
|
24
|
+
}, [prevSelectedDate, selectedDate]);
|
|
19
25
|
useEffect(() => {
|
|
20
26
|
setContent(prevState => {
|
|
21
27
|
// Initial render of months
|
|
@@ -78,7 +84,18 @@ const MonthWrapper = _ref => {
|
|
|
78
84
|
}
|
|
79
85
|
return prevState;
|
|
80
86
|
});
|
|
81
|
-
}, [categories, currentDate, direction, highlightedDates, locale, onSelect, selectedDate]);
|
|
87
|
+
}, [categories, currentDate, direction, highlightedDates, locale, onSelect, prevSelectedDate, selectedDate]);
|
|
88
|
+
useEffect(() => {
|
|
89
|
+
if (selectedDate) {
|
|
90
|
+
setContent(prevState => (prevState ?? []).map(element => ({
|
|
91
|
+
...element,
|
|
92
|
+
props: {
|
|
93
|
+
...element.props,
|
|
94
|
+
selectedDate
|
|
95
|
+
}
|
|
96
|
+
})));
|
|
97
|
+
}
|
|
98
|
+
}, [selectedDate]);
|
|
82
99
|
const animate = useMemo(() => {
|
|
83
100
|
if (shouldRenderTwo) {
|
|
84
101
|
switch (true) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthWrapper.js","names":["React","useEffect","useMemo","useState","getMonthAndYear","getNewDate","Month","StyledMonthWrapper","StyledMotionWrapper","MonthWrapper","_ref","locale","currentDate","highlightedDates","selectedDate","onSelect","categories","direction","onAnimationFinished","shouldRenderTwo","width","content","setContent","prevState","items","i","date","month","year","push","createElement","key","unshift","pop","shift","animate","x","$height","transition","type","duration","onAnimationComplete","displayName"],"sources":["../../../../src/components/calendar/month-wrapper/MonthWrapper.tsx"],"sourcesContent":["import type { Locale } from 'date-fns';\nimport type { MotionProps } from 'framer-motion';\nimport React, { FC, useEffect, useMemo, useState, type ReactElement } from 'react';\nimport type { Categories, HighlightedDates } from '../../../types/calendar';\nimport { getMonthAndYear, getNewDate } from '../../../utils/calendar';\nimport Month from './month/Month';\nimport { StyledMonthWrapper, StyledMotionWrapper } from './MonthWrapper.styles';\n\nexport type MonthWrapperProps = {\n locale: Locale;\n highlightedDates?: HighlightedDates[];\n onSelect: (date: Date) => void;\n selectedDate?: Date;\n categories?: Categories[];\n currentDate: Date;\n direction?: 'left' | 'right';\n onAnimationFinished: () => void;\n shouldRenderTwo: boolean;\n width: number;\n};\n\nconst MonthWrapper: FC<MonthWrapperProps> = ({\n locale,\n currentDate,\n highlightedDates,\n selectedDate,\n onSelect,\n categories,\n direction,\n onAnimationFinished,\n shouldRenderTwo,\n width,\n}) => {\n const [content, setContent] = useState<ReactElement[]>();\n\n useEffect(() => {\n setContent((prevState) => {\n // Initial render of months\n if (!prevState) {\n const items: ReactElement[] = [];\n\n for (let i = -1; i < 3; i++) {\n const date = getNewDate(i, currentDate);\n\n const { month, year } = getMonthAndYear(date);\n\n items.push(\n <Month\n key={`${month}-${year}`}\n month={month}\n year={year}\n locale={locale}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n categories={categories}\n selectedDate={selectedDate}\n />,\n );\n }\n\n return items;\n }\n\n if (direction === 'left') {\n const date = getNewDate(-1, currentDate);\n\n const { month, year } = getMonthAndYear(date);\n\n prevState.unshift(\n <Month\n key={`${month}-${year}`}\n month={month}\n year={year}\n locale={locale}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n categories={categories}\n selectedDate={selectedDate}\n />,\n );\n prevState.pop();\n }\n\n if (direction === 'right') {\n const date = getNewDate(2, currentDate);\n\n const { month, year } = getMonthAndYear(date);\n\n prevState.push(\n <Month\n key={`${month}-${year}`}\n month={month}\n year={year}\n locale={locale}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n categories={categories}\n selectedDate={selectedDate}\n />,\n );\n prevState.shift();\n }\n\n return prevState;\n });\n }, [categories
|
|
1
|
+
{"version":3,"file":"MonthWrapper.js","names":["React","useEffect","useMemo","useState","getMonthAndYear","getNewDate","Month","StyledMonthWrapper","StyledMotionWrapper","MonthWrapper","_ref","locale","currentDate","highlightedDates","selectedDate","onSelect","categories","direction","onAnimationFinished","shouldRenderTwo","width","content","setContent","prevSelectedDate","setPrevSelectedDate","prevState","items","i","date","month","year","push","createElement","key","unshift","pop","shift","map","element","props","animate","x","$height","transition","type","duration","onAnimationComplete","displayName"],"sources":["../../../../src/components/calendar/month-wrapper/MonthWrapper.tsx"],"sourcesContent":["import type { Locale } from 'date-fns';\nimport type { MotionProps } from 'framer-motion';\nimport React, { FC, useEffect, useMemo, useState, type ReactElement } from 'react';\nimport type { Categories, HighlightedDates } from '../../../types/calendar';\nimport { getMonthAndYear, getNewDate } from '../../../utils/calendar';\nimport Month from './month/Month';\nimport { StyledMonthWrapper, StyledMotionWrapper } from './MonthWrapper.styles';\n\nexport type MonthWrapperProps = {\n locale: Locale;\n highlightedDates?: HighlightedDates[];\n onSelect: (date: Date) => void;\n selectedDate?: Date;\n categories?: Categories[];\n currentDate: Date;\n direction?: 'left' | 'right';\n onAnimationFinished: () => void;\n shouldRenderTwo: boolean;\n width: number;\n};\n\nconst MonthWrapper: FC<MonthWrapperProps> = ({\n locale,\n currentDate,\n highlightedDates,\n selectedDate,\n onSelect,\n categories,\n direction,\n onAnimationFinished,\n shouldRenderTwo,\n width,\n}) => {\n const [content, setContent] = useState<ReactElement[]>();\n const [prevSelectedDate, setPrevSelectedDate] = useState<Date>();\n\n useEffect(() => {\n if (prevSelectedDate !== selectedDate) {\n setPrevSelectedDate(selectedDate);\n }\n }, [prevSelectedDate, selectedDate]);\n\n useEffect(() => {\n setContent((prevState) => {\n // Initial render of months\n if (!prevState) {\n const items: ReactElement[] = [];\n\n for (let i = -1; i < 3; i++) {\n const date = getNewDate(i, currentDate);\n\n const { month, year } = getMonthAndYear(date);\n\n items.push(\n <Month\n key={`${month}-${year}`}\n month={month}\n year={year}\n locale={locale}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n categories={categories}\n selectedDate={selectedDate}\n />,\n );\n }\n\n return items;\n }\n\n if (direction === 'left') {\n const date = getNewDate(-1, currentDate);\n\n const { month, year } = getMonthAndYear(date);\n\n prevState.unshift(\n <Month\n key={`${month}-${year}`}\n month={month}\n year={year}\n locale={locale}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n categories={categories}\n selectedDate={selectedDate}\n />,\n );\n prevState.pop();\n }\n\n if (direction === 'right') {\n const date = getNewDate(2, currentDate);\n\n const { month, year } = getMonthAndYear(date);\n\n prevState.push(\n <Month\n key={`${month}-${year}`}\n month={month}\n year={year}\n locale={locale}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n categories={categories}\n selectedDate={selectedDate}\n />,\n );\n prevState.shift();\n }\n\n return prevState;\n });\n }, [\n categories,\n currentDate,\n direction,\n highlightedDates,\n locale,\n onSelect,\n prevSelectedDate,\n selectedDate,\n ]);\n\n useEffect(() => {\n if (selectedDate) {\n setContent((prevState) =>\n (prevState ?? []).map((element) => ({\n ...element,\n props: { ...element.props, selectedDate } as ReactElement,\n })),\n );\n }\n }, [selectedDate]);\n\n const animate: MotionProps['animate'] = useMemo(() => {\n if (shouldRenderTwo) {\n switch (true) {\n case direction === 'left':\n return { x: '0%' };\n case direction === 'right':\n return { x: '-100%' };\n default:\n return { x: '-50%' };\n }\n } else {\n switch (true) {\n case direction === 'left':\n return { x: '0%' };\n case direction === 'right':\n return { x: '-200%' };\n default:\n return { x: '-100%' };\n }\n }\n }, [direction, shouldRenderTwo]);\n\n return (\n <StyledMonthWrapper $height={shouldRenderTwo ? width / 2 : width}>\n <StyledMotionWrapper\n animate={animate}\n transition={{\n type: 'tween',\n duration: !direction ? 0 : 0.2,\n }}\n onAnimationComplete={onAnimationFinished}\n >\n {content}\n </StyledMotionWrapper>\n </StyledMonthWrapper>\n );\n};\n\nMonthWrapper.displayName = 'MonthWrapper';\n\nexport default MonthWrapper;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/date",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.482",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"typescript": "^5.3.3"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
60
|
+
"@chayns-components/core": "^5.0.0-beta.482",
|
|
61
61
|
"date-fns": "^2.30.0",
|
|
62
62
|
"uuid": "^9.0.1"
|
|
63
63
|
},
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "28d942f880706347e1fbfb75ff203e722c647027"
|
|
75
75
|
}
|