venice-ui 2.4.5 → 2.4.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.
Files changed (3) hide show
  1. package/dist/cjs/components/DatePicker/CalendarContent.js +33 -16
  2. package/dist/esm/components/DatePicker/CalendarContent.js +34 -17
  3. package/package.json +1 -1
package/dist/cjs/components/DatePicker/CalendarContent.js CHANGED
@@ -29,9 +29,16 @@ const DatePiocker_styles_1 = require("./DatePiocker.styles");
29
29
  const date_fns_1 = require("date-fns");
30
30
  const Aligment_1 = require("../Aligment");
31
31
  const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
32
+ const [tempYear, setTempYear] = (0, react_1.useState)((0, date_fns_1.getYear)(date));
33
+ const [tempMonth, setTempMonth] = (0, react_1.useState)((0, date_fns_1.getMonth)(date));
34
+ (0, react_1.useEffect)(() => {
35
+ setTempYear((0, date_fns_1.getYear)(date));
36
+ setTempMonth((0, date_fns_1.getMonth)(date));
37
+ }, [date]);
38
+ const viewDate = new Date(tempYear, tempMonth, 1);
32
39
  const [days, setDays] = (0, react_1.useState)([]);
33
- const firstDayOfMonth = (0, date_fns_1.startOfMonth)(date);
34
- const daysInMonth = (0, date_fns_1.getDaysInMonth)(date);
40
+ const firstDayOfMonth = (0, date_fns_1.startOfMonth)(viewDate);
41
+ const daysInMonth = (0, date_fns_1.getDaysInMonth)(viewDate);
35
42
  const firstDayIndex = (0, date_fns_1.getDay)(firstDayOfMonth);
36
43
  const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
37
44
  (0, react_1.useEffect)(() => {
@@ -43,36 +50,46 @@ const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, loc
43
50
  daysScope.push(j.toString());
44
51
  }
45
52
  setDays(daysScope);
46
- }, [date]);
53
+ }, [viewDate, beforeIndex, daysInMonth]);
47
54
  const setDay = (day) => {
48
55
  if (!isNaN(day)) {
49
- const newDate = (0, date_fns_1.setDate)(date, day);
56
+ const newDate = new Date(tempYear, tempMonth, day);
50
57
  handleChange(newDate);
51
58
  }
52
59
  };
53
60
  const handleSetMonth = (month) => {
54
61
  if (!isNaN(month)) {
55
- const newDate = (0, date_fns_1.setMonth)(date, month);
56
- handleChange(newDate);
62
+ setTempMonth(month);
57
63
  changeMode('day');
58
64
  }
59
65
  };
60
66
  const handleSetYear = (year) => {
61
67
  if (!isNaN(year)) {
62
- const newDate = (0, date_fns_1.setYear)(date, year);
63
- handleChange(newDate);
68
+ setTempYear(year);
64
69
  changeMode('month');
65
70
  }
66
71
  };
72
+ const months = localeLabels?.months ?? [
73
+ 'January', 'February', 'March', 'April', 'May', 'June',
74
+ 'July', 'August', 'September', 'October', 'November', 'December'
75
+ ];
76
+ const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
67
77
  return (react_1.default.createElement(DatePiocker_styles_1.CalendarContentWrapper, null,
68
78
  mode === 'day' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" },
69
- react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, localeLabels?.weekdaysShort?.map((_item) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, null,
70
- react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, _item))))),
71
- react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((_day) => (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, null,
72
- react_1.default.createElement(DatePiocker_styles_1.Day, { active: parseInt(_day) === (0, date_fns_1.getDate)(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
73
- mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, localeLabels?.months?.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
74
- react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === (0, date_fns_1.getMonth)(date), onClick: () => handleSetMonth(index) }, _month)))))),
75
- mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
76
- react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === (0, date_fns_1.getYear)(date), onClick: () => handleSetYear(_year) }, _year))))))));
79
+ react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, weekdays.map((label, idx) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, { key: `wd-${idx}` },
80
+ react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, label))))),
81
+ react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((dayStr, idx) => {
82
+ const dayNum = parseInt(dayStr, 10);
83
+ const isActive = !isNaN(dayNum) &&
84
+ dayNum === (0, date_fns_1.getDate)(date) &&
85
+ tempMonth === (0, date_fns_1.getMonth)(date) &&
86
+ tempYear === (0, date_fns_1.getYear)(date);
87
+ return (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, { key: `d-${idx}` },
88
+ react_1.default.createElement(DatePiocker_styles_1.Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
89
+ })))),
90
+ mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, months.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `m-${index}` },
91
+ react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
92
+ mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `y-${_year}` },
93
+ react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
77
94
  };
