josenanodev-react-components-library 0.0.11 → 0.0.15

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

@@ -1,45 +1,45 @@
-import { languageType } from "../../languages/types";
-
-export interface MulticalendarPropsType {
-  multicalendarId: string;
-  ReactCellChildren: ReactCellChildrenType;
-  ReactListElementChildren: ReactListElementChildrenType;
-  listElementsIdsArray: string[] | number[];
-  language: languageType;
-  pastDatesVisible?: boolean
-  cellsWidth?: number;
-  cellsHeight?: number;
-  verticalAxisWidth?: number;
-  horizontalAxisHeight?: number;
-  pastDaysInitialQuantity?: number;
-  futureDaysInitialQuantity?: number;
-  chunkRenderX?: number;
-  chunkRenderY?: number;
-  draggingOverDateCells?: boolean;
-  dynamicDaysQuantity?: boolean;
-  waitTimeForCalls?: number;
-  callsOnScrollingMoves?: Function;
-  callsOnScrollingStops?: Function;
-  aditionalControlsComponents?: JSX.Element | JSX.Element[]
-  upperLeftComponent?: JSX.Element
-}
-
-export interface RenderCoordinatesType {
-  x: number;
-  y: number;
-}
-
-export type ReactCellChildrenType = React.ElementType<CellChildrenPropsType>;
-
-export type ReactListElementChildrenType =
-  React.ElementType<ListElementChildrenPropsType>;
-
-export type CellChildrenPropsType = { [key: string]: any } & {
-  /**Date in SQL format, i.e. 1993-03-29 */
-  date: string;
-  listElementId: string | number;
-};
-
-export type ListElementChildrenPropsType = { [key: string]: any } & {
-  listElementId: string | number;
-};
+import { languageType } from "../../languages/types";
+
+export interface MulticalendarPropsType {
+  multicalendarId: string;
+  ReactCellChildren: ReactCellChildrenType;
+  ReactListElementChildren: ReactListElementChildrenType;
+  listElementsIdsArray: string[] | number[];
+  language: languageType;
+  pastDatesVisible?: boolean
+  cellsWidth?: number;
+  cellsHeight?: number;
+  verticalAxisWidth?: number;
+  horizontalAxisHeight?: number;
+  pastDaysInitialQuantity?: number;
+  futureDaysInitialQuantity?: number;
+  chunkRenderX?: number;
+  chunkRenderY?: number;
+  draggingOverDateCells?: boolean;
+  dynamicDaysQuantity?: boolean;
+  waitTimeForCalls?: number;
+  callsOnScrollingMoves?: Function;
+  callsOnScrollingStops?: Function;
+  aditionalControlsComponents?: JSX.Element | JSX.Element[]
+  upperLeftComponent?: JSX.Element
+}
+
+export interface RenderCoordinatesType {
+  x: number;
+  y: number;
+}
+
+export type ReactCellChildrenType = React.ElementType<CellChildrenPropsType>;
+
+export type ReactListElementChildrenType =
+  React.ElementType<ListElementChildrenPropsType>;
+
+export type CellChildrenPropsType = { [key: string]: any } & {
+  /**Date in SQL format, i.e. 1993-03-29 */
+  date: string;
+  listElementId: string | number;
+};
+
+export type ListElementChildrenPropsType = { [key: string]: any } & {
+  listElementId: string | number;
+};

package/dist/esm/components/PopUp/PopUp.css

@@ -0,0 +1,15 @@
+.pop-up {
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(235, 235, 235);
+  border-style: solid;
+  border-width: 0px 1px 1px;
+  box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
+  padding: 0px;
+  position: relative;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.pop-up.pop-up-hidden {
+  display: none;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./PopUp.css";
+import { PopUpProps } from "./types";
+declare const PopUp: ({ open, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle, aditionalClass, }: PopUpProps) => JSX.Element;
+export default PopUp;

package/dist/esm/components/PopUp/PopUp.js

@@ -0,0 +1,22 @@
+import React, { useState, useRef } from "react";
+import useOutsideClick from "../../hooks/useOutsideClick";
+import "./PopUp.css";
+const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, }) => {
+    //Refs
+    const popUpRef = useRef(null);
+    //Hooks
+    useOutsideClick(popUpRef, () => {
+        if (outBoundClickClosesPopUp) {
+            setOpenState(false);
+            if (closeAction)
+                closeAction();
+        }
+    });
+    //Estados
+    const [openState, setOpenState] = useState(open);
+    //useState
+    return (React.createElement("div", { ref: popUpRef, className: "pop-up" +
+            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
+            (aditionalClass ? " " + aditionalClass : ""), style: aditionalInlineStyle }, children));
+};
+export default PopUp;

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

