josenanodev-react-components-library 0.0.17 → 0.0.18

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

@@ -1,5 +1,5 @@
-#modal,
-#close-modal {
+.modal,
+.close-modal {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -14,7 +14,7 @@
   animation-duration: 500ms;
 }
 
-#close-modal {
+.close-modal {
   animation-name: close-modal;
   animation-duration: 500ms;
 }

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

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

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

@@ -31,7 +31,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 require("./Modal.css");
 //Hooks
 const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-const Modal = ({ children, parentElement, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
+const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
     //Refs
     const modalRef = (0, react_1.useRef)(null);
     //Estados
@@ -73,7 +73,7 @@ const Modal = ({ children, parentElement, visibility, forced = false, onOpen, on
                             onClose();
                     }, transitionTime - 50);
                 }
-            } }, children), parentElement);
+            } }, children), document.body);
     }
     else {
         return react_1.default.createElement(react_1.default.Fragment, null);

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

@@ -1,6 +1,5 @@
 export interface ModalPropsType {
   children: JSX.Element;
-  parentElement: HTMLElement;
   visibility: boolean;
   forced?: boolean;
   onOpen?: Function;

package/dist/cjs/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css

@@ -0,0 +1,40 @@
+.multiple-joined-buttons-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.multiple-joined-buttons-bar button {
+  border: var(--primary-color) solid 2px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  color: var(--primary-color);
+  background-color: rgb(255, 255, 255);
+  padding: 5px 15px;
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.multiple-joined-buttons-bar button:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+.multiple-joined-buttons-bar button.selected {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.multiple-joined-buttons-bar button.left-side-button {
+  border-left-width: 2px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.multiple-joined-buttons-bar button.right-side-button {
+  border-right-width: 2px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./MultipleJoinedButtonsBar.css";
+import { MultipleJoinedButtonsBarPropsType } from "./types";
+declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType) => JSX.Element;
+export default MultipleJoinedButtonsBar;

package/dist/cjs/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.js

@@ -0,0 +1,48 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+require("./MultipleJoinedButtonsBar.css");
+const MultipleJoinedButtonsBar = ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }) => {
+    //States
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)(initialSelectedValue);
+    //Effects
+    (0, react_1.useEffect)(() => {
+        if (externalSelectedValue &&
+            options.map((option) => option._id).includes(externalSelectedValue)) {
+            setSelectedValue(externalSelectedValue);
+        }
+    }, [externalSelectedValue]);
+    return (react_1.default.createElement("div", { className: "multiple-joined-buttons-bar" }, options.map((option, index) => (react_1.default.createElement("button", { key: option._id, className: (selectedValue === option._id ? "selected" : "") +
+            (index === 0
+                ? " left-side-button"
+                : index === options.length - 1
+                    ? " right-side-button"
+                    : ""), onClick: () => {
+            setSelectedValue(option._id);
+            onSelectOption(option._id);
+        } }, option.visibleValue)))));
+};
+exports.default = MultipleJoinedButtonsBar;

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

@@ -0,0 +1,6 @@
+export interface MultipleJoinedButtonsBarPropsType {
+  options: { _id: string; visibleValue: string }[];
+  onSelectOption: (selectedValue: string) => Function;
+  initialSelectedValue?: string;
+  externalSelectedValue?: string;
+}

package/dist/cjs/components/Slider/Slider.css

@@ -0,0 +1,51 @@
+.slider {
+  display: flex;
+  align-items: center;
+}
+
+.slider .left-fill {
+  border: 2px solid rgb(216, 216, 216);
+  background-color: var(--secondary-color);
+}
+
+.slider .right-fill {
+  border: 2px solid rgb(216, 216, 216);
+  background-color: rgb(211, 211, 211);
+}
+
+.slider .sphere {
+  border-radius: 100%;
+  box-shadow: 0px 0px 20px 2px #a7a7a7;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  z-index: 2;
+}
+
+.slider .sphere p {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #757575;
+  width: 25%;
+}
+
+.slider .sphere input {
+  width: 70%;
+  border: none;
+  background-color: transparent;
+  text-align: right;
+  font-size: 12px;
+  font-weight: 600;
+  color: #757575;
+}
+
+.slider .sphere input::-webkit-inner-spin-button {
+  display: none;
+}
+
+.slider .sphere input:focus {
+  outline: none;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./Slider.css";
+import { SliderPropsType } from "./types";
+declare const Slider: ({ minimumValue, maximumValue, onChange, initialValue, value, showValueInsideButton, editableValueInsideButton, height, width, sufix, prefix, }: SliderPropsType) => JSX.Element;
+export default Slider;

package/dist/cjs/components/Slider/Slider.js

@@ -0,0 +1,165 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ownFunctions = __importStar(require("./SliderOwnFunctions"));
+require("./Slider.css");
+const Slider = ({ minimumValue, maximumValue, onChange, initialValue = 0, value, showValueInsideButton, editableValueInsideButton, height = 40, width = 300, sufix, prefix, }) => {
+    //Refs
+    const sliderRef = (0, react_1.useRef)(null);
+    //Estados
+    const [position, setPosition] = (0, react_1.useState)(initialValue !== undefined
+        ? ownFunctions.definePostionByValue(initialValue, width, maximumValue, minimumValue)
+        : width / 2);
+    const [visibleValue, setVisibleValue] = (0, react_1.useState)(initialValue);
+    const [temporalVisibleValue, setTemporalVisibleValue] = (0, react_1.useState)(undefined);
+    const [cancelTransition, setCancelTransition] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined) {
+            setVisibleValue(value);
+            setPosition(ownFunctions.definePostionByValue(value, width, maximumValue, minimumValue));
+        }
+    }, [value, width, maximumValue, minimumValue]);
+    return (react_1.default.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_1.default.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_1.default.createElement("div", { style: { width: height, height: height }, className: "sphere" }, showValueInsideButton && (react_1.default.createElement(react_1.Fragment, null,
+            prefix !== undefined && react_1.default.createElement("p", null, prefix),
+            react_1.default.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_1.default.createElement("p", null, sufix)))),
+        react_1.default.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" })));
+};
+exports.default = Slider;

package/dist/cjs/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/cjs/components/Slider/SliderOwnFunctions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.definePostionByValue = exports.defineVisibleValue = void 0;
+function defineVisibleValue(posicion, ancho, valorMaximo, valorMinimo) {
+    return Math.round((posicion / (ancho)) * (valorMaximo - valorMinimo) + valorMinimo);
+}
+exports.defineVisibleValue = defineVisibleValue;
+function definePostionByValue(nuevoValor, ancho, valorMaximo, valorMinimo) {
+    return ((nuevoValor - valorMinimo) / (valorMaximo - valorMinimo)) * (ancho);
+}
+exports.definePostionByValue = definePostionByValue;

package/dist/cjs/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/cjs/index.d.ts

@@ -5,5 +5,7 @@ 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, ProgressBar, ParallelSelectionList };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, };

