@etsoo/react 1.4.18 → 1.4.22

package/lib/mu/ResponsibleContainer.js

@@ -1,57 +1,104 @@
 import { Box, Stack } from '@mui/material';
 import React from 'react';
+import { Labels } from '../app/Labels';
 import { GridDataGet } from '../components/GridLoader';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { useDimensions } from '../uses/useDimensions';
 import { DataGridEx, DataGridExCalColumns } from './DataGridEx';
+import { MUGlobal } from './MUGlobal';
+import { PullToRefreshUI } from './PullToRefreshUI';
 import { ScrollerListEx } from './ScrollerListEx';
 import { SearchBar } from './SearchBar';
+/**
+ * Responsible container
+ * @param props Props
+ * @returns Layout
+ */
 export function ResponsibleContainer(props) {
-    var _a;
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, searchBoxSx, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, fieldTemplate, height, listBoxSx, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, searchBoxSx = { marginBottom: MUGlobal.half(paddings) }, sizeReadyMiliseconds = 0, ...rest } = props;
+    // Labels
+    const labels = Labels.CommonPage;
     // Refs
     const refs = React.useRef({});
+    const state = refs.current;
     const mRefs = useCombinedRefs(mRef, (ref) => {
         if (ref == null)
             return;
-        refs.current.ref = ref;
+        state.ref = ref;
     });
+    // Update mounted state
+    React.useEffect(() => {
+        return () => {
+            state.mounted = false;
+        };
+    }, []);
     // Has fields
     const hasFields = fields != null && fields.length > 0;
+    // Load data
+    const localLoadData = (props) => {
+        state.mounted = true;
+        const data = GridDataGet(props, fieldTemplate);
+        return loadData(data);
+    };
+    // On submit callback
+    const onSubmit = (data, _reset) => {
+        if (data == null || state.ref == null)
+            return;
+        state.ref.reset({ data });
+    };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds, (_preRect, rect) => {
+        // Check
+        if (rect == null)
+            return true;
+        // Last rect
+        const lastRect = state.rect;
+        // 32 = scroll bar width
+        if (lastRect != null &&
+            state.mounted !== true &&
+            Math.abs(rect.width - lastRect.width) <= 32 &&
+            Math.abs(rect.height - lastRect.height) <= 32)
+            return true;
+        // Hold the new rect
+        state.rect = rect;
+        return false;
+    });
+    // Rect
     const rect = dimensions[0][2];
-    const showDataGrid = ((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0) >= dataGridMinWidth;
-    React.useEffect(() => {
-        if (rect != null && rect.height > 50 && height == null) {
-            let gridHeight = window.innerHeight - Math.round(rect.top + rect.height + 1);
+    // Create list
+    const [list, showDataGrid] = (() => {
+        // No layout
+        if (rect == null)
+            return [null, false];
+        // Width
+        const width = rect.width;
+        // Show DataGrid or List dependng on width
+        const showDataGrid = width >= dataGridMinWidth;
+        // Height
+        let heightLocal;
+        if (height != null) {
+            heightLocal = height;
+        }
+        else {
+            // Auto calculation
+            heightLocal = window.innerHeight - Math.round(rect.bottom + 1);
             const style = window.getComputedStyle(dimensions[0][1]);
-            const boxPadding = parseFloat(style.paddingLeft);
-            if (!isNaN(boxPadding))
-                gridHeight -= 2 * boxPadding;
+            const boxMargin = parseFloat(style.marginBottom);
+            if (!isNaN(boxMargin))
+                heightLocal -= 3 * boxMargin; // 1 - Box, 2 - Page bottom
             if (adjustHeight != null) {
-                gridHeight -= adjustHeight(gridHeight);
-            }
-            if (gridHeight !== refs.current.height) {
-                refs.current.height = gridHeight;
+                heightLocal -= adjustHeight(heightLocal);
             }
         }
-    }, [rect]);
-    const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-    const gridHeight = refs.current.height;
-    console.log(rect, gridHeight, showDataGrid);
-    const list = React.useMemo(() => {
-        if (gridHeight == null)
-            return;
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;
-            return (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
-                React.createElement(DataGridEx, { autoLoad: !hasFields, height: gridHeight, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })));
+            return [
+                React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(true) },
+                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, columns: columns, ...rest })),
+                true
+            ];
         }
         // Delete
         delete rest.checkable;
