@ansible/ansible-ui-framework 0.0.190

package/mjs/framework/useSelectMultipleDialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+import { useCallback } from 'react';
+import { usePageDialog } from './PageDialog';
+import { PageTable } from './PageTable';
+import { useFrameworkTranslations } from './useFrameworkTranslations';
+export function SelectMultipleDialog(props) {
+    const { title, view, tableColumns, toolbarFilters, confirmText, cancelText, onSelect } = props;
+    const [_, setDialog] = usePageDialog();
+    const onClose = useCallback(() => setDialog(undefined), [setDialog]);
+    const [translations] = useFrameworkTranslations();
+    return (_jsx(Modal, { title: title, isOpen: true, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
+            _jsx(Button, { variant: "primary", onClick: () => {
+                    onClose();
+                    onSelect(view.selectedItems);
+                }, isAriaDisabled: view.selectedItems.length === 0, children: confirmText ?? translations.confirmText }, "confirm"),
+            _jsx(Button, { variant: "link", onClick: onClose, children: cancelText ?? translations.cancelText }, "cancel"),
+        ], hasNoBodyWrapper: true, children: _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                maxHeight: 500,
+                overflow: 'hidden',
+            }, children: _jsx(PageTable, { tableColumns: tableColumns, toolbarFilters: toolbarFilters, ...view, emptyStateTitle: props.emptyStateTitle ?? translations.noItemsFound, errorStateTitle: props.errorStateTitle ?? translations.errorText, showSelect: true }) }) }));
+}
+export function useSelectMultipleDialog() {
+    const [_, setDialog] = usePageDialog();
+    const openSelectMultipleDialog = useCallback((props) => setDialog(_jsx(SelectMultipleDialog, { ...props })), [setDialog]);
+    return openSelectMultipleDialog;
+}

package/mjs/framework/useTableItems.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+export declare function useTableItems<T extends object>(items: T[], keyFn: (item: T) => string | number, defaults?: {
+    search?: string | null;
+}): {
+    allSelected: boolean;
+    filtered: T[];
+    isSelected: (item: T) => boolean;
+    page: number;
+    paged: T[];
+    perPage: number;
+    search: string;
+    searched: T[];
+    selectAll: () => void;
+    selectItem: (item: T) => void;
+    selectPage: () => void;
+    selectedItems: T[];
+    setFilterFn: (filterFn: (item: T) => boolean) => void;
+    setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setPerPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setSearch: ((search: string) => void) & {
+        clear(): void;
+    } & {
+        flush(): void;
+    };
+    setSearchFn: (searchFn: (item: T, search: string) => number) => void;
+    setSort: import("react").Dispatch<import("react").SetStateAction<ISort<T> | undefined>>;
+    sort: ISort<T> | undefined;
+    sorted: T[];
+    unselectAll: () => void;
+    unselectItem: (item: T) => void;
+};
+export interface ISelected<T extends object> {
+    selectedItems: T[];
+    selectItem: (item: T) => void;
+    selectItems: (items: T[]) => void;
+    unselectItem: (item: T) => void;
+    unselectItems: (items: T[]) => void;
+    isSelected: (item: T) => boolean;
+    selectAll: () => void;
+    unselectAll: () => void;
+    allSelected: boolean;
+    keyFn: (item: T) => string | number;
+}
+export declare function useSelected<T extends object>(items: T[], keyFn: (item: T) => string | number): ISelected<T>;
+export declare function useSelectedInMemory<T extends object>(items: T[], keyFn: (item: T) => string | number): {
+    selectedItems: T[];
+    selectItem: (item: T) => void;
+    unselectItem: (item: T) => void;
+    isSelected: (item: T) => boolean;
+    selectItems: (items: T[]) => void;
+    selectAll: () => void;
+    unselectAll: () => void;
+    allSelected: boolean;
+    keyFn: (item: T) => string | number;
+};
+export interface ISort<T extends object> {
+    id: string;
+    sortFn: (l: T, r: T) => number;
+    direction: 'asc' | 'desc';
+}
+export declare function useSorted<T extends object>(items: T[]): {
+    sorted: T[];
+    sort: ISort<T> | undefined;
+    setSort: import("react").Dispatch<import("react").SetStateAction<ISort<T> | undefined>>;
+};
+export declare function useFiltered<T extends object>(items: T[], keyFn: (item: T) => string | number): {
+    filtered: T[];
+    setFilterFn: (filterFn: (item: T) => boolean) => void;
+};
+export declare function usePaged<T extends object>(source: T[]): {
+    paged: T[];
+    page: number;
+    setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    perPage: number;
+    setPerPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+};

package/mjs/framework/useTableItems.js

@@ -0,0 +1,371 @@
+import debounce from 'debounce';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export function useTableItems(items, keyFn, defaults) {
+    const { selectedItems, selectItem, unselectItem, isSelected, selectItems, unselectAll, allSelected, } = useSelected(items, keyFn);
+    const { sorted, sort, setSort } = useSorted(items);
+    const { filtered, setFilterFn } = useFiltered(sorted, keyFn);
+    const { searched, search, setSearch, setSearchFn } = useSearched(filtered, keyFn, defaults?.search);
+    const { paged, page, setPage, perPage, setPerPage } = usePaged(searched);
+    const selectPage = useCallback(() => selectItems(paged), [paged, selectItems]);
+    const selectAll = useCallback(() => selectItems(searched), [searched, selectItems]);
+    return useMemo(() => ({
+        allSelected,
+        filtered,
+        isSelected,
+        page,
+        paged,
+        perPage,
+        search,
+        searched,
+        selectAll,
+        selectItem,
+        selectPage,
+        selectedItems,
+        setFilterFn,
+        setPage,
+        setPerPage,
+        setSearch,
+        setSearchFn,
+        setSort,
+        sort,
+        sorted,
+        unselectAll,
+        unselectItem,
+    }), [
+        allSelected,
+        filtered,
+        isSelected,
+        page,
+        paged,
+        perPage,
+        search,
+        searched,
+        selectAll,
+        selectItem,
+        selectPage,
+        selectedItems,
+        setFilterFn,
+        setPage,
+        setPerPage,
+        setSearch,
+        setSearchFn,
+        setSort,
+        sort,
+        sorted,
+        unselectAll,
+        unselectItem,
+    ]);
+}
+export function useSelected(items, keyFn) {
+    const [selectedMap, setSelectedMap] = useState({});
+    useEffect(() => {
+        setSelectedMap((selectedMap) => {
+            let changed = false;
+            items.forEach((item) => {
+                const key = keyFn(item);
+                if (selectedMap[key] && selectedMap[key] !== item) {
+                    changed = true;
+                    selectedMap[key] = item;
+                }
+            });
+            return changed ? { ...selectedMap } : selectedMap;
+        });
+    }, [items, keyFn]);
+    const selectItem = useCallback((item) => {
+        setSelectedMap((selectedMap) => {
+            const itemKey = keyFn(item);
+            const existing = selectedMap[itemKey];
+            if (existing !== item) {
+                selectedMap = { ...selectedMap };
+                selectedMap[itemKey] = item;
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    const unselectItem = useCallback((item) => {
+        setSelectedMap((selectedMap) => {
+            const itemKey = keyFn(item);
+            const existing = selectedMap[itemKey];
+            if (existing) {
+                selectedMap = { ...selectedMap };
+                delete selectedMap[itemKey];
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    const isSelected = useCallback((item) => {
+        const itemKey = keyFn(item);
+        return selectedMap[itemKey] !== undefined;
+    }, [keyFn, selectedMap]);
+    const selectItems = useCallback((items) => {
+        setSelectedMap((selectedMap) => {
+            selectedMap = { ...selectedMap };
+            for (const item of items) {
+                const itemKey = keyFn(item);
+                selectedMap[itemKey] = item;
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    const selectAll = useCallback(() => selectItems(items), [items, selectItems]);
+    const unselectItems = useCallback((items) => {
+        for (const item of items) {
+            unselectItem(item);
+        }
+    }, [unselectItem]);
+    const unselectAll = useCallback(() => {
+        setSelectedMap((selectedMap) => {
+            if (Object.keys(selectedMap).length > 0) {
+                return {};
+            }
+            return selectedMap;
+        });
+    }, []);
+    const selectedItems = useMemo(() => Object.values(selectedMap), [selectedMap]);
+    const allSelected = useMemo(() => selectedItems.length === items.length, [items.length, selectedItems.length]);
+    return useMemo(() => ({
+        selectedItems,
+        selectItem,
+        unselectItem,
+        isSelected,
+        selectItems,
+        selectAll,
+        unselectAll,
+        allSelected,
+        keyFn,
+        unselectItems,
+    }), [
+        allSelected,
+        isSelected,
+        keyFn,
+        selectAll,
+        selectItem,
+        selectItems,
+        selectedItems,
+        unselectAll,
+        unselectItem,
+        unselectItems,
+    ]);
+}
+export function useSelectedInMemory(items, keyFn) {
+    const [selectedMap, setSelectedMap] = useState({});
+    useEffect(() => {
+        setSelectedMap((selectedMap) => {
+            let changed = false;
+            const itemsKeys = items.reduce((itemsKeys, item) => {
+                const key = keyFn(item);
+                itemsKeys[key] = item;
+                if (selectedMap[key] && selectedMap[key] !== item) {
+                    changed = true;
+                    selectedMap[key] = item;
+                }
+                return itemsKeys;
+            }, {});
+            const removeKeyMap = {};
+            for (const key in selectedMap) {
+                if (!itemsKeys[key]) {
+                    removeKeyMap[key] = true;
+                }
+            }
+            const removeKeys = Object.keys(removeKeyMap);
+            if (removeKeys.length) {
+                changed = true;
+                for (const key of removeKeys) {
+                    delete selectedMap[key];
+                }
+            }
+            return changed ? { ...selectedMap } : selectedMap;
+        });
+    }, [items, keyFn]);
+    const selectItem = useCallback((item) => {
+        setSelectedMap((selectedMap) => {
+            const itemKey = keyFn(item);
+            const existing = selectedMap[itemKey];
+            if (existing !== item) {
+                selectedMap = { ...selectedMap };
+                selectedMap[itemKey] = item;
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    const unselectItem = useCallback((item) => {
+        setSelectedMap((selectedMap) => {
+            const itemKey = keyFn(item);
+            const existing = selectedMap[itemKey];
+            if (existing) {
+                selectedMap = { ...selectedMap };
+                delete selectedMap[itemKey];
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    const isSelected = useCallback((item) => {
+        const itemKey = keyFn(item);
+        return selectedMap[itemKey] !== undefined;
+    }, [keyFn, selectedMap]);
+    const selectItems = useCallback((items) => {
+        setSelectedMap((selectedMap) => {
+            selectedMap = { ...selectedMap };
+            for (const item of items) {
+                const itemKey = keyFn(item);
+                selectedMap[itemKey] = item;
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    const selectAll = useCallback(() => {
+        selectItems(items);
+    }, [items, selectItems]);
+    const unselectAll = useCallback(() => {
+        setSelectedMap((selectedMap) => {
+            if (Object.keys(selectedMap).length > 0) {
+                return {};
+            }
+            return selectedMap;
+        });
+    }, []);
+    const selectedItems = useMemo(() => Object.values(selectedMap), [selectedMap]);
+    const allSelected = useMemo(() => selectedItems.length === items.length, [items.length, selectedItems.length]);
+    return useMemo(() => ({
+        selectedItems,
+        selectItem,
+        unselectItem,
+        isSelected,
+        selectItems,
+        selectAll,
+        unselectAll,
+        allSelected,
+        keyFn,
+    }), [
+        allSelected,
+        isSelected,
+        keyFn,
+        selectAll,
+        selectItem,
+        selectItems,
+        selectedItems,
+        unselectAll,
+        unselectItem,
+    ]);
+}
+export function useSorted(items) {
+    const [sort, setSort] = useState();
+    const { direction, sortFn } = sort ?? {};
+    const sorted = useMemo(() => {
+        if (sortFn) {
+            if (direction === 'asc') {
+                return [...items.sort(sortFn)];
+            }
+            else {
+                return [...items.sort(sortFn).reverse()];
+            }
+        }
+        else {
+            return items;
+        }
+    }, [direction, items, sortFn]);
+    return useMemo(() => ({ sorted, sort, setSort }), [sort, sorted]);
+}
+export function useFiltered(items, keyFn) {
+    const filterMapRef = useRef({
+        map: {},
+    });
+    const [filterFn, setFilterFnState] = useState();
+    const setFilterFn = useCallback((filterFn) => setFilterFnState(() => filterFn), []);
+    const [filtered, setFiltered] = useState([]);
+    useEffect(() => {
+        filterMapRef.current.map = {};
+    }, [filterFn]);
+    const cachedFilterFn = useCallback((item) => {
+        const key = keyFn(item);
+        let cached = filterMapRef.current.map[key];
+        if (!cached) {
+            cached = { item, passes: filterFn ? filterFn(item) : true };
+            filterMapRef.current.map[key] = cached;
+        }
+        else if (cached.item !== item) {
+            cached.item = item;
+            cached.passes = filterFn ? filterFn(item) : true;
+        }
+        return cached.passes;
+    }, [filterFn, keyFn]);
+    useEffect(() => {
+        if (filterFn) {
+            setFiltered(items.filter(cachedFilterFn));
+        }
+        else {
+            setFiltered(items);
+        }
+    }, [items, filterFn, cachedFilterFn]);
+    return useMemo(function memoFiltered() {
+        return { filtered, setFilterFn };
+    }, [filtered, setFilterFn]);
+}
+function useSearched(items, keyFn, defaultSearch) {
+    const searchMapRef = useRef({
+        map: {},
+    });
+    const [searchFn, setSearchFnState] = useState();
+    const setSearchFn = useCallback((searchFn) => setSearchFnState(() => searchFn), []);
+    const [searched, setSearched] = useState([]);
+    const [search, setSearchState] = useState(defaultSearch ?? '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const setSearch = useCallback(debounce((search) => setSearchState(search), 200), []);
+    useEffect(() => {
+        searchMapRef.current.map = {};
+    }, [search, searchFn]);
+    const cachedSearchFn = useCallback((item) => {
+        const key = keyFn(item);
+        let cached = searchMapRef.current.map[key];
+        if (!cached) {
+            cached = { item, score: searchFn ? searchFn(item, search) : 0 };
+            searchMapRef.current.map[key] = cached;
+        }
+        else if (cached.item !== item) {
+            cached.item = item;
+            cached.score = searchFn ? searchFn(item, search) : 0;
+        }
+        return cached;
+    }, [keyFn, searchFn, search]);
+    useEffect(() => {
+        if (searchFn && search) {
+            setSearched(items
+                .map(cachedSearchFn)
+                .filter((cached) => cached.score < 0.5)
+                .sort((l, r) => l.score - r.score)
+                .map((cached) => cached.item));
+        }
+        else {
+            setSearched(items);
+        }
+    }, [search, items, searchFn, cachedSearchFn]);
+    return useMemo(function memoFiltered() {
+        return { searched, search, setSearch, setSearchFn };
+    }, [searched, search, setSearch, setSearchFn]);
+}
+export function usePaged(source) {
+    const [paged, setPaged] = useState([]);
+    const [page, setPage] = useState(1);
+    const [perPage, setPerPage] = useState(10);
+    useEffect(() => {
+        setPaged((paged) => {
+            const newPaged = source.slice((page - 1) * perPage, page * perPage);
+            if (paged.length !== newPaged.length) {
+                return newPaged;
+            }
+            let index = 0;
+            for (const item of newPaged) {
+                if (paged[index++] !== item) {
+                    return newPaged;
+                }
+            }
+            return paged;
+        });
+    }, [page, perPage, source]);
+    useEffect(() => {
+        if (page > Math.ceil(source.length / perPage)) {
+            setPage(1);
+        }
+    }, [page, perPage, source.length]);
+    return useMemo(() => ({ paged, page, setPage, perPage, setPerPage }), [page, paged, perPage]);
+}

package/mjs/framework/useView.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface IView {
+    page: number;
+    setPage: (page: number) => void;
+    perPage: number;
+    setPerPage: (perPage: number) => void;
+    sort: string;
+    setSort: (sort: string) => void;
+    sortDirection: 'asc' | 'desc';
+    setSortDirection: (sortDirection: 'asc' | 'desc') => void;
+    filters: Record<string, string[]>;
+    setFilters: Dispatch<SetStateAction<Record<string, string[]>>>;
+    clearAllFilters: () => void;
+}
+export declare function useView(view?: Partial<IView> | undefined, disableQueryString?: boolean): IView;

package/mjs/framework/useView.js

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+export function useView(view, disableQueryString) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [page, setPage] = useState(() => {
+        if (!disableQueryString) {
+            const queryPage = searchParams.get('page');
+            if (queryPage) {
+                const page = Number(queryPage);
+                if (Number.isInteger(page)) {
+                    return page;
+                }
+            }
+        }
+        return view?.page ?? 1;
+    });
+    const [perPage, setPerPage] = useState(() => {
+        if (!disableQueryString) {
+            const queryPerPage = searchParams.get('perPage');
+            if (queryPerPage) {
+                const perPage = Number(queryPerPage);
+                if (Number.isInteger(perPage)) {
+                    return perPage;
+                }
+            }
+        }
+        const localPerPage = localStorage.getItem('perPage');
+        if (localPerPage) {
+            const perPage = Number(localPerPage);
+            if (Number.isInteger(perPage)) {
+                return perPage;
+            }
+        }
+        return view?.perPage ?? 10;
+    });
+    const [sort, setSort] = useState(() => {
+        if (!disableQueryString) {
+            const querySort = searchParams.get('sort');
+            if (querySort) {
+                if (querySort.startsWith('-'))
+                    return querySort.slice(1);
+                return querySort;
+            }
+        }
+        return view?.sort ?? '';
+    });
+    const [sortDirection, setSortDirection] = useState(() => {
+        if (!disableQueryString) {
+            const querySort = searchParams.get('sort');
+            if (querySort) {
+                if (querySort.startsWith('-'))
+                    return 'desc';
+                return 'asc';
+            }
+        }
+        return view?.sortDirection ?? 'asc';
+    });
+    const [filters, setFilters] = useState(() => {
+        const filters = {};
+        for (const key of searchParams.keys()) {
+            switch (key) {
+                case 'sort':
+                case 'page':
+                case 'perPage':
+                    break;
+                default: {
+                    const value = searchParams.get(key);
+                    if (value) {
+                        const values = value.split(',');
+                        filters[key] = values;
+                    }
+                }
+            }
+        }
+        if (Object.keys(filters))
+            return filters;
+        return view?.filters ?? {};
+    });
+    const clearAllFilters = useCallback(() => setFilters({}), [setFilters]);
+    useEffect(() => {
+        if (disableQueryString)
+            return;
+        const newSearchParams = new URLSearchParams();
+        sortDirection === 'asc'
+            ? newSearchParams.set('sort', sort)
+            : newSearchParams.set('sort', `-${sort}`);
+        newSearchParams.set('page', page.toString());
+        newSearchParams.set('perPage', perPage.toString());
+        for (const filter in filters) {
+            newSearchParams.set(filter, filters[filter].join(','));
+        }
+        localStorage.setItem('perPage', perPage.toString());
+        setSearchParams(newSearchParams, { replace: true });
+    }, [sort, sortDirection, setSearchParams, disableQueryString, page, perPage, filters]);
+    return useMemo(() => ({
+        page,
+        setPage,
+        perPage,
+        setPerPage,
+        sort,
+        setSort,
+        sortDirection,
+        setSortDirection,
+        filters,
+        setFilters,
+        clearAllFilters,
+    }), [clearAllFilters, filters, page, perPage, sort, sortDirection]);
+}

package/mjs/framework/utils/compare.d.ts

@@ -0,0 +1,3 @@
+export declare function compareUnknowns(a: unknown | undefined | null, b: unknown | undefined | null): 0 | 1 | -1;
+export declare function compareStrings(a: string | undefined | null, b: string | undefined | null): 0 | 1 | -1;
+export declare function compareNumbers(a: number | undefined | null, b: number | undefined | null): 0 | 1 | -1;

package/mjs/framework/utils/compare.js

@@ -0,0 +1,53 @@
+/* istanbul ignore file */
+export function compareUnknowns(a, b) {
+    /* istanbul ignore next */
+    if (a == undefined && b == undefined)
+        return 0;
+    /* istanbul ignore next */
+    if (a == undefined)
+        return 1;
+    /* istanbul ignore next */
+    if (b == undefined)
+        return -1;
+    /* istanbul ignore else */
+    if (typeof a === 'string') {
+        /* istanbul ignore else */
+        if (typeof b === 'string') {
+            return compareStrings(a, b);
+        }
+        else if (typeof b === 'number') {
+            return compareStrings(a, b.toString());
+        }
+    }
+    else if (typeof a === 'number') {
+        /* istanbul ignore else */
+        if (typeof b === 'number') {
+            return compareNumbers(a, b);
+        }
+        else if (typeof b === 'string') {
+            return compareStrings(a.toString(), b);
+        }
+    }
+    /* istanbul ignore next */
+    return 0;
+}
+/* istanbul ignore next */
+export function compareStrings(a, b) {
+    if (a == undefined && b == undefined)
+        return 0;
+    if (a == undefined)
+        return 1;
+    if (b == undefined)
+        return -1;
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+/* istanbul ignore next */
+export function compareNumbers(a, b) {
+    if (a == undefined && b == undefined)
+        return 0;
+    if (a == undefined)
+        return 1;
+    if (b == undefined)
+        return -1;
+    return a < b ? -1 : a > b ? 1 : 0;
+}

package/mjs/framework/utils/download-file.d.ts

@@ -0,0 +1,2 @@
+export declare function downloadTextFile(name: string, content: string): void;
+export declare function downloadCvsFile(name: string, content: string[]): void;

package/mjs/framework/utils/download-file.js

@@ -0,0 +1,18 @@
+export function downloadTextFile(name, content) {
+    const file = new Blob(content.split('/n'), { type: 'text/plain' });
+    const element = document.createElement('a');
+    element.href = URL.createObjectURL(file);
+    element.download = name + '.txt';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}
+export function downloadCvsFile(name, content) {
+    const file = new Blob(content, { type: 'text/csv' });
+    const element = document.createElement('a');
+    element.href = URL.createObjectURL(file);
+    element.download = name + '.csv';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}

package/mjs/framework/utils/random-string.d.ts

@@ -0,0 +1 @@
+export declare function randomString(length: number, base?: number): string;