@chayns-components/date 5.0.0-beta.662 → 5.0.0-beta.663

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 (15) hide show
  1. package/lib/cjs/components/calendar/month-wrapper/MonthWrapper.js +13 -2
  2. package/lib/cjs/components/calendar/month-wrapper/MonthWrapper.js.map +1 -1
  3. package/lib/cjs/components/calendar/month-wrapper/month/Month.js +7 -4
  4. package/lib/cjs/components/calendar/month-wrapper/month/Month.js.map +1 -1
  5. package/lib/cjs/components/calendar/month-wrapper/month/Month.styles.js +3 -1
  6. package/lib/cjs/components/calendar/month-wrapper/month/Month.styles.js.map +1 -1
  7. package/lib/esm/components/calendar/month-wrapper/MonthWrapper.js +14 -3
  8. package/lib/esm/components/calendar/month-wrapper/MonthWrapper.js.map +1 -1
  9. package/lib/esm/components/calendar/month-wrapper/month/Month.js +7 -4
  10. package/lib/esm/components/calendar/month-wrapper/month/Month.js.map +1 -1
  11. package/lib/esm/components/calendar/month-wrapper/month/Month.styles.js +6 -1
  12. package/lib/esm/components/calendar/month-wrapper/month/Month.styles.js.map +1 -1
  13. package/lib/types/components/calendar/month-wrapper/month/Month.d.ts +2 -1
  14. package/lib/types/components/calendar/month-wrapper/month/Month.styles.d.ts +6 -1
  15. package/package.json +3 -3
package/lib/cjs/components/calendar/month-wrapper/MonthWrapper.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ var _core = require("@chayns-components/core");
7
8
  var _react = _interopRequireWildcard(require("react"));
8
9
  var _calendar = require("../../../utils/calendar");
9
10
  var _Month = _interopRequireDefault(require("./month/Month"));
