@helpwave/hightide
Version:
helpwave's component and theming library
283 lines (273 loc) • 11.4 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/date/YearMonthPicker.tsx
var YearMonthPicker_exports = {};
__export(YearMonthPicker_exports, {
ControlledYearMonthPicker: () => ControlledYearMonthPicker,
YearMonthPicker: () => YearMonthPicker
});
module.exports = __toCommonJS(YearMonthPicker_exports);
var import_react4 = require("react");
var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
// src/util/noop.ts
var noop = () => void 0;
// src/util/array.ts
var equalSizeGroups = (array, groupSize) => {
if (groupSize <= 0) {
console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
return [[...array]];
}
const groups = [];
for (let i = 0; i < array.length; i += groupSize) {
groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
}
return groups;
};
var range = (start, end, allowEmptyRange = false) => {
if (end < start) {
if (!allowEmptyRange) {
console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
}
return [];
}
return Array.from({ length: end - start + 1 }, (_, index) => index + start);
};
// src/components/date/YearMonthPicker.tsx
var import_clsx2 = __toESM(require("clsx"));
// src/components/Expandable.tsx
var import_react = require("react");
var import_lucide_react = require("lucide-react");
var import_clsx = __toESM(require("clsx"));
var import_jsx_runtime = require("react/jsx-runtime");
var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
var Expandable = (0, import_react.forwardRef)(({
children,
label,
icon,
initialExpansion = false,
clickOnlyOnHeader = true,
className = "",
headerClassName = ""
}, ref) => {
const [isExpanded, setIsExpanded] = (0, import_react.useState)(initialExpansion);
icon ??= DefaultIcon;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
ref,
className: (0, import_clsx.default)("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"button",
{
className: (0, import_clsx.default)("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col", children })
]
}
);
});
Expandable.displayName = "Expandable";
// src/util/date.ts
var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
var changeDuration = (date, duration, isAdding) => {
const {
years = 0,
months = 0,
days = 0,
hours = 0,
minutes = 0,
seconds = 0,
milliseconds = 0
} = duration;
if (years < 0) {
console.error(`Range error years must be greater than 0: received ${years}`);
return new Date(date);
}
if (months < 0 || months > 11) {
console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
return new Date(date);
}
if (days < 0) {
console.error(`Range error days must be greater than 0: received ${days}`);
return new Date(date);
}
if (hours < 0 || hours > 23) {
console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
return new Date(date);
}
if (minutes < 0 || minutes > 59) {
console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
return new Date(date);
}
if (seconds < 0 || seconds > 59) {
console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
return new Date(date);
}
if (milliseconds < 0) {
console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
return new Date(date);
}
const multiplier = isAdding ? 1 : -1;
const newDate = new Date(date);
newDate.setFullYear(newDate.getFullYear() + multiplier * years);
newDate.setMonth(newDate.getMonth() + multiplier * months);
newDate.setDate(newDate.getDate() + multiplier * days);
newDate.setHours(newDate.getHours() + multiplier * hours);
newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
return newDate;
};
var addDuration = (date, duration) => {
return changeDuration(date, duration, true);
};
var subtractDuration = (date, duration) => {
return changeDuration(date, duration, false);
};
// src/hooks/useLanguage.tsx
var import_react3 = require("react");
// src/hooks/useLocalStorage.tsx
var import_react2 = require("react");
// src/hooks/useLanguage.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var DEFAULT_LANGUAGE = "en";
var LanguageContext = (0, import_react3.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
var useLanguage = () => (0, import_react3.useContext)(LanguageContext);
var useLocale = (overWriteLanguage) => {
const { language } = useLanguage();
const mapping = {
en: "en-US",
de: "de-DE"
};
return mapping[overWriteLanguage ?? language];
};
// src/components/date/YearMonthPicker.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var YearMonthPicker = ({
displayedYearMonth = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
onChange = noop,
className = "",
maxHeight = 300,
showValueOpen = true
}) => {
const locale = useLocale();
const ref = (0, import_react4.useRef)(null);
(0, import_react4.useEffect)(() => {
const scrollToItem = () => {
if (ref.current) {
ref.current.scrollIntoView({
behavior: "instant",
block: "center"
});
}
};
scrollToItem();
}, [ref]);
if (end < start) {
console.error(`startYear: (${start}) less than endYear: (${end})`);
return null;
}
const years = range(start.getFullYear(), end.getFullYear());
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx2.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
const selectedYear = displayedYearMonth.getFullYear() === year;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Expandable,
{
ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
label: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)({ "text-primary font-bold": selectedYear }), children: year }),
initialExpansion: showValueOpen && selectedYear,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row", children: monthList.map((month) => {
const monthIndex = monthsList.indexOf(month);
const newDate = new Date(year, monthIndex);
const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
const firstOfMonth = new Date(year, monthIndex, 1);
const lastOfMonth = new Date(year, monthIndex, 1);
const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
const isBeforeEnd = end === void 0 || firstOfMonth <= end;
const isValid = isAfterStart && isBeforeEnd;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
disabled: !isValid,
className: (0, import_clsx2.default)(
"chip hover:brightness-95 flex-1",
{
"bg-gray-50 text-black": !selectedMonth && isValid,
"bg-primary text-on-primary": selectedMonth && isValid,
"bg-disabled-background text-disabled-text": !isValid
}
),
onClick: () => {
onChange(newDate);
},
children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
},
month
);
}) }, index)) })
},
year
);
}) }) }) });
};
var ControlledYearMonthPicker = ({
displayedYearMonth = /* @__PURE__ */ new Date(),
onChange = noop,
...props
}) => {
const [yearMonth, setYearMonth] = (0, import_react4.useState)(displayedYearMonth);
(0, import_react4.useEffect)(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
YearMonthPicker,
{
displayedYearMonth: yearMonth,
onChange: (date) => {
setYearMonth(date);
onChange(date);
},
...props
}
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ControlledYearMonthPicker,
YearMonthPicker
});
//# sourceMappingURL=YearMonthPicker.js.map