phx-react
Version:
PHX REACT
92 lines • 6.62 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Button_1 = require("../Button");
var defaultDaysOfWeek = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
var PHXTabDate = function (_a) {
var _b = _a.daysOfWeek, daysOfWeek = _b === void 0 ? defaultDaysOfWeek : _b, onChangeTime = _a.onChangeTime, timelineProp = _a.timeline, _c = _a.windowSize, windowSize = _c === void 0 ? 8 : _c;
// tự build 30 ngày trước + hôm nay
var buildDefaultTimeline = function () {
function getPreviousDays(baseDate, n) {
var result = [];
for (var i = n; i >= 1; i--) {
var d = new Date(baseDate);
d.setDate(baseDate.getDate() - i);
var dayOfWeek = d.getDay();
result.push({
title: daysOfWeek[dayOfWeek],
date: "".concat(d.getDate(), "/").concat(d.getMonth() + 1),
time: d
});
}
return result;
}
var today = new Date();
var past = getPreviousDays(today, 30);
// hôm nay vẫn giữ thứ
var todayDayOfWeek = today.getDay();
past.push({
title: daysOfWeek[todayDayOfWeek],
date: "".concat(today.getDate(), "/").concat(today.getMonth() + 1),
time: today
});
return past;
};
var timeline = timelineProp || buildDefaultTimeline();
var todayIndex = timeline.findIndex(function (t) { return t.time.toDateString() === new Date().toDateString(); }); // dùng date thực sự để tìm hôm nay
var initialStartIndex = Math.max(todayIndex - (windowSize - 1), 0);
var _d = (0, react_1.useState)(initialStartIndex), startIndex = _d[0], setStartIndex = _d[1];
var _e = (0, react_1.useState)(todayIndex), activeIndex = _e[0], setActiveIndex = _e[1];
var visibleDays = timeline.slice(startIndex, startIndex + windowSize);
// nút trái
var handlePrevClick = function () {
if (startIndex - 1 >= 0) {
var newIndex = startIndex - 1;
setStartIndex(newIndex);
var newActiveTime = timeline[newIndex].time;
setActiveIndex(newIndex);
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(newActiveTime);
}
};
// nút phải
var handleNextClick = function () {
if (startIndex + windowSize < timeline.length) {
setStartIndex(function (prev) { return prev + 1; });
}
};
var handleClickToday = function () {
// set lại activeIndex về hôm nay
setActiveIndex(todayIndex);
// tính lại startIndex
var newStartIndex = Math.max(todayIndex - (windowSize - 1), 0);
setStartIndex(newStartIndex);
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(new Date());
};
return (react_1["default"].createElement("div", null,
react_1["default"].createElement(Button_1.PHXButton, { iconPosition: 'before', onClick: handleClickToday, secondary: true, size: 'extra-micro', typeIcon: 'calendar', className: 'mb-3' }, "H\u00F4m nay"),
react_1["default"].createElement("div", { className: 'flex w-full overflow-x-auto xl:overflow-x-visible items-center' },
react_1["default"].createElement("button", { className: '\n mr-1 flex h-[80px] w-[40px] flex-shrink-0 items-center justify-center \n rounded-lg border border-gray-300 bg-white hover:bg-gray-200\n disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400\n ',
// chỉ check startIndex === 0 để disable
disabled: startIndex === 0, onClick: handlePrevClick },
react_1["default"].createElement("svg", { fill: 'none', height: '24', stroke: 'currentColor', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
react_1["default"].createElement("path", { d: 'M15 18L9 12L15 6', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' }))),
react_1["default"].createElement("div", { className: 'flex flex-1' }, visibleDays.map(function (item, index) {
var globalIndex = startIndex + index;
var isActive = activeIndex === globalIndex;
return (react_1["default"].createElement("div", { key: globalIndex, className: 'min-w-[120px] flex-shrink-0 sm:flex-1 xl:min-w-0' },
react_1["default"].createElement("button", { className: "".concat(index === 0 && 'rounded-l-lg border-l', " \n ").concat(index === visibleDays.length - 1 && 'rounded-r-lg', " \n h-[80px] w-full border-b border-r border-t border-gray-300 bg-white px-3 py-2 hover:bg-gray-100"), onClick: function () {
setActiveIndex(globalIndex);
onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(item.time);
} }, isActive ? (react_1["default"].createElement("div", { className: 'flex h-full w-full flex-col items-center justify-center rounded-lg bg-gray-900 text-white' },
react_1["default"].createElement("span", { className: 'text-sm' }, item.title),
react_1["default"].createElement("p", { className: 'text-base font-medium' }, item.date))) : (react_1["default"].createElement("div", { className: 'flex h-full w-full flex-col items-center justify-center' },
react_1["default"].createElement("span", { className: 'text-sm text-gray-600' }, item.title),
react_1["default"].createElement("p", { className: 'text-base font-medium text-gray-900' }, item.date))))));
})),
startIndex !== initialStartIndex && (react_1["default"].createElement("button", { className: 'ml-1 flex h-[80px] w-[40px] flex-shrink-0 items-center justify-center \n rounded-lg border border-gray-300 bg-white hover:bg-gray-200', onClick: handleNextClick },
react_1["default"].createElement("svg", { fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
react_1["default"].createElement("path", { d: 'M9 18L15 12L9 6', stroke: '#4A4A4A', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })))))));
};
exports["default"] = PHXTabDate;
//# sourceMappingURL=PHXTabDate.js.map