josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/esm/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef, Fragment } from "react";
+import styles from "./InputBoxWithConfirmation.module.scss";
+//Hooks
+import useOutsideClick from "../../hooks/useOutsideClick";
+//Icons
+import { BsCheckLg, BsPencil } from "react-icons/bs";
+const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", maxLength, placeholder = "", divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }) => {
+    //Refs
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    //States
+    const [cachedValue, setCachedValue] = useState(defaultValue !== undefined ? String(defaultValue) : "");
+    const [currentValue, setCurrentValue] = useState(defaultValue !== undefined ? String(defaultValue) : "");
+    const [focused, setFocused] = useState(false);
+    //Functions
+    const currentValueValueValidated = () => {
+        if (!currentValue) {
+            return cachedValue;
+        }
+        if (inputType === "number") {
+            let numericValue = Number(currentValue);
+            if (minimumValue !== "" && numericValue < Number(minimumValue)) {
+                numericValue = Number(minimumValue);
+            }
+            else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
+                numericValue = Number(maximumValue);
+            }
+            return String(numericValue);
+        }
+        else {
+            return currentValue;
+        }
+    };
+    const onConfirmActionHandler = () => {
+        setCurrentValue(currentValueValueValidated());
+        if (currentValueValueValidated()) {
+            onConfirmAction(currentValueValueValidated());
+            setCachedValue(currentValueValueValidated());
+        }
+    };
+    //Hooks
+    useOutsideClick(containerRef, () => {
+        if (focused) {
+            if (showConfirmationButton) {
+                setCurrentValue(cachedValue);
+            }
+            else {
+                onConfirmActionHandler();
+            }
+            setFocused(false);
+        }
+    });
+    //Effects
+    useEffect(() => {
+        if (overrideCurrentValue !== undefined) {
+            setCurrentValue(String(overrideCurrentValue));
+            setCachedValue(String(overrideCurrentValue));
+        }
+        else if (overrideCurrentValue === null) {
+            setCurrentValue("");
+            setCachedValue("");
+        }
+    }, [overrideCurrentValue]);
+    return (React.createElement("div", { ref: containerRef, style: divWrapperCustomStyle, className: `${styles["div-wrapper"]} ${focused ? styles["focused"] : ""}` },
+        React.createElement("input", { ref: inputRef, disabled: disabled, className: styles["input-box-with-confirmation"], type: inputType, style: Object.assign({ width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, inputBoxCustomStyle), min: minimumValue, max: maximumValue, maxLength: maxLength, placeholder: placeholder, value: focused ? currentValue : cachedValue, onChange: (event) => {
+                let value = event.target.value;
+                if (maxLength && value.length > maxLength) {
+                    value = value.slice(0, maxLength);
+                }
+                setCurrentValue(value);
+            }, onFocus: (event) => {
+                setCachedValue(event.target.value);
+                setCurrentValue(event.target.value);
+                setFocused(true);
+            }, onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                    onConfirmActionHandler();
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+                else if (event.key === "Tab") {
+                    onConfirmActionHandler();
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+                else if (event.key === "Escape") {
+                    setCurrentValue(cachedValue);
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+            } }),
+        !disabled && showConfirmationButton && (React.createElement(Fragment, null, focused ? (React.createElement("button", { className: styles["button-for-input-box-with-confirmation"], onClick: () => {
+                onConfirmActionHandler();
+                setFocused(false);
+            } },
+            React.createElement(BsCheckLg, null))) : (React.createElement("button", { className: styles["button-for-input-box-with-confirmation"], onClick: () => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            } },
+            React.createElement(BsPencil, null)))))));
+};
+export default InputBoxWithConfirmation;

package/dist/esm/components/InputBoxWithConfirmation/InputBoxWithConfirmation.module.scss

@@ -0,0 +1,52 @@
+.div-wrapper {
+  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;
+  &.focused {
+    border-color: #218dec;
+  }
+  .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;
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+  .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;
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      background-color: rgb(241, 241, 241);
+      color: var(--primary-color);
+    }
+  }
+}
+

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

