@vuu-ui/vuu-data-react 2.1.19-beta.2 → 2.1.19-beta.4

package/src/hooks/useTypeaheadSuggestions.js

@@ -1,50 +0,0 @@
-import { useDataSource } from "@vuu-ui/vuu-utils";
-import { useCallback } from "react";
-const getTypeaheadParams = (table, column, text = "", selectedValues = [])=>{
-    if ("" !== text && !selectedValues.includes(text.toLowerCase())) return [
-        table,
-        column,
-        text
-    ];
-    return [
-        table,
-        column
-    ];
-};
-const useTypeaheadSuggestions = ()=>{
-    const dataSource = useDataSource(false);
-    return useCallback(async ([{ module, table }, column, starts])=>{
-        if (void 0 === dataSource) {
-            console.warn("[useTypeaheadSuggestions] no dataSource provided (use DataSourceProvider)");
-            return false;
-        }
-        const rpcMessage = void 0 === starts ? {
-            params: {
-                column,
-                module,
-                table
-            },
-            rpcName: "getUniqueFieldValues",
-            type: "RPC_REQUEST"
-        } : {
-            params: {
-                column,
-                module,
-                starts,
-                table
-            },
-            rpcName: "getUniqueFieldValuesStartingWith",
-            type: "RPC_REQUEST"
-        };
-        try {
-            const response = await dataSource.rpcRequest?.(rpcMessage);
-            if (response?.type === "SUCCESS_RESULT") return response.data;
-            return false;
-        } catch (err) {
-            return false;
-        }
-    }, [
-        dataSource
-    ]);
-};
-export { getTypeaheadParams, useTypeaheadSuggestions };

package/src/hooks/useVisualLinks.js

@@ -1,87 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useViewContext } from "@vuu-ui/vuu-layout";
-import { IconButton } from "@vuu-ui/vuu-ui-controls";
-import { useCallback, useEffect } from "react";
-const useVisualLinks = (dataSource)=>{
-    const { dispatch } = useViewContext();
-    const clearVisualLinkTarget = useCallback(()=>{
-        if (dataSource.visualLink) dispatch?.({
-            type: "broadcast-message",
-            message: {
-                targetId: dataSource.visualLink.parentClientVpId,
-                type: "highlight-off"
-            }
-        });
-    }, [
-        dataSource,
-        dispatch
-    ]);
-    const removeVisualLink = useCallback(()=>{
-        if (dataSource.visualLink) {
-            dispatch?.({
-                type: "broadcast-message",
-                message: {
-                    targetId: dataSource.visualLink.parentClientVpId,
-                    type: "highlight-off"
-                }
-            });
-            dataSource.visualLink = void 0;
-        }
-    }, [
-        dataSource,
-        dispatch
-    ]);
-    const handleLinkRemoved = useCallback(()=>{
-        dispatch?.({
-            type: "remove-toolbar-contribution",
-            location: "post-title"
-        });
-    }, [
-        dispatch
-    ]);
-    const highlightVisualLinkTarget = useCallback(()=>{
-        if (dataSource.visualLink) dispatch?.({
-            type: "broadcast-message",
-            message: {
-                targetId: dataSource.visualLink.parentClientVpId,
-                type: "highlight-on"
-            }
-        });
-    }, [
-        dataSource,
-        dispatch
-    ]);
-    const handleLinkCreated = useCallback(()=>{
-        dispatch?.({
-            type: "add-toolbar-contribution",
-            location: "post-title",
-            content: /*#__PURE__*/ jsx(IconButton, {
-                appearance: "transparent",
-                "aria-label": "remove-link",
-                icon: "link",
-                onClick: removeVisualLink,
-                onMouseEnter: highlightVisualLinkTarget,
-                onMouseLeave: clearVisualLinkTarget,
-                sentiment: "neutral"
-            })
-        });
-    }, [
-        dispatch,
-        removeVisualLink,
-        highlightVisualLinkTarget,
-        clearVisualLinkTarget
-    ]);
-    useEffect(()=>{
-        dataSource.on("visual-link-created", handleLinkCreated);
-        dataSource.on("visual-link-removed", handleLinkRemoved);
-        return ()=>{
-            dataSource.removeListener("visual-link-created", handleLinkCreated);
-            dataSource.removeListener("visual-link-removed", handleLinkRemoved);
-        };
-    }, [
-        dataSource,
-        handleLinkCreated,
-        handleLinkRemoved
-    ]);
-};
-export { useVisualLinks };

