@oliasoft-open-source/react-ui-library 3.12.0-beta-20 → 3.12.0-beta-21

package/dist/components/table/row/row.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import cx from 'classnames';
+import { ExpandedContentRow } from './expanded-content-row';
+import { getHeaderAlignment } from '../helper';
+import styles from './row.module.less';
+import { Cell } from '../cell/cell';
+import { Icon } from '../../icon/icon';
+import { CellType } from "../enum";
+import { IconType } from "../../../common-enum";
+export const Row = ({ row, rowIndex, isHeader = false, columnCount, colSpan, columnHeaderAlignments = [], columnAlignment = [], hasRowActions, draggableTable = false, snapshot = null, provided = null, width, columnWidths, testId, }) => {
+    const targetRef = useRef(null);
+    const columnHeaderAlignment = getHeaderAlignment(columnHeaderAlignments, isHeader, rowIndex);
+    const { onRowClick, onRowFocus, onRowMouseEnter, onRowMouseLeave, expandedContent, active, } = row;
+    const cells = row.cells.map((c, i) => {
+        const key = `${isHeader ? 0 : 1}_${rowIndex}_${i}`;
+        return (_jsx(Cell, { cell: c, isHeader: isHeader, columnAlignment: columnAlignment[i], columnHeaderAlignment: columnHeaderAlignment[i], width: columnWidths ? columnWidths[i] : undefined, snapshot: snapshot, testId: c.testId }, key));
+    });
+    const rowActions = hasRowActions && (_jsx(Cell, { cell: {
+            type: CellType.ACTIONS,
+            actions: row.actions,
+        }, isHeader: isHeader }, columnCount));
+    const getItemStyle = (isDragging, draggableStyle) => {
+        return {
+            minWidth: isDragging && `${width}px`,
+            width: isDragging && '100%',
+            display: isDragging && 'table',
+            background: isDragging && 'var(--color-background-listitem-active)',
+            border: isDragging && 'var(--color-border)',
+            borderTop: isDragging && 0,
+            opacity: isDragging && 0.1,
+            ...draggableStyle,
+        };
+    };
+    const getDragItem = () => {
+        if (row.noDrag) {
+            return _jsx("td", { "aria-labelledby": "unique-label-id" });
+        }
+        return (_jsx("td", { className: styles.dragIconCell, children: _jsx("div", { ...provided.dragHandleProps, className: styles.dragIcon, children: _jsx(Icon, { icon: IconType.DRAG }) }) }));
+    };
+    return isHeader ? (_jsxs(_Fragment, { children: [_jsxs("tr", { ref: targetRef, onClick: onRowClick, onMouseEnter: onRowMouseEnter, onMouseLeave: onRowMouseLeave, onFocus: onRowFocus, className: cx(onRowClick ? styles.clickableRow : null, onRowMouseEnter ? styles.hoverableRow : null), children: [draggableTable ? _jsx(Cell, { isHeader: true }) : null, cells, rowActions] }, rowIndex), expandedContent && expandedContent.content ? (_jsx(ExpandedContentRow, { colSpan: colSpan, flush: expandedContent.flush === true, children: expandedContent.content }, `${rowIndex}_expanded_content`)) : null] })) : (_jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onRowClick, onMouseEnter: onRowMouseEnter, onMouseLeave: onRowMouseLeave, onFocus: onRowFocus, className: cx(onRowClick && !onRowClick.noStyle ? styles.clickableRow : null, onRowMouseEnter && !onRowMouseEnter.noStyle
+                    ? styles.hoverableRow
+                    : null, active ? styles.rowActive : null), ref: provided?.innerRef || null, ...(provided?.draggableProps || null), style: snapshot && provided
+                    ? getItemStyle(snapshot.isDragging, provided.draggableProps.style)
+                    : null, children: [draggableTable ? getDragItem() : null, cells, rowActions] }, rowIndex), expandedContent && expandedContent.content ? (_jsx(ExpandedContentRow, { colSpan: colSpan, flush: expandedContent.flush === true, children: expandedContent.content }, `${rowIndex}_expanded_content`)) : null] }));
+};

package/dist/components/table/row/row.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const ActiveRow: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const RowFocusEvent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const NotStriped: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const Expandable: StoryFn<any>;
+export declare const DragAndDrop: StoryFn<any>;
+export declare const OnRowEnter: StoryFn<any>;

package/dist/components/table/row/row.stories.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Table } from '../table';
+import { Text } from '../../text/text';
+import * as storyData from '../table.stories-data';
+export default {
+    title: 'Basic/Table/Row',
+    component: Table,
+    args: {
+        table: {
+            ...storyData.table,
+        },
+    },
+};
+const Template = (args) => {
+    return (_jsx(Table
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args }));
+};
+export const ActiveRow = Template.bind({});
+ActiveRow.args = {
+    table: storyData.tableActiveRow,
+};
+export const RowFocusEvent = Template.bind({});
+RowFocusEvent.args = {
+    table: storyData.tableRowFocus,
+};
+export const NotStriped = Template.bind({});
+NotStriped.args = {
+    table: {
+        ...storyData.table,
+        striped: false,
+    },
+};
+NotStriped.parameters = {
+    docs: {
+        description: {
+            story: '`striped: false` removes tinted background on alternative rows.',
+        },
+    },
+};
+export const Expandable = () => {
+    const [expandedRow, setExpandedRow] = useState(null);
+    const toggleExpandedRow = (rowIndex) => expandedRow === rowIndex ? setExpandedRow(null) : setExpandedRow(rowIndex);
+    return (_jsx(Table, { table: {
+            ...storyData.table,
+            striped: false,
+            rows: storyData.table.rows.map((row, index) => ({
+                ...row,
+                onRowClick: () => toggleExpandedRow(index),
+                expandedContent: {
+                    content: expandedRow === index ? (_jsx("div", { children: "Example expanded content" })) : null,
+                },
+            })),
+        } }));
+};
+export const DragAndDrop = () => {
+    const withDragAndDrop = {
+        draggable: true,
+        headers: [
+            {
+                cells: [
+                    { value: 'Name' },
+                    { value: 'Weight (kg)' },
+                    { value: 'Energy (kcal / 100g)' },
+                    { value: 'Origin' },
+                ],
+            },
+        ],
+        rows: [
+            {
+                noDrag: true,
+                cells: [
+                    { value: 'Undraggable' },
+                    { value: 100 },
+                    { value: 361 },
+                    { value: 'Vietnam' },
+                ],
+            },
+            {
+                cells: [
+                    { value: 'Buckwheat' },
+                    { value: 50 },
+                    { value: 358 },
+                    { value: 'Poland' },
+                ],
+            },
+            {
+                cells: [
+                    { value: 'Couscous' },
+                    { value: 10 },
+                    { value: 368 },
+                    { value: 'France' },
+                ],
+            },
+        ],
+    };
+    const arraymove = (arr, from, to) => {
+        const copy = [...arr];
+        if (arr[to].noDrag) {
+            return arr;
+        }
+        copy.splice(to, 0, copy.splice(from, 1)[0]);
+        return copy;
+    };
+    const [rows, setRows] = useState(withDragAndDrop.rows);
+    const onListReorder = (reorderData) => {
+        const { to, from } = reorderData;
+        arraymove(rows, from, to);
+        setRows(arraymove(rows, from, to));
+    };
+    return (_jsx(Table, { table: { ...withDragAndDrop, rows }, onListReorder: onListReorder }));
+};
+export const OnRowEnter = () => {
+    const [displayText, setDisplayText] = useState('Hover any row!');
+    const rows = [1, 2, 3, 4, 5].map((val) => ({
+        cells: [{ value: `Row ${val}` }, { value: `${val ** 2}` }],
+        onRowMouseEnter: () => setDisplayText(`Hovering row ${val}`),
+        onRowMouseLeave: () => setDisplayText('Not hovering any row...'),
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { children: displayText }), _jsx(Table, { table: {
+                    fixedWidth: '100%',
+                    headers: [
+                        {
+                            cells: [{ value: 'Description' }, { value: 'Value' }],
+                            onRowMouseEnter: () => setDisplayText(`Hovering header row`),
+                            onRowMouseLeave: () => setDisplayText('Not hovering any row...'),
+                        },
+                    ],
+                    rows,
+                } })] }));
+};

package/dist/components/table/table-scroll-wrapper.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface ITableProps {
+    rows: any[];
+    infiniteScroll?: boolean;
+}
+export interface ITableScrollWrapperProps {
+    table: ITableProps;
+    children: (props: {
+        visibleRows: number;
+    }) => ReactNode;
+}
+export declare const TableScrollWrapper: ({ table, children, }: ITableScrollWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/table-scroll-wrapper.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import styles from './table.module.less';
+export const TableScrollWrapper = ({ table, children, }) => {
+    const { rows, infiniteScroll } = table;
+    const pageSize = Math.ceil(window.innerHeight / 32); // The highest number of rows that will fit on screen
+    const [visibleRows, setVisibleRows] = infiniteScroll
+        ? useState(pageSize)
+        : [rows.length, null];
+    const [hasMore, setHasMore] = infiniteScroll
+        ? useState(visibleRows < rows.length)
+        : [false, null];
+    const loadMoreItems = () => {
+        if (visibleRows >= rows.length && setHasMore) {
+            setHasMore(false);
+            return;
+        }
+        if (setVisibleRows) {
+            setVisibleRows(visibleRows + pageSize);
+        }
+    };
+    return (_jsx("div", { id: "scrollWrapper", className: styles.scroll, children: infiniteScroll ? (_jsx(InfiniteScroll, { dataLength: Math.min(rows.length, visibleRows + pageSize), next: loadMoreItems, hasMore: hasMore, scrollableTarget: "scrollWrapper", style: { overflow: 'initial' }, loader: null, children: children({ visibleRows }) })) : (children({ visibleRows })) }));
+};

package/dist/components/table/table.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { IFooterProps } from "./footer/footer";
+import { TRowsType } from "./table.viewdata";
+import { Align } from "../../common-enum";
+interface ITableProps {
+    onListReorder?: (obj: {
+        from: number;
+        to: number;
+    }) => void;
+    table: {
+        name?: string | number | ReactNode;
+        actionsRight?: boolean;
+        fixedWidth?: string | number;
+        maxHeight?: string | number;
+        columnWidths?: string[];
+        className?: string;
+        columnHeaderAlignments?: Array<Align>;
+        columnAlignment?: Array<Align>;
+        infiniteScroll?: boolean;
+        headers?: any[];
+        rows?: TRowsType;
+        footer?: IFooterProps;
+        draggable?: boolean;
+        bordered?: boolean;
+        striped?: boolean;
+        testId?: string;
+        onAddRow?: any;
+        defaultEmptyRow?: any;
+        stickyHeaders?: string | boolean;
+        actions?: any;
+    };
+}
+export declare const Table: (props: ITableProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/table.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import cx from "classnames";
+import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import { get } from "lodash";
+import styles from "./table.module.less";
+import { Title } from "./title/title";
+import { Footer } from "./footer/footer";
+import { getColumnCount, hasRowActions } from "./table.viewdata";
+import { TableScrollWrapper } from "./table-scroll-wrapper";
+import { Row } from "./row/row";
+export const Table = (props) => {
+    const { onListReorder = () => { }, table: propTable } = props;
+    const { columnWidths, footer, name, rows: propRows = [], actions, actionsRight, columnHeaderAlignments, columnAlignment, striped = true, testId, draggable, defaultEmptyRow = null, onAddRow = null, bordered = true, maxHeight, fixedWidth: width, } = propTable;
+    const targetRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (targetRef.current) {
+            setDimensions({
+                width: targetRef.current.offsetWidth,
+                height: targetRef.current.offsetHeight,
+            });
+        }
+    }, []);
+    const headers = get(props, 'table.headers', []);
+    const columnCount = getColumnCount(propRows, headers);
+    const rowActions = hasRowActions(propRows, headers);
+    const colSpan = columnCount + (rowActions ? 1 : 0);
+    const isLastPage = footer
+        ? footer?.pagination?.rowsPerPage?.value === 0 ||
+            Number(footer?.pagination?.selectedPage) >=
+                Number(footer?.pagination?.rowCount) /
+                    Number(footer?.pagination?.rowsPerPage?.value)
+        : true;
+    const addEmptyTempRow = defaultEmptyRow?.cells?.length && onAddRow && isLastPage;
+    const tempEmptyCells = addEmptyTempRow
+        ? defaultEmptyRow.cells.map((cell, i) => {
+            if (cell?.type === 'Input') {
+                return {
+                    ...cell,
+                    onChange: (evt) => {
+                        const value = evt?.target?.value;
+                        const newRow = {
+                            ...defaultEmptyRow,
+                            cells: defaultEmptyRow.cells.map((cell, cellIndex) => {
+                                return {
+                                    ...cell,
+                                    value: cellIndex === i ? value : cell?.value,
+                                };
+                            }),
+                        };
+                        onAddRow({ newRow });
+                    },
+                };
+            }
+            return {
+                ...cell,
+                disabled: true, // Just input cell would be editable
+            };
+        })
+        : null;
+    const newEmptyRow = {
+        cells: tempEmptyCells,
+        testId: testId ? `${testId}-last-empty-row` : undefined,
+    };
+    const rows = addEmptyTempRow ? propRows.concat(newEmptyRow) : propRows;
+    const table = {
+        ...propTable,
+        rows,
+    };
+    const wrapperClass = cx(styles.wrapper, bordered ? styles.bordered : '');
+    const wrapperStyles = {
+        maxHeight,
+        width,
+        // Collapse width if width = auto
+        display: width === 'auto' ? 'inline-flex' : 'flex',
+    };
+    return draggable ? (_jsxs("div", { ref: targetRef, className: wrapperClass, style: wrapperStyles, children: [_jsx(Title, { actions: actions, actionsRight: actionsRight, name: name, testId: testId && `${testId}-title` }), _jsx(DragDropContext, { onDragEnd: (result) => {
+                    const from = result?.source?.index;
+                    const to = result?.destination?.index;
+                    if (typeof from === 'number' && typeof to === 'number') {
+                        onListReorder({ from, to });
+                    }
+                }, children: _jsx(Droppable, { droppableId: "droppable", children: (provided) => {
+                        return (_jsx(TableScrollWrapper, { table: table, children: ({ visibleRows }) => (_jsxs("table", { className: cx(styles.table, striped ? styles.striped : ''), "data-testid": testId, ref: provided.innerRef, children: [_jsx("thead", { children: headers.map((row, rowIndex) => {
+                                            return (_jsx(Row, { rowIndex: rowIndex, isHeader: true, row: row, columnCount: columnCount, columnWidths: columnWidths, colSpan: colSpan, hasRowActions: rowActions, columnAlignment: columnAlignment, columnHeaderAlignments: columnHeaderAlignments, draggableTable: draggable }, `0_${rowIndex}`));
+                                        }) }), _jsxs("tbody", { children: [rows.slice(0, visibleRows).map((row, rowIndex) => (_jsx(Draggable, { draggableId: rowIndex + '', index: rowIndex, isDragDisabled: row.noDrag, children: (provided, snapshot) => (_jsx(Row, { rowIndex: rowIndex, row: row, columnCount: columnCount, columnWidths: columnWidths, colSpan: colSpan, hasRowActions: rowActions, columnAlignment: columnAlignment, provided: provided, snapshot: snapshot, draggableTable: draggable, width: dimensions.width }, `1_${rowIndex}`)) }, `index_${rowIndex}`))), provided.placeholder] })] })) }));
+                    } }) }), footer && (_jsx(Footer, { pagination: footer.pagination, actions: footer.actions, content: footer.content }))] })) : (_jsxs("div", { className: wrapperClass, style: wrapperStyles, children: [_jsx(Title, { actions: actions, actionsRight: actionsRight, name: name, testId: testId && `${testId}-title` }), _jsx(TableScrollWrapper, { table: table, children: ({ visibleRows }) => (_jsxs("table", { className: cx(styles.table, striped ? styles.striped : ''), "data-testid": testId, children: [_jsx("thead", { children: headers.map((row, rowIndex) => {
+                                return (_jsx(Row, { rowIndex: rowIndex, isHeader: true, row: row, columnCount: columnCount, columnWidths: columnWidths, colSpan: colSpan, hasRowActions: rowActions, columnAlignment: columnAlignment, columnHeaderAlignments: columnHeaderAlignments }, `0_${rowIndex}`));
+                            }) }), _jsx("tbody", { children: rows.slice(0, visibleRows).map((row, rowIndex) => (_jsx(Row, { rowIndex: rowIndex, row: row, columnCount: columnCount, columnWidths: columnWidths, colSpan: colSpan, hasRowActions: rowActions, columnAlignment: columnAlignment }, `1_${rowIndex}`))) })] })) }), footer && (_jsx(Footer, { colSpan: colSpan, pagination: footer.pagination, actions: footer.actions, content: footer.content }))] }));
+};