@etsoo/react 1.3.92 → 1.3.96

package/lib/app/ServiceApp.d.ts

@@ -11,7 +11,7 @@ import { RefreshTokenRQ } from './RefreshTokenRQ';
  * Use the acess token to the service api, get a service access token
  * Use the new acess token and refresh token to login
  */
-export declare class ServiceApp<P extends IServicePageData = IServicePageData, U extends IServiceUser = IServiceUser, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U, P> {
+export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends IServicePageData = IServicePageData, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U, P> {
     /**
      * Service API
      */

package/lib/app/ServiceApp.js

@@ -48,8 +48,6 @@ export class ServiceApp extends ReactApp {
             coreUrl +
                 '?serviceId=' +
                 this.settings.serviceId +
-                '&serviceDeviceId=' +
-                encodeURIComponent(this.deviceId) +
                 '&' +
                 DomUtils.CultureField +
                 '=' +

package/lib/index.d.ts

@@ -38,6 +38,7 @@ export * from './mu/CustomFabProps';
 export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
+export * from './mu/DnDList';
 export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';

package/lib/index.js

@@ -41,6 +41,7 @@ export * from './mu/CustomFabProps';
 export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
+export * from './mu/DnDList';
 export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';

package/lib/mu/DnDList.d.ts

@@ -0,0 +1,49 @@
+import React, { CSSProperties } from 'react';
+/**
+ * DnD list props
+ */
+export interface DnDListProps<D extends {}, E extends React.ElementType> {
+    /**
+     * Item renderer
+     */
+    children: (item: D, index: number, onDelete: (index: number) => void) => React.ReactNode;
+    /**
+     * List container component
+     * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
+     */
+    Component?: E;
+    /**
+     * List container props
+     */
+    componentProps?: React.ComponentProps<E>;
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (isDragging: boolean) => CSSProperties;
+    /**
+     * Get list style callback
+     */
+    getListStyle?: (isDraggingOver: boolean) => CSSProperties;
+    /**
+     * Label field
+     */
+    labelField: keyof D;
+    /**
+     * Load data
+     */
+    loadData: (name: string) => PromiseLike<D[]>;
+    /**
+     * Top and bottom sides renderer
+     */
+    sideRenderer?: (top: boolean, onAdd: (item: D) => boolean) => React.ReactNode;
+    /**
+     * Name for hidden form input
+     */
+    name: string;
+}
+/**
+ * Drag and drop list
+ * @param props Props
+ * @returns Component
+ */
+export declare function DnDList<D extends {}, E extends React.ElementType = React.ElementType>(props: DnDListProps<D, E>): JSX.Element;

package/lib/mu/DnDList.js

@@ -0,0 +1,74 @@
+import { DataTypes } from '@etsoo/shared';
+import React from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+/**
+ * Drag and drop list
+ * @param props Props
+ * @returns Component
+ */
+export function DnDList(props) {
+    // Destruct
+    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, sideRenderer } = props;
+    // State
+    const [items, setItems] = React.useState([]);
+    // Drag end handler
+    const onDragEnd = (result) => {
+        console.log(result);
+        // Dropped outside the list
+        if (!result.destination) {
+            return;
+        }
+        // Clone
+        const newItems = [...items];
+        // Removed item
+        const [removed] = newItems.splice(result.source.index, 1);
+        // Insert to the destination index
+        newItems.splice(result.destination.index, 0, removed);
+        // Update the state
+        setItems(newItems);
+    };
+    // Add handler
+    const onAdd = (newItem) => {
+        // Existence check
+        if (items.some((item) => item[labelField] == newItem[labelField])) {
+            return false;
+        }
+        // Clone
+        const newItems = [newItem, ...items];
+        // Update the state
+        setItems(newItems);
+        return true;
+    };
+    // Delete handler
+    const onDelete = (index) => {
+        // Clone
+        const newItems = [...items];
+        // Remove the item
+        newItems.splice(index, 1);
+        // Update the state
+        setItems(newItems);
+    };
+    React.useEffect(() => {
+        loadData(name).then((items) => setItems(items));
+    }, [name]);
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        sideRenderer && sideRenderer(true, onAdd),
+        React.createElement(Component, { ...componentProps },
+            React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+                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),
+                                ...provided
+                                    .draggableProps
+                                    .style
+                            } }, children(item, index, onDelete)))));
+                    }),
+                    provided.placeholder))))),
+        sideRenderer && sideRenderer(false, onAdd)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.3.92",
+    "version": "1.3.96",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,17 +50,18 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.9",
+        "@etsoo/appscript": "^1.2.11",
         "@etsoo/notificationbase": "^1.0.95",
-        "@etsoo/shared": "^1.0.94",
+        "@etsoo/shared": "^1.0.95",
         "@mui/icons-material": "^5.2.5",
-        "@mui/material": "^5.2.5",
+        "@mui/material": "^5.2.6",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/reach__router": "^1.3.10",
         "@types/react": "^17.0.38",
         "@types/react-avatar-editor": "^10.3.6",
+        "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-dom": "^17.0.11",
         "@types/react-input-mask": "^3.0.1",
         "@types/react-window": "^1.8.5",
@@ -68,6 +69,7 @@
         "pulltorefreshjs": "^0.1.22",
         "react": "^17.0.2",
         "react-avatar-editor": "^12.0.0",
+        "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.4",
         "react-imask": "^6.2.2",
