venice-ui 2.2.11 → 2.3.0

package/dist/cjs/components/Input/Input.styles.js

@@ -69,6 +69,8 @@ exports.InputReadOnlyElement = styled_components_1.default.div `
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme_1.Theme.padding.s};`}
+  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
+  white-space: nowrap;
 `;
 exports.InputWrapper = styled_components_1.default.div `
   display: flex;

package/dist/cjs/components/Pagination/Pagination.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const react_1 = __importDefault(require("react"));
+const Icons_1 = require("../Icons");
+const Theme_1 = require("../../Theme/Theme");
+const Dropdown_1 = require("../Dropdown");
+const Pagination_styles_1 = require("./Pagination.styles");
+const getPageNumbers = (current, total) => {
+    const pages = [];
+    if (total <= 5) {
+        for (let i = 1; i <= total; i++)
+            pages.push(i);
+    }
+    else {
+        if (current <= 3) {
+            pages.push(1, 2, 3, '...', total);
+        }
+        else if (current >= total - 2) {
+            pages.push(1, '...', total - 2, total - 1, total);
+        }
+        else {
+            pages.push(1, '...', current - 1, current, current + 1, '...', total);
+        }
+    }
+    return pages;
+};
+const Pagination = ({ currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], }) => {
+    const pageNumbers = getPageNumbers(currentPage, totalPages);
+    const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
+    let dropdownOptions = availableValues.map(size => ({
+        value: size.toString(),
+        label: size.toString(),
+    }));
+    if (!dropdownOptions.some(opt => opt.value === pageSizeStr)) {
+        dropdownOptions = [
+            { value: pageSizeStr, label: pageSizeStr },
+            ...dropdownOptions,
+        ];
+    }
+    return (react_1.default.createElement(Pagination_styles_1.PaginationElement, null,
+        react_1.default.createElement(Icons_1.Icon, { name: 'back', size: 16, iconColor: Theme_1.Theme.colors.text, onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
+        pageNumbers.map((num, idx) => num === '...' ? (react_1.default.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (react_1.default.createElement(Pagination_styles_1.PaginationButton, { key: num, onClick: () => onPageChange(Number(num)), disabled: num === currentPage }, num))),
+        react_1.default.createElement(Icons_1.Icon, { name: 'forward', size: 16, iconColor: Theme_1.Theme.colors.text, onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages }),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Dropdown_1.Dropdown, { size: "small", label: "Ilo\u015B\u0107 na stron\u0119:", labelPosition: "left", handleSelect: (name, value) => {
+                    const num = Number(value);
+                    if (!isNaN(num) && num > 0) {
+                        onPageSizeChange(num);
+                    }
+                }, name: "pageSize", value: String(pageSize), options: dropdownOptions }))));
+};
+exports.Pagination = Pagination;

package/dist/cjs/components/Pagination/Pagination.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationButton = exports.PaginationElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme/Theme");
+exports.PaginationElement = styled_components_1.default.div `
+  margin-top: 16px;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+`;
+exports.PaginationButton = styled_components_1.default.button `
+  font-weight: normal;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: ${Theme_1.Theme.padding.s}
+  border-radius: 4px;
+  color: ${Theme_1.Theme.colors.text};
+  margin: 0 6px;
+  &:disabled {
+    background: ${Theme_1.Theme.colors.primary};
+    color: ${Theme_1.Theme.colors.white};
+    cursor: not-allowed;
+    border-radius: 4px;
+  }
+`;

package/dist/cjs/components/Pagination/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Pagination"), exports);

package/dist/cjs/components/Table/Table.js

@@ -31,10 +31,11 @@ const Theme_1 = require("../../Theme");
 const tableHelper_1 = require("./tableHelper");
 const HeaderCell_1 = require("./HeaderCell");
 const Cell_1 = require("./Cell");
+const Pagination_1 = require("../Pagination");
 const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
-}, moreActions = [], onRowClick, }) => {
+}, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
     const checkHeaders = () => {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
@@ -74,12 +75,21 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
             });
         }
     };
+    // PAGINACJA
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
+    const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
+    const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
+    (0, react_1.useEffect)(() => {
+        setCurrentPage(1);
+    }, [elements, currentPageSize]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             react_1.default.createElement(Table_styles_1.TableHead, null,
                 react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
+            react_1.default.createElement("tbody", null, paginatedElements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
                 return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0 }));
-            }))))))));
+            })))))),
+        ifPagination && (react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
 };
 exports.Table = Table;

package/dist/cjs/index.js

@@ -34,6 +34,7 @@ __exportStar(require("./components/Input"), exports);
 __exportStar(require("./components/List"), exports);
 __exportStar(require("./components/Loader"), exports);
 __exportStar(require("./components/Modal"), exports);
+__exportStar(require("./components/Pagination"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Selector"), exports);
 __exportStar(require("./components/Sidepanel"), exports);

package/dist/esm/components/Input/Input.styles.js

@@ -63,6 +63,8 @@ export const InputReadOnlyElement = styled.div `
 export const InputLabelElement = styled(TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme.padding.s};`}
+  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme.padding.s};`}
+  white-space: nowrap;
 `;
 export const InputWrapper = styled.div `
   display: flex;

package/dist/esm/components/Pagination/Pagination.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Icon } from '../Icons';
+import { Theme } from '../../Theme/Theme';
+import { Dropdown } from '../Dropdown';
+import { PaginationElement, PaginationButton } from './Pagination.styles';
+const getPageNumbers = (current, total) => {
+    const pages = [];
+    if (total <= 5) {
+        for (let i = 1; i <= total; i++)
+            pages.push(i);
+    }
+    else {
+        if (current <= 3) {
+            pages.push(1, 2, 3, '...', total);
+        }
+        else if (current >= total - 2) {
+            pages.push(1, '...', total - 2, total - 1, total);
+        }
+        else {
+            pages.push(1, '...', current - 1, current, current + 1, '...', total);
+        }
+    }
+    return pages;
+};
+export const Pagination = ({ currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], }) => {
+    const pageNumbers = getPageNumbers(currentPage, totalPages);
+    const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
+    let dropdownOptions = availableValues.map(size => ({
+        value: size.toString(),
+        label: size.toString(),
+    }));
+    if (!dropdownOptions.some(opt => opt.value === pageSizeStr)) {
+        dropdownOptions = [
+            { value: pageSizeStr, label: pageSizeStr },
+            ...dropdownOptions,
+        ];
+    }
+    return (React.createElement(PaginationElement, null,
+        React.createElement(Icon, { name: 'back', size: 16, iconColor: Theme.colors.text, onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
+        pageNumbers.map((num, idx) => num === '...' ? (React.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (React.createElement(PaginationButton, { key: num, onClick: () => onPageChange(Number(num)), disabled: num === currentPage }, num))),
+        React.createElement(Icon, { name: 'forward', size: 16, iconColor: Theme.colors.text, onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages }),
+        React.createElement("div", null,
+            React.createElement(Dropdown, { size: "small", label: "Ilo\u015B\u0107 na stron\u0119:", labelPosition: "left", handleSelect: (name, value) => {
+                    const num = Number(value);
+                    if (!isNaN(num) && num > 0) {
+                        onPageSizeChange(num);
+                    }
+                }, name: "pageSize", value: String(pageSize), options: dropdownOptions }))));
+};

package/dist/esm/components/Pagination/Pagination.styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { Theme } from '../../Theme/Theme';
+export const PaginationElement = styled.div `
+  margin-top: 16px;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+`;
+export const PaginationButton = styled.button `
+  font-weight: normal;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: ${Theme.padding.s}
+  border-radius: 4px;
+  color: ${Theme.colors.text};
+  margin: 0 6px;
+  &:disabled {
+    background: ${Theme.colors.primary};
+    color: ${Theme.colors.white};
+    cursor: not-allowed;
+    border-radius: 4px;
+  }
+`;

package/dist/esm/components/Pagination/index.js

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/esm/components/Table/Table.js

@@ -5,10 +5,11 @@ import { mainTheme } from '../../Theme';
 import { applySort, setSortParams } from './tableHelper';
 import { HeaderCell } from './HeaderCell';
 import { Cell } from './Cell';
+import { Pagination } from '../Pagination';
 export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
-}, moreActions = [], onRowClick, }) => {
+}, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
     const checkHeaders = () => {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
@@ -48,11 +49,20 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
             });
         }
     };
+    // PAGINACJA
+    const [currentPage, setCurrentPage] = useState(1);
+    const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
+    const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
+    const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [elements, currentPageSize]);
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             React.createElement(TableHead, null,
                 React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
+            React.createElement("tbody", null, paginatedElements.map((item) => (React.createElement(TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
                 return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0 }));
-            }))))))));
+            })))))),
+        ifPagination && (React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
 };

package/dist/esm/index.js

@@ -18,6 +18,7 @@ export * from './components/Input';
 export * from './components/List';
 export * from './components/Loader';
 export * from './components/Modal';
+export * from './components/Pagination';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';

package/dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface IPaginationProps {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    availableValues?: number[];
+}
+export declare const Pagination: React.FC<IPaginationProps>;
+export {};

package/dist/types/components/Pagination/Pagination.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const PaginationElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationButton: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/types/components/Table/Table.d.ts

@@ -27,7 +27,9 @@ interface ITableProps {
     sortable?: boolean;
     filtrable?: boolean;
     sort?: ITableSortProps;
+    pageSize?: number;
     onRowClick?: (id: string) => void;
+    ifPagination?: boolean;
 }
 export declare const Table: FC<ITableProps>;
 export {};

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export * from './components/Input';
 export * from './components/List';
 export * from './components/Loader';
 export * from './components/Modal';
+export * from './components/Pagination';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.2.11",
+  "version": "2.3.0",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",