package/src/hooks/useVuuMenuActions.js

@@ -1,269 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Button } from "@salt-ds/core";
-import { hasShowNotificationAction, isGroupMenuItemDescriptor } from "@vuu-ui/vuu-context-menu";
-import { getFilterPredicate } from "@vuu-ui/vuu-filter-parser";
-import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
-import { BulkEditPanel, isTableLocation } from "@vuu-ui/vuu-table";
-import { getLayoutComponent, isActionMessage, isCustomComponentActionMessage, isSessionTableActionMessage, useData } from "@vuu-ui/vuu-utils";
-import { useCallback } from "react";
-import { SessionEditingForm } from "../session-editing-form/index.js";
-import { useModal } from "@vuu-ui/vuu-ui-controls";
-const isRoot = (menu)=>"ROOT" === menu.name;
-const isCellMenu = (options)=>"cell" === options.context;
-const isRowMenu = (options)=>"row" === options.context;
-const isSelectionMenu = (options)=>"selected-rows" === options.context;
-const isVuuMenuItem = (menu)=>"rpcName" in menu;
-const isGroupMenuItem = (menu)=>"menus" in menu;
-const hasFilter = ({ filter })=>"string" == typeof filter && filter.length > 0;
-const getMenuItemOptions = (menu, options)=>{
-    switch(menu.context){
-        case "cell":
-            return {
-                ...menu,
-                field: options.column.name,
-                rowKey: options.dataRow.key,
-                value: options.dataRow[options.column.name]
-            };
-        case "row":
-            return {
-                ...menu,
-                columns: options.columns,
-                row: options.dataRow,
-                rowKey: options.dataRow.key
-            };
-        case "selected-rows":
-            return {
-                ...menu,
-                columns: options.columns
-            };
-        default:
-            return menu;
-    }
-};
-const vuuContextCompatibleWithTableLocation = (uiLocation, vuuContext, selectedRowCount = 0)=>{
-    switch(uiLocation){
-        case "grid":
-            if ("selected-rows" === vuuContext) return selectedRowCount > 0;
-            return true;
-        case "header":
-            return "grid" === vuuContext;
-        default:
-            return false;
-    }
-};
-const gridRowMeetsFilterCriteria = (context, dataRow, selectedRows, filter)=>{
-    if ("cell" === context || "row" === context) {
-        const filterPredicate = getFilterPredicate(filter);
-        return filterPredicate(dataRow);
-    }
-    if ("selected-rows" === context) if (0 === selectedRows.length) return false;
-    else {
-        const filterPredicate = getFilterPredicate(filter);
-        return selectedRows.every(filterPredicate);
-    }
-    return true;
-};
-const menuShouldBeRenderedInThisContext = (menuItem, tableLocation, options)=>{
-    if (isGroupMenuItem(menuItem)) return menuItem.menus.some((childMenu)=>menuShouldBeRenderedInThisContext(childMenu, tableLocation, options));
-    if (!vuuContextCompatibleWithTableLocation(tableLocation, menuItem.context, options.selectedRows?.length)) return false;
-    if ("grid" === tableLocation && hasFilter(menuItem)) return gridRowMeetsFilterCriteria(menuItem.context, options.dataRow, options.selectedRows, menuItem.filter);
-    if (isCellMenu(menuItem) && "*" !== menuItem.field) return menuItem.field === options.column.name;
-    return true;
-};
-const buildMenuDescriptorFromVuuMenu = (menu, tableLocation, options)=>{
-    if (menuShouldBeRenderedInThisContext(menu, tableLocation, options)) if (isVuuMenuItem(menu)) return {
-        label: menu.name,
-        id: "MENU_RPC_CALL",
-        options: getMenuItemOptions(menu, options)
-    };
-    else {
-        const children = menu.menus.map((childMenu)=>buildMenuDescriptorFromVuuMenu(childMenu, tableLocation, options)).filter((childMenu)=>void 0 !== childMenu);
-        if (children.length > 0) return {
-            label: menu.name,
-            children
-        };
-    }
-};
-const keyFirst = (c1, c2)=>c1.isKeyField ? -1 : c2.isKeyField ? 1 : 0;
-const defaultFormConfig = {
-    fields: [],
-    key: "",
-    title: ""
-};
-const configFromSchema = (schema)=>{
-    if (schema) {
-        const { columns, key } = schema;
-        return {
-            key,
-            title: "Parameters for command",
-            fields: columns.map((col)=>({
-                    description: col.name,
-                    label: col.name,
-                    name: col.name,
-                    type: col.serverDataType,
-                    isKeyField: col.name === key
-                })).sort(keyFirst)
-        };
-    }
-};
-const getFormConfig = (action)=>{
-    const { tableSchema: schema } = action;
-    const config = configFromSchema(schema) ?? defaultFormConfig;
-    return {
-        config,
-        schema
-    };
-};
-const useVuuMenuActions = ({ clientSideMenuActionHandler, dataSource, onRpcResponse })=>{
-    const { VuuDataSource } = useData();
-    const menuBuilder = useCallback((location, options)=>{
-        const descriptors = [];
-        if (dataSource) {
-            const { links, menu } = dataSource;
-            const { visualLink } = dataSource;
-            if ("grid" === location && links && !visualLink) links.forEach((linkDescriptor)=>{
-                const { link, label: linkLabel } = linkDescriptor;
-                const label = linkLabel ? linkLabel : link.toTable;
-                descriptors.push({
-                    label: `Link to ${label}`,
-                    id: "link-table",
-                    options: linkDescriptor
-                });
-            });
-            if (menu && isTableLocation(location)) {
-                const menuDescriptor = buildMenuDescriptorFromVuuMenu(menu, location, options);
-                if (isRoot(menu) && isGroupMenuItemDescriptor(menuDescriptor)) descriptors.push(...menuDescriptor.children);
-                else if (menuDescriptor) descriptors.push(menuDescriptor);
-            }
-        } else throw Error("useVuuMenuActions no dataSource provided");
-        return descriptors;
-    }, [
-        dataSource
-    ]);
-    const { showDialog, closeDialog, showPrompt } = useModal();
-    const { showNotification } = useNotifications();
-    const showCustomComponentInDialog = useCallback((componentId, ds, table)=>{
-        const sessionDs = new VuuDataSource({
-            columns: ds.columns,
-            table,
-            viewport: table.table
-        });
-        const handleOpenChangePrompt = (open)=>{
-            if (!open) ds.unsubscribe();
-        };
-        const Component = getLayoutComponent(componentId);
-        showPrompt(/*#__PURE__*/ jsx(Component, {
-            dataSource: sessionDs
-        }), {
-            title: "Confirm operation on selected rows",
-            onOpenChange: handleOpenChangePrompt
-        });
-    }, [
-        VuuDataSource,
-        showPrompt
-    ]);
-    const showSessionEditingForm = useCallback(async (ds, action)=>{
-        const { tableSchema } = action;
-        if (tableSchema) {
-            const formConfig = getFormConfig(action);
-            showDialog(/*#__PURE__*/ jsx(SessionEditingForm, {
-                ...formConfig,
-                onClose: closeDialog
-            }), "Set Parameters");
-        }
-        const sessionDs = await ds.createSessionDataSource?.(action.table);
-        const handleSubmit = ()=>{
-            sessionDs?.rpcRequest?.({
-                params: {
-                    save: true
-                },
-                rpcName: "endEditSession",
-                type: "RPC_REQUEST"
-            });
-            closeDialog();
-        };
-        if (sessionDs) showDialog(/*#__PURE__*/ jsx(BulkEditPanel, {
-            sessionDs: sessionDs,
-            onSubmit: handleSubmit,
-            parentDs: ds
-        }), "Multi Row Edit", [
-            /*#__PURE__*/ jsx(Button, {
-                onClick: closeDialog,
-                children: "Cancel"
-            }, "cancel"),
-            /*#__PURE__*/ jsx(Button, {
-                onClick: handleSubmit,
-                children: "Save"
-            }, "submit")
-        ]);
-    }, [
-        closeDialog,
-        showDialog
-    ]);
-    const getMenuRpcRequest = (options)=>{
-        const { rpcName } = options;
-        if (isCellMenu(options)) return {
-            field: options.field,
-            rowKey: options.rowKey,
-            rpcName,
-            value: options.value,
-            type: "VIEW_PORT_MENU_CELL_RPC"
-        };
-        if (isRowMenu(options)) return {
-            rowKey: options.rowKey,
-            row: options.row,
-            rpcName,
-            type: "VIEW_PORT_MENU_ROW_RPC"
-        };
-        if (isSelectionMenu(options)) return {
-            rpcName,
-            type: "VIEW_PORT_MENUS_SELECT_RPC"
-        };
-        return {
-            rpcName,
-            type: "VIEW_PORT_MENU_TABLE_RPC"
-        };
-    };
-    const menuActionHandler = useCallback((menuItemId, options)=>{
-        if (clientSideMenuActionHandler?.(menuItemId, options)) return true;
-        if ("MENU_RPC_CALL" === menuItemId) {
-            const rpcRequest = getMenuRpcRequest(options);
-            dataSource?.menuRpcCall(rpcRequest).then((rpcResponse)=>{
-                if (rpcResponse) {
-                    if (onRpcResponse?.(rpcResponse) === true) return true;
-                    if (isActionMessage(rpcResponse)) {
-                        if (hasShowNotificationAction(rpcResponse)) {
-                            const { action: { message, title = "Success" } } = rpcResponse;
-                            showNotification({
-                                status: "success",
-                                content: message,
-                                header: title,
-                                type: NotificationType.Toast
-                            });
-                        } else if (isSessionTableActionMessage(rpcResponse)) showSessionEditingForm(dataSource, rpcResponse.action);
-                        else if (isCustomComponentActionMessage(rpcResponse)) showCustomComponentInDialog(rpcResponse.action.renderComponent, dataSource, rpcResponse.action.table);
-                    }
-                }
-            });
-            return true;
-        }
-        if ("link-table" === menuItemId) {
-            if (dataSource) dataSource.visualLink = options;
-            return true;
-        }
-        console.log(`useViewServer handleMenuAction,  can't handle action type ${menuItemId}`);
-        return false;
-    }, [
-        clientSideMenuActionHandler,
-        dataSource,
-        onRpcResponse,
-        showCustomComponentInDialog,
-        showNotification,
-        showSessionEditingForm
-    ]);
-    return {
-        menuBuilder,
-        menuActionHandler
-    };
-};
-export { isRowMenu, isSelectionMenu, useVuuMenuActions };

package/src/hooks/useVuuTables.js

@@ -1,32 +0,0 @@
-import { useData } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useState } from "react";
-const useVuuTables = ()=>{
-    const [tableSchemas, setTableSchemas] = useState();
-    const { getServerAPI } = useData();
-    const buildTables = useCallback((schemas)=>{
-        const vuuTables = new Map();
-        schemas.forEach((schema)=>{
-            const { module, table } = schema.table;
-            vuuTables.set(`${module}:${table}`, schema);
-        });
-        return vuuTables;
-    }, []);
-    useEffect(()=>{
-        async function fetchTableMetadata() {
-            try {
-                const server = await getServerAPI();
-                const { tables } = await server.getTableList();
-                const tableSchemas = await Promise.all(tables.map((vuuTable)=>server.getTableSchema(vuuTable)));
-                setTableSchemas(tableSchemas);
-            } catch (err) {
-                console.warn(`useVuuTables: error fetching table metadata ${String(err)}`);
-            }
-        }
-        fetchTableMetadata();
-    }, [
-        buildTables,
-        getServerAPI
-    ]);
-    return tableSchemas;
-};
-export { useVuuTables };

package/src/index.js

@@ -1,10 +0,0 @@
-export * from "./data-editing/index.js";
-export * from "./datasource-provider/index.js";
-export * from "./session-editing-form/index.js";
-export { useLookupValues } from "./hooks/useLookupValues.js";
-export { useSessionDataSource } from "./hooks/useSessionDataSource.js";
-export { getTypeaheadParams, useTypeaheadSuggestions } from "./hooks/useTypeaheadSuggestions.js";
-export { useVisualLinks } from "./hooks/useVisualLinks.js";
-export { isRowMenu, isSelectionMenu, useVuuMenuActions } from "./hooks/useVuuMenuActions.js";
-export { useVuuTables } from "./hooks/useVuuTables.js";
-export { useLostConnection } from "./lost-connection-indicator/useLostConnection.js";

