@chayns-components/core 5.0.0-beta.21 → 5.0.0-beta.211

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js

@@ -1,66 +1,117 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = void 0;
-
 var _framerMotion = require("framer-motion");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _alignment = require("../constants/alignment");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 2px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ", ";\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 2px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ", "\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n"])), function (_ref) {
-  var theme = _ref.theme;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
   return theme['001'];
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.text;
-}, function (_ref3) {
-  var position = _ref3.position;
-
+}};
+    position: absolute;
+    z-index: 0;
+
+    ::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-bottom-right-radius: 3px;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+
+        ${_ref3 => {
+  let {
+    position
+  } = _ref3;
   switch (position) {
     case _alignment.ContextMenuAlignment.TopLeft:
-      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        bottom: -8px;
+                        right: 13px;
+                        transform: rotate(45deg);
+                    `;
     case _alignment.ContextMenuAlignment.BottomLeft:
-      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        top: -8px;
+                        right: 13px;
+                        transform: rotate(225deg);
+                    `;
     case _alignment.ContextMenuAlignment.TopRight:
-      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        transform: rotate(45deg);
+                        bottom: -8px;
+                        left: 13px;
+                    `;
     case _alignment.ContextMenuAlignment.BottomRight:
-      return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    "])));
-
+      return (0, _styledComponents.css)`
+                        transform: rotate(225deg);
+                        top: -8px;
+                        left: 13px;
+                    `;
     default:
       return undefined;
   }
-});
+}}
+    }
+
+    ::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
 exports.StyledMotionContextMenuContent = StyledMotionContextMenuContent;
-
-var StyledContextMenuContentItem = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ", ";\n    }\n"])), function (_ref4) {
-  var theme = _ref4.theme;
+const StyledContextMenuContentItem = _styledComponents.default.div`
+    cursor: pointer;
+    display: flex;
+    padding: 5px 8px 5px 5px;
+    transition: background-color 0.3s ease;
+
+    :hover {
+        background-color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme['secondary-103'];
-});
-
+}};
+    }
+`;
 exports.StyledContextMenuContentItem = StyledContextMenuContentItem;
-
-var StyledContextMenuContentItemIconWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n"])));
-
+const StyledContextMenuContentItemIconWrapper = _styledComponents.default.div`
+    flex: 0 0 auto;
+    margin: 0 8px 0 3px;
+    width: 20px;
+`;
 exports.StyledContextMenuContentItemIconWrapper = StyledContextMenuContentItemIconWrapper;
-
-var StyledContextMenuContentItemText = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    white-space: nowrap;\n"])));
-
+const StyledContextMenuContentItemText = _styledComponents.default.div`
+    flex: 0 0 auto;
+    white-space: nowrap;
+`;
 exports.StyledContextMenuContentItemText = StyledContextMenuContentItemText;
 //# sourceMappingURL=ContextMenuContent.styles.js.map

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"names":["StyledMotionContextMenuContent","motion","div","theme","text","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","styled","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAMO,IAAMA,8BAA8B,GAAG,+BAC1CC,qBAAOC,GADmC,CAAH,82BAGnB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,KAAD,CAAzD;AAAA,CAHmB,EAO9B;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAAoDA,KAAK,CAACC,IAA1D;AAAA,CAP8B,EAuBjC,iBAAkB;AAAA,MAAfC,QAAe,SAAfA,QAAe;;AAChB,UAAQA,QAAR;AACI,SAAKC,gCAAqBC,OAA1B;AACI,iBAAOC,qBAAP;;AAKJ,SAAKF,gCAAqBG,UAA1B;AACI,iBAAOD,qBAAP;;AAKJ,SAAKF,gCAAqBI,QAA1B;AACI,iBAAOF,qBAAP;;AAKJ,SAAKF,gCAAqBK,WAA1B;AACI,iBAAOH,qBAAP;;AAKJ;AACI,aAAOI,SAAP;AA1BR;AA4BH,CApDkC,CAApC;;;AAqEA,IAAMC,4BAA4B,GAAGC,0BAAOZ,GAAV,wPAOb;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,SAChBA,KAAK,CAAC,eAAD,CADW;AAAA,CAPa,CAAlC;;;;AAYA,IAAMY,uCAAuC,GAAGD,0BAAOZ,GAAV,0IAA7C;;;;AAMA,IAAMc,gCAAgC,GAAGF,0BAAOZ,GAAV,wHAAtC","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 2px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 2px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ position }) => {\n            switch (position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"file":"ContextMenuContent.styles.js"}
+{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionContextMenuContent","styled","motion","div","_ref","theme","_ref2","text","_ref3","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","exports","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n    position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n    motion.div\n)<StyledMotionContextMenuContentProps>`\n    background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ position }) => {\n            switch (position) {\n                case ContextMenuAlignment.TopLeft:\n                    return css`\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case ContextMenuAlignment.BottomLeft:\n                    return css`\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case ContextMenuAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    `;\n                case ContextMenuAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n    cursor: pointer;\n    display: flex;\n    padding: 5px 8px 5px 5px;\n    transition: background-color 0.3s ease;\n\n    :hover {\n        background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n            theme['secondary-103']};\n    }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n    flex: 0 0 auto;\n    margin: 0 8px 0 3px;\n    width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n"],"mappings":"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"}

package/lib/components/date-info/DateInfo.d.ts

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+export type DateInfoProps = {
+    /**
+     * The date, that should be displayed
+     */
+    date: Date | string;
+    /**
+     * Additional text for "shouldShowDateToNowDifference" prop. Writes a text before the calculated time
+     */
+    preText?: string;
+    /**
+     * Adds the current year to the display
+     */
+    shouldShowThisYear?: boolean;
+    /**
+     * Adds the time to the display.
+     * NOTE: The time is display with german text
+     */
+    shouldShowTime?: boolean;
+    /**
+     * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).
+     * NOTE: The text is only available in german
+     */
+    shouldShowRelativeDayOfWeek?: boolean;
+    /**
+     * Shortens the day and month text to maximum three digits
+     */
+    shouldUseShortText?: boolean;
+    /**
+     * Adds the day of week to the display
+     */
+    shouldShowDayOfWeek?: boolean;
+    /**
+     * Shows the difference from the date to now. The component handles updates itself.
+     * NOTE: This option is only available in german
+     */
+    shouldShowDateToNowDifference?: boolean;
+};
+declare const DateInfo: FC<DateInfoProps>;
+export default DateInfo;

package/lib/components/date-info/DateInfo.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dateFns = require("date-fns");
+var _react = _interopRequireWildcard(require("react"));
+var _format = require("./utils/format");
+var _language = require("./utils/language");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const DateInfo = _ref => {
+  let {
+    date,
+    preText = '',
+    shouldShowThisYear,
+    shouldShowTime,
+    shouldShowRelativeDayOfWeek,
+    shouldUseShortText,
+    shouldShowDayOfWeek,
+    shouldShowDateToNowDifference
+  } = _ref;
+  const [formattedDate, setFormattedDate] = (0, _react.useState)(new Date(date));
+  const [formattedDateString, setFormattedDateString] = (0, _react.useState)('');
+  const [language] = (0, _react.useState)((0, _language.getLanguage)());
+  (0, _react.useEffect)(() => {
+    // This useEffect is used for normal date formation
+    if (shouldShowDateToNowDifference) {
+      return;
+    }
+    let newFormattedDateString = (0, _format.getFormattedDayOfWeek)({
+      shouldShowDayOfWeek,
+      shouldShowRelativeDayOfWeek,
+      shouldUseShortText,
+      date: formattedDate
+    });
+    let formatString = 'dd. ';
+    formatString += `${(0, _format.getMonthFormat)({
+      shouldUseShortText
+    })}`;
+    formatString += `${(0, _format.getYearFormat)({
+      date: formattedDate,
+      shouldShowThisYear
+    })}`;
+    newFormattedDateString += (0, _dateFns.format)(formattedDate, formatString, {
+      locale: language
+    });
+    newFormattedDateString += (0, _format.getFormattedTime)({
+      date: formattedDate,
+      shouldShowTime
+    });
+    setFormattedDateString(newFormattedDateString);
+  }, [date, formattedDate, language, shouldShowDateToNowDifference, shouldShowDayOfWeek, shouldShowRelativeDayOfWeek, shouldShowThisYear, shouldShowTime, shouldUseShortText]);
+
+  // Calculate remaining time till next minute to update time according to time left
+  const [currentDate, setCurrentDate] = (0, _react.useState)(new Date());
+  (0, _react.useEffect)(() => {
+    // This useEffect is for calculating the current date for shouldShowDateToNowDifference option
+    if (!shouldShowDateToNowDifference) {
+      return () => {};
+    }
+    let timeoutTime = formattedDate.getSeconds() - new Date().getSeconds();
+
+    // If the seconds of date are after seconds of current time, the timeoutTime has to be calculated differently
+    if (timeoutTime < 0) {
+      timeoutTime = 60 - new Date().getSeconds() + formattedDate.getSeconds();
+    }
+
+    // initialized with remaining time
+    let timeDiffInMs = formattedDate.getTime() - currentDate.getTime();
+
+    // set to elapsed time
+    if ((0, _dateFns.isPast)(formattedDate)) {
+      timeDiffInMs = currentDate.getTime() - formattedDate.getTime();
+    }
+
+    // time difference is less than a minute, time should be updated every second
+    if (timeDiffInMs < 60000) {
+      timeoutTime = 1;
+    }
+
+    // Set timeoutTime to at least 1000ms
+    timeoutTime = Math.max(timeoutTime * 1000, 1000);
+    const timeout = setTimeout(() => {
+      setCurrentDate(new Date());
+    }, timeoutTime);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);
+  (0, _react.useEffect)(() => {
+    // This useEffect is for showing the difference of the date to now
+    if (shouldShowDateToNowDifference) {
+      setFormattedDateString((0, _format.getTimeTillNow)({
+        date: formattedDate,
+        currentDate
+      }));
+    }
+  }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);
+  (0, _react.useEffect)(() => {
+    setFormattedDate(new Date(date));
+  }, [date]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", null, preText.trim(), " ", formattedDateString), [formattedDateString, preText]);
+};
+DateInfo.displayName = 'DateInfo';
+var _default = DateInfo;
+exports.default = _default;
+//# sourceMappingURL=DateInfo.js.map

package/lib/components/date-info/DateInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInfo.js","names":["_dateFns","require","_react","_interopRequireWildcard","_format","_language","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","DateInfo","_ref","date","preText","shouldShowThisYear","shouldShowTime","shouldShowRelativeDayOfWeek","shouldUseShortText","shouldShowDayOfWeek","shouldShowDateToNowDifference","formattedDate","setFormattedDate","useState","Date","formattedDateString","setFormattedDateString","language","getLanguage","useEffect","newFormattedDateString","getFormattedDayOfWeek","formatString","getMonthFormat","getYearFormat","format","locale","getFormattedTime","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","isPast","Math","max","timeout","setTimeout","clearTimeout","getTimeTillNow","useMemo","createElement","trim","displayName","_default","exports"],"sources":["../../../src/components/date-info/DateInfo.tsx"],"sourcesContent":["import { format, isPast } from 'date-fns';\nimport React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n    getFormattedDayOfWeek,\n    getFormattedTime,\n    getMonthFormat,\n    getTimeTillNow,\n    getYearFormat,\n} from './utils/format';\nimport { getLanguage } from './utils/language';\n\nexport type DateInfoProps = {\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    shouldShowThisYear?: boolean;\n    /**\n     * Adds the time to the display.\n     * NOTE: The time is display with german text\n     */\n    shouldShowTime?: boolean;\n    /**\n     * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n     * NOTE: The text is only available in german\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     * NOTE: This option is only available in german\n     */\n    shouldShowDateToNowDifference?: boolean;\n};\n\nconst DateInfo: FC<DateInfoProps> = ({\n    date,\n    preText = '',\n    shouldShowThisYear,\n    shouldShowTime,\n    shouldShowRelativeDayOfWeek,\n    shouldUseShortText,\n    shouldShowDayOfWeek,\n    shouldShowDateToNowDifference,\n}) => {\n    const [formattedDate, setFormattedDate] = useState(new Date(date));\n    const [formattedDateString, setFormattedDateString] = useState<string>('');\n    const [language] = useState(getLanguage());\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        });\n\n        let formatString = 'dd. ';\n\n        formatString += `${getMonthFormat({ shouldUseShortText })}`;\n\n        formatString += `${getYearFormat({\n            date: formattedDate,\n            shouldShowThisYear,\n        })}`;\n\n        newFormattedDateString += format(formattedDate, formatString, { locale: language });\n\n        newFormattedDateString += getFormattedTime({ date: formattedDate, shouldShowTime });\n\n        setFormattedDateString(newFormattedDateString);\n    }, [\n        date,\n        formattedDate,\n        language,\n        shouldShowDateToNowDifference,\n        shouldShowDayOfWeek,\n        shouldShowRelativeDayOfWeek,\n        shouldShowThisYear,\n        shouldShowTime,\n        shouldUseShortText,\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 }));\n        }\n    }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);\n\n    useEffect(() => {\n        setFormattedDate(new Date(date));\n    }, [date]);\n\n    return useMemo(\n        () => (\n            <div>\n                {preText.trim()} {formattedDateString}\n            </div>\n        ),\n        [formattedDateString, preText]\n    );\n};\n\nDateInfo.displayName = 'DateInfo';\n\nexport default DateInfo;\n"],"mappings":"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"}

package/lib/components/date-info/utils/format.d.ts

@@ -0,0 +1,43 @@
+interface GetFormattedYearOptions {
+    date: Date;
+    shouldShowThisYear?: boolean;
+}
+export declare const getYearFormat: ({ date, shouldShowThisYear }: GetFormattedYearOptions) => "" | " yyyy";
+interface GetFormattedMonthOptions {
+    shouldUseShortText?: boolean;
+}
+export declare const getMonthFormat: ({ shouldUseShortText }: GetFormattedMonthOptions) => "LLL." | "LLLL";
+interface GetFormattedDayOfWeekOptions {
+    shouldShowDayOfWeek?: boolean;
+    shouldShowRelativeDayOfWeek?: boolean;
+    shouldUseShortText?: boolean;
+    date: Date;
+}
+export declare const getFormattedDayOfWeek: ({ shouldShowRelativeDayOfWeek, shouldShowDayOfWeek, shouldUseShortText, date, }: GetFormattedDayOfWeekOptions) => string;
+interface GetFormattedTimeOptions {
+    shouldShowTime?: boolean;
+    date: Date;
+}
+export declare const getFormattedTime: ({ shouldShowTime, date }: GetFormattedTimeOptions) => string;
+export interface Time {
+    value: number;
+    type: TimeType;
+    isPast: boolean;
+}
+export declare enum TimeType {
+    Seconds = 0,
+    Minutes = 1,
+    Hours = 2,
+    Days = 3,
+    Weeks = 4,
+    Months = 5,
+    Years = 6
+}
+interface GetTimeTillNowOptions {
+    date: Date;
+    currentDate: Date;
+}
+export declare const getTimeTillNow: ({ date, currentDate }: GetTimeTillNowOptions) => string;
+export declare const getFormattedPastTimeString: (time: Time) => string;
+export declare const getFormattedFutureTimeString: (time: Time) => string;
+export {};