@@ -0,0 +1,8 @@
+export interface PopUpProps {
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesPopUp?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+  aditionalClass: string;
+}

package/dist/esm/components/SearchBar/SearchBar.css

@@ -0,0 +1,35 @@
+.search-bar .div-search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(185, 185, 185);
+  box-sizing: border-box;
+  margin: 2px 10px;
+  padding: 5px 0px;
+  border-radius: 6px;
+}
+
+.search-bar .div-search-bar input {
+  width: 100%;
+  border: none;
+}
+
+.search-bar .div-search-bar input:focus {
+  border: none;
+  outline: none;
+}
+
+.search-bar .div-search-bar svg {
+  width: 36px;
+  padding: 0px 10px;
+}
+
+.search-bar .div-search-bar .icono-search-bar-opciones {
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
+  cursor: not-allowed;
+  color: rgb(184, 184, 184);
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./SearchBar.css";
+import { SearchBarPropsType } from "./types";
+declare const SearchBar: ({ actionOnEnter, actionOnAlteringText, actionOnEmptyText, optionsButtonVisible, actionOnClickOptionsButton, placeholder, initialValue, disabled, }: SearchBarPropsType) => JSX.Element;
+export default SearchBar;

package/dist/esm/components/SearchBar/SearchBar.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import "./SearchBar.css";
+//Icons
+import { BsSearch, BsSliders } from "react-icons/bs";
+const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
+    //Estados
+    const [searchValue, setSearchValue] = useState(initialValue);
+    const [cachedSearchValue, setCachedSearchValue] = useState(initialValue);
+    //useEffect
+    useEffect(() => {
+        if (searchValue !== cachedSearchValue) {
+            if (searchValue !== "") {
+                actionOnAlteringText(searchValue);
+            }
+            else if (searchValue === "") {
+                actionOnEmptyText();
+            }
+            setCachedSearchValue(searchValue);
+        }
+    }, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
+    return (React.createElement("form", { className: "search-bar", onSubmit: (e) => {
+            e.preventDefault();
+            let searchElement = e.target.elements.namedItem("search-bar-name");
+            if (searchElement !== null)
+                actionOnEnter(searchElement.value);
+        } },
+        React.createElement("div", { className: "div-search-bar" },
+            React.createElement("div", null,
+                React.createElement(BsSearch, null)),
+            React.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+                    setSearchValue(e.target.value);
+                    if (e.target.value)
+                        actionOnAlteringText();
+                    if (!e.target.value)
+                        actionOnEmptyText();
+                }, value: searchValue }),
+            optionsButtonVisible && (React.createElement("div", { className: disabled
+                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
+                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
+                React.createElement(BsSliders, null))))));
+};
+export default SearchBar;

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

@@ -0,0 +1,10 @@
+export interface SearchBarPropsType {
+  actionOnEnter?: function;
+  actionOnAlteringText?: function;
+  actionOnEmptyText?: function;
+  optionsButtonVisible: boolean;
+  actionOnClickOptionsButton?: function;
+  placeholder: string;
+  initialValue?: string;
+  disabled?: boolean;
+}

package/dist/esm/components/SideBar/SideBar.css

