glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
190 lines (184 loc) • 8.27 kB
JavaScript
;
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _WeekCalenderModule = _interopRequireDefault(require("./WeekCalender.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const WeekCalender = _ref => {
let {
setWeekDays,
setDate,
onWeekNumberChange,
onSetYearChange,
selectedYear,
containerClassName,
buttonClassName
} = _ref;
const weekNumberRef = (0, _react.useRef)();
const [weekNumber, setWeekNumber] = (0, _react.useState)();
const [year, setYear] = (0, _react.useState)(new Date().getFullYear());
const [currentWeekNumber, setCurrentWeekNumber] = (0, _react.useState)();
/**
* Handles the action to move to the previous week, if available.
*/
const previousDateHanlder = () => {
if (weekNumber !== 1) {
onWeekNumberChange && onWeekNumberChange(weekNumber - 1);
setWeekNumber(weekNumber - 1);
}
};
/**
* Updates the year based on the value from the event target.
*
* @param {Event} e - The event object containing the new year value.
* @returns {void}
*/
const getYear = e => {
var _e$target, _e$target2;
setYear((e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) * 1);
onSetYearChange && onSetYearChange((e === null || e === void 0 || (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) * 1);
};
/**
* Handles the action to move to the next week, if available.
*/
const nextDateHandler = () => {
if (weekNumber !== 52) {
onWeekNumberChange && onWeekNumberChange(weekNumber + 1);
setWeekNumber(weekNumber + 1);
}
};
/**
* Calculates and returns the current week number.
*
* @returns {number} The current week number.
*/
const currentWeekNumberHandler = () => {
let d = new Date();
d.setHours(0, 0, 0, 0);
d.setDate(d.getDate() + 4 - (d.getDay() || 7));
let yearStart = new Date(d.getFullYear(), 0, 1);
let weekNo = Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
onWeekNumberChange && onWeekNumberChange(weekNo);
setWeekNumber(weekNo);
return weekNo;
};
/**
* Updates the week number based on the value from the event target.
*
* @param {Event} e - The event object containing the new week number value.
* @returns {void}
*/
const getWeekNumbers = e => {
onWeekNumberChange && onWeekNumberChange(e.target.value * 1);
setWeekNumber(e.target.value * 1);
};
function getWeekDates(year, week) {
if (week && year) {
// Get the first day of the year
let firstDayOfYear = new Date(year, 0, 1);
// Get the day of the week for the first day of the year
let dayOfWeek = firstDayOfYear.getDay();
// Find the first Thursday of the year
let firstThursday = new Date(firstDayOfYear);
firstThursday.setDate(firstDayOfYear.getDate() + (4 - (dayOfWeek || 7)));
// Calculate the start date of the requested week
let weekStartDate = new Date(firstThursday);
weekStartDate.setDate(firstThursday.getDate() - firstThursday.getDay() + 1 + (week - 1) * 7);
weekStartDate.setDate(weekStartDate.getDate() - 1);
let weekDates = [];
let weekDays = [];
for (let i = 0; i < 7; i++) {
let date = new Date(weekStartDate);
date.setDate(weekStartDate.getDate() + i);
weekDays.push(date);
setDate(weekDays);
weekDates.push(formatDate(date));
}
setWeekDays(weekDates);
return weekDates;
}
}
function formatDate(date) {
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let day = days[date.getDay()];
let month = months[date.getMonth()];
let dayOfMonth = date.getDate();
let year = date.getFullYear();
return "".concat(day, " ").concat(month, " ").concat(dayOfMonth, " ").concat(year);
}
(0, _react.useEffect)(() => {
currentWeekNumberHandler();
const handleClickOutside = event => {
if (weekNumberRef.current && !weekNumberRef.current.contains(event.target)) {
document.getElementById("week-number").style.display = "none";
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
(0, _react.useEffect)(() => {
getWeekDates(year, weekNumber);
}, [weekNumber, year]);
return /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_WeekCalenderModule.default.paginationContainer, " ").concat(containerClassName && containerClassName)
}, /*#__PURE__*/_react.default.createElement("button", {
disabled: weekNumber === 1,
onClick: previousDateHanlder,
className: "".concat(_WeekCalenderModule.default.paginatonBtn, " ").concat(buttonClassName && buttonClassName)
}, /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "30px",
color: "#0a5b99"
},
className: "material-symbols-outlined"
}, "navigate_before")), /*#__PURE__*/_react.default.createElement("div", {
className: _WeekCalenderModule.default.weekNumberContainer,
id: "week-number"
}, /*#__PURE__*/_react.default.createElement("select", {
value: weekNumber,
className: _WeekCalenderModule.default.selectItem,
onChange: getWeekNumbers
}, Array.from({
length: selectedYear === year ? currentWeekNumber : 52
}, (_, index) => {
return /*#__PURE__*/_react.default.createElement("option", {
value: index + 1
}, "Week-", index + 1); // In this example, we're returning the index itself
})), /*#__PURE__*/_react.default.createElement("select", {
value: year,
onChange: getYear,
className: _WeekCalenderModule.default.selectItem
}, /*#__PURE__*/_react.default.createElement("option", {
value: year
}, year), /*#__PURE__*/_react.default.createElement("option", {
value: year - 1
}, year - 1), /*#__PURE__*/_react.default.createElement("option", {
value: year - 2
}, year - 2), /*#__PURE__*/_react.default.createElement("option", {
value: year - 3
}, year - 3), /*#__PURE__*/_react.default.createElement("option", {
value: year - 4
}, year - 4), /*#__PURE__*/_react.default.createElement("option", {
value: year - 5
}, year - 5))), /*#__PURE__*/_react.default.createElement("button", {
onClick: nextDateHandler,
className: "".concat(_WeekCalenderModule.default.paginatonBtn, " ").concat(buttonClassName && buttonClassName)
}, /*#__PURE__*/_react.default.createElement("span", {
style: {
fontSize: "30px",
color: "#0a5b99"
},
className: "material-symbols-outlined"
}, "navigate_next")));
};
var _default = WeekCalender;
exports.default = _default;