josenanodev-react-components-library 0.0.20 → 0.0.22

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.
Files changed (13) hide show
  1. package/dist/cjs/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css +1 -1
  2. package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.d.ts +1 -1
  3. package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.js +14 -4
  4. package/dist/cjs/components/ParallelSelectionList/types.d.ts +3 -0
  5. package/dist/cjs/hooks/useOutsideClick.d.ts +0 -3
  6. package/dist/cjs/hooks/useOutsideClick.js +0 -8
  7. package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css +1 -1
  8. package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.d.ts +1 -1
  9. package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.js +14 -4
  10. package/dist/esm/components/ParallelSelectionList/types.d.ts +3 -0
  11. package/dist/esm/hooks/useOutsideClick.d.ts +0 -3
  12. package/dist/esm/hooks/useOutsideClick.js +0 -8
  13. package/package.json +1 -1
package/dist/cjs/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .multiple-joined-buttons-bar {
2
2
  display: flex;
3
- align-items: center;
3
+ align-items: stretch;
4
4
  justify-content: center;
5
5
  }
6
6
 
package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./ParallelSelectionList.css";
3
3
  import { ParallelSelectionListPropsTypes } from "./types";
4
- declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
4
+ declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, onSelectionChange, leftListTitle, rightListTitle, leftListApplyAllButtonText, rightListApplyAllButtonText, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
5
5
  export default ParallelSelectionList;
package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.js CHANGED
@@ -10,7 +10,7 @@ require("./ParallelSelectionList.css");
10
10
  const bs_1 = require("react-icons/bs");
11
11
  //Hooks
12
12
  const useResizeObserver_1 = __importDefault(require("../../hooks/useResizeObserver"));
13
- const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
13
+ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, onSelectionChange, leftListTitle, rightListTitle, leftListApplyAllButtonText, rightListApplyAllButtonText, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
14
14
  //Refs
15
15
  const leftListRef = (0, react_2.useRef)(null);
16
16
  const rightListRef = (0, react_2.useRef)(null);
@@ -36,6 +36,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
36
36
  }
37
37
  });
38
38
  setSelectedDatumsIds(selectedDatumsIdsClone);
39
+ if (onSelectionChange) {
40
+ onSelectionChange(selectedDatumsIdsClone);
41
+ }
39
42
  };
40
43
  const removeFromSelectedDatumsIds = (datumIdsArray) => {
41
44
  const selectedDatumsIdsClone = [...selectedDatumsIds];
@@ -45,6 +48,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
45
48
  }
46
49
  });
47
50
  setSelectedDatumsIds(selectedDatumsIdsClone);
51
+ if (onSelectionChange) {
52
+ onSelectionChange(selectedDatumsIdsClone);
53
+ }
48
54
  };
49
55
  //useEffects
50
56
  (0, react_2.useEffect)(() => {
@@ -73,7 +79,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
73
79
  leftListWidth,
74
80
  leftListFirstVisibleElementIndex,
75
81
  listElementsHeight,
76
- filteredLeftList.length
82
+ filteredLeftList.length,
77
83
  ]);
78
84
  (0, react_2.useEffect)(() => {
79
85
  if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
@@ -89,7 +95,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
89
95
  rightListWidth,
90
96
  rightListFirstVisibleElementIndex,
91
97
  listElementsHeight,
92
- filteredRightList.length
98
+ filteredRightList.length,
93
99
  ]);
