josenanodev-react-components-library 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -49,11 +49,12 @@ function styleObjectParser(styleObject) {
49
49
  }
50
50
  function downloadExcel(fileName, data, headers) {
51
51
  if (data !== undefined) {
52
- const wb = XLSX.utils.book_new();
52
+ const workbook = XLSX.utils.book_new();
53
53
  for (const sheetName in data) {
54
54
  if (Object.prototype.hasOwnProperty.call(data, sheetName)) {
55
55
  let dataXlsxJs = [];
56
- if (headers !== undefined) {
56
+ if (headers !== undefined &&
57
+ Object.prototype.hasOwnProperty.call(headers, sheetName)) {
57
58
  dataXlsxJs = [
58
59
  headers[sheetName].map((header) => styleObjectParser(header)),
59
60
  ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
@@ -64,11 +65,11 @@ function downloadExcel(fileName, data, headers) {
64
65
  ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
65
66
  ];
66
67
  }
67
- const ws = XLSX.utils.aoa_to_sheet(dataXlsxJs);
68
- XLSX.utils.book_append_sheet(wb, ws, sheetName);
68
+ const worksheet = XLSX.utils.aoa_to_sheet(dataXlsxJs);
69
+ XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
69
70
  }
70
71
  }
71
- XLSX.writeFile(wb, `${fileName}.xlsx`);
72
+ XLSX.writeFile(workbook, `${fileName}.xlsx`);
72
73
  }
73
74
  }
74
75
  exports.downloadExcel = downloadExcel;
@@ -0,0 +1,60 @@
1
+ .div-wrapper-input-box-with-confirmation {
2
+ position: relative;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ border: solid 1px rgb(184, 184, 184);
7
+ background-color: rgb(250, 250, 250);
8
+ border-radius: 8px;
9
+ transition: border 0.3s;
10
+ }
11
+
12
+ .div-wrapper-input-box-with-confirmation.focused {
13
+ border-color: var(--primary-color);
14
+ }
15
+
16
+ .div-wrapper-input-box-with-confirmation .input-box-with-confirmation {
17
+ box-sizing: border-box;
18
+ padding: 10px 2ch;
19
+ min-width: 10ch;
20
+ text-align: center;
21
+ border: none;
22
+ background-color: transparent;
23
+ font-size: 16px;
24
+ font-weight: 600;
25
+ color: dimgray;
26
+ transition: all 0.2s;
27
+ }
28
+
29
+ .div-wrapper-input-box-with-confirmation
30
+ .input-box-with-confirmation::-webkit-inner-spin-button {
31
+ display: none;
32
+ }
33
+
34
+ .div-wrapper-input-box-with-confirmation .input-box-with-confirmation:focus,
35
+ .div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation:focus {
36
+ outline: none;
37
+ }
38
+
39
+ .div-wrapper-input-box-with-confirmation .input-box-with-confirmation:focus{
40
+ color: rgb(37, 37, 37);
41
+ }
42
+
43
+ .div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation {
44
+ position: absolute;
45
+ right: 0px;
46
+ background-color: transparent;
47
+ color: rgb(158, 158, 158);
48
+ width: 32px;
49
+ height: 32px;
50
+ border-radius: 16px;
51
+ font-size: 16px;
52
+ border: none;
53
+ cursor: pointer;
54
+ transition: all 0.2s;
55
+ }
56
+
57
+ .div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation:hover {
58
+ background-color: rgb(241, 241, 241);
59
+ color: var(--primary-color);
60
+ }
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import "./InputBoxWithConfirmation.css";
3
+ import { InputBoxWithConfirmationPropsType } from "./types";
4
+ declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, aditionalClass, defaultValue, }: InputBoxWithConfirmationPropsType) => JSX.Element;
5
+ export default InputBoxWithConfirmation;
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ const react_1 = __importStar(require("react"));
30
+ require("./InputBoxWithConfirmation.css");
31
+ //Hooks
32
+ const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
33
+ //Icons
34
+ const bs_1 = require("react-icons/bs");
35
+ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", aditionalClass, defaultValue, }) => {
36
+ //Refs
37
+ const inputRef = (0, react_1.useRef)(null);
38
+ const containerRef = (0, react_1.useRef)(null);
39
+ //States
40
+ const [cachedValue, setCachedValue] = (0, react_1.useState)(String(defaultValue));
41
+ const [currentValue, setCurrentValue] = (0, react_1.useState)(String(defaultValue));
42
+ const [focused, setFocused] = (0, react_1.useState)(false);
43
+ //Hooks
44
+ (0, useOutsideClick_1.default)(containerRef, () => {
45
+ setCurrentValue(cachedValue);
46
+ setFocused(false);
47
+ });
48
+ //Variables
49
+ return (react_1.default.createElement("div", { ref: containerRef, className: `div-wrapper-input-box-with-confirmation ${focused ? "focused" : ""} ${aditionalClass ? aditionalClass : ""}` },
50
+ react_1.default.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, value: focused ? currentValue : cachedValue, onChange: (event) => setCurrentValue(event.target.value), onFocus: (event) => {
51
+ setCachedValue(event.target.value);
52
+ setCurrentValue(event.target.value);
53
+ setFocused(true);
54
+ } }),
55
+ focused ? (react_1.default.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
56
+ if (currentValue) {
57
+ onConfirmAction(currentValue);
58
+ setCachedValue(currentValue);
59
+ }
60
+ setFocused(false);
61
+ } },
62
+ react_1.default.createElement(bs_1.BsCheckLg, null))) : (react_1.default.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
63
+ if (inputRef.current) {
64
+ inputRef.current.focus();
65
+ }
66
+ } },
67
+ react_1.default.createElement(bs_1.BsPencil, null)))));
68
+ };
69
+ exports.default = InputBoxWithConfirmation;
@@ -0,0 +1,6 @@
1
+ export interface InputBoxWithConfirmationPropsType {
2
+ onConfirmAction: (inputCurrentValue: string) => void;
3
+ inputType?: HTMLInputElement["type"];
4
+ aditionalClass?: string;
5
+ defaultValue?: string | number;
6
+ }
@@ -8,6 +8,7 @@ import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSe
8
8
  import Slider from "./components/Slider/Slider";
