@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/components/useWindowLocation.js

@@ -0,0 +1,70 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchParams = exports.useWindowHistory = void 0;
+var react_1 = require("react");
+function useIsMounted() {
+    var _a = __read((0, react_1.useState)(true), 2), isMounted = _a[0], setIsMounted = _a[1];
+    (0, react_1.useEffect)(function () { return function () {
+        setIsMounted(false);
+    }; }, []);
+    return isMounted;
+}
+function useWindowHistory() {
+    var isMounted = useIsMounted();
+    var _a = __read((0, react_1.useState)(isMounted ? window.location : undefined), 2), location = _a[0], setLocation = _a[1];
+    var setWindowLocation = (0, react_1.useCallback)(function () {
+        setLocation(window.location);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isMounted)
+            return;
+        if (!location) {
+            setWindowLocation();
+        }
+        window.addEventListener('popstate', setWindowLocation);
+        return function () {
+            window.removeEventListener('popstate', setWindowLocation);
+        };
+    }, [isMounted, location, setWindowLocation]);
+    var push = (0, react_1.useCallback)(function (url) {
+        window.history.replaceState(null, '', url);
+        setWindowLocation();
+    }, [setWindowLocation]);
+    var update = (0, react_1.useCallback)(function (url) {
+        window.history.replaceState(null, '', url);
+        setWindowLocation();
+    }, [setWindowLocation]);
+    return { location: location, push: push, update: update };
+}
+exports.useWindowHistory = useWindowHistory;
+function useSearchParams() {
+    var _a, _b;
+    var history = useWindowHistory();
+    var pathname = ((_a = history.location) === null || _a === void 0 ? void 0 : _a.pathname) || '/';
+    var searchParams = (0, react_1.useMemo)(function () { var _a, _b; return new URLSearchParams((_b = (_a = history.location) === null || _a === void 0 ? void 0 : _a.search) !== null && _b !== void 0 ? _b : '/'); }, [(_b = history.location) === null || _b === void 0 ? void 0 : _b.search]);
+    var setSearchParams = (0, react_1.useCallback)(function (searchParams) {
+        var newSearch = searchParams.toString();
+        if (newSearch)
+            history.update('?' + newSearch);
+        else
+            history.update(pathname); // retain the existing pathname
+    }, [history, pathname]);
+    return [searchParams, setSearchParams];
+}
+exports.useSearchParams = useSearchParams;

package/cjs/framework/index.js

@@ -0,0 +1,39 @@
+"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("./BulkActionDialog"), exports);
+__exportStar(require("./components/BulkSelector"), exports);
+__exportStar(require("./components/Collapse"), exports);
+__exportStar(require("./components/Details"), exports);
+__exportStar(require("./components/Help"), exports);
+__exportStar(require("./components/patternfly-colors"), exports);
+__exportStar(require("./components/useBreakPoint"), exports);
+__exportStar(require("./PageBody"), exports);
+__exportStar(require("./PageCatalog"), exports);
+__exportStar(require("./PageCells"), exports);
+__exportStar(require("./PageDataList"), exports);
+__exportStar(require("./PageDialog"), exports);
+__exportStar(require("./PageForm"), exports);
+__exportStar(require("./PageFramework"), exports);
+__exportStar(require("./PageHeader"), exports);
+__exportStar(require("./PageLayout"), exports);
+__exportStar(require("./PageTable"), exports);
+__exportStar(require("./PageTabs"), exports);
+__exportStar(require("./PageToolbar"), exports);
+__exportStar(require("./TypedActions"), exports);
+__exportStar(require("./useSelectDialog"), exports);
+__exportStar(require("./useTableItems"), exports);
+__exportStar(require("./utils/compare"), exports);

package/cjs/framework/useFrameworkTranslations.js

@@ -0,0 +1,38 @@
+"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.useFrameworkTranslations = exports.FrameworkTranslationsProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var defaultTranslations = {
+    errorText: 'Error',
+    cancelText: 'Cancel',
+    closeText: 'Close',
+    confirmText: 'Confirm',
+    pendingText: 'Pending',
+    submitText: 'Submit',
+    submittingText: 'Submitting',
+    successText: 'Success',
+    processingText: 'Processing',
+    noItemsFound: 'No items found',
+};
+var FrameworkTranslationsContext = (0, react_1.createContext)([defaultTranslations, function () { return alert('Use FrameworkTranslationsProvider'); }]);
+function FrameworkTranslationsProvider(props) {
+    var state = (0, react_1.useState)(defaultTranslations);
+    return ((0, jsx_runtime_1.jsx)(FrameworkTranslationsContext.Provider, __assign({ value: state }, { children: props.children })));
+}
+exports.FrameworkTranslationsProvider = FrameworkTranslationsProvider;
+function useFrameworkTranslations() {
+    return (0, react_1.useContext)(FrameworkTranslationsContext);
+}
+exports.useFrameworkTranslations = useFrameworkTranslations;