package/dist/cjs/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ParallelSelectionList = exports.ProgressBar = exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
+exports.MultipleJoinedButtonsBar = exports.Slider = exports.ParallelSelectionList = exports.ProgressBar = exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
 const Multicalendar_1 = __importDefault(require("./components/Multicalendar/Multicalendar"));
 exports.Multicalendar = Multicalendar_1.default;
 const SideBar_1 = __importDefault(require("./components/SideBar/SideBar"));
@@ -18,5 +18,9 @@ const ProgressBar_1 = __importDefault(require("./components/ProgressBar/Progress
 exports.ProgressBar = ProgressBar_1.default;
 const ParallelSelectionList_1 = __importDefault(require("./components/ParallelSelectionList/ParallelSelectionList"));
 exports.ParallelSelectionList = ParallelSelectionList_1.default;
+const Slider_1 = __importDefault(require("./components/Slider/Slider"));
+exports.Slider = Slider_1.default;
+const MultipleJoinedButtonsBar_1 = __importDefault(require("./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar"));
+exports.MultipleJoinedButtonsBar = MultipleJoinedButtonsBar_1.default;
 const MulticalendarStatesAndSettings_1 = require("./Services/MulticalendarStatesAndSettings");
 Object.defineProperty(exports, "setMulticalendarYScrollPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarYScrollPosition; } });

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

@@ -1,5 +1,5 @@
-#modal,
-#close-modal {
+.modal,
+.close-modal {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -14,7 +14,7 @@
   animation-duration: 500ms;
 }
 
-#close-modal {
+.close-modal {
   animation-name: close-modal;
   animation-duration: 500ms;
 }

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

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

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

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import "./Modal.css";
 //Hooks
 import useOutsideClick from "../../hooks/useOutsideClick";
-const Modal = ({ children, parentElement, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
+const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
     //Refs
     const modalRef = useRef(null);
     //Estados
@@ -45,7 +45,7 @@ const Modal = ({ children, parentElement, visibility, forced = false, onOpen, on
                             onClose();
                     }, transitionTime - 50);
                 }
-            } }, children), parentElement);
+            } }, children), document.body);
     }
     else {
         return React.createElement(React.Fragment, null);

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

@@ -1,6 +1,5 @@
 export interface ModalPropsType {
   children: JSX.Element;
-  parentElement: HTMLElement;
   visibility: boolean;
   forced?: boolean;
   onOpen?: Function;

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css

@@ -0,0 +1,40 @@
+.multiple-joined-buttons-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.multiple-joined-buttons-bar button {
+  border: var(--primary-color) solid 2px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  color: var(--primary-color);
+  background-color: rgb(255, 255, 255);
+  padding: 5px 15px;
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.multiple-joined-buttons-bar button:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+.multiple-joined-buttons-bar button.selected {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.multiple-joined-buttons-bar button.left-side-button {
+  border-left-width: 2px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.multiple-joined-buttons-bar button.right-side-button {
+  border-right-width: 2px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./MultipleJoinedButtonsBar.css";
+import { MultipleJoinedButtonsBarPropsType } from "./types";
+declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType) => JSX.Element;
+export default MultipleJoinedButtonsBar;

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+import "./MultipleJoinedButtonsBar.css";
+const MultipleJoinedButtonsBar = ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }) => {
+    //States
+    const [selectedValue, setSelectedValue] = useState(initialSelectedValue);
+    //Effects
+    useEffect(() => {
+        if (externalSelectedValue &&
+            options.map((option) => option._id).includes(externalSelectedValue)) {
+            setSelectedValue(externalSelectedValue);
+        }
+    }, [externalSelectedValue]);
+    return (React.createElement("div", { className: "multiple-joined-buttons-bar" }, options.map((option, index) => (React.createElement("button", { key: option._id, className: (selectedValue === option._id ? "selected" : "") +
+            (index === 0
+                ? " left-side-button"
+                : index === options.length - 1
+                    ? " right-side-button"
+                    : ""), onClick: () => {
+            setSelectedValue(option._id);
+            onSelectOption(option._id);
+        } }, option.visibleValue)))));
+};
+export default MultipleJoinedButtonsBar;

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

@@ -0,0 +1,6 @@
+export interface MultipleJoinedButtonsBarPropsType {
+  options: { _id: string; visibleValue: string }[];
+  onSelectOption: (selectedValue: string) => Function;
+  initialSelectedValue?: string;
+  externalSelectedValue?: string;
+}

package/dist/esm/components/Slider/Slider.css

@@ -0,0 +1,51 @@
+.slider {
+  display: flex;
+  align-items: center;
+}
+
+.slider .left-fill {
+  border: 2px solid rgb(216, 216, 216);
+  background-color: var(--secondary-color);
+}
+
+.slider .right-fill {
+  border: 2px solid rgb(216, 216, 216);
+  background-color: rgb(211, 211, 211);
+}
+
+.slider .sphere {
+  border-radius: 100%;
+  box-shadow: 0px 0px 20px 2px #a7a7a7;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  z-index: 2;
+}
+
+.slider .sphere p {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #757575;
+  width: 25%;
+}
+
+.slider .sphere input {
+  width: 70%;
+  border: none;
+  background-color: transparent;
+  text-align: right;
+  font-size: 12px;
+  font-weight: 600;
+  color: #757575;
+}
+
+.slider .sphere input::-webkit-inner-spin-button {
+  display: none;
+}
+
+.slider .sphere input:focus {
+  outline: none;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./Slider.css";
+import { SliderPropsType } from "./types";
+declare const Slider: ({ minimumValue, maximumValue, onChange, initialValue, value, showValueInsideButton, editableValueInsideButton, height, width, sufix, prefix, }: SliderPropsType) => JSX.Element;
+export default Slider;

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/index.d.ts

@@ -5,5 +5,7 @@ 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, ProgressBar, ParallelSelectionList };
+export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, };

package/dist/esm/index.js

@@ -5,5 +5,7 @@ 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, ProgressBar, ParallelSelectionList };
+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.17",
+  "version": "0.0.18",
   "author": {
     "name": "Jose Carlos Cardenas Martinez"
   },