@explita/daily-toolset-components
Version:
A lightweight and versatile collection of TypeScript utility functions and form components, inspired by ShadCN UI, designed for seamless everyday development. Enhance your Node.js, React, and Next.js projects with a well-structured suite of helpers for st
199 lines (198 loc) • 9.94 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateInput = DateInput;
const react_1 = __importStar(require("react"));
const FormLabel_1 = require("./FormLabel");
const ClearInput_1 = require("./ClearInput");
const popover_1 = require("../ui/popover");
const Button_1 = require("./Button");
const lu_1 = require("react-icons/lu");
const calendar_1 = require("../ui/calendar");
const InputError_1 = require("./InputError");
const scroll_area_1 = require("../ui/scroll-area");
const daily_toolset_utils_1 = require("@explita/daily-toolset-utils");
const useField_1 = require("../hooks/useField");
function DateInput({ isRequired = true, isDisabled = false, isClearable = true, defaultValue, label, name, error, startDate, endDate, placeholder = "dd/mm/yyyy", onChange, }) {
const { fieldError, fieldValue, setValue } = (0, useField_1.useField)(name);
const [value, setInputValue] = (0, react_1.useState)(defaultValue);
const [open, setOpen] = (0, react_1.useState)(false);
const id = (0, react_1.useId)();
(0, react_1.useEffect)(() => {
const inputValue = name && fieldValue ? fieldValue : undefined;
if (name && inputValue) {
setInputValue(inputValue);
}
}, [fieldValue, name]);
const handleChange = (0, react_1.useCallback)((inputValue) => {
const formatted = (0, daily_toolset_utils_1.formatDate)(inputValue, { format: "YYYY-MM-DD" });
const selected = inputValue === value || !inputValue ? undefined : formatted;
setInputValue(selected);
onChange === null || onChange === void 0 ? void 0 : onChange(selected || "");
setValue(selected);
}, [name, onChange, setValue]);
const handleYearAndMonthChange = (0, react_1.useCallback)((year, month) => {
const date = value ? new Date(value) : new Date();
date.setFullYear(year);
date.setMonth(month);
handleChange(date);
}, [handleChange, value]);
const errorData = error ? error : fieldError || "";
return (react_1.default.createElement("div", { className: "explita-input-root" },
react_1.default.createElement(FormLabel_1.Label, { id: id, label: label, isRequired: isRequired }),
react_1.default.createElement(popover_1.Popover, { open: open, onOpenChange: setOpen },
react_1.default.createElement("div", null,
isClearable && value && !isDisabled && (react_1.default.createElement(ClearInput_1.Clear, { onClick: () => handleChange(undefined) })),
react_1.default.createElement(popover_1.PopoverTrigger, { asChild: true },
react_1.default.createElement(Button_1.Button, { variant: "outline", "data-error": errorData.length > 0, "data-empty": !value, "data-clearable": isClearable && value !== "", className: "date-input", disabled: isDisabled },
react_1.default.createElement(lu_1.LuCalendar, { size: 16 }),
react_1.default.createElement("span", null, value
? (0, daily_toolset_utils_1.formatDate)(value, { format: "Month DD, YYYY" })
: placeholder)))),
react_1.default.createElement(popover_1.PopoverContent, { className: "explita-calendar-content explita-popover-content", align: "start", onPointerDown: (e) => e.stopPropagation(), forceMount: true },
react_1.default.createElement(calendar_1.Calendar, { key: value === null || value === void 0 ? void 0 : value.toString(), mode: "single", selected: value ? new Date(value) : undefined, onSelect: (currentValue) => {
handleChange(currentValue);
setOpen(false);
}, initialFocus: true, fromDate: startDate, toDate: endDate, disabled: isDisabled, defaultMonth: value ? new Date(value) : undefined, classNames: {
root: "explita-calendar-root",
}, captionLabelRenderer: (props) => (react_1.default.createElement(YearPicker, { displayMonth: props.displayMonth, startYear: startDate === null || startDate === void 0 ? void 0 : startDate.getFullYear(), endYear: endDate === null || endDate === void 0 ? void 0 : endDate.getFullYear(), handleYearAndMonthChange: handleYearAndMonthChange })) }))),
react_1.default.createElement(InputError_1.InputError, { message: errorData }),
react_1.default.createElement("input", { type: "hidden", name: name, value: value ? (0, daily_toolset_utils_1.formatDate)(value, { format: "YYYY-MM-DD" }) : "", id: id })));
}
function YearPicker({ displayMonth, startYear, endYear, handleYearAndMonthChange, }) {
const [isYearOpen, setIsYearOpen] = (0, react_1.useState)(false);
const [isMonthOpen, setIsMonthOpen] = (0, react_1.useState)(false);
const [selectedYear, setSelectedYear] = (0, react_1.useState)(displayMonth
? new Date(displayMonth).getFullYear()
: new Date().getFullYear());
if (typeof displayMonth === "string") {
displayMonth = new Date(displayMonth);
}
if (displayMonth === undefined) {
displayMonth = new Date();
}
const years = (0, react_1.useMemo)(() => {
const start = Number(startYear) || 1950;
const end = Number(endYear) || new Date().getFullYear() + 10;
const yearsList = [];
for (let i = end; i >= start; i--) {
yearsList.push(i);
}
return yearsList;
}, [startYear, endYear]);
function handleSelectYear(year) {
setSelectedYear(year);
setIsYearOpen(!isYearOpen);
setIsMonthOpen(!isMonthOpen);
}
function handleSelectMonth(month) {
handleYearAndMonthChange(selectedYear, month);
setIsMonthOpen(!isMonthOpen);
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { role: "button", className: "year-picker-label", "aria-expanded": isYearOpen, onClick: () => setIsYearOpen(!isYearOpen) },
months[displayMonth.getMonth()].label,
" ",
displayMonth.getFullYear()),
react_1.default.createElement("div", { className: "year-picker-root", "data-open": isYearOpen },
react_1.default.createElement("span", { role: "button", className: "title", onClick: () => setIsYearOpen(!isYearOpen) }, "Select Year"),
react_1.default.createElement(scroll_area_1.ScrollArea, { className: "year-picker-scroll-area" },
react_1.default.createElement("div", { className: "items" }, years.map((year) => (react_1.default.createElement("span", { role: "button", key: year, className: "item", "data-active": displayMonth.getFullYear() === year, onClick: () => handleSelectYear(year) }, year)))))),
react_1.default.createElement(MonthPicker, { displayMonth: displayMonth, handleSelectMonth: handleSelectMonth, isMonthOpen: isMonthOpen })));
}
const months = [
{
value: 0,
label: "Jan",
},
{
value: 1,
label: "Feb",
},
{
value: 2,
label: "Mar",
},
{
value: 3,
label: "Apr",
},
{
value: 4,
label: "May",
},
{
value: 5,
label: "Jun",
},
{
value: 6,
label: "Jul",
},
{
value: 7,
label: "Aug",
},
{
value: 8,
label: "Sep",
},
{
value: 9,
label: "Oct",
},
{
value: 10,
label: "Nov",
},
{
value: 11,
label: "Dec",
},
];
function MonthPicker({ displayMonth, handleSelectMonth, isMonthOpen = false, }) {
if (typeof displayMonth === "string") {
displayMonth = new Date(displayMonth);
}
if (displayMonth === undefined) {
displayMonth = new Date();
}
return (react_1.default.createElement("div", { className: "year-picker-root", "data-open": isMonthOpen },
react_1.default.createElement("span", { role: "button", className: "title" }, "Select Month"),
react_1.default.createElement(scroll_area_1.ScrollArea, { className: "year-picker-scroll-area" },
react_1.default.createElement("div", { className: "items" }, months.map((month) => (react_1.default.createElement("span", { role: "button", key: month.value, className: "item", "data-active": (displayMonth === null || displayMonth === void 0 ? void 0 : displayMonth.getMonth()) === month.value, onClick: () => {
handleSelectMonth(month.value);
} }, month.label)))))));
}