@@ -0,0 +1,10 @@
+import React from "react";
+type IntegerControlProps = {
+    onChange: (value: number) => void;
+    defaultValue?: number;
+    minimumValue?: number;
+    maximumValue?: number;
+    customStyle?: React.CSSProperties;
+};
+declare const IntegerControl: ({ onChange, defaultValue, minimumValue, maximumValue, customStyle, }: IntegerControlProps) => React.JSX.Element;
+export default IntegerControl;

package/dist/esm/components/IntegerControl/IntegerControl.js

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import styles from "./IntegerControl.module.scss";
+//icons
+import { AiFillMinusCircle, AiFillPlusCircle } from "react-icons/ai";
+const IntegerControl = ({ onChange = () => { }, defaultValue = 0, minimumValue, maximumValue, customStyle, }) => {
+    const [currentValue, setCurrentValue] = useState(defaultValue);
+    return (React.createElement("div", { className: `${styles["integer-control"]} ${currentValue === defaultValue ? styles["default"] : ""}`, style: customStyle },
+        React.createElement("button", { onClick: () => {
+                setCurrentValue(currentValue - 1);
+                onChange(currentValue - 1);
+            } },
+            React.createElement(AiFillMinusCircle, null)),
+        React.createElement("input", { onChange: (event) => {
+                const numericValue = Number(event.target.value);
+                setCurrentValue(numericValue);
+                onChange(numericValue);
+            }, value: currentValue, type: "number", defaultValue: String(defaultValue), min: String(minimumValue), max: String(maximumValue), style: { width: currentValue.toString().length + 1 + "ch" } }),
+        React.createElement("button", { onClick: () => {
+                setCurrentValue(currentValue + 1);
+                onChange(currentValue + 1);
+            } },
+            React.createElement(AiFillPlusCircle, null))));
+};
+export default IntegerControl;

package/dist/esm/components/IntegerControl/IntegerControl.module.scss

@@ -0,0 +1,46 @@
+.integer-control {
+  display: flex;
+  align-items: center;
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    svg {
+      height: 44px;
+      width: 44px;
+      fill: #c9c9c9;
+      transition: fill 100ms ease-in-out;
+      cursor: pointer;
+      &:active {
+        fill: #787878;
+      }
+    }
+  }
+  input {
+    border: none;
+    background: none;
+    padding: 0;
+    color: #414141;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    min-width: 84px;
+    transition: color 300ms ease-in-out;
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &:focus {
+      outline: transparent;
+    }
+  }
+  &.default {
+    input {
+      color: #787878;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+type LabeledInputProps = {
+    label: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    textAlign?: "left" | "center" | "right";
+    highlightError?: boolean;
+    errorMessage?: string;
+    inputProps?: React.ComponentProps<"input">;
+};
+declare const LabeledInput: ({ label, defaultValue, onChange, width, height, backgroundColor, textAlign, highlightError, errorMessage, inputProps, }: LabeledInputProps) => React.JSX.Element;
+export default LabeledInput;

package/dist/esm/components/LabeledInput/LabeledInput.js

@@ -0,0 +1,19 @@
+import React, { useState, useRef } from "react";
+import styles from "./LabeledInput.module.scss";
+const LabeledInput = ({ label, defaultValue, onChange = () => { }, width = "328px", height = "66px", backgroundColor = "white", textAlign = "left", highlightError = false, errorMessage, inputProps, }) => {
+    const inputRef = useRef(null);
+    const [shrinkLabel, setShrinkLabel] = useState(defaultValue ? true : false);
+    return (React.createElement("div", { className: styles["labeled-input"] + (highlightError ? ` ${styles["error"]}` : ""), onClick: () => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        }, style: { width, height, backgroundColor } },
+        React.createElement("label", { className: shrinkLabel ? styles["focused"] : "" }, label),
+        React.createElement("input", Object.assign({ ref: inputRef }, inputProps, { onFocus: () => setShrinkLabel(true), onBlur: (event) => {
+                if (!event.target.value) {
+                    setShrinkLabel(false);
+                }
+            }, defaultValue: defaultValue, onChange: (event) => onChange(event.target.value), style: { textAlign } })),
+        highlightError && errorMessage && (React.createElement("p", { className: styles["error-message"] }, errorMessage))));
+};
+export default LabeledInput;

package/dist/esm/components/LabeledInput/LabeledInput.module.scss

@@ -0,0 +1,74 @@
+.labeled-input {
+  position: relative;
+  border-radius: 8px;
+  border: 2px solid #959595;
+  padding: 0px 28px;
+  background: #fff;
+  box-sizing: border-box;
+  transition: all 200ms ease-in-out;
+  cursor: pointer;
+  label {
+    z-index: 1;
+    position: absolute;
+    color: #959595;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    top: calc(50% - 10px);
+    left: 28px;
+    padding: 0;
+    transition: all 200ms ease-in-out;
+    user-select: none;
+    &.focused {
+      top: 2px;
+      left: 10px;
+      font-weight: 600;
+      font-size: 12px;
+      padding: 0px 5px;
+    }
+  }
+  input {
+    z-index: 2;
+    position: absolute;
+    top: calc(50% - 12px);
+    height: 24px;
+    width: calc(100% - 56px);
+    border: none;
+    outline: transparent;
+    background: transparent;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    color: #959595;
+    padding: 0;
+    cursor: pointer;
+    &:focus {
+      outline: transparent;
+      cursor: text;
+    }
+  }
+  &.error {
+    border-color: #f34d1b;
+    label {
+      color: #e17959;
+    }
+  }
+  .error-message {
+    position: absolute;
+    margin: 0;
+    top: calc(100% + 5px);
+    left: 5px;
+    color: #f34d1b;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 0;
+    transition: all 200ms ease-in-out;
+  }
+}

package/dist/esm/components/Modal/Modal.css

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Modal.css";
+import { ModalPropsType } from "./types";
+declare const Modal: ({ children, visibility, forced, onOpen, onClose, transitionTime, }: ModalPropsType) => React.JSX.Element;
+export default Modal;

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import "./Modal.css";
+//Hooks
+import useOutsideClick from "../../hooks/useOutsideClick";
+const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
+    //Refs
+    const modalRef = useRef(null);
+    //Estados
+    const [visible, setVisible] = useState(visibility);
+    //Hooks
+    useOutsideClick(modalRef, () => {
+        if (modalRef.current !== null && !forced) {
+            modalRef.current.className = "close-modal";
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    });
+    //UseEffect
+    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 ReactDOM.createPortal(React.createElement("div", { ref: modalRef, className: visibility ? "trc-modal" : "trc-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.getElementById("root") || document.body);
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+export default Modal;

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

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

package/dist/esm/components/Multicalendar/Multicalendar.css

@@ -0,0 +1,191 @@
+.trc-multicalendar {
+  display: grid;
+  color: black;
+  width: 100%;
+  height: 100%;
+  grid-template-areas:
+    "fil con"
+    "fil hor"
+    "ver gri";
+  text-align: center;
+  transition: 0.5s;
+}
+
+.trc-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;
+}
+
+.trc-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);
+}
+
+.trc-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;
+}
+
+
+.trc-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;
+}
+
+.trc-multicalendar .horizontal-axis {
+  grid-area: hor;
+  position: relative;
+  max-width: 100%;
+  height: 90px;
+}
+
+.trc-multicalendar .controls .div-dates-navigation {
+  display: flex;
+  align-items: center;
+}
+
+.trc-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);
+}
+
+.trc-multicalendar .controls .div-aditional-controls-components {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.trc-multicalendar .div-main-container {
+  grid-area: gri;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.trc-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);
+}
+
+.trc-multicalendar .main-container {
+  position: relative;
+  min-width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+}
+
+.trc-multicalendar .vertical-axis .div-list-element-column {
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 74px;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
+.trc-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;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
+.trc-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);
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
+.trc-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);
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
+  left: 5px;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
+  right: 5px;
+}
+
+.trc-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;
+}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Multicalendar.css";
+import { MulticalendarPropsType } from "./types";
+declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, authomaticScrollOnDraggingOverEdges, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarPropsType) => React.JSX.Element;
+export default Multicalendar;