@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
73 lines (72 loc) • 3.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimePicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Icon_1 = require("../Icon");
require("./TimePicker.css");
const TimePicker = ({ value: controlledValue, defaultValue = '', onChange, format = '24h', placeholder = 'Seleccionar hora', disabled = false, error = false, className = '', }) => {
const isControlled = controlledValue !== undefined;
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const containerRef = (0, react_1.useRef)(null);
const value = isControlled ? controlledValue : internalValue;
(0, react_1.useEffect)(() => {
const handleClickOutside = (e) => {
if (containerRef.current && !containerRef.current.contains(e.target)) {
setIsOpen(false);
}
};
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}
}, [isOpen]);
const handleTimeSelect = (time) => {
if (!isControlled) {
setInternalValue(time);
}
onChange === null || onChange === void 0 ? void 0 : onChange(time);
setIsOpen(false);
};
const generateTimes = () => {
const times = [];
const maxHours = format === '12h' ? 12 : 24;
for (let h = 0; h < maxHours; h++) {
for (let m = 0; m < 60; m += 15) {
const hour = format === '12h' ? (h === 0 ? 12 : h) : h;
const hourStr = hour.toString().padStart(2, '0');
const minStr = m.toString().padStart(2, '0');
times.push(`${hourStr}:${minStr}`);
}
}
return times;
};
const formatDisplayTime = (time) => {
if (!time)
return '';
if (format === '12h') {
const [hours, minutes] = time.split(':');
const h = parseInt(hours);
const period = h >= 12 ? 'PM' : 'AM';
const displayHour = h === 0 ? 12 : h > 12 ? h - 12 : h;
return `${displayHour}:${minutes} ${period}`;
}
return time;
};
const rootClassName = [
'ds-timepicker',
error && 'ds-timepicker--error',
disabled && 'ds-timepicker--disabled',
className,
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: rootClassName, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "ds-timepicker__input", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: value ? 'ds-timepicker__value' : 'ds-timepicker__placeholder', children: value ? formatDisplayTime(value) : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "clock", size: 20 })] }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: "ds-timepicker__dropdown", children: (0, jsx_runtime_1.jsx)("div", { className: "ds-timepicker__list", children: generateTimes().map((time) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: [
'ds-timepicker__option',
value === time && 'ds-timepicker__option--selected',
]
.filter(Boolean)
.join(' '), onClick: () => handleTimeSelect(time), children: formatDisplayTime(time) }, time))) }) }))] }));
};
exports.TimePicker = TimePicker;