package/cjs/framework/useSelectDialog.js

@@ -0,0 +1,81 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectDialog = exports.useSelectDialog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var Collapse_1 = require("./components/Collapse");
+var PageDialog_1 = require("./PageDialog");
+var PageTable_1 = require("./PageTable");
+function useSelectDialog(options) {
+    var view = options.view, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, confirm = options.confirm, cancel = options.cancel, selected = options.selected;
+    var _a = __read((0, react_1.useState)(''), 2), title = _a[0], setTitle = _a[1];
+    var _b = __read((0, react_1.useState)(), 2), onSelect = _b[0], setOnSelect = _b[1];
+    var openSetting = (0, react_1.useCallback)(function (onSelect, title) {
+        setTitle(title !== null && title !== void 0 ? title : '');
+        setOnSelect(function () { return onSelect; });
+    }, []);
+    var _c = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _c[0], setDialog = _c[1];
+    (0, react_1.useEffect)(function () {
+        if (onSelect !== undefined) {
+            setDialog((0, jsx_runtime_1.jsx)(SelectDialog, { title: title, open: true, setOpen: function () { return setOnSelect(undefined); }, onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
+        }
+        else {
+            setDialog(undefined);
+            view.unselectAll();
+        }
+    }, [cancel, confirm, onSelect, selected, setDialog, tableColumns, title, toolbarFilters, view]);
+    return openSetting;
+}
+exports.useSelectDialog = useSelectDialog;
+function SelectDialog(props) {
+    var title = props.title, open = props.open, setOpen = props.setOpen, onSelect = props.onSelect, view = props.view, tableColumns = props.tableColumns, toolbarFilters = props.toolbarFilters, confirm = props.confirm, cancel = props.cancel, selected = props.selected;
+    var onClose = function () { return setOpen(false); };
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ title: title, isOpen: open, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: function () {
+                    if (view.selectedItems.length > 0) {
+                        onSelect(view.selectedItems[0]);
+                    }
+                    onClose();
+                }, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirm }), "confirm"),
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancel }), "cancel"),
+        ], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { opacity: view.selectedItems.length === 0 ? 0 : undefined } }, { children: selected })), (0, jsx_runtime_1.jsxs)("b", { children: [view.selectedItems.map(function (item) {
+                                    if (tableColumns && tableColumns.length > 0) {
+                                        return (0, jsx_runtime_1.jsx)("span", { children: tableColumns[0].cell(item) }, props.keyFn(item));
+                                    }
+                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                                }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] })) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount === undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "80px" }) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount !== undefined }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        maxHeight: 400,
+                        overflow: 'hidden',
+                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; } })) })) }))] })));
+}
+exports.SelectDialog = SelectDialog;

package/cjs/framework/useSelectMultipleDialog.js

@@ -0,0 +1,62 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectMultipleDialog = exports.SelectMultipleDialog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var PageDialog_1 = require("./PageDialog");
+var PageTable_1 = require("./PageTable");
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+function SelectMultipleDialog(props) {
+    var _a, _b;
+    var title = props.title, view = props.view, tableColumns = props.tableColumns, toolbarFilters = props.toolbarFilters, confirmText = props.confirmText, cancelText = props.cancelText, onSelect = props.onSelect;
+    var _c = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _c[0], setDialog = _c[1];
+    var onClose = (0, react_1.useCallback)(function () { return setDialog(undefined); }, [setDialog]);
+    var _d = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _d[0];
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ title: title, isOpen: true, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: function () {
+                    onClose();
+                    onSelect(view.selectedItems);
+                }, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirmText !== null && confirmText !== void 0 ? confirmText : translations.confirmText }), "confirm"),
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancelText !== null && cancelText !== void 0 ? cancelText : translations.cancelText }), "cancel"),
+        ], hasNoBodyWrapper: true }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                display: 'flex',
+                flexDirection: 'column',
+                maxHeight: 500,
+                overflow: 'hidden',
+            } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true })) })) })));
+}
+exports.SelectMultipleDialog = SelectMultipleDialog;
+function useSelectMultipleDialog() {
+    var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
+    var openSelectMultipleDialog = (0, react_1.useCallback)(function (props) { return setDialog((0, jsx_runtime_1.jsx)(SelectMultipleDialog, __assign({}, props))); }, [setDialog]);
+    return openSelectMultipleDialog;
+}
+exports.useSelectMultipleDialog = useSelectMultipleDialog;