josenanodev-react-components-library 0.0.16 → 0.0.18

package/dist/esm/components/Slider/Slider.js

@@ -0,0 +1,140 @@
+import React, { useState, useRef, useEffect, Fragment } from "react";
+import * as ownFunctions from "./SliderOwnFunctions";
+import "./Slider.css";
+const Slider = ({ minimumValue, maximumValue, onChange, initialValue = 0, value, showValueInsideButton, editableValueInsideButton, height = 40, width = 300, sufix, prefix, }) => {
+    //Refs
+    const sliderRef = useRef(null);
+    //Estados
+    const [position, setPosition] = useState(initialValue !== undefined
+        ? ownFunctions.definePostionByValue(initialValue, width, maximumValue, minimumValue)
+        : width / 2);
+    const [visibleValue, setVisibleValue] = useState(initialValue);
+    const [temporalVisibleValue, setTemporalVisibleValue] = useState(undefined);
+    const [cancelTransition, setCancelTransition] = useState(false);
+    useEffect(() => {
+        if (value !== undefined) {
+            setVisibleValue(value);
+            setPosition(ownFunctions.definePostionByValue(value, width, maximumValue, minimumValue));
+        }
+    }, [value, width, maximumValue, minimumValue]);
+    return (React.createElement("div", { ref: sliderRef, style: { width: width, height: height }, className: "slider", onMouseDown: (event1) => {
+            var nuevovisibleValue;
+            if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                setCancelTransition(false);
+                const newPosition = event1.clientX - sliderRef.current.getBoundingClientRect().x;
+                setPosition(newPosition);
+                nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                setVisibleValue(nuevovisibleValue);
+            }
+            function repositioning(event2) {
+                setCancelTransition(true);
+                if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                    setTemporalVisibleValue(undefined);
+                    let newPosition = event2.clientX - sliderRef.current.getBoundingClientRect().x;
+                    if (newPosition < 0)
+                        newPosition = 0;
+                    if (newPosition > width)
+                        newPosition = width;
+                    setPosition(newPosition);
+                    nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                    setVisibleValue(nuevovisibleValue);
+                }
+            }
+            document.addEventListener("mousemove", repositioning);
+            function removeEventListeners() {
+                document.removeEventListener("mousemove", repositioning);
+                document.removeEventListener("mouseup", removeEventListeners);
+                setCancelTransition(false);
+                onChange(nuevovisibleValue);
+            }
+            document.addEventListener("mouseup", removeEventListeners);
+        }, onTouchStart: (event1) => {
+            var nuevovisibleValue;
+            if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                setCancelTransition(false);
+                const newPosition = event1.touches[0].clientX - sliderRef.current.getBoundingClientRect().x;
+                setPosition(newPosition);
+                nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                setVisibleValue(nuevovisibleValue);
+            }
+            function repositioning(event2) {
+                setCancelTransition(true);
+                if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                    setTemporalVisibleValue(undefined);
+                    let newPosition = event2.touches[0].clientX - sliderRef.current.getBoundingClientRect().x;
+                    if (newPosition < 0)
+                        newPosition = 0;
+                    if (newPosition > width)
+                        newPosition = width;
+                    setPosition(newPosition);
+                    nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                    setVisibleValue(nuevovisibleValue);
+                }
+            }
+            document.addEventListener("touchmove", repositioning);
+            function removeEventListeners() {
+                document.removeEventListener("touchmove", repositioning);
+                document.removeEventListener("touchend", removeEventListeners);
+                setCancelTransition(false);
+                onChange(nuevovisibleValue);
+            }
+            document.addEventListener("touchend", removeEventListeners);
+        } },
+        React.createElement("div", { style: {
+                width: position,
+                height: height * 0.8,
+                borderTopLeftRadius: (height * 0.8) / 2,
+                borderBottomLeftRadius: (height * 0.8) / 2,
+                marginRight: -height / 2,
+                transition: cancelTransition ? "none" : "all 0.3s",
+            }, className: "left-fill" }),
+        React.createElement("div", { style: { width: height, height: height }, className: "sphere" }, showValueInsideButton && (React.createElement(Fragment, null,
+            prefix !== undefined && React.createElement("p", null, prefix),
+            React.createElement("input", { disabled: !editableValueInsideButton, type: "number", min: minimumValue, max: maximumValue, value: temporalVisibleValue !== undefined ? temporalVisibleValue : visibleValue, onChange: (event) => {
+                    setTemporalVisibleValue(Number(event.target.value));
+                }, onFocus: () => {
+                    setTemporalVisibleValue(visibleValue);
+                }, onKeyDown: (event) => {
+                    if (event.key === "Enter" && temporalVisibleValue !== undefined) {
+                        let nuevovalue = temporalVisibleValue;
+                        if (nuevovalue < minimumValue)
+                            nuevovalue = minimumValue;
+                        if (nuevovalue > maximumValue)
+                            nuevovalue = maximumValue;
+                        const newPosition = ownFunctions.definePostionByValue(nuevovalue, width, maximumValue, minimumValue);
+                        setPosition(newPosition);
+                        const nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                        setVisibleValue(nuevovisibleValue);
+                        onChange(nuevovisibleValue);
+                        setTemporalVisibleValue(undefined);
+                    }
+                    if (event.key === "Escape") {
+                        setPosition(ownFunctions.definePostionByValue(visibleValue, width, maximumValue, minimumValue));
+                        setTemporalVisibleValue(undefined);
+                    }
+                }, onBlur: () => {
+                    if (temporalVisibleValue !== undefined) {
+                        let nuevovalue = temporalVisibleValue;
+                        if (nuevovalue < minimumValue)
+                            nuevovalue = minimumValue;
+                        if (nuevovalue > maximumValue)
+                            nuevovalue = maximumValue;
+                        const newPosition = ownFunctions.definePostionByValue(nuevovalue, width, maximumValue, minimumValue);
+                        setPosition(newPosition);
+                        const nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                        setVisibleValue(nuevovisibleValue);
+                        onChange(nuevovisibleValue);
+                        setTemporalVisibleValue(undefined);
+                    }
+                } }),
+            sufix !== undefined && React.createElement("p", null, sufix)))),
+        React.createElement("div", { style: {
+                width: width - position,
+                height: height * 0.8,
+                borderTopRightRadius: (height * 0.8) / 2,
+                borderBottomRightRadius: (height * 0.8) / 2,
+                marginLeft: -height / 2,
+                transition: cancelTransition ? "none" : "all 0.3s",
+            }, className: "right-fill" })));
+};
+export default Slider;

