@helpwave/hightide/dist/components/date/TimeDisplay.js

helpwave's component and theming library

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/date/TimeDisplay.tsx
var TimeDisplay_exports = {};
__export(TimeDisplay_exports, {
  TimeDisplay: () => TimeDisplay
});
module.exports = __toCommonJS(TimeDisplay_exports);

// src/localization/LanguageProvider.tsx
var import_react2 = require("react");

// src/hooks/useLocalStorage.ts
var import_react = require("react");

// src/localization/util.ts
var languages = ["en", "de"];
var languagesLocalNames = {
  en: "English",
  de: "Deutsch"
};
var DEFAULT_LANGUAGE = "en";
var LanguageUtil = {
  languages,
  DEFAULT_LANGUAGE,
  languagesLocalNames
};

// src/localization/LanguageProvider.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var LanguageContext = (0, import_react2.createContext)({
  language: LanguageUtil.DEFAULT_LANGUAGE,
  setLanguage: (v) => v
});
var useLanguage = () => (0, import_react2.useContext)(LanguageContext);

// src/localization/useTranslation.ts
var TranslationPluralCount = {
  zero: 0,
  one: 1,
  two: 2,
  few: 3,
  many: 11,
  other: -1
};
var useTranslation = (translations, overwriteTranslation = {}) => {
  const { language: languageProp, translation: overwrite } = overwriteTranslation;
  const { language: inferredLanguage } = useLanguage();
  const usedLanguage = languageProp ?? inferredLanguage;
  const usedTranslations = [...translations];
  if (overwrite) {
    usedTranslations.push(overwrite);
  }
  return (key, options) => {
    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
    try {
      for (let i = translations.length - 1; i >= 0; i--) {
        const translation = translations[i];
        const localizedTranslation = translation[usedLanguage];
        if (!localizedTranslation) {
          continue;
        }
        const value = localizedTranslation[key];
        if (!value) {
          continue;
        }
        let forProcessing;
        if (typeof value !== "string") {
          if (count === TranslationPluralCount.zero && value?.zero) {
            forProcessing = value.zero;
          } else if (count === TranslationPluralCount.one && value?.one) {
            forProcessing = value.one;
          } else if (count === TranslationPluralCount.two && value?.two) {
            forProcessing = value.two;
          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
            forProcessing = value.few;
          } else if (count > TranslationPluralCount.many && value?.many) {
            forProcessing = value.many;
          } else {
            forProcessing = value.other;
          }
        } else {
          forProcessing = value;
        }
        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
        });
        return forProcessing;
      }
    } catch (e) {
      console.error(e);
    }
    return `{{${usedLanguage}:${key}}}`;
  };
};

// src/localization/defaults/time.ts
var monthTranslation = {
  en: {
    january: "January",
    february: "Febuary",
    march: "March",
    april: "April",
    may: "May",
    june: "June",
    july: "July",
    august: "August",
    september: "September",
    october: "October",
    november: "November",
    december: "December"
  },
  de: {
    january: "Januar",
    february: "Febuar",
    march: "M\xE4rz",
    april: "April",
    may: "Mai",
    june: "Juni",
    july: "Juli",
    august: "August",
    september: "September",
    october: "October",
    november: "November",
    december: "December"
  }
};
var timeTranslation = {
  en: {
    ...monthTranslation.en,
    century: { one: "Century", other: "Centuries" },
    decade: { one: "Decade", other: "Decades" },
    year: { one: "Year", other: "Years" },
    month: { one: "Month", other: "Months" },
    day: { one: "Day", other: "Days" },
    hour: { one: "Hour", other: "Hours" },
    minute: { one: "Minute", other: "Minutes" },
    second: { one: "Second", other: "Seconds" },
    millisecond: { one: "Millisecond", other: "Milliseconds" },
    microsecond: { one: "Microsecond", other: "Microseconds" },
    nanosecond: { one: "Nanosecond", other: "Nanoseconds" },
    yesterday: "Yesterday",
    today: "Today",
    tomorrow: "Tomorrow",
    in: "in",
    ago: "ago"
  },
  de: {
    ...monthTranslation.de,
    century: { one: "Jahrhundert", other: "Jahrhunderte" },
    decade: { one: "Jahrzehnt", other: "Jahrzehnte" },
    year: { one: "Jahr", other: "Jahre" },
    month: { one: "Monat", other: "Monate" },
    day: { one: "Tag", other: "Tage" },
    hour: { one: "Stunde", other: "Stunden" },
    minute: { one: "Minute", other: "Minuten" },
    second: { one: "Sekunde", other: "Sekunden" },
    millisecond: { one: "Millisekunde", other: "Millisekunden" },
    microsecond: { one: "Mikrosekunde", other: "Mikrosekunden" },
    nanosecond: { one: "Nanosekunde", other: "Nanosekunden" },
    yesterday: "Gestern",
    today: "Heute",
    tomorrow: "Morgen",
    in: "in",
    ago: "vor"
  }
};

// src/components/date/TimeDisplay.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var defaultTimeDisplayTranslations = {
  en: {
    ...timeTranslation.en,
    inDays: `in {{days}} days`,
    agoDays: `{{days}} days ago`
  },
  de: {
    ...timeTranslation.de,
    inDays: `in {{days}} Tagen`,
    agoDays: `vor {{days}} Tagen`
  }
};
var TimeDisplay = ({
  overwriteTranslation,
  date,
  mode = "daysFromToday"
}) => {
  const translation = useTranslation([defaultTimeDisplayTranslations], overwriteTranslation);
  const difference = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
  const isBefore = difference > 0;
  const differenceInDays = Math.floor(Math.abs(difference) / (1e3 * 3600 * 24));
  let displayString;
  if (differenceInDays === 0) {
    displayString = translation("today");
  } else if (differenceInDays === 1) {
    displayString = isBefore ? translation("yesterday") : translation("tomorrow");
  } else {
    displayString = isBefore ? translation("agoDays", { replacements: { days: differenceInDays.toString() } }) : translation("inDays", { replacements: { days: differenceInDays.toString() } });
  }
  const monthToTranslation = {
    0: translation("january"),
    1: translation("february"),
    2: translation("march"),
    3: translation("april"),
    4: translation("may"),
    5: translation("june"),
    6: translation("july"),
    7: translation("august"),
    8: translation("september"),
    9: translation("october"),
    10: translation("november"),
    11: translation("december")
  };
  let fullString;
  if (mode === "daysFromToday") {
    fullString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")} - ${displayString}`;
  } else {
    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
  }
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: fullString });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  TimeDisplay
});
//# sourceMappingURL=TimeDisplay.js.map