josenanodev-react-components-library 0.0.20 → 0.0.21
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/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css +1 -1
- package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.d.ts +1 -1
- package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.js +8 -4
- package/dist/cjs/components/ParallelSelectionList/types.d.ts +2 -0
- package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css +1 -1
- package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.d.ts +1 -1
- package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.js +8 -4
- package/dist/esm/components/ParallelSelectionList/types.d.ts +2 -0
- 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, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds, listElementsHeight, }: ParallelSelectionListPropsTypes) => JSX.Element;
|
|
4
|
+
declare const ParallelSelectionList: ({ dataList, applyAction, cancelAction, 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, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
|
|
13
|
+
const ParallelSelectionList = ({ dataList, applyAction, cancelAction, 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);
|
|
@@ -73,7 +73,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
73
73
|
leftListWidth,
|
|
74
74
|
leftListFirstVisibleElementIndex,
|
|
75
75
|
listElementsHeight,
|
|
76
|
-
filteredLeftList.length
|
|
76
|
+
filteredLeftList.length,
|
|
77
77
|
]);
|
|
78
78
|
(0, react_2.useEffect)(() => {
|
|
79
79
|
if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
|
|
@@ -89,7 +89,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
89
89
|
rightListWidth,
|
|
90
90
|
rightListFirstVisibleElementIndex,
|
|
91
91
|
listElementsHeight,
|
|
92
|
-
filteredRightList.length
|
|
92
|
+
filteredRightList.length,
|
|
93
93
|
]);
|
|
94
94
|
return (react_1.default.createElement("div", { className: "parallel-selection-list" },
|
|
95
95
|
react_1.default.createElement("div", { className: "div-left-list" },
|
|
@@ -99,6 +99,8 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
99
99
|
react_1.default.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
|
|
100
100
|
react_1.default.createElement("div", { className: "list-container" },
|
|
101
101
|
react_1.default.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
|
|
102
|
+
leftListApplyAllButtonText,
|
|
103
|
+
" ",
|
|
102
104
|
react_1.default.createElement(bs_1.BsChevronDoubleRight, null)),
|
|
103
105
|
react_1.default.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
|
|
104
106
|
react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
|
|
@@ -117,7 +119,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
117
119
|
react_1.default.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
|
|
118
120
|
react_1.default.createElement("div", { className: "list-container" },
|
|
119
121
|
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)
|
|
122
|
+
react_1.default.createElement(bs_1.BsChevronDoubleLeft, null),
|
|
123
|
+
" ",
|
|
124
|
+
rightListApplyAllButtonText),
|
|
121
125
|
react_1.default.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
|
|
122
126
|
react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
|
|
123
127
|
paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
|
|
@@ -4,6 +4,8 @@ export interface ParallelSelectionListPropsTypes {
|
|
|
4
4
|
cancelAction: Function;
|
|
5
5
|
leftListTitle?: string;
|
|
6
6
|
rightListTitle?: string;
|
|
7
|
+
leftListApplyAllButtonText?: string;
|
|
8
|
+
rightListApplyAllButtonText?: string;
|
|
7
9
|
searchBarsVisible?: boolean;
|
|
8
10
|
applyButonText?: string;
|
|
9
11
|
cancelButtonText?: string;
|
|
@@ -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, 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, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
|
|
8
|
+
const ParallelSelectionList = ({ dataList, applyAction, cancelAction, 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);
|
|
@@ -68,7 +68,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
68
68
|
leftListWidth,
|
|
69
69
|
leftListFirstVisibleElementIndex,
|
|
70
70
|
listElementsHeight,
|
|
71
|
-
filteredLeftList.length
|
|
71
|
+
filteredLeftList.length,
|
|
72
72
|
]);
|
|
73
73
|
useEffect(() => {
|
|
74
74
|
if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
|
|
@@ -84,7 +84,7 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
84
84
|
rightListWidth,
|
|
85
85
|
rightListFirstVisibleElementIndex,
|
|
86
86
|
listElementsHeight,
|
|
87
|
-
filteredRightList.length
|
|
87
|
+
filteredRightList.length,
|
|
88
88
|
]);
|
|
89
89
|
return (React.createElement("div", { className: "parallel-selection-list" },
|
|
90
90
|
React.createElement("div", { className: "div-left-list" },
|
|
@@ -94,6 +94,8 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
94
94
|
React.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
|
|
95
95
|
React.createElement("div", { className: "list-container" },
|
|
96
96
|
React.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
|
|
97
|
+
leftListApplyAllButtonText,
|
|
98
|
+
" ",
|
|
97
99
|
React.createElement(BsChevronDoubleRight, null)),
|
|
98
100
|
React.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
|
|
99
101
|
React.createElement("div", { className: "resizable-div-for-scroll", style: {
|
|
@@ -112,7 +114,9 @@ const ParallelSelectionList = ({ dataList, applyAction, cancelAction, leftListTi
|
|
|
112
114
|
React.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
|
|
113
115
|
React.createElement("div", { className: "list-container" },
|
|
114
116
|
React.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
|
|
115
|
-
React.createElement(BsChevronDoubleLeft, null)
|
|
117
|
+
React.createElement(BsChevronDoubleLeft, null),
|
|
118
|
+
" ",
|
|
119
|
+
rightListApplyAllButtonText),
|
|
116
120
|
React.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
|
|
117
121
|
React.createElement("div", { className: "resizable-div-for-scroll", style: {
|
|
118
122
|
paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
|
|
@@ -4,6 +4,8 @@ export interface ParallelSelectionListPropsTypes {
|
|
|
4
4
|
cancelAction: Function;
|
|
5
5
|
leftListTitle?: string;
|
|
6
6
|
rightListTitle?: string;
|
|
7
|
+
leftListApplyAllButtonText?: string;
|
|
8
|
+
rightListApplyAllButtonText?: string;
|
|
7
9
|
searchBarsVisible?: boolean;
|
|
8
10
|
applyButonText?: string;
|
|
9
11
|
cancelButtonText?: string;
|