@@ -25,6 +26,12 @@ const MonthWrapper = ({
25
26
  }) => {
26
27
  const [content, setContent] = (0, _react.useState)();
27
28
  const [prevSelectedDate, setPrevSelectedDate] = (0, _react.useState)();
29
+ const monthWrapperRef = (0, _react.useRef)(null);
30
+ const monthWrapperSize = (0, _core.useElementSize)(monthWrapperRef);
31
+ const monthHeight = (0, _react.useMemo)(() => monthWrapperSize ? monthWrapperSize.width / (shouldRenderTwo ? 2 : 1) : 0, [monthWrapperSize, shouldRenderTwo]);
32
+ (0, _react.useEffect)(() => {
33
+ setContent(undefined);
34
+ }, [monthHeight]);
28
35
  (0, _react.useEffect)(() => {
29
36
  if (prevSelectedDate !== selectedDate) {
30
37
  setPrevSelectedDate(selectedDate);
@@ -42,6 +49,7 @@ const MonthWrapper = ({
42
49
  year
43
50
  } = (0, _calendar.getMonthAndYear)(date);
44
51
  items.push( /*#__PURE__*/_react.default.createElement(_Month.default, {
52
+ height: monthHeight,
45
53
  key: `${month}-${year}`,
46
54
  month: month,
47
55
  year: year,
@@ -61,6 +69,7 @@ const MonthWrapper = ({
61
69
  year
62
70
  } = (0, _calendar.getMonthAndYear)(date);
63
71
  prevState.unshift( /*#__PURE__*/_react.default.createElement(_Month.default, {
72
+ height: monthHeight,
64
73
  key: `${month}-${year}`,
65
74
  month: month,
66
75
  year: year,
@@ -79,6 +88,7 @@ const MonthWrapper = ({
79
88
  year
80
89
  } = (0, _calendar.getMonthAndYear)(date);
81
90
  prevState.push( /*#__PURE__*/_react.default.createElement(_Month.default, {
91
+ height: monthHeight,
82
92
  key: `${month}-${year}`,
83
93
  month: month,
84
94
  year: year,
@@ -92,7 +102,7 @@ const MonthWrapper = ({
92
102
  }
93
103
  return prevState;
94
104
  });
95
- }, [categories, currentDate, direction, highlightedDates, locale, onSelect, prevSelectedDate, selectedDate]);
105
+ }, [categories, currentDate, direction, highlightedDates, locale, monthHeight, onSelect, prevSelectedDate, selectedDate]);
96
106
  (0, _react.useEffect)(() => {
97
107
  if (selectedDate) {
98
108
  setContent(prevState => (prevState ?? []).map(element => ({
@@ -138,7 +148,8 @@ const MonthWrapper = ({
138
148
  }
139
149
  }, [direction, shouldRenderTwo]);
140
150
  return /*#__PURE__*/_react.default.createElement(_MonthWrapper.StyledMonthWrapper, {
141
- $height: shouldRenderTwo ? width / 2 : width
151
+ $height: shouldRenderTwo ? width / 2 : width,
152
+ ref: monthWrapperRef
142
153
  }, /*#__PURE__*/_react.default.createElement(_MonthWrapper.StyledMotionWrapper, {
143
154
  animate: animate,
144
155
  transition: {
package/lib/cjs/components/calendar/month-wrapper/MonthWrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MonthWrapper.js","names":["_react","_interopRequireWildcard","require","_calendar","_Month","_interopRequireDefault","_MonthWrapper","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MonthWrapper","locale","currentDate","highlightedDates","selectedDate","onSelect","categories","direction","onAnimationFinished","shouldRenderTwo","width","content","setContent","useState","prevSelectedDate","setPrevSelectedDate","useEffect","prevState","items","date","getNewDate","month","year","getMonthAndYear","push","createElement","key","unshift","pop","shift","map","element","props","animate","useMemo","x","StyledMonthWrapper","$height","StyledMotionWrapper","transition","type","duration","onAnimationComplete","displayName","_default","exports"],"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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","ignoreList":[]}
1
+ {"version":3,"file":"MonthWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_calendar","_Month","_interopRequireDefault","_MonthWrapper","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MonthWrapper","locale","currentDate","highlightedDates","selectedDate","onSelect","categories","direction","onAnimationFinished","shouldRenderTwo","width","content","setContent","useState","prevSelectedDate","setPrevSelectedDate","monthWrapperRef","useRef","monthWrapperSize","useElementSize","monthHeight","useMemo","useEffect","undefined","prevState","items","date","getNewDate","month","year","getMonthAndYear","push","createElement","height","key","unshift","pop","shift","map","element","props","animate","x","StyledMonthWrapper","$height","ref","StyledMotionWrapper","transition","type","duration","onAnimationComplete","displayName","_default","exports"],"sources":["../../../../../src/components/calendar/month-wrapper/MonthWrapper.tsx"],"sourcesContent":["import { useElementSize } from '@chayns-components/core';\nimport type { Locale } from 'date-fns';\nimport type { MotionProps } from 'framer-motion';\nimport React, { FC, useEffect, useMemo, useRef, 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 const monthWrapperRef = useRef<HTMLDivElement>(null);\n\n const monthWrapperSize = useElementSize(monthWrapperRef);\n\n const monthHeight = useMemo(\n () => (monthWrapperSize ? monthWrapperSize.width / (shouldRenderTwo ? 2 : 1) : 0),\n [monthWrapperSize, shouldRenderTwo],\n );\n\n useEffect(() => {\n setContent(undefined);\n }, [monthHeight]);\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 height={monthHeight}\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 height={monthHeight}\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 height={monthHeight}\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 monthHeight,\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} ref={monthWrapperRef}>\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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","ignoreList":[]}
package/lib/cjs/components/calendar/month-wrapper/month/Month.js CHANGED
@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
+ var _calendar = require("../../../../utils/calendar");
9
+ var _DayWrapper = _interopRequireDefault(require("./day-wrapper/DayWrapper"));
8
10
  var _Month = require("./Month.styles");
9
11
  var _WeekdayWrapper = _interopRequireDefault(require("./weekday-wrapper/WeekdayWrapper"));
10
- var _DayWrapper = _interopRequireDefault(require("./day-wrapper/DayWrapper"));
11
- var _calendar = require("../../../../utils/calendar");
12
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
14
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -19,10 +19,13 @@ const Month = ({
19
19
  highlightedDates,
20
20
  selectedDate,
21
21
  onSelect,
22
- categories
22
+ categories,
23
+ height
23
24
  }) => {
24
25
  const [currentYear] = (0, _react.useState)(new Date().getFullYear());
25
- return /*#__PURE__*/_react.default.createElement(_Month.StyledMonth, null, /*#__PURE__*/_react.default.createElement(_Month.StyledMonthHead, null, /*#__PURE__*/_react.default.createElement(_Month.StyledMonthName, null, `${(0, _calendar.formatMonth)({
26
+ return /*#__PURE__*/_react.default.createElement(_Month.StyledMonth, {
27
+ $height: height
28
+ }, /*#__PURE__*/_react.default.createElement(_Month.StyledMonthHead, null, /*#__PURE__*/_react.default.createElement(_Month.StyledMonthName, null, `${(0, _calendar.formatMonth)({
26
29
  locale,
27
30
  month
28
31
  })} ${String(currentYear) !== year ? year : ''}`)), /*#__PURE__*/_react.default.createElement(_WeekdayWrapper.default, {
package/lib/cjs/components/calendar/month-wrapper/month/Month.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Month.js","names":["_react","_interopRequireWildcard","require","_Month","_WeekdayWrapper","_interopRequireDefault","_DayWrapper","_calendar","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Month","month","year","locale","highlightedDates","selectedDate","onSelect","categories","currentYear","useState","Date","getFullYear","createElement","StyledMonth","StyledMonthHead","StyledMonthName","formatMonth","String","key","displayName","_default","exports"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { StyledMonth, StyledMonthHead, StyledMonthName } from './Month.styles';\nimport WeekdayWrapper from './weekday-wrapper/WeekdayWrapper';\nimport DayWrapper from './day-wrapper/DayWrapper';\nimport type { Locale } from 'date-fns';\nimport type { Categories, EMonth, HighlightedDates } from '../../../../types/calendar';\nimport { formatMonth } from '../../../../utils/calendar';\n\nexport type MonthProps = {\n month: EMonth;\n year: string;\n locale: Locale;\n highlightedDates?: HighlightedDates[];\n onSelect: (date: Date) => void;\n selectedDate?: Date;\n categories?: Categories[];\n};\n\nconst Month: FC<MonthProps> = ({\n month,\n year,\n locale,\n highlightedDates,\n selectedDate,\n onSelect,\n categories,\n}) => {\n const [currentYear] = useState(new Date().getFullYear());\n\n return (\n <StyledMonth>\n <StyledMonthHead>\n <StyledMonthName>{`${formatMonth({ locale, month })} ${String(currentYear) !== year ? year : ''}`}</StyledMonthName>\n </StyledMonthHead>\n <WeekdayWrapper locale={locale} />\n <DayWrapper\n key={`day-wrapper-${month}`}\n categories={categories}\n selectedDate={selectedDate}\n month={month}\n year={year}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n />\n </StyledMonth>\n );\n};\n\nMonth.displayName = 'Month';\n\nexport default Month;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Month.js","names":["_react","_interopRequireWildcard","require","_calendar","_DayWrapper","_interopRequireDefault","_Month","_WeekdayWrapper","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Month","month","year","locale","highlightedDates","selectedDate","onSelect","categories","height","currentYear","useState","Date","getFullYear","createElement","StyledMonth","$height","StyledMonthHead","StyledMonthName","formatMonth","String","key","displayName","_default","exports"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.tsx"],"sourcesContent":["import type { Locale } from 'date-fns';\nimport React, { FC, useState } from 'react';\nimport type { Categories, EMonth, HighlightedDates } from '../../../../types/calendar';\nimport { formatMonth } from '../../../../utils/calendar';\nimport DayWrapper from './day-wrapper/DayWrapper';\nimport { StyledMonth, StyledMonthHead, StyledMonthName } from './Month.styles';\nimport WeekdayWrapper from './weekday-wrapper/WeekdayWrapper';\n\nexport type MonthProps = {\n month: EMonth;\n year: string;\n locale: Locale;\n highlightedDates?: HighlightedDates[];\n onSelect: (date: Date) => void;\n selectedDate?: Date;\n categories?: Categories[];\n height: number;\n};\n\nconst Month: FC<MonthProps> = ({\n month,\n year,\n locale,\n highlightedDates,\n selectedDate,\n onSelect,\n categories,\n height,\n}) => {\n const [currentYear] = useState(new Date().getFullYear());\n\n return (\n <StyledMonth $height={height}>\n <StyledMonthHead>\n <StyledMonthName>{`${formatMonth({ locale, month })} ${String(currentYear) !== year ? year : ''}`}</StyledMonthName>\n </StyledMonthHead>\n <WeekdayWrapper locale={locale} />\n <DayWrapper\n key={`day-wrapper-${month}`}\n categories={categories}\n selectedDate={selectedDate}\n month={month}\n year={year}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n />\n </StyledMonth>\n );\n};\n\nMonth.displayName = 'Month';\n\nexport default Month;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/calendar/month-wrapper/month/Month.styles.js CHANGED
@@ -7,7 +7,9 @@ exports.StyledMonthName = exports.StyledMonthHead = exports.StyledMonth = void 0
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
9
  const StyledMonth = exports.StyledMonth = _styledComponents.default.div`
10
- height: 100%;
10
+ height: ${({
11
+ $height
12
+ }) => $height}px;
11
13
  aspect-ratio: 1;
12
14
  `;
13
15
  const StyledMonthHead = exports.StyledMonthHead = _styledComponents.default.div`
package/lib/cjs/components/calendar/month-wrapper/month/Month.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Month.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMonth","exports","styled","div","StyledMonthHead","StyledMonthName"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledMonth = styled.div`\n height: 100%;\n aspect-ratio: 1;\n`;\n\nexport const StyledMonthHead = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledMonthName = styled.div`\n font-weight: bold;\n width: 100%;\n text-align: center;\n user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAG;AACrC;AACA;AACA,CAAC;AAEM,MAAMC,eAAe,GAAAH,OAAA,CAAAG,eAAA,GAAGF,yBAAM,CAACC,GAAG;AACzC;AACA;AACA,CAAC;AAEM,MAAME,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Month.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMonth","exports","styled","div","$height","StyledMonthHead","StyledMonthName"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledMonthProps = WithTheme<{ $height: number }>;\n\nexport const StyledMonth = styled.div<StyledMonthProps>`\n height: ${({ $height }) => $height}px;\n aspect-ratio: 1;\n`;\n\nexport const StyledMonthHead = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledMonthName = styled.div`\n font-weight: bold;\n width: 100%;\n text-align: center;\n user-select: none;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIhC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAqB;AACvD,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,CAAC;AAEM,MAAMC,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACC,GAAG;AACzC;AACA;AACA,CAAC;AAEM,MAAMG,eAAe,GAAAL,OAAA,CAAAK,eAAA,GAAGJ,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
package/lib/esm/components/calendar/month-wrapper/MonthWrapper.js CHANGED
@@ -1,4 +1,5 @@
1
- import React, { useEffect, useMemo, useState } from 'react';
1
+ import { useElementSize } from '@chayns-components/core';
2
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
2
3
  import { getMonthAndYear, getNewDate } from '../../../utils/calendar';
3
4
  import Month from './month/Month';
4
5
  import { StyledMonthWrapper, StyledMotionWrapper } from './MonthWrapper.styles';
@@ -17,6 +18,12 @@ const MonthWrapper = _ref => {
17
18
  } = _ref;
18
19
  const [content, setContent] = useState();
19
20
  const [prevSelectedDate, setPrevSelectedDate] = useState();
21
+ const monthWrapperRef = useRef(null);
22
+ const monthWrapperSize = useElementSize(monthWrapperRef);
23
+ const monthHeight = useMemo(() => monthWrapperSize ? monthWrapperSize.width / (shouldRenderTwo ? 2 : 1) : 0, [monthWrapperSize, shouldRenderTwo]);
24
+ useEffect(() => {
25
+ setContent(undefined);
26
+ }, [monthHeight]);
20
27
  useEffect(() => {
21
28
  if (prevSelectedDate !== selectedDate) {
22
29
  setPrevSelectedDate(selectedDate);
@@ -34,6 +41,7 @@ const MonthWrapper = _ref => {
34
41
  year
35
42
  } = getMonthAndYear(date);
36
43
  items.push( /*#__PURE__*/React.createElement(Month, {
44
+ height: monthHeight,
37
45
  key: `${month}-${year}`,
38
46
  month: month,
39
47
  year: year,
@@ -53,6 +61,7 @@ const MonthWrapper = _ref => {
53
61
  year
54
62
  } = getMonthAndYear(date);
55
63
  prevState.unshift( /*#__PURE__*/React.createElement(Month, {
64
+ height: monthHeight,
56
65
  key: `${month}-${year}`,
57
66
  month: month,
58
67
  year: year,
@@ -71,6 +80,7 @@ const MonthWrapper = _ref => {
71
80
  year
72
81
  } = getMonthAndYear(date);
73
82
  prevState.push( /*#__PURE__*/React.createElement(Month, {
83
+ height: monthHeight,
74
84
  key: `${month}-${year}`,
75
85
  month: month,
76
86
  year: year,
@@ -84,7 +94,7 @@ const MonthWrapper = _ref => {
84
94
  }
85
95
  return prevState;
86
96
  });
87
- }, [categories, currentDate, direction, highlightedDates, locale, onSelect, prevSelectedDate, selectedDate]);
97
+ }, [categories, currentDate, direction, highlightedDates, locale, monthHeight, onSelect, prevSelectedDate, selectedDate]);
88
98
  useEffect(() => {
89
99
  if (selectedDate) {
90
100
  setContent(prevState => (prevState ?? []).map(element => ({
@@ -130,7 +140,8 @@ const MonthWrapper = _ref => {
130
140
  }
131
141
  }, [direction, shouldRenderTwo]);
132
142
  return /*#__PURE__*/React.createElement(StyledMonthWrapper, {
133
- $height: shouldRenderTwo ? width / 2 : width
143
+ $height: shouldRenderTwo ? width / 2 : width,
144
+ ref: monthWrapperRef
134
145
  }, /*#__PURE__*/React.createElement(StyledMotionWrapper, {
135
146
  animate: animate,
136
147
  transition: {
package/lib/esm/components/calendar/month-wrapper/MonthWrapper.js.map CHANGED
@@ -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","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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","ignoreList":[]}
1
+ {"version":3,"file":"MonthWrapper.js","names":["useElementSize","React","useEffect","useMemo","useRef","useState","getMonthAndYear","getNewDate","Month","StyledMonthWrapper","StyledMotionWrapper","MonthWrapper","_ref","locale","currentDate","highlightedDates","selectedDate","onSelect","categories","direction","onAnimationFinished","shouldRenderTwo","width","content","setContent","prevSelectedDate","setPrevSelectedDate","monthWrapperRef","monthWrapperSize","monthHeight","undefined","prevState","items","i","date","month","year","push","createElement","height","key","unshift","pop","shift","map","element","props","animate","x","$height","ref","transition","type","duration","onAnimationComplete","displayName"],"sources":["../../../../../src/components/calendar/month-wrapper/MonthWrapper.tsx"],"sourcesContent":["import { useElementSize } from '@chayns-components/core';\nimport type { Locale } from 'date-fns';\nimport type { MotionProps } from 'framer-motion';\nimport React, { FC, useEffect, useMemo, useRef, 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 const monthWrapperRef = useRef<HTMLDivElement>(null);\n\n const monthWrapperSize = useElementSize(monthWrapperRef);\n\n const monthHeight = useMemo(\n () => (monthWrapperSize ? monthWrapperSize.width / (shouldRenderTwo ? 2 : 1) : 0),\n [monthWrapperSize, shouldRenderTwo],\n );\n\n useEffect(() => {\n setContent(undefined);\n }, [monthHeight]);\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 height={monthHeight}\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 height={monthHeight}\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 height={monthHeight}\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 monthHeight,\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} ref={monthWrapperRef}>\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":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;AAGxD,OAAOC,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAA2B,OAAO;AAE1F,SAASC,eAAe,EAAEC,UAAU,QAAQ,yBAAyB;AACrE,OAAOC,KAAK,MAAM,eAAe;AACjC,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,uBAAuB;AAe/E,MAAMC,YAAmC,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,MAAM;IACNC,WAAW;IACXC,gBAAgB;IAChBC,YAAY;IACZC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,mBAAmB;IACnBC,eAAe;IACfC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM,CAACW,OAAO,EAAEC,UAAU,CAAC,GAAGnB,QAAQ,CAAiB,CAAC;EACxD,MAAM,CAACoB,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGrB,QAAQ,CAAO,CAAC;EAEhE,MAAMsB,eAAe,GAAGvB,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAMwB,gBAAgB,GAAG5B,cAAc,CAAC2B,eAAe,CAAC;EAExD,MAAME,WAAW,GAAG1B,OAAO,CACvB,MAAOyB,gBAAgB,GAAGA,gBAAgB,CAACN,KAAK,IAAID,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAE,EACjF,CAACO,gBAAgB,EAAEP,eAAe,CACtC,CAAC;EAEDnB,SAAS,CAAC,MAAM;IACZsB,UAAU,CAACM,SAAS,CAAC;EACzB,CAAC,EAAE,CAACD,WAAW,CAAC,CAAC;EAEjB3B,SAAS,CAAC,MAAM;IACZ,IAAIuB,gBAAgB,KAAKT,YAAY,EAAE;MACnCU,mBAAmB,CAACV,YAAY,CAAC;IACrC;EACJ,CAAC,EAAE,CAACS,gBAAgB,EAAET,YAAY,CAAC,CAAC;EAEpCd,SAAS,CAAC,MAAM;IACZsB,UAAU,CAAEO,SAAS,IAAK;MACtB;MACA,IAAI,CAACA,SAAS,EAAE;QACZ,MAAMC,KAAqB,GAAG,EAAE;QAEhC,KAAK,IAAIC,CAAC,GAAG,CAAC,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAEA,CAAC,EAAE,EAAE;UACzB,MAAMC,IAAI,GAAG3B,UAAU,CAAC0B,CAAC,EAAEnB,WAAW,CAAC;UAEvC,MAAM;YAAEqB,KAAK;YAAEC;UAAK,CAAC,GAAG9B,eAAe,CAAC4B,IAAI,CAAC;UAE7CF,KAAK,CAACK,IAAI,eACNpC,KAAA,CAAAqC,aAAA,CAAC9B,KAAK;YACF+B,MAAM,EAAEV,WAAY;YACpBW,GAAG,EAAE,GAAGL,KAAK,IAAIC,IAAI,EAAG;YACxBD,KAAK,EAAEA,KAAM;YACbC,IAAI,EAAEA,IAAK;YACXvB,MAAM,EAAEA,MAAO;YACfI,QAAQ,EAAEA,QAAS;YACnBF,gBAAgB,EAAEA,gBAAiB;YACnCG,UAAU,EAAEA,UAAW;YACvBF,YAAY,EAAEA;UAAa,CAC9B,CACL,CAAC;QACL;QAEA,OAAOgB,KAAK;MAChB;MAEA,IAAIb,SAAS,KAAK,MAAM,EAAE;QACtB,MAAMe,IAAI,GAAG3B,UAAU,CAAC,CAAC,CAAC,EAAEO,WAAW,CAAC;QAExC,MAAM;UAAEqB,KAAK;UAAEC;QAAK,CAAC,GAAG9B,eAAe,CAAC4B,IAAI,CAAC;QAE7CH,SAAS,CAACU,OAAO,eACbxC,KAAA,CAAAqC,aAAA,CAAC9B,KAAK;UACF+B,MAAM,EAAEV,WAAY;UACpBW,GAAG,EAAE,GAAGL,KAAK,IAAIC,IAAI,EAAG;UACxBD,KAAK,EAAEA,KAAM;UACbC,IAAI,EAAEA,IAAK;UACXvB,MAAM,EAAEA,MAAO;UACfI,QAAQ,EAAEA,QAAS;UACnBF,gBAAgB,EAAEA,gBAAiB;UACnCG,UAAU,EAAEA,UAAW;UACvBF,YAAY,EAAEA;QAAa,CAC9B,CACL,CAAC;QACDe,SAAS,CAACW,GAAG,CAAC,CAAC;MACnB;MAEA,IAAIvB,SAAS,KAAK,OAAO,EAAE;QACvB,MAAMe,IAAI,GAAG3B,UAAU,CAAC,CAAC,EAAEO,WAAW,CAAC;QAEvC,MAAM;UAAEqB,KAAK;UAAEC;QAAK,CAAC,GAAG9B,eAAe,CAAC4B,IAAI,CAAC;QAE7CH,SAAS,CAACM,IAAI,eACVpC,KAAA,CAAAqC,aAAA,CAAC9B,KAAK;UACF+B,MAAM,EAAEV,WAAY;UACpBW,GAAG,EAAE,GAAGL,KAAK,IAAIC,IAAI,EAAG;UACxBD,KAAK,EAAEA,KAAM;UACbC,IAAI,EAAEA,IAAK;UACXvB,MAAM,EAAEA,MAAO;UACfI,QAAQ,EAAEA,QAAS;UACnBF,gBAAgB,EAAEA,gBAAiB;UACnCG,UAAU,EAAEA,UAAW;UACvBF,YAAY,EAAEA;QAAa,CAC9B,CACL,CAAC;QACDe,SAAS,CAACY,KAAK,CAAC,CAAC;MACrB;MAEA,OAAOZ,SAAS;IACpB,CAAC,CAAC;EACN,CAAC,EAAE,CACCb,UAAU,EACVJ,WAAW,EACXK,SAAS,EACTJ,gBAAgB,EAChBF,MAAM,EACNgB,WAAW,EACXZ,QAAQ,EACRQ,gBAAgB,EAChBT,YAAY,CACf,CAAC;EAEFd,SAAS,CAAC,MAAM;IACZ,IAAIc,YAAY,EAAE;MACdQ,UAAU,CAAEO,SAAS,IACjB,CAACA,SAAS,IAAI,EAAE,EAAEa,GAAG,CAAEC,OAAO,KAAM;QAChC,GAAGA,OAAO;QACVC,KAAK,EAAE;UAAE,GAAGD,OAAO,CAACC,KAAK;UAAE9B;QAAa;MAC5C,CAAC,CAAC,CACN,CAAC;IACL;EACJ,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAM+B,OAA+B,GAAG5C,OAAO,CAAC,MAAM;IAClD,IAAIkB,eAAe,EAAE;MACjB,QAAQ,IAAI;QACR,KAAKF,SAAS,KAAK,MAAM;UACrB,OAAO;YAAE6B,CAAC,EAAE;UAAK,CAAC;QACtB,KAAK7B,SAAS,KAAK,OAAO;UACtB,OAAO;YAAE6B,CAAC,EAAE;UAAQ,CAAC;QACzB;UACI,OAAO;YAAEA,CAAC,EAAE;UAAO,CAAC;MAC5B;IACJ,CAAC,MAAM;MACH,QAAQ,IAAI;QACR,KAAK7B,SAAS,KAAK,MAAM;UACrB,OAAO;YAAE6B,CAAC,EAAE;UAAK,CAAC;QACtB,KAAK7B,SAAS,KAAK,OAAO;UACtB,OAAO;YAAE6B,CAAC,EAAE;UAAQ,CAAC;QACzB;UACI,OAAO;YAAEA,CAAC,EAAE;UAAQ,CAAC;MAC7B;IACJ;EACJ,CAAC,EAAE,CAAC7B,SAAS,EAAEE,eAAe,CAAC,CAAC;EAEhC,oBACIpB,KAAA,CAAAqC,aAAA,CAAC7B,kBAAkB;IAACwC,OAAO,EAAE5B,eAAe,GAAGC,KAAK,GAAG,CAAC,GAAGA,KAAM;IAAC4B,GAAG,EAAEvB;EAAgB,gBACnF1B,KAAA,CAAAqC,aAAA,CAAC5B,mBAAmB;IAChBqC,OAAO,EAAEA,OAAQ;IACjBI,UAAU,EAAE;MACRC,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE,CAAClC,SAAS,GAAG,CAAC,GAAG;IAC/B,CAAE;IACFmC,mBAAmB,EAAElC;EAAoB,GAExCG,OACgB,CACL,CAAC;AAE7B,CAAC;AAEDZ,YAAY,CAAC4C,WAAW,GAAG,cAAc;AAEzC,eAAe5C,YAAY","ignoreList":[]}
package/lib/esm/components/calendar/month-wrapper/month/Month.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useState } from 'react';
2
+ import { formatMonth } from '../../../../utils/calendar';
3
+ import DayWrapper from './day-wrapper/DayWrapper';
2
4
  import { StyledMonth, StyledMonthHead, StyledMonthName } from './Month.styles';
3
5
  import WeekdayWrapper from './weekday-wrapper/WeekdayWrapper';
4
- import DayWrapper from './day-wrapper/DayWrapper';
5
- import { formatMonth } from '../../../../utils/calendar';
6
6
  const Month = _ref => {
7
7
  let {
8
8
  month,
@@ -11,10 +11,13 @@ const Month = _ref => {
11
11
  highlightedDates,
12
12
  selectedDate,
13
13
  onSelect,
14
- categories
14
+ categories,
15
+ height
15
16
  } = _ref;
16
17
  const [currentYear] = useState(new Date().getFullYear());
17
- return /*#__PURE__*/React.createElement(StyledMonth, null, /*#__PURE__*/React.createElement(StyledMonthHead, null, /*#__PURE__*/React.createElement(StyledMonthName, null, `${formatMonth({
18
+ return /*#__PURE__*/React.createElement(StyledMonth, {
19
+ $height: height
20
+ }, /*#__PURE__*/React.createElement(StyledMonthHead, null, /*#__PURE__*/React.createElement(StyledMonthName, null, `${formatMonth({
18
21
  locale,
19
22
  month
20
23
  })} ${String(currentYear) !== year ? year : ''}`)), /*#__PURE__*/React.createElement(WeekdayWrapper, {
package/lib/esm/components/calendar/month-wrapper/month/Month.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Month.js","names":["React","useState","StyledMonth","StyledMonthHead","StyledMonthName","WeekdayWrapper","DayWrapper","formatMonth","Month","_ref","month","year","locale","highlightedDates","selectedDate","onSelect","categories","currentYear","Date","getFullYear","createElement","String","key","displayName"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { StyledMonth, StyledMonthHead, StyledMonthName } from './Month.styles';\nimport WeekdayWrapper from './weekday-wrapper/WeekdayWrapper';\nimport DayWrapper from './day-wrapper/DayWrapper';\nimport type { Locale } from 'date-fns';\nimport type { Categories, EMonth, HighlightedDates } from '../../../../types/calendar';\nimport { formatMonth } from '../../../../utils/calendar';\n\nexport type MonthProps = {\n month: EMonth;\n year: string;\n locale: Locale;\n highlightedDates?: HighlightedDates[];\n onSelect: (date: Date) => void;\n selectedDate?: Date;\n categories?: Categories[];\n};\n\nconst Month: FC<MonthProps> = ({\n month,\n year,\n locale,\n highlightedDates,\n selectedDate,\n onSelect,\n categories,\n}) => {\n const [currentYear] = useState(new Date().getFullYear());\n\n return (\n <StyledMonth>\n <StyledMonthHead>\n <StyledMonthName>{`${formatMonth({ locale, month })} ${String(currentYear) !== year ? year : ''}`}</StyledMonthName>\n </StyledMonthHead>\n <WeekdayWrapper locale={locale} />\n <DayWrapper\n key={`day-wrapper-${month}`}\n categories={categories}\n selectedDate={selectedDate}\n month={month}\n year={year}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n />\n </StyledMonth>\n );\n};\n\nMonth.displayName = 'Month';\n\nexport default Month;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,WAAW,EAAEC,eAAe,EAAEC,eAAe,QAAQ,gBAAgB;AAC9E,OAAOC,cAAc,MAAM,kCAAkC;AAC7D,OAAOC,UAAU,MAAM,0BAA0B;AAGjD,SAASC,WAAW,QAAQ,4BAA4B;AAYxD,MAAMC,KAAqB,GAAGC,IAAA,IAQxB;EAAA,IARyB;IAC3BC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,gBAAgB;IAChBC,YAAY;IACZC,QAAQ;IACRC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,WAAW,CAAC,GAAGhB,QAAQ,CAAC,IAAIiB,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAExD,oBACInB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,qBACRF,KAAA,CAAAoB,aAAA,CAACjB,eAAe,qBACZH,KAAA,CAAAoB,aAAA,CAAChB,eAAe,QAAE,GAAGG,WAAW,CAAC;IAAEK,MAAM;IAAEF;EAAM,CAAC,CAAC,IAAIW,MAAM,CAACJ,WAAW,CAAC,KAAKN,IAAI,GAAGA,IAAI,GAAG,EAAE,EAAoB,CACtG,CAAC,eAClBX,KAAA,CAAAoB,aAAA,CAACf,cAAc;IAACO,MAAM,EAAEA;EAAO,CAAE,CAAC,eAClCZ,KAAA,CAAAoB,aAAA,CAACd,UAAU;IACPgB,GAAG,EAAE,eAAeZ,KAAK,EAAG;IAC5BM,UAAU,EAAEA,UAAW;IACvBF,YAAY,EAAEA,YAAa;IAC3BJ,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEA,QAAS;IACnBF,gBAAgB,EAAEA;EAAiB,CACtC,CACQ,CAAC;AAEtB,CAAC;AAEDL,KAAK,CAACe,WAAW,GAAG,OAAO;AAE3B,eAAef,KAAK","ignoreList":[]}
1
+ {"version":3,"file":"Month.js","names":["React","useState","formatMonth","DayWrapper","StyledMonth","StyledMonthHead","StyledMonthName","WeekdayWrapper","Month","_ref","month","year","locale","highlightedDates","selectedDate","onSelect","categories","height","currentYear","Date","getFullYear","createElement","$height","String","key","displayName"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.tsx"],"sourcesContent":["import type { Locale } from 'date-fns';\nimport React, { FC, useState } from 'react';\nimport type { Categories, EMonth, HighlightedDates } from '../../../../types/calendar';\nimport { formatMonth } from '../../../../utils/calendar';\nimport DayWrapper from './day-wrapper/DayWrapper';\nimport { StyledMonth, StyledMonthHead, StyledMonthName } from './Month.styles';\nimport WeekdayWrapper from './weekday-wrapper/WeekdayWrapper';\n\nexport type MonthProps = {\n month: EMonth;\n year: string;\n locale: Locale;\n highlightedDates?: HighlightedDates[];\n onSelect: (date: Date) => void;\n selectedDate?: Date;\n categories?: Categories[];\n height: number;\n};\n\nconst Month: FC<MonthProps> = ({\n month,\n year,\n locale,\n highlightedDates,\n selectedDate,\n onSelect,\n categories,\n height,\n}) => {\n const [currentYear] = useState(new Date().getFullYear());\n\n return (\n <StyledMonth $height={height}>\n <StyledMonthHead>\n <StyledMonthName>{`${formatMonth({ locale, month })} ${String(currentYear) !== year ? year : ''}`}</StyledMonthName>\n </StyledMonthHead>\n <WeekdayWrapper locale={locale} />\n <DayWrapper\n key={`day-wrapper-${month}`}\n categories={categories}\n selectedDate={selectedDate}\n month={month}\n year={year}\n onSelect={onSelect}\n highlightedDates={highlightedDates}\n />\n </StyledMonth>\n );\n};\n\nMonth.displayName = 'Month';\n\nexport default Month;\n"],"mappings":"AACA,OAAOA,KAAK,IAAQC,QAAQ,QAAQ,OAAO;AAE3C,SAASC,WAAW,QAAQ,4BAA4B;AACxD,OAAOC,UAAU,MAAM,0BAA0B;AACjD,SAASC,WAAW,EAAEC,eAAe,EAAEC,eAAe,QAAQ,gBAAgB;AAC9E,OAAOC,cAAc,MAAM,kCAAkC;AAa7D,MAAMC,KAAqB,GAAGC,IAAA,IASxB;EAAA,IATyB;IAC3BC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,gBAAgB;IAChBC,YAAY;IACZC,QAAQ;IACRC,UAAU;IACVC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,WAAW,CAAC,GAAGjB,QAAQ,CAAC,IAAIkB,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAExD,oBACIpB,KAAA,CAAAqB,aAAA,CAACjB,WAAW;IAACkB,OAAO,EAAEL;EAAO,gBACzBjB,KAAA,CAAAqB,aAAA,CAAChB,eAAe,qBACZL,KAAA,CAAAqB,aAAA,CAACf,eAAe,QAAE,GAAGJ,WAAW,CAAC;IAAEU,MAAM;IAAEF;EAAM,CAAC,CAAC,IAAIa,MAAM,CAACL,WAAW,CAAC,KAAKP,IAAI,GAAGA,IAAI,GAAG,EAAE,EAAoB,CACtG,CAAC,eAClBX,KAAA,CAAAqB,aAAA,CAACd,cAAc;IAACK,MAAM,EAAEA;EAAO,CAAE,CAAC,eAClCZ,KAAA,CAAAqB,aAAA,CAAClB,UAAU;IACPqB,GAAG,EAAE,eAAed,KAAK,EAAG;IAC5BM,UAAU,EAAEA,UAAW;IACvBF,YAAY,EAAEA,YAAa;IAC3BJ,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEA,QAAS;IACnBF,gBAAgB,EAAEA;EAAiB,CACtC,CACQ,CAAC;AAEtB,CAAC;AAEDL,KAAK,CAACiB,WAAW,GAAG,OAAO;AAE3B,eAAejB,KAAK","ignoreList":[]}
package/lib/esm/components/calendar/month-wrapper/month/Month.styles.js CHANGED
@@ -1,6 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  export const StyledMonth = styled.div`
3
- height: 100%;
3
+ height: ${_ref => {
4
+ let {
5
+ $height
6
+ } = _ref;
7
+ return $height;
8
+ }}px;
4
9
  aspect-ratio: 1;
5
10
  `;
6
11
  export const StyledMonthHead = styled.div`
package/lib/esm/components/calendar/month-wrapper/month/Month.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Month.styles.js","names":["styled","StyledMonth","div","StyledMonthHead","StyledMonthName"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledMonth = styled.div`\n height: 100%;\n aspect-ratio: 1;\n`;\n\nexport const StyledMonthHead = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledMonthName = styled.div`\n font-weight: bold;\n width: 100%;\n text-align: center;\n user-select: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,GAAG;AACrC;AACA;AACA,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACE,GAAG;AACzC;AACA;AACA,CAAC;AAED,OAAO,MAAME,eAAe,GAAGJ,MAAM,CAACE,GAAG;AACzC;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Month.styles.js","names":["styled","StyledMonth","div","_ref","$height","StyledMonthHead","StyledMonthName"],"sources":["../../../../../../src/components/calendar/month-wrapper/month/Month.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledMonthProps = WithTheme<{ $height: number }>;\n\nexport const StyledMonth = styled.div<StyledMonthProps>`\n height: ${({ $height }) => $height}px;\n aspect-ratio: 1;\n`;\n\nexport const StyledMonthHead = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledMonthName = styled.div`\n font-weight: bold;\n width: 100%;\n text-align: center;\n user-select: none;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,GAAqB;AACvD,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC;AACA,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGL,MAAM,CAACE,GAAG;AACzC;AACA;AACA,CAAC;AAED,OAAO,MAAMI,eAAe,GAAGN,MAAM,CAACE,GAAG;AACzC;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
package/lib/types/components/calendar/month-wrapper/month/Month.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { FC } from 'react';
2
1
  import type { Locale } from 'date-fns';
2
+ import { FC } from 'react';
3
3
  import type { Categories, EMonth, HighlightedDates } from '../../../../types/calendar';
4
4
  export type MonthProps = {
5
5
  month: EMonth;
@@ -9,6 +9,7 @@ export type MonthProps = {
9
9
  onSelect: (date: Date) => void;
10
10
  selectedDate?: Date;
11
11
  categories?: Categories[];
12
+ height: number;
12
13
  };
13
14
  declare const Month: FC<MonthProps>;
14
15
  export default Month;
package/lib/types/components/calendar/month-wrapper/month/Month.styles.d.ts CHANGED
@@ -1,4 +1,9 @@
1
1
  /// <reference types="react" />
2
- export declare const StyledMonth: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
+ import type { WithTheme } from '@chayns-components/core';
3
+ type StyledMonthProps = WithTheme<{
4
+ $height: number;
5
+ }>;
6
+ export declare const StyledMonth: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledMonthProps>> & string;
3
7
  export declare const StyledMonthHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
4
8
  export declare const StyledMonthName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
9
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/date",
3
- "version": "5.0.0-beta.662",
3
+ "version": "5.0.0-beta.663",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -67,7 +67,7 @@
67
67
  "typescript": "^5.4.5"
68
68
  },
69
69
  "dependencies": {
70
- "@chayns-components/core": "^5.0.0-beta.662",
70
+ "@chayns-components/core": "^5.0.0-beta.663",
71
71
  "date-fns": "^2.30.0",
72
72
  "uuid": "^9.0.1"
73
73
  },
@@ -81,5 +81,5 @@
81
81
  "publishConfig": {
82
82
  "access": "public"
83
83
  },
84
- "gitHead": "be18196ec644b71be6b402f69d4e58bd3a686eab"
84
+ "gitHead": "e852ec0812ab56c39a220d125ef4d97d9c5cfc60"
85
85
  }