94
100
  return (react_1.default.createElement("div", { className: "parallel-selection-list" },
95
101
  react_1.default.createElement("div", { className: "div-left-list" },
@@ -99,6 +105,8 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
99
105
  react_1.default.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
100
106
  react_1.default.createElement("div", { className: "list-container" },
101
107
  react_1.default.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
108
+ leftListApplyAllButtonText,
109
+ " ",
102
110
  react_1.default.createElement(bs_1.BsChevronDoubleRight, null)),
103
111
  react_1.default.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
104
112
  react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
@@ -117,7 +125,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
117
125
  react_1.default.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
118
126
  react_1.default.createElement("div", { className: "list-container" },
119
127
  react_1.default.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
120
- react_1.default.createElement(bs_1.BsChevronDoubleLeft, null)),
128
+ react_1.default.createElement(bs_1.BsChevronDoubleLeft, null),
129
+ " ",
130
+ rightListApplyAllButtonText),
121
131
  react_1.default.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
122
132
  react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
123
133
  paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
package/dist/cjs/components/ParallelSelectionList/types.d.ts CHANGED
@@ -2,8 +2,11 @@ export interface ParallelSelectionListPropsTypes {
2
2
  dataList: ListDatumType[];
3
3
  applyAction: (dataListId: ListDatumType["_id"][]) => void;
4
4
  cancelAction: Function;
5
+ onSelectionChange?: (dataListId: ListDatumType["_id"][]) => void;
5
6
  leftListTitle?: string;
6
7
  rightListTitle?: string;
8
+ leftListApplyAllButtonText?: string;
9
+ rightListApplyAllButtonText?: string;
7
10
  searchBarsVisible?: boolean;
8
11
  applyButonText?: string;
9
12
  cancelButtonText?: string;
package/dist/cjs/hooks/useOutsideClick.d.ts CHANGED
@@ -1,6 +1,3 @@
1
1
  /// <reference types="react" />
2
- /**
3
- * Hook that alerts clicks outside of the passed ref
4
- */
5
2
  declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function, elementsRefsExceptions?: React.MutableRefObject<HTMLElement | null>[]): void;
6
3
  export default useOutsideClick;
package/dist/cjs/hooks/useOutsideClick.js CHANGED
@@ -1,14 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const react_1 = require("react");
4
- /**
5
- * Hook that alerts clicks outside of the passed ref
6
- */
7
4
  function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsExceptions = []) {
8
5
  (0, react_1.useEffect)(() => {
9
- /**
10
- * Alert if clicked on outside of element
11
- */
12
6
  function handleClickOutside(event) {
13
7
  if (elementRef.current &&
14
8
  !elementRef.current.contains(event.target) &&
@@ -16,10 +10,8 @@ function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsException
16
10
  onOutsideClickAction();
17
11
  }
18
12
  }
19
- // Bind the event listener
20
13
  document.addEventListener("mousedown", handleClickOutside);
21
14
  return () => {
22
- // Unbind the event listener on clean up
23
15
  document.removeEventListener("mousedown", handleClickOutside);
24
16
  };
25
17
  }, [elementRef, onOutsideClickAction, elementsRefsExceptions]);
package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .multiple-joined-buttons-bar {
2
2
  display: flex;
3
- align-items: center;
3
+ align-items: stretch;
4
4
  justify-content: center;
5
5
  }
6
6
 
package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./ParallelSelectionList.css";
3
3
  import { ParallelSelectionListPropsTypes } from "./types";
4
- declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
4
+ declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, onSelectionChange, leftListTitle, rightListTitle, leftListApplyAllButtonText, rightListApplyAllButtonText, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
5
5
  export default ParallelSelectionList;
package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.js CHANGED
@@ -5,7 +5,7 @@ import "./ParallelSelectionList.css";
5
5
  import { BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight, BsSearch, } from "react-icons/bs";
6
6
  //Hooks
7
7
  import useResizeObserver from "../../hooks/useResizeObserver";
8
- const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTitle, rightListTitle, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
8
+ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, onSelectionChange, leftListTitle, rightListTitle, leftListApplyAllButtonText, rightListApplyAllButtonText, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
9
9
  //Refs
10
10
  const leftListRef = useRef(null);
11
11
  const rightListRef = useRef(null);
@@ -31,6 +31,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
31
31
  }
32
32
  });
33
33
  setSelectedDatumsIds(selectedDatumsIdsClone);
34
+ if (onSelectionChange) {
35
+ onSelectionChange(selectedDatumsIdsClone);
36
+ }
34
37
  };
35
38
  const removeFromSelectedDatumsIds = (datumIdsArray) => {
36
39
  const selectedDatumsIdsClone = [...selectedDatumsIds];
@@ -40,6 +43,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
40
43
  }
