@etsoo/react 1.7.93 → 1.7.95

package/README.md

@@ -1,4 +1,5 @@
 # AppReact
+
 **TypeScript ReactJs UI Independent Framework**
 
 ## Installing
@@ -15,4 +16,4 @@ Using yarn:
 $ yarn add @etsoo/react
 ```
 
-## React UI Implmentation
+## React UI Implmentation

package/__tests__/EventWatcher.tsx

@@ -1,27 +1,27 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { EventWatcher } from '../src/app/EventWatcher';
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { EventWatcher } from "../src/app/EventWatcher";
 
 function App(props: { callback: () => void }) {
-    const { callback } = props;
-    const watcher = new EventWatcher();
+  const { callback } = props;
+  const watcher = new EventWatcher();
 
-    React.useEffect(() => {
-        watcher.add({
-            type: 'click',
-            action: (_event) => callback(),
-            once: true
-        });
-    }, []);
-    return <button onClick={(event) => watcher.do(event)}></button>;
+  React.useEffect(() => {
+    watcher.add({
+      type: "click",
+      action: (_event) => callback(),
+      once: true
+    });
+  }, []);
+  return <button onClick={(event) => watcher.do(event)}></button>;
 }
 
-test('Tests for EventWatcher', () => {
-    const callback = jest.fn();
-    render(<App callback={callback} />);
-    const button = screen.getByRole<HTMLButtonElement>('button');
-    button.click();
-    expect(callback).toHaveBeenCalled();
-    button.click();
-    expect(callback).toHaveBeenCalledTimes(1);
+test("Tests for EventWatcher", () => {
+  const callback = jest.fn();
+  render(<App callback={callback} />);
+  const button = screen.getByRole<HTMLButtonElement>("button");
+  button.click();
+  expect(callback).toHaveBeenCalled();
+  button.click();
+  expect(callback).toHaveBeenCalledTimes(1);
 });

package/__tests__/ReactUtils.ts

@@ -1,6 +1,6 @@
-import { ReactUtils } from '../src/app/ReactUtils';
+import { ReactUtils } from "../src/app/ReactUtils";
 
-test('Tests for ReactUtils.formatInputValue', () => {
-    expect(ReactUtils.formatInputValue([1, 'a'])).toEqual([1, 'a']);
-    expect(ReactUtils.formatInputValue(true)).toEqual('true');
+test("Tests for ReactUtils.formatInputValue", () => {
+  expect(ReactUtils.formatInputValue([1, "a"])).toEqual([1, "a"]);
+  expect(ReactUtils.formatInputValue(true)).toEqual("true");
 });

package/__tests__/tsconfig.json

@@ -1,19 +1,19 @@
 {
-    "compilerOptions": {
-        "target": "ES2020",
-        "module": "ESNext",
-        "moduleResolution": "Node10",
-        "allowJs": false,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react",
-        "declaration": true
-    },
-    "include": [".."]
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node10",
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "declaration": true
+  },
+  "include": [".."]
 }

package/babel.config.json

@@ -1,11 +1,11 @@
 {
-    "presets": [["@babel/env"]],
-    "plugins": [
-        [
-            "@babel/plugin-transform-runtime",
-            {
-                "corejs": 3
-            }
-        ]
+  "presets": [["@babel/env"]],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": 3
+      }
     ]
+  ]
 }

package/lib/app/CoreConstants.js

@@ -6,9 +6,9 @@ export var CoreConstants;
     /**
      * User id saved field
      */
-    CoreConstants.FieldUserIdSaved = 'UserIdSaved';
+    CoreConstants.FieldUserIdSaved = "UserIdSaved";
     /**
      * Rresh token cache field
      */
-    CoreConstants.FieldRefreshToken = 'RefreshToken';
+    CoreConstants.FieldRefreshToken = "RefreshToken";
 })(CoreConstants || (CoreConstants = {}));

package/lib/app/EventWatcher.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 /**
  * Event watcher action
  */

package/lib/app/EventWatcher.js

@@ -18,7 +18,7 @@ export class EventWatcher {
      */
     do(event) {
         // Type
-        const type = typeof event === 'string' ? event : event.type;
+        const type = typeof event === "string" ? event : event.type;
         // Execute
         const removeIndices = [];
         this.actions.forEach((item, index) => {
@@ -29,14 +29,12 @@ export class EventWatcher {
                 removeIndices.push(index);
         });
         // Remove all once actions
-        removeIndices
-            .reverse()
-            .forEach((index) => this.actions.splice(index, 1));
+        removeIndices.reverse().forEach((index) => this.actions.splice(index, 1));
     }
     isMatch(action, type) {
         if (action.type == null)
             return true;
-        if (typeof action.type === 'string')
+        if (typeof action.type === "string")
             return action.type === type;
         return action.type.includes(type);
     }

package/lib/app/InputDialogProps.d.ts

@@ -1,5 +1,5 @@
-import { NotificationContent, NotificationReturn } from '@etsoo/notificationbase';
-import { NotificationReactCallProps } from '../notifier/Notifier';
+import { NotificationContent, NotificationReturn } from "@etsoo/notificationbase";
+import { NotificationReactCallProps } from "../notifier/Notifier";
 /**
  * Input dialog props
  */

package/lib/app/ReactUtils.d.ts

@@ -1,5 +1,5 @@
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
 /**
  * React utils
  */

package/lib/app/ReactUtils.js

@@ -1,4 +1,4 @@
-import { DateUtils, DomUtils, Utils } from '@etsoo/shared';
+import { DateUtils, DomUtils, Utils } from "@etsoo/shared";
 /**
  * React utils
  */
@@ -12,9 +12,9 @@ export var ReactUtils;
     function formatInputValue(value) {
         if (value === null)
             return undefined;
-        if (typeof value === 'number')
+        if (typeof value === "number")
             return value;
-        if (typeof value === 'string')
+        if (typeof value === "string")
             return value;
         if (Array.isArray(value))
             return value;
@@ -37,10 +37,10 @@ export var ReactUtils;
             return false;
         while (target != null && target != event.currentTarget) {
             const nodeName = target.nodeName.toUpperCase();
-            if (nodeName === 'INPUT' ||
-                nodeName === 'BUTTON' ||
-                nodeName === 'A' ||
-                target.hasAttribute('onClick'))
+            if (nodeName === "INPUT" ||
+                nodeName === "BUTTON" ||
+                nodeName === "A" ||
+                target.hasAttribute("onClick"))
                 return false;
             target = target.parentElement;
         }
@@ -55,12 +55,12 @@ export var ReactUtils;
      */
     function triggerChange(input, value, cancelable = false) {
         // Radio type not supported
-        if (input.type === 'radio')
+        if (input.type === "radio")
             return;
         // checked?
-        const checked = input.type === 'checkbox';
+        const checked = input.type === "checkbox";
         // Property name
-        const property = checked ? 'checked' : 'value';
+        const property = checked ? "checked" : "value";
         // input.value = newValue will not trigger the change event
         // input type = 'hidden' will also not trigger the event
         // https://coryrylan.com/blog/trigger-input-updates-with-react-controlled-inputs
@@ -68,7 +68,7 @@ export var ReactUtils;
         if (checked) {
             const checkedValue = input.value == value;
             nativeInputValueSetter?.call(input, checkedValue);
-            const clickEvent = new Event('click', {
+            const clickEvent = new Event("click", {
                 bubbles: true,
                 cancelable
             });
@@ -76,7 +76,7 @@ export var ReactUtils;
         }
         else {
             nativeInputValueSetter?.call(input, value);
-            const inputEvent = new Event('change', {
+            const inputEvent = new Event("change", {
                 bubbles: true,
                 cancelable
             });
@@ -93,7 +93,7 @@ export var ReactUtils;
     function updateRefs(refs, data, callback) {
         const local = callback == null
             ? undefined
-            : typeof callback === 'function'
+            : typeof callback === "function"
                 ? callback
                 : (item, value) => {
                     item[callback] = value;
@@ -111,13 +111,14 @@ export var ReactUtils;
                 item instanceof HTMLTextAreaElement ||
                 item instanceof HTMLSelectElement) {
                 const value = Utils.getNestedValue(data, item.name || k);
-                const isDateTime = item.type === 'datetime-local';
-                if (isDateTime || item.type === 'date') {
+                const isDateTime = item.type === "datetime-local";
+                if (isDateTime || item.type === "date") {
                     item.value =
-                        DateUtils.formatForInput(value, isDateTime ? false : undefined) ?? '';
+                        DateUtils.formatForInput(value, isDateTime ? false : undefined) ??
+                            "";
                 }
                 else {
-                    item.value = `${value ?? ''}`;
+                    item.value = `${value ?? ""}`;
                 }
             }
             else {
@@ -136,11 +137,11 @@ export var ReactUtils;
     function updateRefValues(refs, data, callback, ignoreEmpty = true) {
         const local = callback == null
             ? undefined
-            : typeof callback === 'function'
+            : typeof callback === "function"
                 ? callback
                 : (item) => item[callback];
         const formatValue = (value) => {
-            if (ignoreEmpty && value === '')
+            if (ignoreEmpty && value === "")
                 return null;
             return value;
         };

package/lib/components/DnDList.d.ts

@@ -1,6 +1,6 @@
-import { UniqueIdentifier } from '@dnd-kit/core';
-import { DataTypes } from '@etsoo/shared';
-import React, { CSSProperties } from 'react';
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { DataTypes } from "@etsoo/shared";
+import React, { CSSProperties } from "react";
 /**
  * DnD list forward ref
  */

package/lib/components/DnDList.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import React from 'react';
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import React from "react";
 function SortableItem(props) {
     // Destruct
     const { id, itemRenderer, style = {} } = props;

package/lib/components/DynamicRouter.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+import { RouteObject } from "react-router-dom";
 /**
  * Dynamic router props
  */
@@ -14,3 +15,10 @@ export type DynamicRouterProps = {
  * @returns Component
  */
 export declare function DynamicRouter(props: React.PropsWithChildren<DynamicRouterProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Create dynamic router
+ * @param routes Routes
+ * @param opts Options
+ * @returns Router
+ */
+export declare function createDynamicRouter(routes: RouteObject[], opts?: DynamicRouterProps): import("@remix-run/router").Router;

package/lib/components/DynamicRouter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BridgeUtils } from '@etsoo/appscript';
-import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+import { BridgeUtils } from "@etsoo/appscript";
+import { BrowserRouter, createBrowserRouter, createMemoryRouter, MemoryRouter } from "react-router-dom";
 function getEntries(host) {
     const startUrl = host.getStartUrl();
     return startUrl == null ? undefined : [startUrl];
@@ -17,3 +17,19 @@ export function DynamicRouter(props) {
     const host = BridgeUtils.host;
     return host == null ? (_jsx(BrowserRouter, { basename: basename, children: children })) : (_jsx(MemoryRouter, { basename: basename, initialEntries: getEntries(host), children: children }));
 }
+/**
+ * Create dynamic router
+ * @param routes Routes
+ * @param opts Options
+ * @returns Router
+ */
+export function createDynamicRouter(routes, opts) {
+    // Is host?
+    const host = BridgeUtils.host;
+    if (host == null) {
+        return createBrowserRouter(routes, opts);
+    }
+    else {
+        return createMemoryRouter(routes, opts);
+    }
+}

package/lib/components/GridColumn.d.ts

@@ -1,8 +1,8 @@
-import { EntityStatus } from '@etsoo/appscript';
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
-import { GridLoaderStates } from './GridLoader';
-import { ScrollerGridForwardRef } from './ScrollerGrid';
+import { EntityStatus } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { GridLoaderStates } from "./GridLoader";
+import { ScrollerGridForwardRef } from "./ScrollerGrid";
 /**
  * Grid data type
  */
@@ -11,7 +11,7 @@ export { GridDataType };
 /**
  * Grid align
  */
-export type GridAlign = 'center' | 'inherit' | 'justify' | 'left' | 'right';
+export type GridAlign = "center" | "inherit" | "justify" | "left" | "right";
 /**
  * Data align get
  * @param align Align

package/lib/components/GridColumn.js

@@ -1,5 +1,5 @@
-import { EntityStatus } from '@etsoo/appscript';
-import { DataTypes } from '@etsoo/shared';
+import { EntityStatus } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
 /**
  * Grid data type
  */
@@ -16,9 +16,9 @@ export const GridAlignGet = (align, type) => {
             type === GridDataType.IntMoney ||
             type === GridDataType.Int ||
             type === GridDataType.Number)
-            return 'right';
+            return "right";
         else if (type === GridDataType.Boolean)
-            return 'center';
+            return "center";
     }
     return align;
 };
@@ -30,12 +30,12 @@ export const GridAlignGet = (align, type) => {
 export const GridDeletedCellBoxStyle = (data) => {
     if (data == null)
         return {};
-    const status = 'status' in data
+    const status = "status" in data
         ? data.status
-        : 'entityStatus' in data
+        : "entityStatus" in data
             ? data.entityStatus
             : EntityStatus.Normal;
     if (status === EntityStatus.Inactivated || status === EntityStatus.Deleted)
-        return { textDecoration: 'line-through' };
+        return { textDecoration: "line-through" };
     return {};
 };

package/lib/components/GridLoader.d.ts

@@ -1,5 +1,5 @@
-import { QueryPagingData } from '@etsoo/appscript';
-import { DataTypes } from '@etsoo/shared';
+import { QueryPagingData } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
 /**
  * Grid size
  */
@@ -29,7 +29,7 @@ export declare function GridDataGetData<F extends DataTypes.BasicTemplate>(data?
 /**
  * Grid Json data
  */
-export type GridJsonData = Omit<GridLoadDataProps, 'data'>;
+export type GridJsonData = Omit<GridLoadDataProps, "data">;
 /**
  * Grid data load props
  */
@@ -68,7 +68,7 @@ export interface GridLoader<T extends object> {
     /**
      * Default order by
      */
-    defaultOrderBy?: string;
+    defaultOrderBy?: Record<string, boolean>;
     /**
      * Batch size when load data, default will be calcuated with height and itemSize
      */

package/lib/components/GridLoader.js

@@ -1,11 +1,11 @@
-import { DomUtils } from '@etsoo/shared';
+import { DomUtils } from "@etsoo/shared";
 /**
  * Grid size calculation
  * @param size Size
  * @param input Input
  */
 export const GridSizeGet = (size, input) => {
-    if (typeof size === 'function')
+    if (typeof size === "function")
         return size(input);
     return size;
 };

package/lib/components/GridMethodRef.d.ts

@@ -1,5 +1,5 @@
-import { Align } from 'react-window';
-import { GridLoaderPartialStates } from './GridLoader';
+import { Align } from "react-window";
+import { GridLoaderPartialStates } from "./GridLoader";
 /**
  * Grid method ref
  */

package/lib/components/ListItemReact.d.ts

@@ -1,5 +1,5 @@
-import { ListItem } from '@etsoo/appscript';
-import React from 'react';
+import { ListItem } from "@etsoo/appscript";
+import React from "react";
 /**
  * React list item
  */

package/lib/components/ScrollRestoration.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-import { useWindowScroll } from '../uses/useWindowScroll';
+import React from "react";
+import { useLocation } from "react-router-dom";
+import { useWindowScroll } from "../uses/useWindowScroll";
 const urls = {};
 /**
  * Scroll restoration

package/lib/components/ScrollerGrid.d.ts

@@ -1,9 +1,9 @@
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
-import { Align, GridChildComponentProps, VariableSizeGridProps } from 'react-window';
-import { GridLoader, GridLoaderStates } from './GridLoader';
-import { GridMethodRef } from './GridMethodRef';
-export type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>, 'data'> & {
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { Align, GridChildComponentProps, VariableSizeGridProps } from "react-window";
+import { GridLoader, GridLoaderStates } from "./GridLoader";
+import { GridMethodRef } from "./GridMethodRef";
+export type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>, "data"> & {
     /**
      * Selected items
      */
@@ -21,12 +21,7 @@ export type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>,
 /**
  * Scroller vertical grid props
  */
-export interface ScrollerGridProps<T extends object> extends GridLoader<T>, Omit<VariableSizeGridProps<T>, 'children' | 'rowCount' | 'rowHeight'> {
-    /**
-     * Default order by asc
-     * @default true
-     */
-    defaultOrderByAsc?: boolean;
+export interface ScrollerGridProps<T extends object> extends GridLoader<T>, Omit<VariableSizeGridProps<T>, "children" | "rowCount" | "rowHeight"> {
     /**
      * Footer renderer
      */

package/lib/components/ScrollerGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { VariableSizeGrid } from 'react-window';
+import React from "react";
+import { VariableSizeGrid } from "react-window";
 /**
  * Scroller vertical grid
  * @param props Props
@@ -8,7 +8,7 @@ import { VariableSizeGrid } from 'react-window';
  */
 export const ScrollerGrid = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, footerRenderer, headerRenderer, itemRenderer, idField = 'id', loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, onInitLoad, onUpdateRows, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, footerRenderer, headerRenderer, itemRenderer, idField = "id", loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, onInitLoad, onUpdateRows, ...rest } = props;
     // Rows
     const [rows, updateRows] = React.useState([]);
     const setRows = (rows, reset = false) => {
@@ -22,7 +22,6 @@ export const ScrollerGrid = (props) => {
         queryPaging: {
             currentPage: 0,
             orderBy: defaultOrderBy,
-            orderByAsc: defaultOrderByAsc,
             batchSize: 10
         },
         autoLoad,
@@ -54,8 +53,7 @@ export const ScrollerGrid = (props) => {
             const newItems = result.length;
             refs.current.lastLoadedItems = newItems;
             refs.current.isNextPageLoading = false;
-            refs.current.hasNextPage =
-                newItems >= refs.current.queryPaging.batchSize;
+            refs.current.hasNextPage = newItems >= refs.current.queryPaging.batchSize;
             if (pageAdd === 0) {
                 // New items
                 const newRows = refs.current.lastLoadedItems
@@ -73,7 +71,10 @@ export const ScrollerGrid = (props) => {
             }
             else {
                 // Set current page
-                refs.current.queryPaging.currentPage += pageAdd;
+                if (refs.current.queryPaging.currentPage == null)
+                    refs.current.queryPaging.currentPage = pageAdd;
+                else
+                    refs.current.queryPaging.currentPage += pageAdd;
                 // Update rows, avoid duplicate items
                 const newRows = [...rows];
                 for (const item of result) {
@@ -89,9 +90,7 @@ export const ScrollerGrid = (props) => {
     // Item renderer
     const itemRendererLocal = (itemProps, state) => {
         // Custom render
-        const data = itemProps.rowIndex < rows.length
-            ? rows[itemProps.rowIndex]
-            : undefined;
+        const data = itemProps.rowIndex < rows.length ? rows[itemProps.rowIndex] : undefined;
         return itemRenderer({
             ...itemProps,
             data,
@@ -108,8 +107,7 @@ export const ScrollerGrid = (props) => {
     const onItemsRenderedLocal = (props) => {
         // No items, means no necessary to load more data during reset
         const itemCount = rows.length;
-        if (itemCount > 0 &&
-            props.visibleRowStopIndex + threshold > itemCount) {
+        if (itemCount > 0 && props.visibleRowStopIndex + threshold > itemCount) {
             // Auto load next page
             loadDataLocal();
         }
@@ -240,10 +238,8 @@ export const ScrollerGrid = (props) => {
     // Layout
     return (_jsxs(React.Fragment, { children: [headerRenderer && headerRenderer(refs.current), _jsx(VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex, data }) => {
                     if (data == null)
-                        return [rowIndex, columnIndex].join(',');
+                        return [rowIndex, columnIndex].join(",");
                     // ${data[idField]}-${rowIndex} always unique but no cache for the same item
-                    return [`${data[idField]}`, columnIndex].join(',');
-                }, onItemsRendered: onItemsRenderedLocal, ref: ref, rowCount: rowCount, rowHeight: typeof rowHeight === 'function'
-                    ? rowHeight
-                    : () => rowHeight, style: { overflowX: 'hidden' }, width: width, ...rest, children: (props) => itemRendererLocal(props, refs.current) }), footerRenderer && footerRenderer(rows, refs.current)] }));
+                    return [`${data[idField]}`, columnIndex].join(",");
+                }, onItemsRendered: onItemsRenderedLocal, ref: ref, rowCount: rowCount, rowHeight: typeof rowHeight === "function" ? rowHeight : () => rowHeight, style: { overflowX: "hidden" }, width: width, ...rest, children: (props) => itemRendererLocal(props, refs.current) }), footerRenderer && footerRenderer(rows, refs.current)] }));
 };