@etsoo/react 1.5.56 → 1.5.59

package/.github/workflows/main.yml

@@ -28,7 +28,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v1
         with:
-          node-version: '14.18'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       # Named after Continuous Integration, installs dependencies directly from package-lock.json

package/lib/app/ReactApp.d.ts

@@ -1,4 +1,4 @@
-import { CoreApp, IActionResult, IAppSettings, ICoreApp, IUser, IUserData } from '@etsoo/appscript';
+import { CoreApp, IActionResult, IAppSettings, ICoreApp, IUser } from '@etsoo/appscript';
 import { NotificationRenderProps, NotificationReturn } from '@etsoo/notificationbase';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
@@ -28,7 +28,7 @@ export declare function ReactAppStateDetector(props: IStateProps): React.Functio
 /**
  * Core application interface
  */
-export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<S, React.ReactNode, NotificationReactCallProps> {
+export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps> {
     /**
      * User state
      */
@@ -64,7 +64,7 @@ export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IP
 /**
  * React application
  */
-export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D, P> {
+export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D, P> {
     private static _notifierProvider;
     /**
      * Get notifier provider
@@ -181,7 +181,7 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLogin(user: IUserData, refreshToken: string, keep?: boolean, dispatch?: boolean): void;
+    userLogin(user: D, refreshToken: string, keep?: boolean, dispatch?: boolean): void;
     /**
      * User logout
      * @param clearToken Clear refresh token or not

package/lib/mu/DnDList.js

@@ -1,6 +1,6 @@
+import { DndContext } from '@dnd-kit/core';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 /**
  * Drag and drop list
  * https://github.com/atlassian/react-beautiful-dnd
@@ -21,16 +21,12 @@ export function DnDList(props) {
     };
     // Drag end handler
     const onDragEndLocal = (result) => {
-        // Dropped outside the list
-        if (!result.destination) {
-            return;
-        }
         // Clone
         const newItems = [...items];
         // Removed item
-        const [removed] = newItems.splice(result.source.index, 1);
+        // const [removed] = newItems.splice(result.source.index, 1);
         // Insert to the destination index
-        newItems.splice(result.destination.index, 0, removed);
+        // newItems.splice(result.destination.index, 0, removed);
         // Update the state
         changeItems(newItems);
         // Drag end handler
@@ -108,21 +104,7 @@ export function DnDList(props) {
             if (id == null)
                 return;
             return (React.createElement("div", { key: id, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
-        }))) : (React.createElement(DragDropContext, { onDragEnd: onDragEndLocal },
-            React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
-                items.map((item, index) => {
-                    // Id
-                    const id = DataTypes.convert(item[labelField], 'string');
-                    if (id == null)
-                        return;
-                    return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-                            ...getItemStyle(snapshot.isDragging, index),
-                            ...provided
-                                .draggableProps
-                                .style
-                        } }, children(item, index, deleteItem, editItem)))));
-                }),
-                provided.placeholder)))))),
+        }))) : (React.createElement(DndContext, { onDragEnd: onDragEndLocal }))),
         sideRenderer &&
             sideRenderer(false, addItem, addItems, reloadItems)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.56",
+    "version": "1.5.59",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -46,19 +46,19 @@
     },
     "homepage": "https://github.com/ETSOO/AppReact#readme",
     "dependencies": {
+        "@dnd-kit/core": "^6.0.5",
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.69",
-        "@etsoo/notificationbase": "^1.1.4",
-        "@etsoo/shared": "^1.1.40",
+        "@etsoo/appscript": "^1.2.72",
+        "@etsoo/notificationbase": "^1.1.5",
+        "@etsoo/shared": "^1.1.41",
         "@mui/icons-material": "^5.8.4",
         "@mui/material": "^5.9.3",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.15",
         "@types/react-avatar-editor": "^12.0.0",
-        "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-dom": "^18.0.6",
         "@types/react-input-mask": "^3.0.1",
         "@types/react-window": "^1.8.5",
@@ -66,7 +66,6 @@
         "pulltorefreshjs": "^0.1.22",
         "react": "^18.2.0",
         "react-avatar-editor": "^13.0.0",
-        "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-imask": "^6.4.2",

package/src/app/ReactApp.ts

@@ -6,8 +6,7 @@ import {
     IActionResult,
     IAppSettings,
     ICoreApp,
-    IUser,
-    IUserData
+    IUser
 } from '@etsoo/appscript';
 import {
     NotificationMessageType,
@@ -94,7 +93,7 @@ export interface IReactApp<
     S extends IAppSettings,
     D extends IUser,
     P extends IPageData
-> extends ICoreApp<S, React.ReactNode, NotificationReactCallProps> {
+> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps> {
     /**
      * User state
      */
@@ -142,7 +141,7 @@ export class ReactApp<
         D extends IUser,
         P extends IPageData
     >
-    extends CoreApp<S, React.ReactNode, NotificationReactCallProps>
+    extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps>
     implements IReactApp<S, D, P>
 {
     private static _notifierProvider: React.FunctionComponent<NotificationRenderProps>;
@@ -453,7 +452,7 @@ export class ReactApp<
      * @param dispatch User state dispatch
      */
     override userLogin(
-        user: IUserData,
+        user: D,
         refreshToken: string,
         keep?: boolean,
         dispatch?: boolean

package/src/mu/DnDList.tsx

@@ -1,11 +1,6 @@
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
 import { DataTypes } from '@etsoo/shared';
 import React, { CSSProperties } from 'react';
-import {
-    DragDropContext,
-    Draggable,
-    Droppable,
-    DropResult
-} from 'react-beautiful-dnd';
 
 /**
  * DnD list props
@@ -121,20 +116,15 @@ export function DnDList<
     };
 
     // Drag end handler
-    const onDragEndLocal = (result: DropResult) => {
-        // Dropped outside the list
-        if (!result.destination) {
-            return;
-        }
-
+    const onDragEndLocal = (result: DragEndEvent) => {
         // Clone
         const newItems = [...items];
 
         // Removed item
-        const [removed] = newItems.splice(result.source.index, 1);
+        // const [removed] = newItems.splice(result.source.index, 1);
 
         // Insert to the destination index
-        newItems.splice(result.destination.index, 0, removed);
+        // newItems.splice(result.destination.index, 0, removed);
 
         // Update the state
         changeItems(newItems);
@@ -259,61 +249,7 @@ export function DnDList<
                         })}
                     </div>
                 ) : (
-                    <DragDropContext onDragEnd={onDragEndLocal}>
-                        <Droppable droppableId={name}>
-                            {(provided, snapshot) => (
-                                <div
-                                    {...provided.droppableProps}
-                                    ref={provided.innerRef}
-                                    style={getListStyle(
-                                        snapshot.isDraggingOver
-                                    )}
-                                >
-                                    {items.map((item, index) => {
-                                        // Id
-                                        const id = DataTypes.convert(
-                                            item[labelField],
-                                            'string'
-                                        );
-                                        if (id == null) return;
-
-                                        return (
-                                            <Draggable
-                                                key={id}
-                                                draggableId={id}
-                                                index={index}
-                                            >
-                                                {(provided, snapshot) => (
-                                                    <div
-                                                        ref={provided.innerRef}
-                                                        {...provided.draggableProps}
-                                                        {...provided.dragHandleProps}
-                                                        style={{
-                                                            ...getItemStyle(
-                                                                snapshot.isDragging,
-                                                                index
-                                                            ),
-                                                            ...provided
-                                                                .draggableProps
-                                                                .style
-                                                        }}
-                                                    >
-                                                        {children(
-                                                            item,
-                                                            index,
-                                                            deleteItem,
-                                                            editItem
-                                                        )}
-                                                    </div>
-                                                )}
-                                            </Draggable>
-                                        );
-                                    })}
-                                    {provided.placeholder}
-                                </div>
-                            )}
-                        </Droppable>
-                    </DragDropContext>
+                    <DndContext onDragEnd={onDragEndLocal}></DndContext>
                 )}
             </Component>
             {sideRenderer &&