@@ -62,18 +109,25 @@ export function ResponsibleContainer(props) {
         delete rest.hideFooter;
         delete rest.hoverColor;
         delete rest.selectable;
-        return (React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
-            React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: gridHeight, loadData: localLoadData, mRef: mRefs, ...rest })));
-    }, [gridHeight, showDataGrid]);
-    // On submit callback
-    const onSubmit = (data, _reset) => {
-        if (data == null || rect == null || refs.current.ref == null)
-            return;
-        refs.current.ref.reset({ data });
-    };
+        return [
+            React.createElement(Box, { sx: listBoxSx == null ? undefined : listBoxSx(false) },
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, width: rect.width, height: heightLocal, loadData: localLoadData, mRef: mRefs, ...rest })),
+            false
+        ];
+    })();
+    // Pull container
+    const pullContainer = list
+        ? showDataGrid
+            ? '.DataGridEx-Body'
+            : '.ScrollerListEx-Body'
+        : undefined;
     // Layout
-    return (React.createElement(Stack, null,
-        hasFields && (React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx },
-            React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
-        list));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, null,
+            React.createElement(Box, { ref: dimensions[0][0], sx: searchBoxSx }, hasFields && (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit }))),
+            list),
+        pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
+                const container = document.querySelector(pullContainer);
+                return !(container === null || container === void 0 ? void 0 : container.scrollTop);
+            } }))));
 }

package/lib/mu/ScrollerListEx.js