package/src/lost-connection-indicator/LostConnectionIndicator.css.js

@@ -1,29 +0,0 @@
-const css = `
-.vuuLostConnectionIndicator {
-  --spinner-color: var(--vuuSpinner-color, #e23434);
-  align-items: center;
-  gap: var(--salt-spacing-300);
-  flex-direction: column;
-  justify-content: center;
-  display: flex;
-
-  & .vuuLostConnectionIndicator-spinner {
-    background: radial-gradient(farthest-side,var(--spinner-color) 94%,#0000) top/9px 9px no-repeat,
-                conic-gradient(#0000 30%,var(--spinner-color));
-    border-radius: 50%;
-    width: 75px;
-    height: 75px;
-    animation: 1s linear infinite spinner-rounded-comet-anim;
-    mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
-  }
-}
-
-@keyframes spinner-rounded-comet-anim {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-
-
-`;
-export default css;

package/src/lost-connection-indicator/LostConnectionIndicator.js

@@ -1,30 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import LostConnectionIndicator from "./LostConnectionIndicator.css";
-const classBase = "vuuLostConnectionIndicator";
-const LostConnectionIndicator_LostConnectionIndicator = ()=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-toast-notification",
-        css: LostConnectionIndicator,
-        window: targetWindow
-    });
-    return /*#__PURE__*/ jsxs("div", {
-        className: classBase,
-        children: [
-            /*#__PURE__*/ jsx("h2", {
-                className: `${classBase}-title`,
-                children: "CONNECTION LOST"
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-spinner`
-            }),
-            /*#__PURE__*/ jsx("h3", {
-                className: `${classBase}-status`,
-                children: "RECONNECTING"
-            })
-        ]
-    });
-};
-export { LostConnectionIndicator_LostConnectionIndicator as LostConnectionIndicator };

package/src/lost-connection-indicator/useLostConnection.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ConnectionManager, isConnected } from "@vuu-ui/vuu-data-remote";
-import { useCallback, useMemo, useRef } from "react";
-import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
-import { LostConnectionIndicator } from "./LostConnectionIndicator.js";
-const useLostConnection = ()=>{
-    const { hideNotification, showNotification } = useNotifications();
-    const isConnectedRef = useRef(ConnectionManager.connected);
-    const handleConnectionStatusChange = useCallback((connectionStatus)=>{
-        const { current: wasConnected } = isConnectedRef;
-        isConnectedRef.current = isConnected(connectionStatus);
-        if (wasConnected && "disconnected" === connectionStatus) showNotification({
-            content: /*#__PURE__*/ jsx(LostConnectionIndicator, {}),
-            status: "error",
-            type: NotificationType.Workspace
-        });
-        else if (!wasConnected && isConnectedRef.current) hideNotification();
-    }, [
-        hideNotification,
-        showNotification
-    ]);
-    useMemo(async ()=>{
-        ConnectionManager.on("connection-status", handleConnectionStatusChange);
-    }, [
-        handleConnectionStatusChange
-    ]);
-};
-export { useLostConnection };

package/src/session-editing-form/SessionEditingForm.css.js

@@ -1,47 +0,0 @@
-const css = `
-.vuuSessionEditingForm {
-  flex-direction: column;
-  gap: 3px;
-  min-width: 400px;
-  display: flex;
-}
-
-.vuuSessionEditingForm-content {
-  padding: var(--salt-spacing-200);
-  flex-direction: column;
-  flex: auto;
-  gap: 3px;
-  display: flex;
-  overflow: auto;
-}
-
-.vuuSessionEditingForm-fieldValue.vuuReadOnly {
-  font-weight: var(--salt-text-label-fontWeight-strong);
-}
-
-.vuuSessionEditingForm-buttonbar {
-  border-top: solid 1px var(--salt-container-primary-borderColor);
-  box-sizing: content-box;
-  flex: 0 0 autox;
-  height: var(--salt-size-base);
-  margin: var(--salt-spacing-200);
-  padding-top: var(--salt-spacing-200);
-  justify-content: flex-end;
-  align-items: center;
-  gap: 6px;
-  display: flex;
-}
-
-.vuuSessionEditingForm-errorBanner {
-  --vuu-icon-left: 3px;
-  --vuu-icon-size: 18px;
-  --vuu-icon-top: 3px;
-  border: solid 1px var(--salt-status-error-borderColor);
-  padding: 0 6px 0 26px;
-  line-height: 24px;
-  position: relative;
-}
-
-
-`;
-export default css;