josenanodev-react-components-library 0.2.17 → 1.0.0

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.css

@@ -1,60 +0,0 @@
-.div-wrapper-input-box-with-confirmation {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: solid 1px rgb(184, 184, 184);
-  background-color: rgb(250, 250, 250);
-  border-radius: 8px;
-  transition: border 0.3s;
-}
-
-.div-wrapper-input-box-with-confirmation.focused {
-  border-color: var(--primary-color);
-}
-
-.div-wrapper-input-box-with-confirmation .input-box-with-confirmation {
-  box-sizing: border-box;
-  padding: 10px 2ch;
-  min-width: 10ch;
-  text-align: center;
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  font-weight: 600;
-  color: dimgray;
-  transition: all 0.2s;
-}
-
-.div-wrapper-input-box-with-confirmation
-  .input-box-with-confirmation::-webkit-inner-spin-button {
-  display: none;
-}
-
-.div-wrapper-input-box-with-confirmation .input-box-with-confirmation:focus,
-.div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation:focus {
-  outline: none;
-}
-
-.div-wrapper-input-box-with-confirmation .input-box-with-confirmation:focus{
-    color: rgb(37, 37, 37);
-}
-
-.div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation {
-  position: absolute;
-  right: 0px;
-  background-color: transparent;
-  color: rgb(158, 158, 158);
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  font-size: 16px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation:hover {
-  background-color: rgb(241, 241, 241);
-  color: var(--primary-color);
-}

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import "./InputBoxWithConfirmation.css";
-import { InputBoxWithConfirmationPropsType } from "./types";
-declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, aditionalClass, defaultValue, showConfirmationButton, }: InputBoxWithConfirmationPropsType) => JSX.Element;
-export default InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js

@@ -1,117 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./InputBoxWithConfirmation.css");
-//Hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-//Icons
-const bs_1 = require("react-icons/bs");
-const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", aditionalClass, defaultValue, showConfirmationButton, }) => {
-    //Refs
-    const inputRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
-    //States
-    const [cachedValue, setCachedValue] = (0, react_1.useState)(String(defaultValue));
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(String(defaultValue));
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    //Hooks
-    (0, useOutsideClick_1.default)(containerRef, () => {
-        if (showConfirmationButton) {
-            setCurrentValue(cachedValue);
-        }
-        else {
-            if (currentValue) {
-                onConfirmAction(currentValue);
-                setCachedValue(currentValue);
-            }
-            setFocused(false);
-        }
-    });
-    //Variables
-    return (react_1.default.createElement("div", { ref: containerRef, className: `div-wrapper-input-box-with-confirmation ${focused ? "focused" : ""} ${aditionalClass ? aditionalClass : ""}` },
-        react_1.default.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, min: minimumValue, max: maximumValue, value: focused ? currentValue : cachedValue, onChange: (event) => {
-                if (inputType === "number") {
-                    let numericValue = Number(event.target.value);
-                    if (minimumValue !== "" && numericValue < Number(minimumValue)) {
-                        numericValue = Number(minimumValue);
-                    }
-                    else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
-                        numericValue = Number(maximumValue);
-                    }
-                    setCurrentValue(String(numericValue));
-                }
-                setCurrentValue(event.target.value);
-            }, onFocus: (event) => {
-                setCachedValue(event.target.value);
-                setCurrentValue(event.target.value);
-                setFocused(true);
-            }, onKeyDown: (event) => {
-                if (event.key === "Enter") {
-                    if (currentValue) {
-                        onConfirmAction(currentValue);
-                        setCachedValue(currentValue);
-                    }
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-                else if (event.key === "Tab") {
-                    if (currentValue) {
-                        onConfirmAction(currentValue);
-                        setCachedValue(currentValue);
-                    }
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-                else if (event.key === "Escape") {
-                    setCurrentValue(cachedValue);
-                    setFocused(false);
-                    if (inputRef.current) {
-                        inputRef.current.blur();
-                    }
-                }
-            } }),
-        showConfirmationButton && (react_1.default.createElement(react_1.Fragment, null, focused ? (react_1.default.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
-                if (currentValue) {
-                    onConfirmAction(currentValue);
-                    setCachedValue(currentValue);
-                }
-                setFocused(false);
-            } },
-            react_1.default.createElement(bs_1.BsCheckLg, null))) : (react_1.default.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
-            } },
-            react_1.default.createElement(bs_1.BsPencil, null)))))));
-};
-exports.default = InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/types.d.ts

@@ -1,9 +0,0 @@
-export interface InputBoxWithConfirmationPropsType {
-  onConfirmAction: (inputCurrentValue: string) => void;
-  inputType?: "text" | "number";
-  minimumValue?: HTMLInputElement["min"],
-  maximumValue?: HTMLInputElement["max"],
-  aditionalClass?: string;
-  defaultValue?: string | number;
-  showConfirmationButton?: boolean;
-}

package/dist/cjs/components/Modal/Modal.css