9
9
  import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
10
10
  import ExportToExcelButton from "./components/ExportToExcelButton/ExportToExcelButton";
11
+ import InputBoxWithConfirmation from "./components/InputBoxWithConfirmation/InputBoxWithConfirmation";
11
12
  import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
12
13
  export type { ExportToExcelButtonPropsType } from "./components/ExportToExcelButton/types";
13
- export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, };
14
+ export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation };
package/dist/cjs/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ExportToExcelButton = exports.MultipleJoinedButtonsBar = exports.Slider = exports.ParallelSelectionList = exports.ProgressBar = exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
6
+ exports.InputBoxWithConfirmation = exports.ExportToExcelButton = exports.MultipleJoinedButtonsBar = exports.Slider = exports.ParallelSelectionList = exports.ProgressBar = exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
7
7
  const Multicalendar_1 = __importDefault(require("./components/Multicalendar/Multicalendar"));
8
8
  exports.Multicalendar = Multicalendar_1.default;
9
9
  const SideBar_1 = __importDefault(require("./components/SideBar/SideBar"));
@@ -24,5 +24,7 @@ const MultipleJoinedButtonsBar_1 = __importDefault(require("./components/Multipl
24
24
  exports.MultipleJoinedButtonsBar = MultipleJoinedButtonsBar_1.default;
25
25
  const ExportToExcelButton_1 = __importDefault(require("./components/ExportToExcelButton/ExportToExcelButton"));
26
26
  exports.ExportToExcelButton = ExportToExcelButton_1.default;
27
+ const InputBoxWithConfirmation_1 = __importDefault(require("./components/InputBoxWithConfirmation/InputBoxWithConfirmation"));
28
+ exports.InputBoxWithConfirmation = InputBoxWithConfirmation_1.default;
27
29
  const MulticalendarStatesAndSettings_1 = require("./Services/MulticalendarStatesAndSettings");
28
30
  Object.defineProperty(exports, "setMulticalendarYScrollPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarYScrollPosition; } });
@@ -23,11 +23,12 @@ function styleObjectParser(styleObject) {
23
23
  }
24
24
  export function downloadExcel(fileName, data, headers) {
25
25
  if (data !== undefined) {
26
- const wb = XLSX.utils.book_new();
26
+ const workbook = XLSX.utils.book_new();
27
27
  for (const sheetName in data) {
28
28
  if (Object.prototype.hasOwnProperty.call(data, sheetName)) {
29
29
  let dataXlsxJs = [];
30
- if (headers !== undefined) {
30
+ if (headers !== undefined &&
31
+ Object.prototype.hasOwnProperty.call(headers, sheetName)) {
31
32
  dataXlsxJs = [
32
33
  headers[sheetName].map((header) => styleObjectParser(header)),
33
34
  ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
@@ -38,10 +39,10 @@ export function downloadExcel(fileName, data, headers) {
38
39
  ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
39
40
  ];
40
41
  }
41
- const ws = XLSX.utils.aoa_to_sheet(dataXlsxJs);
42
- XLSX.utils.book_append_sheet(wb, ws, sheetName);
42
+ const worksheet = XLSX.utils.aoa_to_sheet(dataXlsxJs);
43
+ XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
43
44
  }
44
45
  }
45
- XLSX.writeFile(wb, `${fileName}.xlsx`);
46
+ XLSX.writeFile(workbook, `${fileName}.xlsx`);
46
47
  }
47
48
  }
@@ -0,0 +1,60 @@
1
+ .div-wrapper-input-box-with-confirmation {
2
+ position: relative;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ border: solid 1px rgb(184, 184, 184);
7
+ background-color: rgb(250, 250, 250);
8
+ border-radius: 8px;
9
+ transition: border 0.3s;
10
+ }
11
+
12
+ .div-wrapper-input-box-with-confirmation.focused {
13
+ border-color: var(--primary-color);
14
+ }
15
+
16
+ .div-wrapper-input-box-with-confirmation .input-box-with-confirmation {
17
+ box-sizing: border-box;
18
+ padding: 10px 2ch;
19
+ min-width: 10ch;
20
+ text-align: center;
21
+ border: none;
22
+ background-color: transparent;
23
+ font-size: 16px;
24
+ font-weight: 600;
25
+ color: dimgray;
26
+ transition: all 0.2s;
27
+ }
28
+
29
+ .div-wrapper-input-box-with-confirmation
30
+ .input-box-with-confirmation::-webkit-inner-spin-button {
31
+ display: none;
32
+ }
33
+
34
+ .div-wrapper-input-box-with-confirmation .input-box-with-confirmation:focus,
35
+ .div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation:focus {
36
+ outline: none;
37
+ }
38
+
39
+ .div-wrapper-input-box-with-confirmation .input-box-with-confirmation:focus{
40
+ color: rgb(37, 37, 37);
41
+ }
42
+
43
+ .div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation {
44
+ position: absolute;
45
+ right: 0px;
46
+ background-color: transparent;
47
+ color: rgb(158, 158, 158);
48
+ width: 32px;
49
+ height: 32px;
50
+ border-radius: 16px;
51
+ font-size: 16px;
52
+ border: none;
53
+ cursor: pointer;
54
+ transition: all 0.2s;
55
+ }
56
+
57
+ .div-wrapper-input-box-with-confirmation .button-for-input-box-with-confirmation:hover {
58
+ background-color: rgb(241, 241, 241);
59
+ color: var(--primary-color);
60
+ }
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import "./InputBoxWithConfirmation.css";
3
+ import { InputBoxWithConfirmationPropsType } from "./types";
4
+ declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, aditionalClass, defaultValue, }: InputBoxWithConfirmationPropsType) => JSX.Element;
5
+ export default InputBoxWithConfirmation;
@@ -0,0 +1,41 @@
1
+ import React, { useState, useRef } from "react";
2
+ import "./InputBoxWithConfirmation.css";
3
+ //Hooks
4
+ import useOutsideClick from "../../hooks/useOutsideClick";
5
+ //Icons
6
+ import { BsCheckLg, BsPencil } from "react-icons/bs";
7
+ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", aditionalClass, defaultValue, }) => {
8
+ //Refs
9
+ const inputRef = useRef(null);
10
+ const containerRef = useRef(null);
11
+ //States
12
+ const [cachedValue, setCachedValue] = useState(String(defaultValue));
13
+ const [currentValue, setCurrentValue] = useState(String(defaultValue));
14
+ const [focused, setFocused] = useState(false);
15
+ //Hooks
16
+ useOutsideClick(containerRef, () => {
17
+ setCurrentValue(cachedValue);
18
+ setFocused(false);
19
+ });
20
+ //Variables
21
+ return (React.createElement("div", { ref: containerRef, className: `div-wrapper-input-box-with-confirmation ${focused ? "focused" : ""} ${aditionalClass ? aditionalClass : ""}` },
22
+ React.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, value: focused ? currentValue : cachedValue, onChange: (event) => setCurrentValue(event.target.value), onFocus: (event) => {
23
+ setCachedValue(event.target.value);
24
+ setCurrentValue(event.target.value);
25
+ setFocused(true);
26
+ } }),
27
+ focused ? (React.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
28
+ if (currentValue) {
29
+ onConfirmAction(currentValue);
30
+ setCachedValue(currentValue);
31
+ }
32
+ setFocused(false);
33
+ } },
34
+ React.createElement(BsCheckLg, null))) : (React.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
35
+ if (inputRef.current) {
36
+ inputRef.current.focus();
37
+ }
38
+ } },
39
+ React.createElement(BsPencil, null)))));
40
+ };
41
+ export default InputBoxWithConfirmation;
@@ -0,0 +1,6 @@
1
+ export interface InputBoxWithConfirmationPropsType {
2
+ onConfirmAction: (inputCurrentValue: string) => void;
3
+ inputType?: HTMLInputElement["type"];
4
+ aditionalClass?: string;
5
+ defaultValue?: string | number;
6
+ }
@@ -8,6 +8,7 @@ import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSe
8
8
  import Slider from "./components/Slider/Slider";
9
9
  import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
10
10
  import ExportToExcelButton from "./components/ExportToExcelButton/ExportToExcelButton";
11
+ import InputBoxWithConfirmation from "./components/InputBoxWithConfirmation/InputBoxWithConfirmation";
11
12
  import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
12
13
  export type { ExportToExcelButtonPropsType } from "./components/ExportToExcelButton/types";
13
- export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, };
14
+ export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation };
package/dist/esm/index.js CHANGED
@@ -8,5 +8,6 @@ import ParallelSelectionList from "./components/ParallelSelectionList/ParallelSe
8
8
  import Slider from "./components/Slider/Slider";
9
9
  import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
10
10
  import ExportToExcelButton from "./components/ExportToExcelButton/ExportToExcelButton";
11
+ import InputBoxWithConfirmation from "./components/InputBoxWithConfirmation/InputBoxWithConfirmation";
11
12
  import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
12
- export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, };
13
+ export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.1.4",
3
+ "version": "0.2.0",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },