josenanodev-react-components-library 0.0.19 → 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.
@@ -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
 
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./MultipleJoinedButtonsBar.css";
3
3
  import { MultipleJoinedButtonsBarPropsType } from "./types";
4
- declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType) => JSX.Element;
4
+ declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType<any>) => JSX.Element;
5
5
  export default MultipleJoinedButtonsBar;
@@ -1,6 +1,6 @@
1
- export interface MultipleJoinedButtonsBarPropsType {
2
- options: { _id: string; visibleValue: string }[];
3
- onSelectOption: (selectedValue: string) => void;
4
- initialSelectedValue?: string;
5
- externalSelectedValue?: string;
1
+ export interface MultipleJoinedButtonsBarPropsType<T> {
2
+ options: { _id: T; visibleValue: string }[];
3
+ onSelectOption: (selectedValue: T) => void;
4
+ initialSelectedValue?: T;
5
+ externalSelectedValue?: T;
6
6
  }
@@ -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,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
 
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./MultipleJoinedButtonsBar.css";
3
3
  import { MultipleJoinedButtonsBarPropsType } from "./types";
4
- declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType) => JSX.Element;
4
+ declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType<any>) => JSX.Element;
5
5
  export default MultipleJoinedButtonsBar;
@@ -1,6 +1,6 @@
1
- export interface MultipleJoinedButtonsBarPropsType {
2
- options: { _id: string; visibleValue: string }[];
3
- onSelectOption: (selectedValue: string) => void;
4
- initialSelectedValue?: string;
5
- externalSelectedValue?: string;
1
+ export interface MultipleJoinedButtonsBarPropsType<T> {
2
+ options: { _id: T; visibleValue: string }[];
3
+ onSelectOption: (selectedValue: T) => void;
4
+ initialSelectedValue?: T;
5
+ externalSelectedValue?: T;
6
6
  }
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.0.19",
3
+ "version": "0.0.21",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },