josenanodev-react-components-library 1.0.3 → 1.0.4

package/dist/esm/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.js

@@ -0,0 +1,272 @@
+import React, { useRef, useEffect, useReducer } from "react";
+import styles from "./CalendarScrollableSection.module.scss";
+import dayOfTheWeekStartingOnMonday from "../../../utils/dayOfTheWeekStartingOnMonday";
+import numberOfWeeksInAMonth from "../../../utils/numberOfWeeksInAMonth";
+import jsToSqlDate from "../../../utils/jsToSqlDate";
+import useIntersectionObserver from "../../../hooks/useIntersectionObserver";
+const reducer = (state, action) => {
+    const isAValidDateChange = (year, month) => {
+        const referenceDate = new Date(year, month, 1);
+        const minimumMonthDate = new Date(state.minimumDate.getFullYear(), state.minimumDate.getMonth(), 1);
+        const maximumMonthDate = new Date(state.maximumDate.getFullYear(), state.maximumDate.getMonth() + 1, 0);
+        const isReferenceDateLowerThanMinimumMonthDate = referenceDate.valueOf() < minimumMonthDate.valueOf();
+        const isReferenceDateHigherThanMaximumMonthDate = referenceDate.valueOf() > maximumMonthDate.valueOf();
+        if (isReferenceDateLowerThanMinimumMonthDate ||
+            isReferenceDateHigherThanMaximumMonthDate) {
+            return false;
+        }
+        return true;
+    };
+    const actionsDictionary = {
+        setMonth: () => {
+            if (isAValidDateChange(state.year, action.value)) {
+                return Object.assign(Object.assign({}, state), { month: action.value });
+            }
+            else {
+                return Object.assign({}, state);
+            }
+        },
+        setYear: () => {
+            if (isAValidDateChange(action.value, state.month)) {
+                return Object.assign(Object.assign({}, state), { year: action.value });
+            }
+            else {
+                return Object.assign({}, state);
+            }
+        },
+        setMinimumDate: () => {
+            return Object.assign(Object.assign({}, state), { minimumDate: new Date(action.value) });
+        },
+        setMaximumdate: () => {
+            return Object.assign(Object.assign({}, state), { maximumDate: new Date(action.value) });
+        },
+        changeByMonthOffset: () => {
+            const referenceDate = new Date(state.year, state.month + action.value, 1);
+            if (isAValidDateChange(state.year, state.month + action.value)) {
+                return Object.assign(Object.assign({}, state), { year: referenceDate.getFullYear(), month: referenceDate.getMonth() });
+            }
+            else {
+                return Object.assign({}, state);
+            }
+        },
+    };
+    const newState = actionsDictionary[action.type]();
+    if (newState) {
+        return newState;
+    }
+    else {
+        return Object.assign({}, state);
+    }
+};
+const CalendarScrollableSection = ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates = [], minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        month: month,
+        year: year,
+        minimumDate: minimumDate,
+        maximumDate: maximumDate,
+    });
+    const monthsContainerRef = useRef(null);
+    const firstMonthRef = useRef(null);
+    const secondMonthRef = useRef(null);
+    const fourthMonthRef = useRef(null);
+    const fifthMonthRef = useRef(null);
+    const isFirstMonthVisible = useIntersectionObserver(firstMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isSecondMonthVisible = useIntersectionObserver(secondMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isFourthMonthVisible = useIntersectionObserver(fourthMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isFifthMonthVisible = useIntersectionObserver(fifthMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isDateSelectable = (date) => {
+        // * If date is not found in custom dates or selectable preoperty is set to true, it returns true
+        const isNotSelectable = customDates.some((customDate) => {
+            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && !customDate.selectable);
+        });
+        return !isNotSelectable;
+    };
+    const dayCellClassName = (date) => {
+        let className = styles["day-cell"];
+        const isCrosssed = customDates.some((customDate) => {
+            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && customDate.crossed);
+        });
+        if (isCrosssed) {
+            className += ` ${styles["crossed"]}`;
+        }
+        return className;
+    };
+    const dateClassName = (date) => {
+        let className = styles["day"];
+        const isToday = jsToSqlDate(date) === jsToSqlDate(new Date());
+        if (isToday) {
+            className += ` ${styles["today"]}`;
+        }
+        if (date.getMonth() === state.month) {
+            className += ` ${styles["in-month"]}`;
+        }
+        else {
+            className += ` ${styles["not-in-month"]}`;
+        }
+        const isDateSelected = dates.some((includedDate) => includedDate.valueOf() === date.valueOf());
+        const isDateInRange = (mode === "range" || mode === "booking") &&
+            dates.length === 2 &&
+            dates[0].valueOf() < date.valueOf() &&
+            date.valueOf() < dates[1].valueOf();
+        if (isDateSelected || isDateInRange) {
+            className += ` ${styles["selected"]}`;
+        }
+        if (mode === "booking") {
+            const isCheckInDate = dates.length === 2 && date.valueOf() === dates[0].valueOf();
+            if (isCheckInDate) {
+                className += ` ${styles["check-in"]}`;
+            }
+            const isCheckOutDate = dates.length === 2 && date.valueOf() === dates[1].valueOf();
+            if (isCheckOutDate) {
+                className += ` ${styles["check-out"]}`;
+            }
+        }
+        if (isDateSelectable(date)) {
+            className += ` ${styles["selectable"]}`;
+        }
+        else {
+            className += ` ${styles["not-selectable"]}`;
+        }
+        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
+        if (isOutOfSelection) {
+            className += ` ${styles["out-of-selection"]}`;
+        }
+        return className;
+    };
+    const handleDateSelection = (date) => {
+        // custom side effects
+        customDates.forEach((customDate) => {
+            if (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) &&
+                customDate.clickSideEffect) {
+                customDate.clickSideEffect(date);
+            }
+        });
+        const isSelectable = isDateSelectable(date);
+        if (!isSelectable) {
+            return;
+        }
+        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
+        if (isOutOfSelection) {
+            return;
+        }
+        let datesClone = [...dates];
+        if (mode === "single") {
+            datesClone = [date];
+        }
+        if (mode === "multiple") {
+            if (dates.some((includedDate) => includedDate.valueOf() === date.valueOf())) {
+                datesClone = dates.filter((includedDate) => includedDate.valueOf() !== date.valueOf());
+            }
+            else {
+                datesClone = [...dates, date];
+            }
+        }
+        if (mode === "range") {
+            if (dates.length === 0) {
+                datesClone = [date];
+            }
+            else if (dates.length === 1) {
+                if (dates[0].valueOf() < date.valueOf()) {
+                    datesClone = [...dates, date];
+                }
+                else {
+                    datesClone = [date, dates[0]];
+                }
+            }
+            else {
+                datesClone = [];
+            }
+        }
+        if (mode === "booking") {
+            if (dates.length === 0) {
+                datesClone = [date];
+            }
+            else if (dates[0].valueOf() === date.valueOf()) {
+                datesClone = [];
+            }
+            else if (dates.length === 1) {
+                if (dates[0].valueOf() < date.valueOf()) {
+                    datesClone = [...dates, date];
+                }
+                else {
+                    datesClone = [date, dates[0]];
+                }
+            }
+            else {
+                datesClone = [];
+            }
+        }
+        onSelectedDatesChange(datesClone);
+    };
+    const customColorStyleObject = (date) => {
+        const customDate = customDates.find((customDate) => customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()));
+        if (customDate) {
+            return {
+                backgroundColor: customDate.color,
+            };
+        }
+        else {
+            return undefined;
+        }
+    };
+    useEffect(() => {
+        if (monthsContainerRef.current) {
+            monthsContainerRef.current.scrollTop = 416;
+        }
+    }, []);
+    useEffect(() => {
+        onFocusedMonth(state.month, state.year);
+    }, [state.year, state.month, onFocusedMonth]);
+    useEffect(() => {
+        if (isSecondMonthVisible || isFirstMonthVisible) {
+            dispatch({ type: "changeByMonthOffset", value: -1 });
+        }
+    }, [isFirstMonthVisible, isSecondMonthVisible]);
+    useEffect(() => {
+        if (isFourthMonthVisible || isFifthMonthVisible) {
+            dispatch({ type: "changeByMonthOffset", value: 1 });
+        }
+    }, [isFourthMonthVisible, isFifthMonthVisible]);
+    return (React.createElement("section", { ref: monthsContainerRef, className: styles["calendar-scrollable-section"] }, Array(5)
+        .fill(0)
+        .map((_, gridIndex) => {
+        const monthOffset = gridIndex - 2;
+        const referenceDate = new Date(state.year, state.month + monthOffset, 1);
+        const lastDayOfTheMonth = new Date(state.year, state.month + monthOffset + 1, 0);
+        const isLastDayOfTheMonthSunday = lastDayOfTheMonth.getDay() === 0;
+        let numberOfWeeksInMonth = numberOfWeeksInAMonth(referenceDate);
+        if (!isLastDayOfTheMonthSunday) {
+            numberOfWeeksInMonth = numberOfWeeksInMonth - 1;
+        }
+        const firstDayInMonthDayOfWeek = dayOfTheWeekStartingOnMonday(referenceDate);
+        return (React.createElement("div", { ref: [firstMonthRef, secondMonthRef, null, fourthMonthRef, fifthMonthRef][gridIndex], className: styles["days-grid"], key: `grid:${jsToSqlDate(referenceDate)}}` }, Array(numberOfWeeksInMonth)
+            .fill(0)
+            .map((_, rowIndex) => (React.createElement("div", { className: styles["days-row"], key: `grid:${jsToSqlDate(referenceDate)}-row:${rowIndex}` }, Array(7)
+            .fill(0)
+            .map((_, columnIndex) => {
+            const numberOfMonth = state.month + monthOffset;
+            const numberOfDay = rowIndex * 7 + columnIndex + 1 - firstDayInMonthDayOfWeek;
+            const date = new Date(state.year, numberOfMonth, numberOfDay);
+            return (React.createElement("div", { className: dayCellClassName(date), key: jsToSqlDate(date), onClick: () => handleDateSelection(date) },
+                React.createElement("div", { className: styles["cross-line"] }),
+                React.createElement("div", { className: dateClassName(date) },
+                    React.createElement("div", { className: styles["background"] },
+                        React.createElement("div", { className: styles["first-half"], style: customColorStyleObject(date) }),
+                        React.createElement("div", { className: styles["second-half"], style: customColorStyleObject(date) })),
+                    React.createElement("p", null, date.getDate()))));
+        }))))));
+    })));
+};
+export default CalendarScrollableSection;

package/dist/esm/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.module.scss

@@ -0,0 +1,151 @@
+@property --angle {
+  sintax: "<angle>";
+  inherits: false;
+  initial-value: 270deg;
+}
+
+@property --color-default {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: white;
+}
+
+@property --color-selected {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: #e3f3e3;
+}
+
+@property --percentage-default {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --percentage-selected {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+.calendar-scrollable-section {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  border-bottom: 1px solid #ebebeb;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .days-grid {
+    width: 100%;
+    .days-row {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .day-cell {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(100% / 7);
+        aspect-ratio: 1 / 1;
+
+        .day {
+          position: relative;
+          --angle: 270deg;
+          --color-default: #f3f3f3;
+          --color-selected: #b7d4b6;
+          --percentage-default: 100%;
+          --percentage-selected: 0%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: calc(100% - 8px);
+          height: calc(100% - 8px);
+          margin: 0px;
+          border-radius: 1000px;
+          overflow: hidden;
+          user-select: none;
+          transition: all 0.5s ease-in-out;
+          cursor: pointer;
+          p {
+            z-index: 2;
+            margin: 0px;
+          }
+
+          .background {
+            z-index: 1;
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            transform: rotate(var(--angle));
+            transition: all 0.5s ease-in-out;
+            .first-half {
+              width: var(--percentage-default);
+              height: 100%;
+              background-color: var(--color-default);
+              transition: all 0.3s ease-in-out;
+            }
+            .second-half {
+              width: var(--percentage-selected);
+              height: 100%;
+              background-color: var(--color-selected);
+              transition: all 0.3s ease-in-out;
+            }
+          }
+          &.today {
+            outline: solid 2px #787878;
+          }
+          &.in-month {
+            color: var(--medium-gray, #787878);
+          }
+          &.not-in-month {
+            opacity: 0.35;
+          }
+          &.selected {
+            --percentage-default: 0%;
+            --percentage-selected: 100%;
+          }
+          &.check-in {
+            --angle: 405deg;
+            --color-default: #f3f3f3;
+            --percentage-default: 50%;
+            --percentage-selected: 50%;
+          }
+          &.check-out {
+            --angle: 225deg;
+            --color-default: #f3f3f3;
+            --percentage-default: 50%;
+            --percentage-selected: 50%;
+          }
+          &.not-selectable {
+            cursor: not-allowed;
+          }
+          &.out-of-selection {
+            opacity: 0.1;
+            cursor: not-allowed;
+          }
+        }
+        .cross-line {
+          z-index: 2;
+          position: absolute;
+          width: 120%;
+          height: 3px;
+          background-color: #bbb;
+          transform: rotate(-45deg);
+          display: none;
+        }
+        &.crossed {
+          .cross-line {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/esm/components/ExportToExcelButton/ExportToExcelButton.css

@@ -0,0 +1,31 @@
+.export-to-excel-button {
+  position: relative;
+  width: 220px;
+  height: 48px;
+  opacity: 1;
+  cursor: pointer;
+  padding: 14px;
+  text-align: center;
+  text-decoration: none;
+  touch-action: manipulation;
+  font-size: 16px;
+  letter-spacing: normal;
+  color: rgb(255, 255, 255);
+  font-weight: 700;
+  border-radius: 4px;
+  border: none;
+  background: green;
+  box-shadow: none;
+  transition: all 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin: auto;
+}
+.export-to-excel-button:hover {
+  background: rgb(0, 170, 0);
+}
+
+.export-to-excel-button:disabled {
+  background: rgb(216, 216, 216);
+}

package/dist/esm/components/ExportToExcelButton/ExportToExcelButton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./ExportToExcelButton.css";
+import { ExportToExcelButtonPropsType } from "./types";
+declare const ExportToExcelButton: ({ customButtonText, customClass, fileName, headers, data, onAfterExport, disabled, }: ExportToExcelButtonPropsType) => React.JSX.Element;
+export default ExportToExcelButton;

package/dist/esm/components/ExportToExcelButton/ExportToExcelButton.js

@@ -0,0 +1,17 @@
+import React from "react";
+import * as ownFunctions from "./ExportToExcelButtonOwnFunctions";
+import "./ExportToExcelButton.css";
+//Iconos
+import { RiFileExcel2Fill } from "react-icons/ri";
+const ExportToExcelButton = ({ customButtonText = "Export to Excel", customClass, fileName = "untitled", headers, data, onAfterExport, disabled, }) => {
+    return (React.createElement("button", { disabled: disabled, className: customClass ? customClass : "export-to-excel-button", onClick: () => {
+            ownFunctions.downloadExcel(fileName, data, headers);
+            if (onAfterExport !== undefined) {
+                onAfterExport();
+            }
+        } },
+        customButtonText,
+        " ",
+        React.createElement(RiFileExcel2Fill, null)));
+};
+export default ExportToExcelButton;

package/dist/esm/components/ExportToExcelButton/ExportToExcelButtonOwnFunctions.d.ts

@@ -0,0 +1,6 @@
+import { DataObjectXlsxType } from "./types";
+export declare function downloadExcel(fileName: string, data: {
+    [key: string]: DataObjectXlsxType[][];
+} | undefined, headers: {
+    [key: string]: DataObjectXlsxType[];
+} | undefined): void;

package/dist/esm/components/ExportToExcelButton/ExportToExcelButtonOwnFunctions.js

@@ -0,0 +1,48 @@
+//Librerias de terceros
+import * as XLSX from "xlsx-js-style";
+function styleObjectParser(styleObject) {
+    let restultantStyleObject = {
+        v: styleObject.value,
+        s: {},
+    };
+    if (styleObject.allign)
+        restultantStyleObject.s.alignment = Object.assign({}, styleObject.allign);
+    if (styleObject.fontSize)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { sz: styleObject.fontSize });
+    if (styleObject.fontColor)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { color: { rgb: styleObject.fontColor } });
+    if (styleObject.bold)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { bold: styleObject.bold });
+    if (styleObject.backgroundColor)
+        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { bgColor: { rgb: styleObject.backgroundColor } });
+    if (styleObject.foregroundColor)
+        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { fgColor: { rgb: styleObject.foregroundColor } });
+    if (styleObject.borders)
+        restultantStyleObject.s.border = Object.assign({}, styleObject.borders);
+    return restultantStyleObject;
+}
+export function downloadExcel(fileName, data, headers) {
+    if (data !== undefined) {
+        const workbook = XLSX.utils.book_new();
+        for (const sheetName in data) {
+            if (Object.prototype.hasOwnProperty.call(data, sheetName)) {
+                let dataXlsxJs = [];
+                if (headers !== undefined &&
+                    Object.prototype.hasOwnProperty.call(headers, sheetName)) {
+                    dataXlsxJs = [
+                        headers[sheetName].map((header) => styleObjectParser(header)),
+                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
+                    ];
+                }
+                else {
+                    dataXlsxJs = [
+                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
+                    ];
+                }
+                const worksheet = XLSX.utils.aoa_to_sheet(dataXlsxJs);
+                XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+            }
+        }
+        XLSX.writeFile(workbook, `${fileName}.xlsx`);
+    }
+}

package/dist/esm/components/ExportToExcelButton/types.d.ts

@@ -0,0 +1,44 @@
+export interface ExportToExcelButtonPropsType {
+  customButtonText?: string;
+  customClass?: string;
+  fileName?: string;
+  headers?: { [key: string]: DataObjectXlsxType[] };
+  data?: { [key: string]: DataObjectXlsxType[][] };
+  onAfterExport?: Function;
+  disabled?: boolean;
+}
+
+export interface StyleObjectXlsxType {
+  allign?: {
+    vertical: "top" | "center" | "bottom";
+    horizontal: "left" | "center" | "right";
+  };
+  fontSize?: number;
+  fontColor?: string;
+  bold?: boolean;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  borders?: {
+    top?: { style: BorderStyleType; color: string };
+    bottom?: { style: BorderStyleType; color: string };
+    left?: { style: BorderStyleType; color: string };
+    right?: { style: BorderStyleType; color: string };
+  };
+}
+export interface DataObjectXlsxType extends StyleObjectXlsxType {
+  value: string | number;
+}
+
+type BorderStyleType =
+  | "dashDotDot"
+  | "dashDot"
+  | "dashed"
+  | "dotted"
+  | "hair"
+  | "mediumDashDotDot"
+  | "mediumDashDot"
+  | "mediumDashed"
+  | "medium"
+  | "slantDashDot"
+  | "thick"
+  | "thin";

package/dist/esm/components/InputBoxWithConfirmation/InputBoxWithConfirmation.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+type InputBoxWithConfirmationPropsType = {
+    onConfirmAction: (inputCurrentValue: string) => void;
+    inputType?: "text" | "number";
+    minimumValue?: HTMLInputElement["min"];
+    maximumValue?: HTMLInputElement["max"];
+    maxLength?: HTMLInputElement["maxLength"];
+    placeholder?: HTMLInputElement["placeholder"];
+    divWrapperCustomStyle?: React.CSSProperties;
+    inputBoxCustomStyle?: React.CSSProperties;
+    defaultValue?: string | number;
+    overrideCurrentValue?: string | number | null;
+    showConfirmationButton?: boolean;
+    disabled?: boolean;
+};
+declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, maxLength, placeholder, divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }: InputBoxWithConfirmationPropsType) => React.JSX.Element;
+export default InputBoxWithConfirmation;