@@ -81,8 +83,8 @@
         "@babel/runtime-corejs3": "^7.16.5",
         "@types/jest": "^27.0.3",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.8.0",
-        "@typescript-eslint/parser": "^5.8.0",
+        "@typescript-eslint/eslint-plugin": "^5.8.1",
+        "@typescript-eslint/parser": "^5.8.1",
         "eslint": "^8.5.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.3",

package/src/app/ServiceApp.ts

@@ -21,8 +21,8 @@ import { RefreshTokenRQ } from './RefreshTokenRQ';
  * Use the new acess token and refresh token to login
  */
 export class ServiceApp<
-    P extends IServicePageData = IServicePageData,
     U extends IServiceUser = IServiceUser,
+    P extends IServicePageData = IServicePageData,
     S extends IServiceAppSettings = IServiceAppSettings
 > extends ReactApp<S, U, P> {
     /**
@@ -76,8 +76,6 @@ export class ServiceApp<
             coreUrl +
             '?serviceId=' +
             this.settings.serviceId +
-            '&serviceDeviceId=' +
-            encodeURIComponent(this.deviceId) +
             '&' +
             DomUtils.CultureField +
             '=' +

package/src/index.ts

@@ -45,6 +45,7 @@ export * from './mu/CustomFabProps';
 export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
+export * from './mu/DnDList';
 export * from './mu/DraggablePaperComponent';
 export * from './mu/EmailInput';
 export * from './mu/FabBox';

package/src/mu/DnDList.tsx

@@ -0,0 +1,206 @@
+import { DataTypes } from '@etsoo/shared';
+import React, { CSSProperties } from 'react';
+import {
+    DragDropContext,
+    Draggable,
+    Droppable,
+    DropResult
+} from 'react-beautiful-dnd';
+
+/**
+ * DnD list props
+ */
+export interface DnDListProps<D extends {}, E extends React.ElementType> {
+    /**
+     * Item renderer
+     */
+    children: (
+        item: D,
+        index: number,
+        onDelete: (index: number) => void
+    ) => React.ReactNode;
+
+    /**
+     * List container component
+     * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
+     */
+    Component?: E;
+
+    /**
+     * List container props
+     */
+    componentProps?: React.ComponentProps<E>;
+
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (isDragging: boolean) => CSSProperties;
+
+    /**
+     * Get list style callback
+     */
+    getListStyle?: (isDraggingOver: boolean) => CSSProperties;
+
+    /**
+     * Label field
+     */
+    labelField: keyof D;
+
+    /**
+     * Load data
+     */
+    loadData: (name: string) => PromiseLike<D[]>;
+
+    /**
+     * Top and bottom sides renderer
+     */
+    sideRenderer?: (
+        top: boolean,
+        onAdd: (item: D) => boolean
+    ) => React.ReactNode;
+
+    /**
+     * Name for hidden form input
+     */
+    name: string;
+}
+
+/**
+ * Drag and drop list
+ * @param props Props
+ * @returns Component
+ */
+export function DnDList<
+    D extends {},
+    E extends React.ElementType = React.ElementType
+>(props: DnDListProps<D, E>) {
+    // Destruct
+    const {
+        children,
+        Component = 'div',
+        componentProps,
+        getItemStyle = (_isDragging) => ({}),
+        getListStyle = () => undefined,
+        labelField,
+        loadData,
+        name,
+        sideRenderer
+    } = props;
+
+    // State
+    const [items, setItems] = React.useState<D[]>([]);
+
+    // Drag end handler
+    const onDragEnd = (result: DropResult) => {
+        console.log(result);
+        // Dropped outside the list
+        if (!result.destination) {
+            return;
+        }
+
+        // Clone
+        const newItems = [...items];
+
+        // Removed item
+        const [removed] = newItems.splice(result.source.index, 1);
+
+        // Insert to the destination index
+        newItems.splice(result.destination.index, 0, removed);
+
+        // Update the state
+        setItems(newItems);
+    };
+
+    // Add handler
+    const onAdd = (newItem: D) => {
+        // Existence check
+        if (items.some((item) => item[labelField] == newItem[labelField])) {
+            return false;
+        }
+
+        // Clone
+        const newItems = [newItem, ...items];
+
+        // Update the state
+        setItems(newItems);
+
+        return true;
+    };
+
+    // Delete handler
+    const onDelete = (index: number) => {
+        // Clone
+        const newItems = [...items];
+
+        // Remove the item
+        newItems.splice(index, 1);
+
+        // Update the state
+        setItems(newItems);
+    };
+
+    React.useEffect(() => {
+        loadData(name).then((items) => setItems(items));
+    }, [name]);
+
+    // Layout
+    return (
+        <React.Fragment>
+            {sideRenderer && sideRenderer(true, onAdd)}
+            <Component {...componentProps}>
+                <DragDropContext onDragEnd={onDragEnd}>
+                    <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
+                                                        ),
+                                                        ...provided
+                                                            .draggableProps
+                                                            .style
+                                                    }}
+                                                >
+                                                    {children(
+                                                        item,
+                                                        index,
+                                                        onDelete
+                                                    )}
+                                                </div>
+                                            )}
+                                        </Draggable>
+                                    );
+                                })}
+                                {provided.placeholder}
+                            </div>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+            </Component>
+            {sideRenderer && sideRenderer(false, onAdd)}
+        </React.Fragment>
+    );
+}