josenanodev-react-components-library 0.0.25 → 0.0.27
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/Multicalendar/Multicalendar.d.ts +1 -1
- package/dist/cjs/components/Multicalendar/Multicalendar.js +7 -1
- package/dist/cjs/components/Multicalendar/types.d.ts +1 -0
- package/dist/cjs/components/SearchBar/SearchBar.js +0 -13
- package/dist/esm/components/Multicalendar/Multicalendar.d.ts +1 -1
- package/dist/esm/components/Multicalendar/Multicalendar.js +7 -1
- package/dist/esm/components/Multicalendar/types.d.ts +1 -0
- package/dist/esm/components/SearchBar/SearchBar.js +1 -14
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import "./Multicalendar.css";
|
|
3
3
|
import { MulticalendarPropsType } from "./types";
|
|
4
|
-
declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
|
|
4
|
+
declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnElementIdsListChanges, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
|
|
5
5
|
export default Multicalendar;
|
|
@@ -42,7 +42,7 @@ const useWindowsSize_1 = __importDefault(require("../../hooks/useWindowsSize"));
|
|
|
42
42
|
const sqlToJsDate_1 = __importDefault(require("../../utils/sqlToJsDate"));
|
|
43
43
|
//Services
|
|
44
44
|
const MulticalendarStatesAndSettings_1 = require("../../Services/MulticalendarStatesAndSettings");
|
|
45
|
-
const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }) => {
|
|
45
|
+
const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnElementIdsListChanges, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }) => {
|
|
46
46
|
//Constantes del componente
|
|
47
47
|
const origin = {
|
|
48
48
|
x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
|
|
@@ -114,6 +114,12 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
114
114
|
visibleDates,
|
|
115
115
|
callsOnInitialView,
|
|
116
116
|
]);
|
|
117
|
+
(0, react_1.useEffect)(() => {
|
|
118
|
+
if (callsOnElementIdsListChanges && visibleListElementsIds.length > 0) {
|
|
119
|
+
callsOnElementIdsListChanges(visibleListElementsIds, visibleDates);
|
|
120
|
+
}
|
|
121
|
+
// eslint-disable-next-line
|
|
122
|
+
}, [listElementsIdsArray]);
|
|
117
123
|
(0, react_1.useEffect)(() => {
|
|
118
124
|
// Posicionamiento inicial en X
|
|
119
125
|
if (gridWrapperRef.current !== null) {
|
|
@@ -19,6 +19,7 @@ export interface MulticalendarPropsType {
|
|
|
19
19
|
dynamicDaysQuantity?: boolean;
|
|
20
20
|
waitTimeForCalls?: number;
|
|
21
21
|
callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
22
|
+
callsOnElementIdsListChanges?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
22
23
|
callsOnScrollingMoves?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
23
24
|
callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
24
25
|
aditionalControlsComponents?: JSX.Element | JSX.Element[]
|
|
@@ -30,19 +30,6 @@ const bs_1 = require("react-icons/bs");
|
|
|
30
30
|
const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
|
|
31
31
|
//Estados
|
|
32
32
|
const [searchValue, setSearchValue] = (0, react_1.useState)(initialValue);
|
|
33
|
-
const [cachedSearchValue, setCachedSearchValue] = (0, react_1.useState)(initialValue);
|
|
34
|
-
//useEffect
|
|
35
|
-
(0, react_1.useEffect)(() => {
|
|
36
|
-
if (searchValue !== cachedSearchValue) {
|
|
37
|
-
if (searchValue !== "") {
|
|
38
|
-
actionOnAlteringText(searchValue);
|
|
39
|
-
}
|
|
40
|
-
else if (searchValue === "") {
|
|
41
|
-
actionOnEmptyText();
|
|
42
|
-
}
|
|
43
|
-
setCachedSearchValue(searchValue);
|
|
44
|
-
}
|
|
45
|
-
}, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
|
|
46
33
|
return (react_1.default.createElement("form", { className: "search-bar", onSubmit: (e) => {
|
|
47
34
|
e.preventDefault();
|
|
48
35
|
let searchElement = e.target.elements.namedItem("search-bar-name");
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import "./Multicalendar.css";
|
|
3
3
|
import { MulticalendarPropsType } from "./types";
|
|
4
|
-
declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
|
|
4
|
+
declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnElementIdsListChanges, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
|
|
5
5
|
export default Multicalendar;
|
|
@@ -14,7 +14,7 @@ import useWindowSize from "../../hooks/useWindowsSize";
|
|
|
14
14
|
import sqlToJsDate from "../../utils/sqlToJsDate";
|
|
15
15
|
//Services
|
|
16
16
|
import { eraseMulticalendarYScrollPosition, getMulticalendarYScrollPosition, } from "../../Services/MulticalendarStatesAndSettings";
|
|
17
|
-
const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }) => {
|
|
17
|
+
const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnElementIdsListChanges, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }) => {
|
|
18
18
|
//Constantes del componente
|
|
19
19
|
const origin = {
|
|
20
20
|
x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
|
|
@@ -86,6 +86,12 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
86
86
|
visibleDates,
|
|
87
87
|
callsOnInitialView,
|
|
88
88
|
]);
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (callsOnElementIdsListChanges && visibleListElementsIds.length > 0) {
|
|
91
|
+
callsOnElementIdsListChanges(visibleListElementsIds, visibleDates);
|
|
92
|
+
}
|
|
93
|
+
// eslint-disable-next-line
|
|
94
|
+
}, [listElementsIdsArray]);
|
|
89
95
|
useEffect(() => {
|
|
90
96
|
// Posicionamiento inicial en X
|
|
91
97
|
if (gridWrapperRef.current !== null) {
|
|
@@ -19,6 +19,7 @@ export interface MulticalendarPropsType {
|
|
|
19
19
|
dynamicDaysQuantity?: boolean;
|
|
20
20
|
waitTimeForCalls?: number;
|
|
21
21
|
callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
22
|
+
callsOnElementIdsListChanges?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
22
23
|
callsOnScrollingMoves?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
23
24
|
callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
|
|
24
25
|
aditionalControlsComponents?: JSX.Element | JSX.Element[]
|
|
@@ -1,23 +1,10 @@
|
|
|
1
|
-
import React, { useState
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import "./SearchBar.css";
|
|
3
3
|
//Icons
|
|
4
4
|
import { BsSearch, BsSliders } from "react-icons/bs";
|
|
5
5
|
const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
|
|
6
6
|
//Estados
|
|
7
7
|
const [searchValue, setSearchValue] = useState(initialValue);
|
|
8
|
-
const [cachedSearchValue, setCachedSearchValue] = useState(initialValue);
|
|
9
|
-
//useEffect
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (searchValue !== cachedSearchValue) {
|
|
12
|
-
if (searchValue !== "") {
|
|
13
|
-
actionOnAlteringText(searchValue);
|
|
14
|
-
}
|
|
15
|
-
else if (searchValue === "") {
|
|
16
|
-
actionOnEmptyText();
|
|
17
|
-
}
|
|
18
|
-
setCachedSearchValue(searchValue);
|
|
19
|
-
}
|
|
20
|
-
}, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
|
|
21
8
|
return (React.createElement("form", { className: "search-bar", onSubmit: (e) => {
|
|
22
9
|
e.preventDefault();
|
|
23
10
|
let searchElement = e.target.elements.namedItem("search-bar-name");
|