78
95
  exports.CalendarContent = CalendarContent;
package/dist/esm/components/DatePicker/CalendarContent.js CHANGED
@@ -1,11 +1,18 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import { CalendarContentWrapper, Day, DayLabel, DayLabelWrapper, DaysContent, DaysHeader, DayWrapper, Month, MonthWrapper, } from './DatePiocker.styles';
3
- import { getDate, getDay, getDaysInMonth, getMonth, getYear, setDate, setMonth, setYear, startOfMonth, } from 'date-fns';
3
+ import { getDate, getDay, getDaysInMonth, getMonth, getYear, startOfMonth, } from 'date-fns';
4
4
  import { Aligment } from '../Aligment';
5
5
  export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
6
+ const [tempYear, setTempYear] = useState(getYear(date));
7
+ const [tempMonth, setTempMonth] = useState(getMonth(date));
8
+ useEffect(() => {
9
+ setTempYear(getYear(date));
10
+ setTempMonth(getMonth(date));
11
+ }, [date]);
12
+ const viewDate = new Date(tempYear, tempMonth, 1);
6
13
  const [days, setDays] = useState([]);
7
- const firstDayOfMonth = startOfMonth(date);
8
- const daysInMonth = getDaysInMonth(date);
14
+ const firstDayOfMonth = startOfMonth(viewDate);
15
+ const daysInMonth = getDaysInMonth(viewDate);
9
16
  const firstDayIndex = getDay(firstDayOfMonth);
10
17
  const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
11
18
  useEffect(() => {
@@ -17,35 +24,45 @@ export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsSco
17
24
  daysScope.push(j.toString());
18
25
  }
19
26
  setDays(daysScope);
20
- }, [date]);
27
+ }, [viewDate, beforeIndex, daysInMonth]);
21
28
  const setDay = (day) => {
22
29
  if (!isNaN(day)) {
23
- const newDate = setDate(date, day);
30
+ const newDate = new Date(tempYear, tempMonth, day);
24
31
  handleChange(newDate);
25
32
  }
26
33
  };
27
34
  const handleSetMonth = (month) => {
28
35
  if (!isNaN(month)) {
29
- const newDate = setMonth(date, month);
30
- handleChange(newDate);
36
+ setTempMonth(month);
31
37
  changeMode('day');
32
38
  }
33
39
  };
34
40
  const handleSetYear = (year) => {
35
41
  if (!isNaN(year)) {
36
- const newDate = setYear(date, year);
37
- handleChange(newDate);
42
+ setTempYear(year);
38
43
  changeMode('month');
39
44
  }
40
45
  };
46
+ const months = localeLabels?.months ?? [
47
+ 'January', 'February', 'March', 'April', 'May', 'June',
48
+ 'July', 'August', 'September', 'October', 'November', 'December'
49
+ ];
50
+ const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
41
51
  return (React.createElement(CalendarContentWrapper, null,
42
52
  mode === 'day' && (React.createElement(Aligment, { wrap: "wrap" },
43
- React.createElement(DaysHeader, null, localeLabels?.weekdaysShort?.map((_item) => (React.createElement(DayLabelWrapper, null,
44
- React.createElement(DayLabel, null, _item))))),
45
- React.createElement(DaysContent, null, days.map((_day) => (React.createElement(DayWrapper, null,
46
- React.createElement(Day, { active: parseInt(_day) === getDate(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
47
- mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, localeLabels?.months?.map((_month, index) => (React.createElement(MonthWrapper, null,
48
- React.createElement(Month, { active: index === getMonth(date), onClick: () => handleSetMonth(index) }, _month)))))),
49
- mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, null,
50
- React.createElement(Month, { active: _year === getYear(date), onClick: () => handleSetYear(_year) }, _year))))))));
53
+ React.createElement(DaysHeader, null, weekdays.map((label, idx) => (React.createElement(DayLabelWrapper, { key: `wd-${idx}` },
54
+ React.createElement(DayLabel, null, label))))),
55
+ React.createElement(DaysContent, null, days.map((dayStr, idx) => {
56
+ const dayNum = parseInt(dayStr, 10);
57
+ const isActive = !isNaN(dayNum) &&
58
+ dayNum === getDate(date) &&
59
+ tempMonth === getMonth(date) &&
60
+ tempYear === getYear(date);
61
+ return (React.createElement(DayWrapper, { key: `d-${idx}` },
62
+ React.createElement(Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
63
+ })))),
64
+ mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, months.map((_month, index) => (React.createElement(MonthWrapper, { key: `m-${index}` },
65
+ React.createElement(Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
66
+ mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, { key: `y-${_year}` },
67
+ React.createElement(Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
51
68
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.4.5",
3
+ "version": "2.4.6",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",