package/dist/esm/components/Slider/SliderOwnFunctions.d.ts

@@ -0,0 +1,2 @@
+export declare function defineVisibleValue(posicion: number, ancho: number, valorMaximo: number, valorMinimo: number): number;
+export declare function definePostionByValue(nuevoValor: number, ancho: number, valorMaximo: number, valorMinimo: number): number;

package/dist/esm/components/Slider/SliderOwnFunctions.js

@@ -0,0 +1,6 @@
+export function defineVisibleValue(posicion, ancho, valorMaximo, valorMinimo) {
+    return Math.round((posicion / (ancho)) * (valorMaximo - valorMinimo) + valorMinimo);
+}
+export function definePostionByValue(nuevoValor, ancho, valorMaximo, valorMinimo) {
+    return ((nuevoValor - valorMinimo) / (valorMaximo - valorMinimo)) * (ancho);
+}

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

@@ -0,0 +1,13 @@
+export interface SliderPropsType {
+  minimumValue: number;
+  maximumValue: number;
+  onChange: (newValue: number) => Function;
+  initialValue?: number;
+  value?: number;
+  showValueInsideButton?: boolean;
+  editableValueInsideButton?: boolean;
+  height?: number;
+  width?: number;
+  sufix?: string;
+  prefix?: string;
+}

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

@@ -2,5 +2,5 @@
 /**
  * Hook that alerts clicks outside of the passed ref
  */
-declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function): void;
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function, elementsRefsExceptions?: React.MutableRefObject<HTMLElement | null>[]): void;
 export default useOutsideClick;

package/dist/esm/hooks/useOutsideClick.js

@@ -2,13 +2,15 @@ import { useEffect } from "react";
 /**
  * Hook that alerts clicks outside of the passed ref
  */
-function useOutsideClick(elementRef, onOutsideClickAction) {
+function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsExceptions = []) {
     useEffect(() => {
         /**
          * Alert if clicked on outside of element
          */
         function handleClickOutside(event) {
-            if (elementRef.current && !elementRef.current.contains(event.target)) {
+            if (elementRef.current &&
+                !elementRef.current.contains(event.target) &&
+                elementsRefsExceptions.every((elementRefException) => elementRefException.current !== event.target)) {
                 onOutsideClickAction();
             }
         }
@@ -18,6 +20,6 @@ function useOutsideClick(elementRef, onOutsideClickAction) {
             // Unbind the event listener on clean up
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [elementRef, onOutsideClickAction]);
+    }, [elementRef, onOutsideClickAction, elementsRefsExceptions]);
 }
 export default useOutsideClick;

package/dist/esm/index.d.ts

@@ -3,5 +3,9 @@ import SideBar from "./components/SideBar/SideBar";
 import SearchBar from "./components/SearchBar/SearchBar";
 import Modal from "./components/Modal/Modal";
 import PopUp from "./components/PopUp/PopUp";
+import ProgressBar from "./components/ProgressBar/ProgressBar";
+import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSelectionList";
+import Slider from "./components/Slider/Slider";
+import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, };

package/dist/esm/index.js

@@ -3,5 +3,9 @@ import SideBar from "./components/SideBar/SideBar";
 import SearchBar from "./components/SearchBar/SearchBar";
 import Modal from "./components/Modal/Modal";
 import PopUp from "./components/PopUp/PopUp";
+import ProgressBar from "./components/ProgressBar/ProgressBar";
+import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSelectionList";
+import Slider from "./components/Slider/Slider";
+import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
 import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
-export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "josenanodev-react-components-library",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "author": {
     "name": "Jose Carlos Cardenas Martinez"
   },