josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/esm/components/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./DatesGrid.css";
+//Componentes
+import CellsRow from "../CellsRow/CellsRow";
+const DatesGrid = ({ gridWidth, gridHeight, xOffset, yOffset, cellsWidth, cellsHeight, visibleListElementsIdsArray, visibleDates, ReactCellChildren, }) => {
+    return (React.createElement("div", { className: "dates-grid", style: {
+            width: gridWidth,
+        } },
+        React.createElement("div", { className: "div-cells-row-height", style: {
+                height: gridHeight,
+                paddingTop: yOffset * cellsHeight,
+                paddingLeft: xOffset * cellsWidth,
+            } }, visibleListElementsIdsArray.map((listElementId) => (React.createElement(CellsRow, { key: listElementId, listElementId: listElementId, visibleDatesArray: visibleDates, width: visibleDates.length * cellsWidth, height: cellsHeight, cellsWidth: cellsWidth, cellsHeight: cellsHeight, ReactCellChildren: ReactCellChildren }))))));
+};
+export default DatesGrid;

package/dist/esm/components/Multicalendar/subcomponents/composites/DatesGrid/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactCellChildrenType } from "../../../types";
+
+export interface DatesGridPropTypes {
+  gridWidth: number;
+  gridHeight: number;
+  xOffset: number;
+  yOffset: number;
+  cellsWidth: number;
+  cellsHeight: number;
+  visibleListElementsIdsArray: string[] | number[];
+  visibleDates: Date[];
+  ReactCellChildren: ReactCellChildrenType;
+}

package/dist/esm/components/Multicalendar/subcomponents/composites/ListElementsColumn/ListElementsColumn.css

@@ -0,0 +1,3 @@
+.list-element-column {
+  box-sizing: border-box;
+}

package/dist/esm/components/Multicalendar/subcomponents/composites/ListElementsColumn/ListElementsColumn.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./ListElementsColumn.css";
+import { ListElementsColumnPropsType } from "./types";
+declare const ListElementsColumn: ({ ReactListElementChildren, listHeight, yOffset, elementsHeight, idsArray, }: ListElementsColumnPropsType) => React.JSX.Element;
+export default ListElementsColumn;

package/dist/esm/components/Multicalendar/subcomponents/composites/ListElementsColumn/ListElementsColumn.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./ListElementsColumn.css";
+import ListElement from "../../individuals/ListElement/ListElement";
+const ListElementsColumn = ({ ReactListElementChildren, listHeight, yOffset, elementsHeight, idsArray, }) => {
+    return (React.createElement("div", { className: "list-element-column", style: {
+            height: listHeight,
+            paddingTop: yOffset * elementsHeight,
+        } }, idsArray.map((listElementId) => (React.createElement(ListElement, { key: listElementId, height: elementsHeight, listElementId: listElementId, ReactListElementChildren: ReactListElementChildren })))));
+};
+export default ListElementsColumn;

package/dist/esm/components/Multicalendar/subcomponents/composites/ListElementsColumn/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactListElementChildrenType } from "../../../types";
+
+export interface ListElementsColumnPropsType {
+  ReactListElementChildren: ReactListElementChildrenType;
+  listHeight: number | string;
+  yOffset: number;
+  elementsHeight: number;
+  idsArray: string[] | number[];
+}

package/dist/esm/components/Multicalendar/subcomponents/individuals/Cell/Cell.css

@@ -0,0 +1,6 @@
+.cell {
+  position: relative;
+  border: 1px solid rgb(200, 200, 200);
+  border-radius: 6px;
+}
+

package/dist/esm/components/Multicalendar/subcomponents/individuals/Cell/Cell.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Cell.css";
+import { CellPropsType } from "./types";
+declare const _default: React.MemoExoticComponent<({ date, listElementId, width, heigth, ReactCellChildren }: CellPropsType) => React.JSX.Element>;
+export default _default;

package/dist/esm/components/Multicalendar/subcomponents/individuals/Cell/Cell.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./Cell.css";
+const Cell = ({ date, listElementId, width, heigth, ReactCellChildren }) => {
+    return (React.createElement("div", { className: "cell", style: { width: width, height: heigth } },
+        React.createElement(ReactCellChildren, { date: date, listElementId: listElementId })));
+};
+export default React.memo(Cell);

package/dist/esm/components/Multicalendar/subcomponents/individuals/Cell/types.d.ts

@@ -0,0 +1,10 @@
+import { ReactCellChildrenType } from "../../../types";
+
+export interface CellPropsType {
+  date: string;
+  /**Date in SQL format, i.e. 1993-03-29 */
+  listElementId: string | number;
+  width: number;
+  heigth: number;
+  ReactCellChildren: ReactCellChildrenType;
+}

package/dist/esm/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.css