41
44
  });
42
45
  setSelectedDatumsIds(selectedDatumsIdsClone);
46
+ if (onSelectionChange) {
47
+ onSelectionChange(selectedDatumsIdsClone);
48
+ }
43
49
  };
44
50
  //useEffects
45
51
  useEffect(() => {
@@ -68,7 +74,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
68
74
  leftListWidth,
69
75
  leftListFirstVisibleElementIndex,
70
76
  listElementsHeight,
71
- filteredLeftList.length
77
+ filteredLeftList.length,
72
78
  ]);
73
79
  useEffect(() => {
74
80
  if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
@@ -84,7 +90,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
84
90
  rightListWidth,
85
91
  rightListFirstVisibleElementIndex,
86
92
  listElementsHeight,
87
- filteredRightList.length
93
+ filteredRightList.length,
88
94
  ]);
89
95
  return (React.createElement("div", { className: "parallel-selection-list" },
90
96
  React.createElement("div", { className: "div-left-list" },
@@ -94,6 +100,8 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
94
100
  React.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
95
101
  React.createElement("div", { className: "list-container" },
96
102
  React.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
103
+ leftListApplyAllButtonText,
104
+ " ",
97
105
  React.createElement(BsChevronDoubleRight, null)),
98
106
  React.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
99
107
  React.createElement("div", { className: "resizable-div-for-scroll", style: {
@@ -112,7 +120,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
112
120
  React.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
113
121
  React.createElement("div", { className: "list-container" },
114
122
  React.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
115
- React.createElement(BsChevronDoubleLeft, null)),
123
+ React.createElement(BsChevronDoubleLeft, null),
124
+ " ",
125
+ rightListApplyAllButtonText),
116
126
  React.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
117
127
  React.createElement("div", { className: "resizable-div-for-scroll", style: {
118
128
  paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
package/dist/esm/components/ParallelSelectionList/types.d.ts CHANGED
@@ -2,8 +2,11 @@ export interface ParallelSelectionListPropsTypes {
2
2
  dataList: ListDatumType[];
3
3
  applyAction: (dataListId: ListDatumType["_id"][]) => void;
4
4
  cancelAction: Function;
5
+ onSelectionChange?: (dataListId: ListDatumType["_id"][]) => void;
5
6
  leftListTitle?: string;
6
7
  rightListTitle?: string;
8
+ leftListApplyAllButtonText?: string;
9
+ rightListApplyAllButtonText?: string;
7
10
  searchBarsVisible?: boolean;
8
11
  applyButonText?: string;
9
12
  cancelButtonText?: string;
package/dist/esm/hooks/useOutsideClick.d.ts CHANGED
@@ -1,6 +1,3 @@
1
1
  /// <reference types="react" />
2
- /**
3
- * Hook that alerts clicks outside of the passed ref
4
- */
5
2
  declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function, elementsRefsExceptions?: React.MutableRefObject<HTMLElement | null>[]): void;
6
3
  export default useOutsideClick;
package/dist/esm/hooks/useOutsideClick.js CHANGED
@@ -1,12 +1,6 @@
1
1
  import { useEffect } from "react";
2
- /**
3
- * Hook that alerts clicks outside of the passed ref
4
- */
5
2
  function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsExceptions = []) {
6
3
  useEffect(() => {
7
- /**
8
- * Alert if clicked on outside of element
9
- */
10
4
  function handleClickOutside(event) {
11
5
  if (elementRef.current &&
12
6
  !elementRef.current.contains(event.target) &&
@@ -14,10 +8,8 @@ function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsException
14
8
  onOutsideClickAction();
15
9
  }
16
10
  }
17
- // Bind the event listener
18
11
  document.addEventListener("mousedown", handleClickOutside);
19
12
  return () => {
20
- // Unbind the event listener on clean up
21
13
  document.removeEventListener("mousedown", handleClickOutside);
22
14
  };
23
15
  }, [elementRef, onOutsideClickAction, elementsRefsExceptions]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.0.20",
3
+ "version": "0.0.22",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },