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

package/dist/components/list/list.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { Card } from '../card/card';
+import { ListHeading } from './list-row/list-heading';
+import { ListRow } from './list-row/list-row';
+import styles from './list.module.less';
+import { Loader } from '../loader/loader';
+export const List = ({ list, bordered = false, expanding = false, narrow = false, toggleNarrow = false, onToggleNarrow = () => { }, invokeEditOnRowClick = true, noHeader = false, stickyHeader, draggable = false, onListReorder = () => { }, marginBottom = 0, height, testId, scrollDetails = {
+    scrollable: false,
+    hideScrollbar: false,
+    triggerScrollToActiveItem: false,
+    infiniteScroll: false,
+    limit: 10,
+    infiniteScrollTarget: undefined,
+}, }) => {
+    const { scrollable, hideScrollbar, triggerScrollToActiveItem, infiniteScroll, infiniteScrollTarget, } = scrollDetails;
+    const listHeadingRef = useRef(null);
+    const listRowRefs = useRef([]);
+    const listContainerRef = useRef(null);
+    const MIN_ITEM_HEIGHT = 44;
+    const pageSize = infiniteScroll
+        ? Math.ceil(window.innerHeight / MIN_ITEM_HEIGHT)
+        : list.items.length;
+    const [numVisibleRows, setNumVisibleRows] = useState(pageSize);
+    const [hasMore, setHasMore] = useState(numVisibleRows < list?.items.length);
+    // update length of ref array if items are added or removed
+    useEffect(() => {
+        listRowRefs.current = listRowRefs.current.slice(0, list.items.length);
+    }, [list.items.length]);
+    const loadMoreItems = () => {
+        if (numVisibleRows >= list.items.length) {
+            setHasMore(false);
+            return;
+        }
+        const newVisibleRows = pageSize + numVisibleRows;
+        setNumVisibleRows(newVisibleRows);
+    };
+    const findFirstActiveItemIndex = (items) => items.findIndex((item) => item.active === true);
+    const setScrollToActiveItem = (activeItemIndex) => {
+        if (!listContainerRef.current || !listHeadingRef.current)
+            return;
+        // account for list row border length.
+        const itemBorderLength = 1;
+        if (triggerScrollToActiveItem && activeItemIndex >= 0) {
+            // add heights from div of items up until the active item
+            const itemOffsets = listRowRefs.current.reduce((acc, val, index) => {
+                if (index < activeItemIndex) {
+                    return acc + val.clientHeight + itemBorderLength;
+                }
+                return acc;
+            }, 0);
+            // center active item
+            const centerOffset = listContainerRef.current.clientHeight / 2 -
+                listRowRefs.current[activeItemIndex].clientHeight / 2;
+            const scrollOffset = itemOffsets - centerOffset;
+            // if sticky header, offset by half of heading div height
+            if (stickyHeader) {
+                const headingOffset = listHeadingRef.current.clientHeight / 2;
+                listContainerRef.current.scrollTop = scrollOffset + headingOffset;
+            }
+            // if not sticky header, offset by heading div height
+            const headingOffset = listHeadingRef.current.clientHeight;
+            listContainerRef.current.scrollTop = scrollOffset + headingOffset;
+        }
+    };
+    useEffect(() => {
+        if (triggerScrollToActiveItem) {
+            const activeItemIndex = findFirstActiveItemIndex(list?.items);
+            setScrollToActiveItem(activeItemIndex);
+        }
+    }, [
+        listContainerRef.current,
+        listHeadingRef.current,
+        triggerScrollToActiveItem,
+    ]);
+    return (_jsx(DragDropContext, { onDragEnd: (result) => {
+            const from = result?.source?.index;
+            const to = result?.destination?.index;
+            onListReorder({ from, to });
+        }, children: _jsx(Droppable, { droppableId: "droppable", children: (provided, snapshot) => {
+                return (_jsx("div", { className: cx(narrow ? styles.narrow : '', scrollable ? styles.scrollableList : '', hideScrollbar ? styles.hideScrollbar : ''), "data-testid": testId, id: "scrollableDiv", style: { height, marginBottom }, ref: listContainerRef, children: _jsx("div", { ref: provided.innerRef, ...provided.droppableProps, children: _jsxs(Card, { bordered: bordered, padding: false, children: [!noHeader && (_jsx(ListHeading, { name: list.name, actions: list.actions, toggleNarrow: toggleNarrow, onToggleNarrow: onToggleNarrow, stickyHeader: stickyHeader, ref: listHeadingRef })), _jsx("div", { className: cx(styles.list, bordered ? styles.bordered : ''), children: infiniteScroll ? (_jsx(InfiniteScroll, { dataLength: numVisibleRows, next: loadMoreItems, hasMore: hasMore, scrollableTarget: infiniteScrollTarget || 'scrollableDiv', loader: _jsx(Loader, {}), children: _jsx(ListRow, { draggable: draggable, items: list.items.slice(0, numVisibleRows), expanding: expanding, invokeEditOnRowClick: invokeEditOnRowClick, onListReorder: onListReorder, provided: provided, snapshot: snapshot, ref: listRowRefs }) })) : (_jsx(ListRow, { draggable: draggable, items: list.items, expanding: expanding, invokeEditOnRowClick: invokeEditOnRowClick, onListReorder: onListReorder, provided: provided, snapshot: snapshot, ref: listRowRefs })) })] }) }) }));
+            } }) }));
+};

package/dist/components/list/list.stories-data.d.ts

@@ -0,0 +1,310 @@
+import React from "react";
+import { IListItem } from "./list-row/list-row.interface";
+export declare const items: IListItem[];
+export declare const list: {
+    items: IListItem[];
+};
+export declare const listHeader: {
+    name: string;
+    actions: ({
+        label: string;
+        subActions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        primary?: undefined;
+        icon?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        primary: boolean;
+        icon: string;
+        onClick: () => void;
+        subActions?: undefined;
+    })[];
+    items: IListItem[];
+};
+export declare const listSubheadings: {
+    items: IListItem[];
+    name: string;
+    actions: ({
+        label: string;
+        subActions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        primary?: undefined;
+        icon?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        primary: boolean;
+        icon: string;
+        onClick: () => void;
+        subActions?: undefined;
+    })[];
+};
+export declare const listJsx: {
+    name: import("react/jsx-runtime").JSX.Element;
+    items: {
+        name: import("react/jsx-runtime").JSX.Element;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+    actions: ({
+        label: string;
+        subActions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        primary?: undefined;
+        icon?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        primary: boolean;
+        icon: string;
+        onClick: () => void;
+        subActions?: undefined;
+    })[];
+};
+export declare const listSubcomponents: {
+    items: {
+        actions: {
+            childComponent: import("react/jsx-runtime").JSX.Element;
+        }[];
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listSubmenus: {
+    items: {
+        actions: {
+            label: string;
+            subActions: {
+                label: string;
+                icon: string;
+                onClick: () => void;
+            }[];
+        }[];
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listBadges: {
+    items: {
+        label: {
+            value: string;
+            color: string;
+        };
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listSubheadingsBadges: {
+    items: {
+        label: {
+            value: string;
+            color: string;
+        };
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+    name: string;
+    actions: ({
+        label: string;
+        subActions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        primary?: undefined;
+        icon?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        primary: boolean;
+        icon: string;
+        onClick: () => void;
+        subActions?: undefined;
+    })[];
+};
+export declare const listActions: {
+    items: {
+        actions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listDetails: {
+    items: {
+        details: string;
+        metadata: string;
+        testId: string;
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listExpanding: {
+    items: {
+        content: import("react/jsx-runtime").JSX.Element;
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listNested: {
+    items: IListItem[];
+};
+export declare const listInvalid: {
+    items: (IListItem | {
+        id: number;
+        name: string;
+        invalid: boolean;
+    })[];
+};
+export declare const listIconTooltip: {
+    items: {
+        icon: {
+            icon: string;
+            color: string;
+            tooltip: {
+                text: import("react/jsx-runtime").JSX.Element;
+            };
+        };
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+        metaCount?: number | undefined;
+    }[];
+};
+export declare const listCounts: {
+    items: {
+        metaCount: number;
+        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        cursor?: string | undefined;
+        url?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        onClick?: ((evt: any) => void) | undefined;
+        title?: string | undefined;
+        testId?: string | undefined;
+        level?: number | undefined;
+        label?: import("./list-row/list-row.interface").ILabel | undefined;
+        actions?: import("../actions/actions.interface").IAction[] | undefined;
+        id: string | number;
+        type?: string | undefined;
+    }[];
+};
+export declare const listLong: {
+    name: string;
+    items: {
+        id: number;
+        name: string;
+    }[];
+};

package/dist/components/list/list.stories-data.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Flex } from "../layout/flex/flex";
+import { Menu } from "../menu/menu";
+import { Icon } from "../icon/icon";
+import { IconType, TriggerType } from "../../common-enum";
+import { MenuType } from "../menu/enum";
+export const items = [
+    {
+        id: 1,
+        name: 'Aardvark',
+    },
+    {
+        id: 2,
+        name: 'Kangaroo',
+        active: true,
+    },
+    {
+        id: 3,
+        name: 'Jaguar',
+        disabled: true,
+    },
+];
+const itemsSubheadings = [
+    {
+        id: 1,
+        name: 'Marsupials',
+        type: 'Heading',
+        metaCount: 1,
+    },
+    {
+        id: 2,
+        name: 'Aardvark',
+    },
+    {
+        id: 3,
+        name: 'Kangaroo',
+        active: true,
+    },
+    {
+        id: 4,
+        name: 'Mammals',
+        type: 'Heading',
+        metaCount: 1,
+    },
+    {
+        id: 5,
+        name: 'Jaguar',
+    },
+];
+const itemsNested = [
+    {
+        id: 1,
+        name: 'Aardvark',
+    },
+    {
+        id: 2,
+        name: 'Kangaroo',
+        active: true,
+    },
+    {
+        id: 3,
+        name: 'Grey',
+        level: 1,
+    },
+    {
+        id: 4,
+        name: 'Eastern',
+        level: 2,
+    },
+    {
+        id: 5,
+        name: 'Macropus giganteus giganteus',
+        title: 'Macropus giganteus giganteus',
+        level: 3,
+    },
+    {
+        id: 6,
+        name: 'Macropus giganteus tasmaniensis',
+        title: 'Macropus giganteus tasmaniensis',
+        level: 3,
+    },
+    {
+        id: 7,
+        name: 'Western',
+        level: 2,
+    },
+    {
+        id: 8,
+        name: 'Red',
+        level: 1,
+    },
+    {
+        id: 9,
+        name: 'Jaguar',
+    },
+];
+export const list = {
+    items,
+};
+export const listHeader = {
+    name: 'Animals',
+    actions: [
+        {
+            label: 'More',
+            subActions: [
+                {
+                    label: 'Item',
+                    icon: 'up',
+                    onClick: () => { },
+                },
+                {
+                    label: 'Item',
+                    icon: 'down',
+                    onClick: () => { },
+                },
+            ],
+        },
+        {
+            label: 'Add',
+            primary: true,
+            icon: 'add',
+            onClick: () => { },
+        },
+    ],
+    items,
+};
+export const listSubheadings = {
+    ...listHeader,
+    items: itemsSubheadings,
+};
+export const listJsx = {
+    ...listHeader,
+    name: (_jsxs(Flex, { gap: "8px", children: ["Animals", _jsx(Icon, { icon: IconType.STAR })] })),
+    items: items.map((item) => ({
+        ...item,
+        name: (_jsxs(Flex, { gap: "8px", alignItems: "center", children: [item.name, _jsx(Icon, { icon: IconType.STAR })] })),
+    })),
+};
+export const listSubcomponents = {
+    //  TODO - revisit after MENU component
+    items: items.map((item) => ({
+        ...item,
+        actions: [
+            {
+                childComponent: (_jsx(Menu, { menu: {
+                        trigger: TriggerType.COMPONENT,
+                        component: _jsx(Icon, { icon: IconType.MENU }),
+                        placement: 'bottom-end',
+                        sections: [
+                            {
+                                type: MenuType.OPTION,
+                                label: 'Item',
+                                onClick: () => { },
+                            },
+                            {
+                                type: MenuType.OPTION,
+                                label: 'Item',
+                                onClick: () => { },
+                            },
+                        ],
+                    } })),
+            },
+        ],
+    })),
+};
+export const listSubmenus = {
+    items: items.map((item) => ({
+        ...item,
+        actions: [
+            {
+                label: 'More',
+                subActions: [
+                    {
+                        label: 'Move Up',
+                        icon: 'up',
+                        onClick: () => { },
+                    },
+                    {
+                        label: 'Move Down',
+                        icon: 'down',
+                        onClick: () => { },
+                    },
+                ],
+            },
+        ],
+    })),
+};
+export const listBadges = {
+    items: items.map((item, index) => ({
+        ...item,
+        label: {
+            value: String(index + 1),
+            color: 'var(--color-text-info)',
+        },
+    })),
+};
+export const listSubheadingsBadges = {
+    ...listSubheadings,
+    items: listSubheadings.items.map((item, index) => ({
+        ...item,
+        label: {
+            value: String(index + 1),
+            color: 'var(--color-text-info)',
+        },
+    })),
+};
+export const listActions = {
+    items: items.map((item) => ({
+        ...item,
+        actions: [
+            {
+                label: 'Delete',
+                icon: 'delete',
+                onClick: () => { },
+            },
+        ],
+    })),
+};
+export const listDetails = {
+    items: items.map((item, itemIx) => ({
+        ...item,
+        details: 'Description goes here',
+        metadata: '2019-05-03 09:03:51',
+        testId: `story-list-item-${itemIx}`,
+    })),
+};
+export const listExpanding = {
+    items: items.map((item) => ({
+        ...item,
+        content: _jsx("div", { children: "Example content element (for show/hide)." }),
+    })),
+};
+export const listNested = {
+    items: itemsNested,
+};
+export const listInvalid = {
+    items: [
+        ...items,
+        {
+            id: 4,
+            name: 'Dodo',
+            invalid: true,
+        },
+    ],
+};
+export const listIconTooltip = {
+    items: items.map((item) => ({
+        ...item,
+        icon: {
+            icon: 'success',
+            color: 'var(--color-text-success)',
+            tooltip: {
+                text: _jsx(_Fragment, { children: "Tooltip goes here" }),
+            },
+        },
+    })),
+};
+export const listCounts = {
+    items: items.map((item) => ({
+        ...item,
+        metaCount: 3,
+    })),
+};
+export const listLong = {
+    name: 'Animals',
+    items: [...Array(50)].map((item, index) => ({
+        id: index,
+        name: `Aardvark #${index + 1}`,
+    })),
+};

package/dist/components/list/list.stories.d.ts

@@ -0,0 +1,22 @@
+import { IListProps } from './list.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Actions: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Menus: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Details: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Expanding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Header: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Badges: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Nested: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const InvalidItems: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const JSXTitles: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Bordered: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const IconWithTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Metacount: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const StickyHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const Scrollable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
+export declare const InfiniteScroll: () => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollToActiveItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingsManaged: () => import("react/jsx-runtime").JSX.Element;
+export declare const ManagedDragAndDrop: () => import("react/jsx-runtime").JSX.Element;