@@ -1,43 +0,0 @@
-.modal,
-.close-modal {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(10px);
-  top: 0;
-  left: 0;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  animation-name: modal;
-  animation-duration: 500ms;
-}
-
-.close-modal {
-  animation-name: close-modal;
-  animation-duration: 500ms;
-}
-
-@keyframes modal {
-  from {
-    backdrop-filter: none;
-    opacity: 0;
-  }
-  to {
-    backdrop-filter: blur(10px);
-    opacity: 1;
-  }
-}
-
-@keyframes close-modal {
-  from {
-    backdrop-filter: blur(10px);
-    opacity: 1;
-  }
-  to {
-    backdrop-filter: none;
-    opacity: 0;
-    display: none;
-  }
-}

package/dist/cjs/components/Modal/Modal.js

@@ -1,82 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-require("./Modal.css");
-//Hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
-    //Refs
-    const modalRef = (0, react_1.useRef)(null);
-    //Estados
-    const [visible, setVisible] = (0, react_1.useState)(visibility);
-    //Hooks
-    (0, useOutsideClick_1.default)(modalRef, () => {
-        if (modalRef.current !== null && !forced) {
-            modalRef.current.className = "close-modal";
-            setTimeout(() => {
-                setVisible(false);
-                if (onClose)
-                    onClose();
-            }, transitionTime - 50);
-        }
-    });
-    //UseEffect
-    (0, react_1.useEffect)(() => {
-        if (visibility) {
-            setVisible(true);
-            if (onOpen)
-                onOpen();
-        }
-        else if (!visibility) {
-            setTimeout(() => {
-                setVisible(false);
-                if (onClose)
-                    onClose();
-            }, transitionTime - 50);
-        }
-    }, [visibility, transitionTime, onOpen, onClose]);
-    //Render
-    if (visible) {
-        return react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: modalRef, className: visibility ? "modal" : "close-modal", style: { animationDuration: `${transitionTime}ms` }, onClick: (event) => {
-                if (event.target.id === "modal" && !forced) {
-                    event.target.id = "close-modal";
-                    setTimeout(() => {
-                        setVisible(false);
-                        if (onClose)
-                            onClose();
-                    }, transitionTime - 50);
-                }
-            } }, children), document.body);
-    }
-    else {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
-};
-exports.default = Modal;

package/dist/cjs/components/Modal/types.d.ts

@@ -1,8 +0,0 @@
-export interface ModalPropsType {
-  children: JSX.Element;
-  visibility: boolean;
-  forced?: boolean;
-  onOpen?: Function;
-  onClose?: Function;
-  transitionTime?: number;
-}

package/dist/cjs/components/Multicalendar/Multicalendar.css

@@ -1,191 +0,0 @@
-.multicalendar {
-  display: grid;
-  color: black;
-  width: 100%;
-  height: 100%;
-  grid-template-areas:
-    "fil con"
-    "fil hor"
-    "ver gri";
-  text-align: center;
-  transition: 0.5s;
-}
-
-.multicalendar .div-upper-left-component {
-  grid-area: fil;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  background-color: white;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  border-right: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.multicalendar .controls {
-  grid-area: con;
-  height: 100%;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap-reverse;
-  box-sizing: border-box;
-  border-bottom: var(--border-tenues);
-}
-
-.multicalendar .div-upper-left-component {
-  grid-area: fil;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  background-color: white;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  border-right: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-end;
-}
-
-
-.multicalendar .vertical-axis {
-  grid-area: ver;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-shadow: rgb(0 0 0 / 15%) 0px 0px 16px 5px;
-  z-index: 1;
-}
-
-.multicalendar .horizontal-axis {
-  grid-area: hor;
-  position: relative;
-  max-width: 100%;
-  height: 90px;
-}
-
-.multicalendar .controls .div-dates-navigation {
-  display: flex;
-  align-items: center;
-}
-
-.multicalendar .controls .div-dates-navigation button {
-  cursor: pointer;
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  border: 1px solid rgb(216, 216, 216);
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: black;
-  font-size: 14px;
-  touch-action: manipulation;
-  border-radius: 6px;
-  background: rgb(255, 255, 255);
-  font-weight: normal;
-  height: calc(100% - 16px);
-}
-
-.multicalendar .controls .div-aditional-controls-components {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.multicalendar .div-main-container {
-  grid-area: gri;
-  height: 100%;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.multicalendar .div-main-container .div-cargando-contenedor-principal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-  background-color: rgba(236, 236, 236, 0.8);
-}
-
-.multicalendar .main-container {
-  position: relative;
-  min-width: 100%;
-  height: 100%;
-  overflow-x: scroll;
-}
-
-.multicalendar .vertical-axis .div-list-element-column {
-  height: 100%;
-  overflow-y: scroll;
-  box-sizing: border-box;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 74px;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
-  z-index: 2;
-  position: absolute;
-  background-color: transparent;
-  border: none;
-  height: 100%;
-  width: 32px;
-  font-size: 1em;
-  color: var(--primary-color);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-  height: 75%;
-  background: rgb(255 255 255);
-  box-shadow: 0px 0px 8px 8px white;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:hover {
-  background: rgb(247, 247, 247);
-  box-shadow: 0px 0px 8px 8px rgb(247 247 247);
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:active {
-  background: rgb(167, 167, 167);
-  box-shadow: 0px 0px 8px 8px rgb(167, 167, 167);
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
-  left: 5px;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
-  right: 5px;
-}
-
-.multicalendar .horizontal-axis .div-dates-row {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  overflow-x: scroll;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-}