josenanodev-react-components-library 0.0.21 → 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.
- package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.d.ts +1 -1
- package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.js +7 -1
- package/dist/cjs/components/ParallelSelectionList/types.d.ts +1 -0
- package/dist/cjs/hooks/useOutsideClick.d.ts +0 -3
- package/dist/cjs/hooks/useOutsideClick.js +0 -8
- package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.d.ts +1 -1
- package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.js +7 -1
- package/dist/esm/components/ParallelSelectionList/types.d.ts +1 -0
- package/dist/esm/hooks/useOutsideClick.d.ts +0 -3
- package/dist/esm/hooks/useOutsideClick.js +0 -8
- package/package.json +1 -1
|
@@ -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, leftListApplyAllButtonText, rightListApplyAllButtonText, 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;
|
|
@@ -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, leftListApplyAllButtonText, rightListApplyAllButtonText, 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)(() => {
|
|
@@ -2,6 +2,7 @@ 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;
|
|
7
8
|
leftListApplyAllButtonText?: string;
|
|
@@ -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;
|
|
@@ -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]);
|
|
@@ -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, leftListApplyAllButtonText, rightListApplyAllButtonText, 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;
|
|
@@ -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, leftListApplyAllButtonText, rightListApplyAllButtonText, 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(() => {
|
|
@@ -2,6 +2,7 @@ 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;
|
|
7
8
|
leftListApplyAllButtonText?: string;
|
|
@@ -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;
|
|
@@ -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]);
|