@chayns-components/date 5.0.0-beta.886 → 5.0.0-beta.887
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.
|
@@ -20,6 +20,7 @@ const useDateInfo = ({
|
|
|
20
20
|
const [formattedDateString, setFormattedDateString] = (0, _react.useState)('');
|
|
21
21
|
const [language] = (0, _react.useState)((0, _dateInfo.getLanguage)());
|
|
22
22
|
const formattedDate = (0, _react.useMemo)(() => new Date(date), [date]);
|
|
23
|
+
const isDateNearToday = (0, _dateFns.isToday)(date) || (0, _dateFns.isYesterday)(date) || (0, _dateFns.isTomorrow)(date);
|
|
23
24
|
(0, _react.useEffect)(() => {
|
|
24
25
|
// This useEffect is used for normal date formation
|
|
25
26
|
if (shouldShowDateToNowDifference) {
|
|
@@ -32,24 +33,28 @@ const useDateInfo = ({
|
|
|
32
33
|
date: formattedDate,
|
|
33
34
|
language
|
|
34
35
|
});
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
if (!isDateNearToday || !shouldShowRelativeDayOfWeek || !shouldShowTime) {
|
|
37
|
+
let formatString = 'dd. ';
|
|
38
|
+
formatString += `${(0, _dateInfo.getMonthFormat)({
|
|
39
|
+
shouldUseShortText
|
|
40
|
+
})}`;
|
|
41
|
+
formatString += `${(0, _dateInfo.getYearFormat)({
|
|
42
|
+
date: formattedDate,
|
|
43
|
+
shouldShowYear
|
|
44
|
+
})}`;
|
|
45
|
+
newFormattedDateString += (0, _dateFns.format)(formattedDate, formatString, {
|
|
46
|
+
locale: language
|
|
47
|
+
});
|
|
48
|
+
} else {
|
|
49
|
+
newFormattedDateString = newFormattedDateString.replace(', ', '');
|
|
50
|
+
}
|
|
46
51
|
newFormattedDateString += (0, _dateInfo.getFormattedTime)({
|
|
47
52
|
date: formattedDate,
|
|
48
53
|
shouldShowTime,
|
|
49
54
|
language
|
|
50
55
|
});
|
|
51
56
|
setFormattedDateString(newFormattedDateString);
|
|
52
|
-
}, [date, formattedDate, language, shouldShowDateToNowDifference, shouldShowDayOfWeek, shouldShowRelativeDayOfWeek, shouldShowYear, shouldShowTime, shouldUseShortText]);
|
|
57
|
+
}, [date, formattedDate, language, shouldShowDateToNowDifference, shouldShowDayOfWeek, shouldShowRelativeDayOfWeek, shouldShowYear, shouldShowTime, shouldUseShortText, isDateNearToday]);
|
|
53
58
|
|
|
54
59
|
// Calculate remaining time till next minute to update time according to time left
|
|
55
60
|
const [currentDate, setCurrentDate] = (0, _react.useState)(new Date());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDateInfo.js","names":["_dateFns","require","_react","_dateInfo","useDateInfo","date","shouldShowDateToNowDifference","shouldShowRelativeDayOfWeek","shouldShowDayOfWeek","shouldShowTime","shouldUseShortText","shouldShowYear","preText","formattedDateString","setFormattedDateString","useState","language","getLanguage","formattedDate","useMemo","Date","useEffect","newFormattedDateString","getFormattedDayOfWeek","formatString","getMonthFormat","getYearFormat","format","locale","getFormattedTime","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","isPast","Math","max","timeout","setTimeout","clearTimeout","getTimeTillNow","trim","exports"],"sources":["../../../src/hooks/useDateInfo.ts"],"sourcesContent":["import { format, isPast } from 'date-fns';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n getFormattedDayOfWeek,\n getFormattedTime,\n getLanguage,\n getMonthFormat,\n getTimeTillNow,\n getYearFormat,\n} from '../utils/dateInfo';\n\nexport interface UseDateInfoOptions {\n /**\n * The date, that should be displayed\n */\n date: Date | string;\n /**\n * Additional text for \"shouldShowDateToNowDifference\" prop. Writes a text before the calculated time\n */\n preText?: string;\n /**\n * Adds the current year to the display\n */\n shouldShowYear?: boolean;\n /**\n * Adds the time to the display.\n */\n shouldShowTime?: boolean;\n /**\n * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n */\n shouldShowRelativeDayOfWeek?: boolean;\n /**\n * Shortens the day and month text to maximum three digits\n */\n shouldUseShortText?: boolean;\n /**\n * Adds the day of week to the display\n */\n shouldShowDayOfWeek?: boolean;\n /**\n * Shows the difference from the date to now. The component handles updates itself.\n */\n shouldShowDateToNowDifference?: boolean;\n}\n\nexport const useDateInfo = ({\n date,\n shouldShowDateToNowDifference,\n shouldShowRelativeDayOfWeek,\n shouldShowDayOfWeek,\n shouldShowTime,\n shouldUseShortText,\n shouldShowYear,\n preText,\n}: UseDateInfoOptions) => {\n const [formattedDateString, setFormattedDateString] = useState<string>('');\n const [language] = useState(getLanguage());\n\n const formattedDate = useMemo(() => new Date(date), [date]);\n\n useEffect(() => {\n // This useEffect is used for normal date formation\n if (shouldShowDateToNowDifference) {\n return;\n }\n\n let newFormattedDateString = getFormattedDayOfWeek({\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n date: formattedDate,\n language,\n });\n\n let formatString = 'dd. ';\n\n
|
|
1
|
+
{"version":3,"file":"useDateInfo.js","names":["_dateFns","require","_react","_dateInfo","useDateInfo","date","shouldShowDateToNowDifference","shouldShowRelativeDayOfWeek","shouldShowDayOfWeek","shouldShowTime","shouldUseShortText","shouldShowYear","preText","formattedDateString","setFormattedDateString","useState","language","getLanguage","formattedDate","useMemo","Date","isDateNearToday","isToday","isYesterday","isTomorrow","useEffect","newFormattedDateString","getFormattedDayOfWeek","formatString","getMonthFormat","getYearFormat","format","locale","replace","getFormattedTime","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","isPast","Math","max","timeout","setTimeout","clearTimeout","getTimeTillNow","trim","exports"],"sources":["../../../src/hooks/useDateInfo.ts"],"sourcesContent":["import { format, isPast, isToday, isTomorrow, isYesterday } from 'date-fns';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n getFormattedDayOfWeek,\n getFormattedTime,\n getLanguage,\n getMonthFormat,\n getTimeTillNow,\n getYearFormat,\n} from '../utils/dateInfo';\n\nexport interface UseDateInfoOptions {\n /**\n * The date, that should be displayed\n */\n date: Date | string;\n /**\n * Additional text for \"shouldShowDateToNowDifference\" prop. Writes a text before the calculated time\n */\n preText?: string;\n /**\n * Adds the current year to the display\n */\n shouldShowYear?: boolean;\n /**\n * Adds the time to the display.\n */\n shouldShowTime?: boolean;\n /**\n * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n */\n shouldShowRelativeDayOfWeek?: boolean;\n /**\n * Shortens the day and month text to maximum three digits\n */\n shouldUseShortText?: boolean;\n /**\n * Adds the day of week to the display\n */\n shouldShowDayOfWeek?: boolean;\n /**\n * Shows the difference from the date to now. The component handles updates itself.\n */\n shouldShowDateToNowDifference?: boolean;\n}\n\nexport const useDateInfo = ({\n date,\n shouldShowDateToNowDifference,\n shouldShowRelativeDayOfWeek,\n shouldShowDayOfWeek,\n shouldShowTime,\n shouldUseShortText,\n shouldShowYear,\n preText,\n}: UseDateInfoOptions) => {\n const [formattedDateString, setFormattedDateString] = useState<string>('');\n const [language] = useState(getLanguage());\n\n const formattedDate = useMemo(() => new Date(date), [date]);\n\n const isDateNearToday = isToday(date) || isYesterday(date) || isTomorrow(date);\n\n useEffect(() => {\n // This useEffect is used for normal date formation\n if (shouldShowDateToNowDifference) {\n return;\n }\n\n let newFormattedDateString = getFormattedDayOfWeek({\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n date: formattedDate,\n language,\n });\n\n if (!isDateNearToday || !shouldShowRelativeDayOfWeek || !shouldShowTime) {\n let formatString = 'dd. ';\n\n formatString += `${getMonthFormat({ shouldUseShortText })}`;\n\n formatString += `${getYearFormat({\n date: formattedDate,\n shouldShowYear,\n })}`;\n\n newFormattedDateString += format(formattedDate, formatString, { locale: language });\n } else {\n newFormattedDateString = newFormattedDateString.replace(', ', '');\n }\n\n newFormattedDateString += getFormattedTime({\n date: formattedDate,\n shouldShowTime,\n language,\n });\n\n setFormattedDateString(newFormattedDateString);\n }, [\n date,\n formattedDate,\n language,\n shouldShowDateToNowDifference,\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldShowYear,\n shouldShowTime,\n shouldUseShortText,\n isDateNearToday,\n ]);\n\n // Calculate remaining time till next minute to update time according to time left\n const [currentDate, setCurrentDate] = useState(new Date());\n\n useEffect(() => {\n // This useEffect is for calculating the current date for shouldShowDateToNowDifference option\n if (!shouldShowDateToNowDifference) {\n return () => {};\n }\n\n let timeoutTime = formattedDate.getSeconds() - new Date().getSeconds();\n\n // If the seconds of date are after seconds of current time, the timeoutTime has to be calculated differently\n if (timeoutTime < 0) {\n timeoutTime = 60 - new Date().getSeconds() + formattedDate.getSeconds();\n }\n\n // initialized with remaining time\n let timeDiffInMs = formattedDate.getTime() - currentDate.getTime();\n\n // set to elapsed time\n if (isPast(formattedDate)) {\n timeDiffInMs = currentDate.getTime() - formattedDate.getTime();\n }\n\n // time difference is less than a minute, time should be updated every second\n if (timeDiffInMs < 60000) {\n timeoutTime = 1;\n }\n\n // Set timeoutTime to at least 1000ms\n timeoutTime = Math.max(timeoutTime * 1000, 1000);\n\n const timeout = setTimeout(() => {\n setCurrentDate(new Date());\n }, timeoutTime);\n\n return () => {\n clearTimeout(timeout);\n };\n }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);\n\n useEffect(() => {\n // This useEffect is for showing the difference of the date to now\n if (shouldShowDateToNowDifference) {\n setFormattedDateString(getTimeTillNow({ date: formattedDate, currentDate, language }));\n }\n }, [currentDate, date, formattedDate, language, shouldShowDateToNowDifference]);\n\n return useMemo(\n () => `${preText ? `${preText.trim()} ` : ''}${formattedDateString}`,\n [formattedDateString, preText],\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { format, isPast } from 'date-fns';
|
|
1
|
+
import { format, isPast, isToday, isTomorrow, isYesterday } from 'date-fns';
|
|
2
2
|
import { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { getFormattedDayOfWeek, getFormattedTime, getLanguage, getMonthFormat, getTimeTillNow, getYearFormat } from '../utils/dateInfo';
|
|
4
4
|
export const useDateInfo = _ref => {
|
|
@@ -15,6 +15,7 @@ export const useDateInfo = _ref => {
|
|
|
15
15
|
const [formattedDateString, setFormattedDateString] = useState('');
|
|
16
16
|
const [language] = useState(getLanguage());
|
|
17
17
|
const formattedDate = useMemo(() => new Date(date), [date]);
|
|
18
|
+
const isDateNearToday = isToday(date) || isYesterday(date) || isTomorrow(date);
|
|
18
19
|
useEffect(() => {
|
|
19
20
|
// This useEffect is used for normal date formation
|
|
20
21
|
if (shouldShowDateToNowDifference) {
|
|
@@ -27,24 +28,28 @@ export const useDateInfo = _ref => {
|
|
|
27
28
|
date: formattedDate,
|
|
28
29
|
language
|
|
29
30
|
});
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
31
|
+
if (!isDateNearToday || !shouldShowRelativeDayOfWeek || !shouldShowTime) {
|
|
32
|
+
let formatString = 'dd. ';
|
|
33
|
+
formatString += `${getMonthFormat({
|
|
34
|
+
shouldUseShortText
|
|
35
|
+
})}`;
|
|
36
|
+
formatString += `${getYearFormat({
|
|
37
|
+
date: formattedDate,
|
|
38
|
+
shouldShowYear
|
|
39
|
+
})}`;
|
|
40
|
+
newFormattedDateString += format(formattedDate, formatString, {
|
|
41
|
+
locale: language
|
|
42
|
+
});
|
|
43
|
+
} else {
|
|
44
|
+
newFormattedDateString = newFormattedDateString.replace(', ', '');
|
|
45
|
+
}
|
|
41
46
|
newFormattedDateString += getFormattedTime({
|
|
42
47
|
date: formattedDate,
|
|
43
48
|
shouldShowTime,
|
|
44
49
|
language
|
|
45
50
|
});
|
|
46
51
|
setFormattedDateString(newFormattedDateString);
|
|
47
|
-
}, [date, formattedDate, language, shouldShowDateToNowDifference, shouldShowDayOfWeek, shouldShowRelativeDayOfWeek, shouldShowYear, shouldShowTime, shouldUseShortText]);
|
|
52
|
+
}, [date, formattedDate, language, shouldShowDateToNowDifference, shouldShowDayOfWeek, shouldShowRelativeDayOfWeek, shouldShowYear, shouldShowTime, shouldUseShortText, isDateNearToday]);
|
|
48
53
|
|
|
49
54
|
// Calculate remaining time till next minute to update time according to time left
|
|
50
55
|
const [currentDate, setCurrentDate] = useState(new Date());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDateInfo.js","names":["format","isPast","useEffect","useMemo","useState","getFormattedDayOfWeek","getFormattedTime","getLanguage","getMonthFormat","getTimeTillNow","getYearFormat","useDateInfo","_ref","date","shouldShowDateToNowDifference","shouldShowRelativeDayOfWeek","shouldShowDayOfWeek","shouldShowTime","shouldUseShortText","shouldShowYear","preText","formattedDateString","setFormattedDateString","language","formattedDate","Date","newFormattedDateString","formatString","locale","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","Math","max","timeout","setTimeout","clearTimeout","trim"],"sources":["../../../src/hooks/useDateInfo.ts"],"sourcesContent":["import { format, isPast } from 'date-fns';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n getFormattedDayOfWeek,\n getFormattedTime,\n getLanguage,\n getMonthFormat,\n getTimeTillNow,\n getYearFormat,\n} from '../utils/dateInfo';\n\nexport interface UseDateInfoOptions {\n /**\n * The date, that should be displayed\n */\n date: Date | string;\n /**\n * Additional text for \"shouldShowDateToNowDifference\" prop. Writes a text before the calculated time\n */\n preText?: string;\n /**\n * Adds the current year to the display\n */\n shouldShowYear?: boolean;\n /**\n * Adds the time to the display.\n */\n shouldShowTime?: boolean;\n /**\n * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n */\n shouldShowRelativeDayOfWeek?: boolean;\n /**\n * Shortens the day and month text to maximum three digits\n */\n shouldUseShortText?: boolean;\n /**\n * Adds the day of week to the display\n */\n shouldShowDayOfWeek?: boolean;\n /**\n * Shows the difference from the date to now. The component handles updates itself.\n */\n shouldShowDateToNowDifference?: boolean;\n}\n\nexport const useDateInfo = ({\n date,\n shouldShowDateToNowDifference,\n shouldShowRelativeDayOfWeek,\n shouldShowDayOfWeek,\n shouldShowTime,\n shouldUseShortText,\n shouldShowYear,\n preText,\n}: UseDateInfoOptions) => {\n const [formattedDateString, setFormattedDateString] = useState<string>('');\n const [language] = useState(getLanguage());\n\n const formattedDate = useMemo(() => new Date(date), [date]);\n\n useEffect(() => {\n // This useEffect is used for normal date formation\n if (shouldShowDateToNowDifference) {\n return;\n }\n\n let newFormattedDateString = getFormattedDayOfWeek({\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n date: formattedDate,\n language,\n });\n\n let formatString = 'dd. ';\n\n
|
|
1
|
+
{"version":3,"file":"useDateInfo.js","names":["format","isPast","isToday","isTomorrow","isYesterday","useEffect","useMemo","useState","getFormattedDayOfWeek","getFormattedTime","getLanguage","getMonthFormat","getTimeTillNow","getYearFormat","useDateInfo","_ref","date","shouldShowDateToNowDifference","shouldShowRelativeDayOfWeek","shouldShowDayOfWeek","shouldShowTime","shouldUseShortText","shouldShowYear","preText","formattedDateString","setFormattedDateString","language","formattedDate","Date","isDateNearToday","newFormattedDateString","formatString","locale","replace","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","Math","max","timeout","setTimeout","clearTimeout","trim"],"sources":["../../../src/hooks/useDateInfo.ts"],"sourcesContent":["import { format, isPast, isToday, isTomorrow, isYesterday } from 'date-fns';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n getFormattedDayOfWeek,\n getFormattedTime,\n getLanguage,\n getMonthFormat,\n getTimeTillNow,\n getYearFormat,\n} from '../utils/dateInfo';\n\nexport interface UseDateInfoOptions {\n /**\n * The date, that should be displayed\n */\n date: Date | string;\n /**\n * Additional text for \"shouldShowDateToNowDifference\" prop. Writes a text before the calculated time\n */\n preText?: string;\n /**\n * Adds the current year to the display\n */\n shouldShowYear?: boolean;\n /**\n * Adds the time to the display.\n */\n shouldShowTime?: boolean;\n /**\n * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n */\n shouldShowRelativeDayOfWeek?: boolean;\n /**\n * Shortens the day and month text to maximum three digits\n */\n shouldUseShortText?: boolean;\n /**\n * Adds the day of week to the display\n */\n shouldShowDayOfWeek?: boolean;\n /**\n * Shows the difference from the date to now. The component handles updates itself.\n */\n shouldShowDateToNowDifference?: boolean;\n}\n\nexport const useDateInfo = ({\n date,\n shouldShowDateToNowDifference,\n shouldShowRelativeDayOfWeek,\n shouldShowDayOfWeek,\n shouldShowTime,\n shouldUseShortText,\n shouldShowYear,\n preText,\n}: UseDateInfoOptions) => {\n const [formattedDateString, setFormattedDateString] = useState<string>('');\n const [language] = useState(getLanguage());\n\n const formattedDate = useMemo(() => new Date(date), [date]);\n\n const isDateNearToday = isToday(date) || isYesterday(date) || isTomorrow(date);\n\n useEffect(() => {\n // This useEffect is used for normal date formation\n if (shouldShowDateToNowDifference) {\n return;\n }\n\n let newFormattedDateString = getFormattedDayOfWeek({\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n date: formattedDate,\n language,\n });\n\n if (!isDateNearToday || !shouldShowRelativeDayOfWeek || !shouldShowTime) {\n let formatString = 'dd. ';\n\n formatString += `${getMonthFormat({ shouldUseShortText })}`;\n\n formatString += `${getYearFormat({\n date: formattedDate,\n shouldShowYear,\n })}`;\n\n newFormattedDateString += format(formattedDate, formatString, { locale: language });\n } else {\n newFormattedDateString = newFormattedDateString.replace(', ', '');\n }\n\n newFormattedDateString += getFormattedTime({\n date: formattedDate,\n shouldShowTime,\n language,\n });\n\n setFormattedDateString(newFormattedDateString);\n }, [\n date,\n formattedDate,\n language,\n shouldShowDateToNowDifference,\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldShowYear,\n shouldShowTime,\n shouldUseShortText,\n isDateNearToday,\n ]);\n\n // Calculate remaining time till next minute to update time according to time left\n const [currentDate, setCurrentDate] = useState(new Date());\n\n useEffect(() => {\n // This useEffect is for calculating the current date for shouldShowDateToNowDifference option\n if (!shouldShowDateToNowDifference) {\n return () => {};\n }\n\n let timeoutTime = formattedDate.getSeconds() - new Date().getSeconds();\n\n // If the seconds of date are after seconds of current time, the timeoutTime has to be calculated differently\n if (timeoutTime < 0) {\n timeoutTime = 60 - new Date().getSeconds() + formattedDate.getSeconds();\n }\n\n // initialized with remaining time\n let timeDiffInMs = formattedDate.getTime() - currentDate.getTime();\n\n // set to elapsed time\n if (isPast(formattedDate)) {\n timeDiffInMs = currentDate.getTime() - formattedDate.getTime();\n }\n\n // time difference is less than a minute, time should be updated every second\n if (timeDiffInMs < 60000) {\n timeoutTime = 1;\n }\n\n // Set timeoutTime to at least 1000ms\n timeoutTime = Math.max(timeoutTime * 1000, 1000);\n\n const timeout = setTimeout(() => {\n setCurrentDate(new Date());\n }, timeoutTime);\n\n return () => {\n clearTimeout(timeout);\n };\n }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);\n\n useEffect(() => {\n // This useEffect is for showing the difference of the date to now\n if (shouldShowDateToNowDifference) {\n setFormattedDateString(getTimeTillNow({ date: formattedDate, currentDate, language }));\n }\n }, [currentDate, date, formattedDate, language, shouldShowDateToNowDifference]);\n\n return useMemo(\n () => `${preText ? `${preText.trim()} ` : ''}${formattedDateString}`,\n [formattedDateString, preText],\n );\n};\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,WAAW,QAAQ,UAAU;AAC3E,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SACIC,qBAAqB,EACrBC,gBAAgB,EAChBC,WAAW,EACXC,cAAc,EACdC,cAAc,EACdC,aAAa,QACV,mBAAmB;AAqC1B,OAAO,MAAMC,WAAW,GAAGC,IAAA,IASD;EAAA,IATE;IACxBC,IAAI;IACJC,6BAA6B;IAC7BC,2BAA2B;IAC3BC,mBAAmB;IACnBC,cAAc;IACdC,kBAAkB;IAClBC,cAAc;IACdC;EACgB,CAAC,GAAAR,IAAA;EACjB,MAAM,CAACS,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGlB,QAAQ,CAAS,EAAE,CAAC;EAC1E,MAAM,CAACmB,QAAQ,CAAC,GAAGnB,QAAQ,CAACG,WAAW,CAAC,CAAC,CAAC;EAE1C,MAAMiB,aAAa,GAAGrB,OAAO,CAAC,MAAM,IAAIsB,IAAI,CAACZ,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAE3D,MAAMa,eAAe,GAAG3B,OAAO,CAACc,IAAI,CAAC,IAAIZ,WAAW,CAACY,IAAI,CAAC,IAAIb,UAAU,CAACa,IAAI,CAAC;EAE9EX,SAAS,CAAC,MAAM;IACZ;IACA,IAAIY,6BAA6B,EAAE;MAC/B;IACJ;IAEA,IAAIa,sBAAsB,GAAGtB,qBAAqB,CAAC;MAC/CW,mBAAmB;MACnBD,2BAA2B;MAC3BG,kBAAkB;MAClBL,IAAI,EAAEW,aAAa;MACnBD;IACJ,CAAC,CAAC;IAEF,IAAI,CAACG,eAAe,IAAI,CAACX,2BAA2B,IAAI,CAACE,cAAc,EAAE;MACrE,IAAIW,YAAY,GAAG,MAAM;MAEzBA,YAAY,IAAI,GAAGpB,cAAc,CAAC;QAAEU;MAAmB,CAAC,CAAC,EAAE;MAE3DU,YAAY,IAAI,GAAGlB,aAAa,CAAC;QAC7BG,IAAI,EAAEW,aAAa;QACnBL;MACJ,CAAC,CAAC,EAAE;MAEJQ,sBAAsB,IAAI9B,MAAM,CAAC2B,aAAa,EAAEI,YAAY,EAAE;QAAEC,MAAM,EAAEN;MAAS,CAAC,CAAC;IACvF,CAAC,MAAM;MACHI,sBAAsB,GAAGA,sBAAsB,CAACG,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IACrE;IAEAH,sBAAsB,IAAIrB,gBAAgB,CAAC;MACvCO,IAAI,EAAEW,aAAa;MACnBP,cAAc;MACdM;IACJ,CAAC,CAAC;IAEFD,sBAAsB,CAACK,sBAAsB,CAAC;EAClD,CAAC,EAAE,CACCd,IAAI,EACJW,aAAa,EACbD,QAAQ,EACRT,6BAA6B,EAC7BE,mBAAmB,EACnBD,2BAA2B,EAC3BI,cAAc,EACdF,cAAc,EACdC,kBAAkB,EAClBQ,eAAe,CAClB,CAAC;;EAEF;EACA,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAG5B,QAAQ,CAAC,IAAIqB,IAAI,CAAC,CAAC,CAAC;EAE1DvB,SAAS,CAAC,MAAM;IACZ;IACA,IAAI,CAACY,6BAA6B,EAAE;MAChC,OAAO,MAAM,CAAC,CAAC;IACnB;IAEA,IAAImB,WAAW,GAAGT,aAAa,CAACU,UAAU,CAAC,CAAC,GAAG,IAAIT,IAAI,CAAC,CAAC,CAACS,UAAU,CAAC,CAAC;;IAEtE;IACA,IAAID,WAAW,GAAG,CAAC,EAAE;MACjBA,WAAW,GAAG,EAAE,GAAG,IAAIR,IAAI,CAAC,CAAC,CAACS,UAAU,CAAC,CAAC,GAAGV,aAAa,CAACU,UAAU,CAAC,CAAC;IAC3E;;IAEA;IACA,IAAIC,YAAY,GAAGX,aAAa,CAACY,OAAO,CAAC,CAAC,GAAGL,WAAW,CAACK,OAAO,CAAC,CAAC;;IAElE;IACA,IAAItC,MAAM,CAAC0B,aAAa,CAAC,EAAE;MACvBW,YAAY,GAAGJ,WAAW,CAACK,OAAO,CAAC,CAAC,GAAGZ,aAAa,CAACY,OAAO,CAAC,CAAC;IAClE;;IAEA;IACA,IAAID,YAAY,GAAG,KAAK,EAAE;MACtBF,WAAW,GAAG,CAAC;IACnB;;IAEA;IACAA,WAAW,GAAGI,IAAI,CAACC,GAAG,CAACL,WAAW,GAAG,IAAI,EAAE,IAAI,CAAC;IAEhD,MAAMM,OAAO,GAAGC,UAAU,CAAC,MAAM;MAC7BR,cAAc,CAAC,IAAIP,IAAI,CAAC,CAAC,CAAC;IAC9B,CAAC,EAAEQ,WAAW,CAAC;IAEf,OAAO,MAAM;MACTQ,YAAY,CAACF,OAAO,CAAC;IACzB,CAAC;EACL,CAAC,EAAE,CAACR,WAAW,EAAElB,IAAI,EAAEW,aAAa,EAAEV,6BAA6B,CAAC,CAAC;EAErEZ,SAAS,CAAC,MAAM;IACZ;IACA,IAAIY,6BAA6B,EAAE;MAC/BQ,sBAAsB,CAACb,cAAc,CAAC;QAAEI,IAAI,EAAEW,aAAa;QAAEO,WAAW;QAAER;MAAS,CAAC,CAAC,CAAC;IAC1F;EACJ,CAAC,EAAE,CAACQ,WAAW,EAAElB,IAAI,EAAEW,aAAa,EAAED,QAAQ,EAAET,6BAA6B,CAAC,CAAC;EAE/E,OAAOX,OAAO,CACV,MAAM,GAAGiB,OAAO,GAAG,GAAGA,OAAO,CAACsB,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,GAAGrB,mBAAmB,EAAE,EACpE,CAACA,mBAAmB,EAAED,OAAO,CACjC,CAAC;AACL,CAAC","ignoreList":[]}
|
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.887",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "8f999b0b61f445aa9e897dfae6d355e0a156ba03"
|
|
87
87
|
}
|