@@ -0,0 +1,60 @@
+.dates-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row;
+  overflow-y: hidden;
+}
+
+.dates-row .date-cell {
+  position: relative;
+}
+
+.dates-row .date-cell .div-date-cell,
+.dates-row .date-cell .div-date-cell-today {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dates-row .date-cell .div-date-cell-today div {
+  border-radius: 4px;
+  background: var(--primary-color);
+  color: rgb(255, 255, 255);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 800;
+  width: 40px;
+  height: 40px;
+  padding: 1px 0;
+}
+
+.dates-row .date-cell .div-date-cell p,
+.dates-row .date-cell .div-date-cell-today p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.dates-row .date-cell .month-start {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box;
+  border-left: 1px solid rgb(235, 235, 235);
+}
+
+.dates-row .date-cell .month-start p {
+  margin: 0;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  white-space: nowrap;
+  padding-left: 8px;
+  padding-top: 8px;
+}
+

package/dist/esm/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./DatesRow.css";
+import { DatesRowPropsType } from "./types";
+declare const DatesRow: ({ visibleDates, width, height, cellsWidth, cellsHeight, offset, language, }: DatesRowPropsType) => React.JSX.Element;
+export default DatesRow;

package/dist/esm/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.js

@@ -0,0 +1,51 @@
+import React from "react";
+import "./DatesRow.css";
+const DatesRow = ({ visibleDates, width, height, cellsWidth, cellsHeight, offset, language, }) => {
+    //Variables
+    const weekdaysAbreviations = [
+        language["sunday"].slice(0, 2),
+        language["monday"].slice(0, 2),
+        language["tuesday"].slice(0, 2),
+        language["wednesday"].slice(0, 2),
+        language["thursday"].slice(0, 2),
+        language["friday"].slice(0, 2),
+        language["saturday"].slice(0, 2),
+    ];
+    const monthsNames = [
+        language["january"],
+        language["february"],
+        language["march"],
+        language["april"],
+        language["may"],
+        language["june"],
+        language["july"],
+        language["august"],
+        language["september"],
+        language["october"],
+        language["november"],
+        language["december"],
+    ];
+    return (React.createElement("div", { className: "dates-row", style: {
+            width: width,
+            height: height,
+            paddingLeft: offset * cellsWidth,
+        } }, visibleDates.length > 0 &&
+        visibleDates.map((dateObject) => (React.createElement("div", { key: dateObject.toString(), className: "date-cell", style: {
+                width: cellsWidth,
+                height: cellsHeight,
+            } },
+            React.createElement("div", { className: dateObject.getDate() === new Date().getDate() &&
+                    dateObject.getMonth() === new Date().getMonth() &&
+                    dateObject.getFullYear() === new Date().getFullYear()
+                    ? "div-date-cell-today"
+                    : "div-date-cell" },
+                React.createElement("div", null,
+                    React.createElement("p", null, weekdaysAbreviations[dateObject.getDay()]),
+                    React.createElement("p", null, dateObject.getDate()))),
+            dateObject.getDate() === 1 && (React.createElement("div", { className: "month-start" },
+                React.createElement("p", null,
+                    monthsNames[dateObject.getMonth()],
+                    " ",
+                    dateObject.getFullYear()))))))));
+};
+export default DatesRow;

package/dist/esm/components/Multicalendar/subcomponents/individuals/DatesRow/types.d.ts

@@ -0,0 +1,11 @@
+import { languageType } from "../../../../../languages/types";
+
+export interface DatesRowPropsType {
+    visibleDates: Date[];
+    width: number;
+    height: number;
+    cellsWidth: number;
+    cellsHeight: number;
+    offset: number;
+    language: languageType;
+  }

package/dist/esm/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.css

@@ -0,0 +1,14 @@
+ .dropdown-month-navigation {
+    position: relative;
+    display: flex;
+    width: 200px;
+    margin: 0px 10px;
+    border: 1px solid rgb(216, 216, 216);
+    color: black;
+    background-color: white;
+    border-radius: 6px;
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 18px;
+    height: 28px;
+  }

package/dist/esm/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./DropdownMonthNavigation.css";
+import { DropdownMonthNavigationPropsType } from "./types";
+declare const DropdownMonthNavigation: ({ visibleMonth, visibleYear, onChangeAction, options, }: DropdownMonthNavigationPropsType) => React.JSX.Element;
+export default DropdownMonthNavigation;

package/dist/esm/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.js

@@ -0,0 +1,8 @@
+import React from "react";
+import "./DropdownMonthNavigation.css";
+//Utils
+import jsToSqlDate from "../../../../../utils/jsToSqlDate";
+const DropdownMonthNavigation = ({ visibleMonth, visibleYear, onChangeAction, options, }) => {
+    return (React.createElement("select", { className: "dropdown-month-navigation", value: jsToSqlDate(new Date(visibleYear, visibleMonth, 1, 12, 0, 0, 0)), onChange: (e) => onChangeAction(e.target.value) }, options));
+};
+export default DropdownMonthNavigation;

package/dist/esm/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/types.d.ts

@@ -0,0 +1,6 @@
+export interface DropdownMonthNavigationPropsType {
+  visibleMonth: number;
+  visibleYear: number;
+  onChangeAction: Function;
+  options: JSX.Element[];
+}

package/dist/esm/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.css

@@ -0,0 +1,14 @@
+.list-element {
+  position: relative;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  background-color: white;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.list-element:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+

package/dist/esm/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./ListElement.css";
+import { ListElementPropsType } from "./types";
+declare const _default: React.MemoExoticComponent<({ listElementId, ReactListElementChildren, height, }: ListElementPropsType) => React.JSX.Element>;
+export default _default;

package/dist/esm/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./ListElement.css";
+const ListElement = ({ listElementId, ReactListElementChildren, height, }) => {
+    return (React.createElement("div", { className: "list-element", style: {
+            height: height,
+        } },
+        React.createElement(ReactListElementChildren, { listElementId: listElementId })));
+};
+export default React.memo(ListElement);

package/dist/esm/components/Multicalendar/subcomponents/individuals/ListElement/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactListElementChildrenType } from "../../../types";
+
+export interface ListElementPropsType {
+  listElementId: string | number;
+  ReactListElementChildren: ReactListElementChildrenType;
+  height: number;
+}

package/dist/esm/components/Multicalendar/types.d.ts

@@ -0,0 +1,48 @@
+import { languageType } from "../../languages/types";
+
+export interface MulticalendarPropsType {
+  multicalendarId: string;
+  ReactCellChildren: ReactCellChildrenType;
+  ReactListElementChildren: ReactListElementChildrenType;
+  listElementsIdsArray: string[] | number[];
+  language: languageType;
+  pastDatesVisible?: boolean;
+  cellsWidth?: number;
+  cellsHeight?: number;
+  verticalAxisWidth?: number;
+  horizontalAxisHeight?: number;
+  pastDaysInitialQuantity?: number;
+  futureDaysInitialQuantity?: number;
+  chunkRenderX?: number;
+  chunkRenderY?: number;
+  authomaticScrollOnDraggingOverEdges?: boolean;
+  dynamicDaysQuantity?: boolean;
+  waitTimeForCalls?: number;
+  callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
+  callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
+  aditionalControlsComponents?: JSX.Element | JSX.Element[];
+  upperLeftComponent?: JSX.Element;
+  autoSavePosition?: boolean;
+  onScrollTopChanges?: (scrollTop: number) => void
+  onScrollLeftChanges?: (scrollLeft: number) => void
+}
+
+export interface RenderCoordinatesType {
+  x: number;
+  y: number;
+}
+
+export type ReactCellChildrenType = React.ElementType<CellChildrenPropsType>;
+
+export type ReactListElementChildrenType =
+  React.ElementType<ListElementChildrenPropsType>;
+
+export type CellChildrenPropsType = { [key: string]: any } & {
+  /**Date in SQL format, i.e. 1993-03-29 */
+  date: string;
+  listElementId: string | number;
+};
+
+export type ListElementChildrenPropsType = { [key: string]: any } & {
+  listElementId: string | number;
+};

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css

@@ -0,0 +1,40 @@
+.trc-multiple-joined-buttons-bar {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.trc-multiple-joined-buttons-bar button {
+  border: var(--primary-color) solid 2px;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  color: var(--primary-color);
+  background-color: rgb(255, 255, 255);
+  padding: 5px 15px;
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.trc-multiple-joined-buttons-bar button:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+.trc-multiple-joined-buttons-bar button.selected {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.trc-multiple-joined-buttons-bar button.left-side-button {
+  border-left-width: 2px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.trc-multiple-joined-buttons-bar button.right-side-button {
+  border-right-width: 2px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./MultipleJoinedButtonsBar.css";
+import { MultipleJoinedButtonsBarPropsType } from "./types";
+declare const MultipleJoinedButtonsBar: ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }: MultipleJoinedButtonsBarPropsType<any>) => React.JSX.Element;
+export default MultipleJoinedButtonsBar;

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+import "./MultipleJoinedButtonsBar.css";
+const MultipleJoinedButtonsBar = ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }) => {
+    //States
+    const [selectedValue, setSelectedValue] = useState(initialSelectedValue);
+    //Effects
+    useEffect(() => {
+        if (externalSelectedValue &&
+            options.map((option) => option._id).includes(externalSelectedValue)) {
+            setSelectedValue(externalSelectedValue);
+        }
+    }, [externalSelectedValue]);
+    return (React.createElement("div", { className: "trc-multiple-joined-buttons-bar" }, options.map((option, index) => (React.createElement("button", { key: option._id, className: (selectedValue === option._id ? "selected" : "") +
+            (index === 0
+                ? " left-side-button"
+                : index === options.length - 1
+                    ? " right-side-button"
+                    : ""), onClick: () => {
+            setSelectedValue(option._id);
+            onSelectOption(option._id);
+        } }, option.visibleValue)))));
+};
+export default MultipleJoinedButtonsBar;

package/dist/esm/components/MultipleJoinedButtonsBar/types.d.ts

@@ -0,0 +1,6 @@
+export interface MultipleJoinedButtonsBarPropsType<T> {
+  options: { _id: T; visibleValue: string }[];
+  onSelectOption: (selectedValue: T) => void;
+  initialSelectedValue?: T;
+  externalSelectedValue?: T;
+}