@@ -1,50 +1,50 @@
-.side-bar {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  z-index: 2;
-  background-color: rgb(253, 253, 253);
-  box-shadow: 5px 0px 15px 0px rgb(206 206 206);
-  transition: all 0.5s ease-in-out;
-  animation: fade-in-side-bar 1s ease-in;
-}
-
-.side-bar .sidebar-close-button {
-  position: absolute;
-  top: 0;
-  height: 30px;
-  width: 30px;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  transition: all 0.3s;
-  color: dimgray;
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.side-bar .sidebar-close-button:hover {
-  color: var(--primary-color);
-}
-
-.side-bar .sidebar-close-button svg.open{
-  transform: rotate(0deg);
-  transition: all 0.5s;
-}
-
-.side-bar .sidebar-close-button svg.close{
-  transform: rotate(180deg);
-  transition: all 0.5s;
-}
-
-@keyframes fade-in-side-bar {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+.side-bar {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 2;
+  background-color: rgb(253, 253, 253);
+  box-shadow: 5px 0px 15px 0px rgb(206 206 206);
+  transition: all 0.5s ease-in-out;
+  animation: fade-in-side-bar 1s ease-in;
+}
+
+.side-bar .sidebar-close-button {
+  position: absolute;
+  top: 0;
+  height: 30px;
+  width: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  transition: all 0.3s;
+  color: dimgray;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.side-bar .sidebar-close-button:hover {
+  color: var(--primary-color);
+}
+
+.side-bar .sidebar-close-button svg.open{
+  transform: rotate(0deg);
+  transition: all 0.5s;
+}
+
+.side-bar .sidebar-close-button svg.close{
+  transform: rotate(180deg);
+  transition: all 0.5s;
+}
+
+@keyframes fade-in-side-bar {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import "./SideBar.css";
-import { SideBarPropsType } from "./types";
-/**
- * NOTE: Parent Node must have position: relative, to work correctly with the side bar
- */
-declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => JSX.Element;
-export default SideBar;
+/// <reference types="react" />
+import "./SideBar.css";
+import { SideBarPropsType } from "./types";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => JSX.Element;
+export default SideBar;

package/dist/esm/components/SideBar/SideBar.js

@@ -1,42 +1,42 @@
-import React, { useRef, useState } from "react";
-import "./SideBar.css";
-//Hooks
-import useOutsideClick from "../../hooks/useOutsideClick";
-import useResizeObserver from "../../hooks/useResizeObserver";
-//Icons
-import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
-/**
- * NOTE: Parent Node must have position: relative, to work correctly with the side bar
- */
-const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
-    //Refs
-    const sideBarRef = useRef(null);
-    //Hooks
-    const [elementWidth] = useResizeObserver(sideBarRef);
-    useOutsideClick(sideBarRef, () => {
-        if (outBoundClickClosesSideBar)
-            if (closeAction) {
-                closeAction();
-            }
-            else {
-                setOpenState(false);
-            }
-    });
-    //useState
-    const [openState, setOpenState] = useState(open);
-    return (React.createElement("div", { ref: sideBarRef, className: "side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
-                ? `calc(100% - ${elementWidth}px)`
-                : closeAction
-                    ? "100%"
-                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
-        React.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
-                if (closeAction) {
-                    closeAction();
-                }
-                else {
-                    setOpenState(!openState);
-                }
-            } }, side === "left" ? (React.createElement(BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (React.createElement(BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
-        children));
-};
-export default SideBar;
+import React, { useRef, useState } from "react";
+import "./SideBar.css";
+//Hooks
+import useOutsideClick from "../../hooks/useOutsideClick";
+import useResizeObserver from "../../hooks/useResizeObserver";
+//Icons
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
+    //Refs
+    const sideBarRef = useRef(null);
+    //Hooks
+    const [elementWidth] = useResizeObserver(sideBarRef);
+    useOutsideClick(sideBarRef, () => {
+        if (outBoundClickClosesSideBar)
+            if (closeAction) {
+                closeAction();
+            }
+            else {
+                setOpenState(false);
+            }
+    });
+    //useState
+    const [openState, setOpenState] = useState(open);
+    return (React.createElement("div", { ref: sideBarRef, className: "side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
+                ? `calc(100% - ${elementWidth}px)`
+                : closeAction
+                    ? "100%"
+                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
+        React.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
+                if (closeAction) {
+                    closeAction();
+                }
+                else {
+                    setOpenState(!openState);
+                }
+            } }, side === "left" ? (React.createElement(BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (React.createElement(BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
+        children));
+};
+export default SideBar;

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

@@ -1,8 +1,8 @@
-export interface SideBarPropsType {
-  side: "left" | "right";
-  children: JSX.Element | JSX.Element[];
-  open: boolean;
-  closeAction?: Function;
-  outBoundClickClosesSideBar?: boolean;
-  aditionalInlineStyle?: React.CSSProperties;
-}
+export interface SideBarPropsType {
+  side: "left" | "right";
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesSideBar?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+}

package/dist/esm/hooks/useOutsideClick.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-/**
- * Hook that alerts clicks outside of the passed ref
- */
-declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
-export default useOutsideClick;
+/// <reference types="react" />
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
+export default useOutsideClick;

package/dist/esm/hooks/useOutsideClick.js

@@ -1,23 +1,23 @@
-import { useEffect } from "react";
-/**
- * Hook that alerts clicks outside of the passed ref
- */
-function useOutsideClick(elementRef, onOutsideClickAction) {
-    useEffect(() => {
-        /**
-         * Alert if clicked on outside of element
-         */
-        function handleClickOutside(event) {
-            if (elementRef.current && !elementRef.current.contains(event.target)) {
-                onOutsideClickAction();
-            }
-        }
-        // Bind the event listener
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            // Unbind the event listener on clean up
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [elementRef, onOutsideClickAction]);
-}
-export default useOutsideClick;
+import { useEffect } from "react";
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+function useOutsideClick(elementRef, onOutsideClickAction) {
+    useEffect(() => {
+        /**
+         * Alert if clicked on outside of element
+         */
+        function handleClickOutside(event) {
+            if (elementRef.current && !elementRef.current.contains(event.target)) {
+                onOutsideClickAction();
+            }
+        }
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [elementRef, onOutsideClickAction]);
+}
+export default useOutsideClick;

package/dist/esm/hooks/useResizeObserver.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-/**
- * @returns Array [elementWidth, elementHeight], that represent the current
- * values of width and height of elementRef
- */
-declare function useResizeObserver(elementRef: React.MutableRefObject<HTMLElement | null>): number[];
-export default useResizeObserver;
+import React from "react";
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+declare function useResizeObserver(elementRef: React.MutableRefObject<HTMLElement | null>): number[];
+export default useResizeObserver;

package/dist/esm/hooks/useResizeObserver.js

@@ -1,28 +1,28 @@
-import { useState, useRef, useEffect } from "react";
-/**
- * @returns Array [elementWidth, elementHeight], that represent the current
- * values of width and height of elementRef
- */
-function useResizeObserver(elementRef) {
-    const [elementWidth, setElementWidth] = useState(0);
-    const [elementHeight, setElementHeight] = useState(0);
-    const observer = useRef(new ResizeObserver((entries) => {
-        const { width, height } = entries[0].contentRect;
-        setElementWidth(width);
-        setElementHeight(height);
-    }));
-    useEffect(() => {
-        if (elementRef.current !== null) {
-            observer.current.observe(elementRef.current);
-        }
-        const observerCurrentForCleanUp = observer.current;
-        const elementRefCurrentForCleanUp = elementRef.current;
-        return () => {
-            if (elementRefCurrentForCleanUp !== null) {
-                observerCurrentForCleanUp.unobserve(elementRefCurrentForCleanUp);
-            }
-        };
-    }, [elementRef, observer]);
-    return [elementWidth, elementHeight];
-}
-export default useResizeObserver;
+import { useState, useRef, useEffect } from "react";
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+function useResizeObserver(elementRef) {
+    const [elementWidth, setElementWidth] = useState(0);
+    const [elementHeight, setElementHeight] = useState(0);
+    const observer = useRef(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        setElementWidth(width);
+        setElementHeight(height);
+    }));
+    useEffect(() => {
+        if (elementRef.current !== null) {
+            observer.current.observe(elementRef.current);
+        }
+        const observerCurrentForCleanUp = observer.current;
+        const elementRefCurrentForCleanUp = elementRef.current;
+        return () => {
+            if (elementRefCurrentForCleanUp !== null) {
+                observerCurrentForCleanUp.unobserve(elementRefCurrentForCleanUp);
+            }
+        };
+    }, [elementRef, observer]);
+    return [elementWidth, elementHeight];
+}
+export default useResizeObserver;

package/dist/esm/hooks/useWindowsSize.d.ts

@@ -1,6 +1,6 @@
-/**
- * @returns Array [ancho, alto], de dichos valores refieren
- * los valores de window.innerWidth y window.innerHeight
- */
-declare function useWindowSize(): [number, number];
-export default useWindowSize;
+/**
+ * @returns Array [ancho, alto], de dichos valores refieren
+ * los valores de window.innerWidth y window.innerHeight
+ */
+declare function useWindowSize(): [number, number];
+export default useWindowSize;

package/dist/esm/hooks/useWindowsSize.js

@@ -1,18 +1,18 @@
-import { useLayoutEffect, useState } from "react";
-/**
- * @returns Array [ancho, alto], de dichos valores refieren
- * los valores de window.innerWidth y window.innerHeight
- */
-function useWindowSize() {
-    const [size, setSize] = useState([0, 0]);
-    useLayoutEffect(() => {
-        function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
-        }
-        window.addEventListener("resize", updateSize);
-        updateSize();
-        return () => window.removeEventListener("resize", updateSize);
-    }, []);
-    return size;
-}
-export default useWindowSize;
+import { useLayoutEffect, useState } from "react";
+/**
+ * @returns Array [ancho, alto], de dichos valores refieren
+ * los valores de window.innerWidth y window.innerHeight
+ */
+function useWindowSize() {
+    const [size, setSize] = useState([0, 0]);
+    useLayoutEffect(() => {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener("resize", updateSize);
+        updateSize();
+        return () => window.removeEventListener("resize", updateSize);
+    }, []);
+    return size;
+}
+export default useWindowSize;