@@ -66,8 +66,7 @@ export function ScrollerListEx(props) {
         const [selectedDiv, selectedData] = (_a = selectedItem.current) !== null && _a !== void 0 ? _a : [];
         if (selectedData != null && selectedData[idField] === data[idField])
             return;
-        if (selectedDiv != null)
-            selectedDiv.classList.remove(selectedClassName);
+        selectedDiv === null || selectedDiv === void 0 ? void 0 : selectedDiv.classList.remove(selectedClassName);
         div.classList.add(selectedClassName);
         selectedItem.current = [div, data];
         if (onSelectChange)

package/lib/mu/TableEx.js

@@ -34,35 +34,39 @@ export function TableEx(props) {
     else {
         rowsPerPageLocal = 10;
     }
+    // Rows
+    const [rows, updateRows] = React.useState([]);
+    const setRows = (rows) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
     // States
-    const [state, stateUpdate] = React.useReducer((currentState, newState) => {
-        return { ...currentState, ...newState };
-    }, {
+    const stateRefs = React.useRef({
         autoLoad,
         currentPage: 0,
+        loadedItems: 0,
         hasNextPage: true,
         isNextPageLoading: false,
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderBy
             ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
             : undefined,
-        rows: [],
         batchSize: rowsPerPageLocal,
         selectedItems: []
     });
-    const isMounted = React.useRef(true);
+    const state = stateRefs.current;
     // Reset the state and load again
     const reset = (add) => {
-        const state = {
+        const resetState = {
             autoLoad: true,
             currentPage: 0,
+            loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            rows: [],
             ...add
         };
-        stateUpdate(state);
+        Object.assign(state, resetState);
     };
     React.useImperativeHandle(mRef, () => ({
         /**
@@ -84,7 +88,7 @@ export function TableEx(props) {
         // Update state
         state.isNextPageLoading = true;
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
         const loadProps = {
             currentPage,
             batchSize,
@@ -93,16 +97,16 @@ export function TableEx(props) {
             data
         };
         loadData(loadProps).then((result) => {
-            if (!isMounted.current || result == null) {
+            state.isMounted = true;
+            if (result == null || isMounted === false) {
                 return;
             }
             const newItems = result.length;
-            stateUpdate({
-                rows: result,
-                lastLoadedItems: newItems,
-                hasNextPage: newItems >= batchSize,
-                isNextPageLoading: false
-            });
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= batchSize;
+            state.isNextPageLoading = false;
+            // Update rows
+            setRows(result);
         });
     };
     const handleChangePage = (_event, newPage) => {
@@ -111,11 +115,11 @@ export function TableEx(props) {
         loadDataLocal();
     };
     const handleChangeRowsPerPage = (event) => {
-        const rowsPerPage = parseInt(event.target.value);
-        reset({ rowsPerPage });
+        const batchSize = parseInt(event.target.value);
+        reset({ batchSize });
     };
     const handleSelect = (item, checked) => {
-        const selectedItems = [...state.selectedItems];
+        const selectedItems = state.selectedItems;
         const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === item[idField]);
         if (checked) {
             if (index === -1)
@@ -128,11 +132,10 @@ export function TableEx(props) {
         if (onSelectChange != null) {
             onSelectChange(selectedItems);
         }
-        stateUpdate({ selectedItems });
     };
     const handleSelectAll = (checked) => {
-        const selectedItems = [...state.selectedItems];
-        state.rows.forEach((row) => {
+        const selectedItems = state.selectedItems;
+        rows.forEach((row) => {
             const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
             if (checked) {
                 if (index === -1)
@@ -145,14 +148,13 @@ export function TableEx(props) {
         if (onSelectChange != null) {
             onSelectChange(selectedItems);
         }
-        stateUpdate({ selectedItems });
     };
     // New sort
     const handleSort = (field, asc) => {
         reset({ orderBy: field, orderByAsc: asc });
     };
     // Destruct states
-    const { autoLoad: stateAutoLoad, currentPage, hasNextPage, lastLoadedItems, orderBy, rows, batchSize, selectedItems } = state;
+    const { autoLoad: stateAutoLoad, currentPage, hasNextPage, lastLoadedItems, orderBy, batchSize, selectedItems } = state;
     // Current page selected items
     const pageSelectedItems = selectable
         ? rows.reduce((previousValue, currentItem) => {
@@ -170,7 +172,7 @@ export function TableEx(props) {
         loadDataLocal();
     React.useEffect(() => {
         return () => {
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
     // Layout

package/lib/mu/pages/CommonPage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /// <reference types="react" />
 import { CommonPageProps } from './CommonPageProps';
 /**
@@ -8,7 +7,7 @@ export declare const CommonPagePullContainer = "#page-container";
 /**
  * Default scroll container
  */
-export declare const CommonPageScrollContainer: NodeJS.Global & typeof globalThis;
+export declare const CommonPageScrollContainer: typeof globalThis;
 /**
  * Common page
  * @param props Props

package/lib/uses/useDimensions.js

@@ -1,13 +1,5 @@
 import { DomUtils } from '@etsoo/shared';
 import React from 'react';
-const createRef = (source, index) => {
-    return [
-        (instance) => {
-            if (instance != null)
-                source[index][1] = instance;
-        }
-    ];
-};
 /**
  * Calculate element(s) dimensions
  * @param elements Observed elments count

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.18",
+    "version": "1.4.22",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -54,7 +54,7 @@
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",
-        "@mui/material": "^5.2.7",
+        "@mui/material": "^5.2.8",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -76,15 +76,15 @@
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.7",
+        "@babel/cli": "^7.16.8",
         "@babel/core": "^7.16.7",
-        "@babel/plugin-transform-runtime": "^7.16.7",
-        "@babel/preset-env": "^7.16.7",
-        "@babel/runtime-corejs3": "^7.16.7",
+        "@babel/plugin-transform-runtime": "^7.16.8",
+        "@babel/preset-env": "^7.16.8",
+        "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.9.0",
-        "@typescript-eslint/parser": "^5.9.0",
+        "@typescript-eslint/eslint-plugin": "^5.9.1",
+        "@typescript-eslint/parser": "^5.9.1",
         "eslint": "^8.6.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",

package/src/components/GridLoader.ts

@@ -126,6 +126,11 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
      */
     lastLoadedItems?: number;
 
+    /**
+     * All loaded items count
+     */
+    loadedItems: number;
+
     /**
      * Has next page?
      */
@@ -137,9 +142,9 @@ export interface GridLoaderStates<T> extends GridLoadDataProps {
     isNextPageLoading: boolean;
 
     /**
-     * Current rows
+     * Is mounted
      */
-    rows: T[];
+    isMounted?: boolean;
 
     /**
      * Selected items of id

package/src/components/ScrollerGrid.tsx

@@ -40,7 +40,10 @@ export interface ScrollerGridProps<T>
     /**
      * Footer renderer
      */
-    footerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
+    footerRenderer?: (
+        rows: T[],
+        states: GridLoaderStates<T>
+    ) => React.ReactNode;
 
     /**
      * Header renderer
@@ -163,29 +166,28 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         ...rest
     } = props;
 
-    // States
-    const [state, stateUpdate] = React.useReducer(
-        (
-            currentState: GridLoaderStates<T>,
-            newState: Partial<GridLoaderStates<T>>
-        ) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            autoLoad,
-            currentPage: 0,
-            hasNextPage: true,
-            isNextPageLoading: false,
-            orderBy: defaultOrderBy,
-            orderByAsc: defaultOrderByAsc,
-            rows: [],
-            batchSize: 10,
-            selectedItems: []
-        }
-    );
-    const isMounted = React.useRef(true);
+    // Rows
+    const [rows, updateRows] = React.useState<T[]>([]);
+    const setRows = (rows: T[]) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
 
-    const ref = React.createRef<VariableSizeGrid<T>>();
+    // Refs
+    const refs = React.useRef<GridLoaderStates<T>>({
+        autoLoad,
+        currentPage: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        orderByAsc: defaultOrderByAsc,
+        batchSize: 10,
+        loadedItems: 0,
+        selectedItems: []
+    });
+    const state = refs.current;
+
+    const ref = React.useRef<VariableSizeGrid<T>>(null);
 
     // Load data
     const loadDataLocal = (pageAdd: number = 1) => {
@@ -194,10 +196,10 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
 
         // Update state
         state.isNextPageLoading = true;
-        // stateUpdate({ isNextPageLoading: true });
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
+            state;
 
         const loadProps: GridLoadDataProps = {
             currentPage,
@@ -208,38 +210,36 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         };
 
         loadData(loadProps).then((result) => {
-            if (result == null || !isMounted.current) {
+            state.isMounted = true;
+
+            if (result == null || isMounted === false) {
                 return;
             }
 
             const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.isNextPageLoading = false;
+            state.hasNextPage = newItems >= batchSize;
 
             if (pageAdd === 0) {
                 // New items
-                const rows = state.lastLoadedItems
-                    ? state.rows
+                const newRows = state.lastLoadedItems
+                    ? [...rows]
                           .splice(
-                              state.rows.length - state.lastLoadedItems,
+                              rows.length - state.lastLoadedItems,
                               state.lastLoadedItems
                           )
                           .concat(result)
                     : result;
 
-                // Refresh current page
-                stateUpdate({
-                    rows,
-                    lastLoadedItems: newItems,
-                    isNextPageLoading: false,
-                    hasNextPage: newItems >= batchSize
-                });
+                // Update rows
+                setRows(newRows);
             } else {
-                stateUpdate({
-                    rows: state.rows.concat(result),
-                    lastLoadedItems: newItems,
-                    isNextPageLoading: false,
-                    currentPage: state.currentPage + pageAdd,
-                    hasNextPage: newItems >= batchSize
-                });
+                // Set current page
+                state.currentPage = state.currentPage + pageAdd;
+
+                // Update rows
+                setRows([...rows, ...result]);
             }
         });
     };
@@ -251,8 +251,8 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
     ) => {
         // Custom render
         const data =
-            itemProps.rowIndex < state.rows.length
-                ? state.rows[itemProps.rowIndex]
+            itemProps.rowIndex < rows.length
+                ? rows[itemProps.rowIndex]
                 : undefined;
         return itemRenderer({
             ...itemProps,
@@ -264,7 +264,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
     // Local items renderer callback
     const onItemsRenderedLocal = (props: GridOnItemsRenderedProps) => {
         // No items, means no necessary to load more data during reset
-        const itemCount = state.rows.length;
+        const itemCount = rows.length;
         if (
             itemCount > 0 &&
             props.visibleRowStopIndex + threshold > itemCount
@@ -278,17 +278,20 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
     };
 
     // Reset the state and load again
-    const reset = (add?: {}) => {
-        const state = {
+    const reset = (add?: Partial<GridLoaderStates<T>>) => {
+        const resetState: Partial<GridLoaderStates<T>> = {
             autoLoad: true,
             currentPage: 0,
+            loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            rows: [],
             ...add
         };
-        stateUpdate(state);
+        Object.assign(state, resetState);
+
+        // Reset items
+        setRows([]);
     };
 
     React.useImperativeHandle(
@@ -307,16 +310,14 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             select(rowIndex: number) {
                 // Select only one item
                 const selectedItems = state.selectedItems;
-                selectedItems[0] = state.rows[rowIndex];
+                selectedItems[0] = rows[rowIndex];
 
                 if (onSelectChange) onSelectChange(selectedItems);
-
-                stateUpdate({ selectedItems });
             },
             selectAll(checked: boolean) {
                 const selectedItems = state.selectedItems;
 
-                state.rows.forEach((row) => {
+                rows.forEach((row) => {
                     const index = selectedItems.findIndex(
                         (selectedItem) => selectedItem[idField] === row[idField]
                     );
@@ -329,8 +330,6 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
                 });
 
                 if (onSelectChange) onSelectChange(selectedItems);
-
-                stateUpdate({ selectedItems });
             },
             selectItem(item: T, checked: boolean) {
                 const selectedItems = state.selectedItems;
@@ -345,8 +344,6 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
                 }
 
                 if (onSelectChange) onSelectChange(selectedItems);
-
-                stateUpdate({ selectedItems });
             },
             reset,
             resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean) {
@@ -363,17 +360,26 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
                 ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
             }
         }),
-        [state.rows, state.selectedItems]
+        [rows]
     );
 
     React.useEffect(() => {
         return () => {
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
 
+    // Force update to work with the new width
+    React.useEffect(() => {
+        ref.current?.resetAfterIndices({
+            columnIndex: 0,
+            rowIndex: 0,
+            shouldForceUpdate: true
+        });
+    }, [width]);
+
     // Destruct state
-    const { autoLoad: stateAutoLoad, rows, hasNextPage, currentPage } = state;
+    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
     const rowLength = rows.length;
 
     // Row count
@@ -388,7 +394,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             {headerRenderer && headerRenderer(state)}
             <VariableSizeGrid<T>
                 itemKey={({ columnIndex, rowIndex }) => {
-                    const data = state.rows[rowIndex];
+                    const data = rows[rowIndex];
                     if (data == null) return [rowIndex, columnIndex].join(',');
                     return [data[idField], columnIndex].join(',');
                 }}
@@ -406,7 +412,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             >
                 {(props) => itemRendererLocal(props, state)}
             </VariableSizeGrid>
-            {footerRenderer && footerRenderer(state)}
+            {footerRenderer && footerRenderer(rows, state)}
         </React.Fragment>
     );
 };