@ansible/ansible-ui-framework 0.0.247 → 0.0.249

package/cjs/PageTableDetails.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableDetails = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-empty-function */
+var react_core_1 = require("@patternfly/react-core");
+var Details_1 = require("./components/Details");
+function TableDetails(props) {
+    var item = props.item, columns = props.columns;
+    if (!item)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }) })));
+}
+exports.TableDetails = TableDetails;

package/cjs/useInMemoryView.js

@@ -0,0 +1,102 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInMemoryView = void 0;
+var get_value_1 = __importDefault(require("get-value"));
+var react_1 = require("react");
+var useTableItems_1 = require("./useTableItems");
+var useView_1 = require("./useView");
+var compare_1 = require("./utils/compare");
+function useInMemoryView(options) {
+    var items = options.items, keyFn = options.keyFn, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, disableQueryString = options.disableQueryString;
+    var view = (0, useView_1.useView)({
+        sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
+    }, disableQueryString);
+    var page = view.page, perPage = view.perPage, sort = view.sort, sortDirection = view.sortDirection, filters = view.filters;
+    var sorted = (0, useTableItems_1.useSorted)(items !== null && items !== void 0 ? items : []);
+    var setSort = sorted.setSort;
+    (0, react_1.useEffect)(function () {
+        return setSort({
+            id: sort,
+            sortFn: function (l, r) {
+                var lv = (0, get_value_1.default)(l, sort);
+                var rv = (0, get_value_1.default)(r, sort);
+                return (0, compare_1.compareUnknowns)(lv, rv);
+            },
+            direction: sortDirection,
+        });
+    }, [sort, sortDirection, setSort]);
+    var filtered = (0, useTableItems_1.useFiltered)(sorted.sorted, keyFn);
+    var setFilterFn = filtered.setFilterFn;
+    (0, react_1.useEffect)(function () {
+        if (Object.keys(filters).length === 0) {
+            setFilterFn(undefined);
+        }
+        else {
+            setFilterFn(function (item) {
+                var _loop_1 = function (key) {
+                    var e_1, _a;
+                    var toolbarFilter = toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.find(function (filter) { return filter.key === key; });
+                    if (toolbarFilter) {
+                        var value = (0, get_value_1.default)(item, toolbarFilter.query);
+                        if (typeof value === 'string') {
+                            try {
+                                for (var _b = (e_1 = void 0, __values(filters[key])), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                    var filterValue = _c.value;
+                                    if (value.toLowerCase().includes(filterValue.toLowerCase()))
+                                        return { value: true };
+                                }
+                            }
+                            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                            finally {
+                                try {
+                                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                                }
+                                finally { if (e_1) throw e_1.error; }
+                            }
+                        }
+                    }
+                };
+                for (var key in filters) {
+                    var state_1 = _loop_1(key);
+                    if (typeof state_1 === "object")
+                        return state_1.value;
+                }
+                return false;
+            });
+        }
+    }, [filters, setFilterFn, toolbarFilters]);
+    var paged = (0, useTableItems_1.usePaged)(filtered.filtered);
+    var setPage = paged.setPage, setPerPage = paged.setPerPage;
+    (0, react_1.useEffect)(function () { return setPage(page); }, [page, paged, setPage]);
+    (0, react_1.useEffect)(function () { return setPerPage(perPage); }, [perPage, paged, setPerPage]);
+    var selection = (0, useTableItems_1.useSelectedInMemory)(items !== null && items !== void 0 ? items : [], keyFn);
+    return (0, react_1.useMemo)(function () {
+        return __assign(__assign({ itemCount: items ? filtered.filtered.length : 0, pageItems: items ? paged.paged : undefined }, view), selection);
+    }, [filtered.filtered.length, items, paged.paged, selection, view]);
+}
+exports.useInMemoryView = useInMemoryView;

package/cjs/useTableItems.js

@@ -287,27 +287,43 @@ function useSelectedInMemory(items, keyFn) {
             return selectedMap;
         });
     }, [keyFn]);
+    var unselectItems = (0, react_1.useCallback)(function (items) {
+        var e_4, _a;
+        try {
+            for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
+                var item = items_3_1.value;
+                unselectItem(item);
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (items_3_1 && !items_3_1.done && (_a = items_3.return)) _a.call(items_3);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+    }, [unselectItem]);
     var isSelected = (0, react_1.useCallback)(function (item) {
         var itemKey = keyFn(item);
         return selectedMap[itemKey] !== undefined;
     }, [keyFn, selectedMap]);
     var selectItems = (0, react_1.useCallback)(function (items) {
         setSelectedMap(function (selectedMap) {
-            var e_4, _a;
+            var e_5, _a;
             selectedMap = __assign({}, selectedMap);
             try {
-                for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
-                    var item = items_3_1.value;
+                for (var items_4 = __values(items), items_4_1 = items_4.next(); !items_4_1.done; items_4_1 = items_4.next()) {
+                    var item = items_4_1.value;
                     var itemKey = keyFn(item);
                     selectedMap[itemKey] = item;
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (items_3_1 && !items_3_1.done && (_a = items_3.return)) _a.call(items_3);
+                    if (items_4_1 && !items_4_1.done && (_a = items_4.return)) _a.call(items_4);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_5) throw e_5.error; }
             }
             return selectedMap;
         });
@@ -335,6 +351,7 @@ function useSelectedInMemory(items, keyFn) {
         unselectAll: unselectAll,
         allSelected: allSelected,
         keyFn: keyFn,
+        unselectItems: unselectItems,
     }); }, [
         allSelected,
         isSelected,
@@ -345,6 +362,7 @@ function useSelectedInMemory(items, keyFn) {
         selectedItems,
         unselectAll,
         unselectItem,
+        unselectItems,
     ]);
 }
 exports.useSelectedInMemory = useSelectedInMemory;
@@ -451,7 +469,7 @@ function usePaged(source) {
     var _c = __read((0, react_1.useState)(10), 2), perPage = _c[0], setPerPage = _c[1];
     (0, react_1.useEffect)(function () {
         setPaged(function (paged) {
-            var e_5, _a;
+            var e_6, _a;
             var newPaged = source.slice((page - 1) * perPage, page * perPage);
             if (paged.length !== newPaged.length) {
                 return newPaged;
@@ -465,12 +483,12 @@ function usePaged(source) {
                     }
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
             finally {
                 try {
                     if (newPaged_1_1 && !newPaged_1_1.done && (_a = newPaged_1.return)) _a.call(newPaged_1);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_6) throw e_6.error; }
             }
             return paged;
         });

package/mjs/PageTableDetails.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ITableColumn } from './PageTable';
+export declare function TableDetails<T extends object>(props: {
+    item: T | undefined;
+    columns: ITableColumn<T>[];
+}): JSX.Element;

package/mjs/PageTableDetails.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { DescriptionList } from '@patternfly/react-core';
+import { Detail } from './components/Details';
+export function TableDetails(props) {
+    const { item, columns } = props;
+    if (!item)
+        return _jsx(_Fragment, {});
+    return (_jsx(DescriptionList, { isCompact: true, children: columns.map((column) => (_jsx(Detail, { label: column.hideLabel ? undefined : column.header, children: column.cell(item) }, column.id))) }));
+}

package/mjs/useInMemoryView.d.ts

@@ -0,0 +1,15 @@
+import { ITableColumn } from './PageTable';
+import { IToolbarFilter } from './PageToolbar';
+import { ISelected } from './useTableItems';
+import { IView } from './useView';
+export declare type IInMemoryView<T extends object> = IView & ISelected<T> & {
+    itemCount: number | undefined;
+    pageItems: T[] | undefined;
+};
+export declare function useInMemoryView<T extends object>(options: {
+    items: T[] | undefined;
+    tableColumns?: ITableColumn<T>[];
+    toolbarFilters?: IToolbarFilter[];
+    disableQueryString?: boolean;
+    keyFn: (item: T) => string | number;
+}): IInMemoryView<T>;

package/mjs/useInMemoryView.js

@@ -0,0 +1,60 @@
+import getValue from 'get-value';
+import { useEffect, useMemo } from 'react';
+import { useFiltered, usePaged, useSelectedInMemory, useSorted } from './useTableItems';
+import { useView } from './useView';
+import { compareUnknowns } from './utils/compare';
+export function useInMemoryView(options) {
+    const { items, keyFn, tableColumns, toolbarFilters, disableQueryString } = options;
+    const view = useView({
+        sort: tableColumns && tableColumns.length ? tableColumns[0].sort : undefined,
+    }, disableQueryString);
+    const { page, perPage, sort, sortDirection, filters } = view;
+    const sorted = useSorted(items ?? []);
+    const { setSort } = sorted;
+    useEffect(() => setSort({
+        id: sort,
+        sortFn: (l, r) => {
+            const lv = getValue(l, sort);
+            const rv = getValue(r, sort);
+            return compareUnknowns(lv, rv);
+        },
+        direction: sortDirection,
+    }), [sort, sortDirection, setSort]);
+    const filtered = useFiltered(sorted.sorted, keyFn);
+    const { setFilterFn } = filtered;
+    useEffect(() => {
+        if (Object.keys(filters).length === 0) {
+            setFilterFn(undefined);
+        }
+        else {
+            setFilterFn((item) => {
+                for (const key in filters) {
+                    const toolbarFilter = toolbarFilters?.find((filter) => filter.key === key);
+                    if (toolbarFilter) {
+                        const value = getValue(item, toolbarFilter.query);
+                        if (typeof value === 'string') {
+                            for (const filterValue of filters[key]) {
+                                if (value.toLowerCase().includes(filterValue.toLowerCase()))
+                                    return true;
+                            }
+                        }
+                    }
+                }
+                return false;
+            });
+        }
+    }, [filters, setFilterFn, toolbarFilters]);
+    const paged = usePaged(filtered.filtered);
+    const { setPage, setPerPage } = paged;
+    useEffect(() => setPage(page), [page, paged, setPage]);
+    useEffect(() => setPerPage(perPage), [perPage, paged, setPerPage]);
+    const selection = useSelectedInMemory(items ?? [], keyFn);
+    return useMemo(() => {
+        return {
+            itemCount: items ? filtered.filtered.length : 0,
+            pageItems: items ? paged.paged : undefined,
+            ...view,
+            ...selection,
+        };
+    }, [filtered.filtered.length, items, paged.paged, selection, view]);
+}

package/mjs/useTableItems.d.ts

@@ -14,7 +14,7 @@ export declare function useTableItems<T extends object>(items: T[], keyFn: (item
     selectItem: (item: T) => void;
     selectPage: () => void;
     selectedItems: T[];
-    setFilterFn: (filterFn: (item: T) => boolean) => void;
+    setFilterFn: (filterFn: ((item: T) => boolean) | undefined) => void;
     setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     setPerPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     setSearch: ((search: string) => void) & {
@@ -52,6 +52,7 @@ export declare function useSelectedInMemory<T extends object>(items: T[], keyFn:
     unselectAll: () => void;
     allSelected: boolean;
     keyFn: (item: T) => string | number;
+    unselectItems: (items: T[]) => void;
 };
 export interface ISort<T extends object> {
     id: string;
@@ -65,7 +66,7 @@ export declare function useSorted<T extends object>(items: T[]): {
 };
 export declare function useFiltered<T extends object>(items: T[], keyFn: (item: T) => string | number): {
     filtered: T[];
-    setFilterFn: (filterFn: (item: T) => boolean) => void;
+    setFilterFn: (filterFn: ((item: T) => boolean) | undefined) => void;
 };
 export declare function usePaged<T extends object>(source: T[]): {
     paged: T[];

package/mjs/useTableItems.js

@@ -199,6 +199,11 @@ export function useSelectedInMemory(items, keyFn) {
             return selectedMap;
         });
     }, [keyFn]);
+    const unselectItems = useCallback((items) => {
+        for (const item of items) {
+            unselectItem(item);
+        }
+    }, [unselectItem]);
     const isSelected = useCallback((item) => {
         const itemKey = keyFn(item);
         return selectedMap[itemKey] !== undefined;
@@ -236,6 +241,7 @@ export function useSelectedInMemory(items, keyFn) {
         unselectAll,
         allSelected,
         keyFn,
+        unselectItems,
     }), [
         allSelected,
         isSelected,
@@ -246,6 +252,7 @@ export function useSelectedInMemory(items, keyFn) {
         selectedItems,
         unselectAll,
         unselectItem,
+        unselectItems,
     ]);
 }
 export function useSorted(items) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "Framework for building consistent responsive web applications using PatternFly.",
-  "version": "0.0.247",
+  "version": "0.0.249",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {