@etsoo/react 1.4.9 → 1.4.13

package/lib/app/ReactApp.js

@@ -96,7 +96,7 @@ export class ReactApp extends CoreApp {
             if (startPos > 0) {
                 const main = message.substring(0, startPos).trim();
                 const tip = message.substring(startPos);
-                const titleNode = React.createElement(React.Fragment, null, main, React.createElement('div', { style: { fontSize: '9px' } }, tip));
+                const titleNode = React.createElement(React.Fragment, null, main, React.createElement('br'), React.createElement('span', { style: { fontSize: '9px' } }, tip));
                 this.notifier.alert(titleNode, callback);
                 return;
             }

package/lib/index.d.ts

@@ -48,6 +48,7 @@ export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
+export * from './mu/MobileListItemRenderer';
 export * from './mu/MoreFab';
 export * from './mu/MUGlobal';
 export * from './mu/NotifierMU';

package/lib/index.js

@@ -51,6 +51,7 @@ export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
+export * from './mu/MobileListItemRenderer';
 export * from './mu/MoreFab';
 export * from './mu/MUGlobal';
 export * from './mu/NotifierMU';

package/lib/mu/DnDList.d.ts

@@ -36,10 +36,14 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      * Data change handler
      */
     onChange?: (items: D[]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
     /**
      * Top and bottom sides renderer
      */
-    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number) => React.ReactNode;
+    sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number, reloadItems: () => void) => React.ReactNode;
     /**
      * Name for hidden form input
      */

package/lib/mu/DnDList.js

@@ -9,7 +9,7 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
  */
 export function DnDList(props) {
     // Destruct
-    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, sideRenderer } = props;
+    const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
     // State
     const [items, setItems] = React.useState([]);
     const changeItems = (items) => {
@@ -20,7 +20,7 @@ export function DnDList(props) {
         setItems(items);
     };
     // Drag end handler
-    const onDragEnd = (result) => {
+    const onDragEndLocal = (result) => {
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -33,6 +33,9 @@ export function DnDList(props) {
         newItems.splice(result.destination.index, 0, removed);
         // Update the state
         changeItems(newItems);
+        // Drag end handler
+        if (onDragEnd)
+            onDragEnd(newItems);
     };
     // Add item
     const addItem = (newItem) => {
@@ -49,7 +52,9 @@ export function DnDList(props) {
     // Edit item
     const editItem = (newItem, index) => {
         // Existence check
-        if (items.some((item) => item[labelField] === newItem[labelField])) {
+        const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
+        if (newIndex >= 0 && newIndex != index) {
+            // Label field is the same with a different item
             return false;
         }
         // Clone
@@ -85,15 +90,20 @@ export function DnDList(props) {
         // Update the state
         changeItems(newItems);
     };
-    React.useEffect(() => {
+    // Reload items
+    const reloadItems = () => {
         // Load data
         loadData(name).then((items) => setItems(items));
+    };
+    React.useEffect(() => {
+        // Load data
+        reloadItems();
     }, [name]);
     // Layout
     return (React.createElement(React.Fragment, null,
-        sideRenderer && sideRenderer(true, addItem, addItems),
+        sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
         React.createElement(Component, { ...componentProps },
-            React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+            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
@@ -108,5 +118,6 @@ export function DnDList(props) {
                             } }, children(item, index, deleteItem, editItem)))));
                     }),
                     provided.placeholder))))),
-        sideRenderer && sideRenderer(false, addItem, addItems)));
+        sideRenderer &&
+            sideRenderer(false, addItem, addItems, reloadItems)));
 }

package/lib/mu/MobileListItemRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ListItemReact } from '../components/ListItemReact';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+export declare function MobileListItemRenderer<T>({ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>, margin: {}, renderer: (data: T) => [
+    string,
+    string | undefined,
+    React.ReactNode | (ListItemReact | boolean)[],
+    React.ReactNode
+]): JSX.Element;

package/lib/mu/MobileListItemRenderer.js

@@ -0,0 +1,63 @@
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import React from 'react';
+import { MoreFab } from './MoreFab';
+import { MUGlobal } from './MUGlobal';
+function getActions(input) {
+    // Actions
+    const actions = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean')
+            return;
+        actions.push(action);
+    });
+    return actions;
+}
+export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
+    // Loading
+    if (data == null)
+        return React.createElement(LinearProgress, null);
+    // Elements
+    const [title, subheader, actions, children] = renderer(data);
+    // Half
+    const halfMargin = MUGlobal.half(margin);
+    return (React.createElement(Card, { sx: {
+            height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: halfMargin,
+            marginBottom: halfMargin
+        } },
+        React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, actions: getActions(actions), PaperProps: {
+                    elevation: 0,
+                    sx: {
+                        overflow: 'visible',
+                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                        mt: -0.4,
+                        '& .MuiAvatar-root': {
+                            width: 32,
+                            height: 32,
+                            ml: -0.5,
+                            mr: 1
+                        },
+                        '&:before': {
+                            content: '""',
+                            display: 'block',
+                            position: 'absolute',
+                            top: 0,
+                            right: 14,
+                            width: 10,
+                            height: 10,
+                            bgcolor: 'background.paper',
+                            transform: 'translateY(-50%) rotate(45deg)',
+                            zIndex: 0
+                        }
+                    }
+                } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
+        React.createElement(CardContent, { sx: { paddingTop: 0 } }, children)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.9",
+    "version": "1.4.13",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.18",
+        "@etsoo/appscript": "^1.2.20",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.0",
         "@mui/icons-material": "^5.2.5",
@@ -89,7 +89,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react": "^7.28.0",
-        "jest": "^27.4.5",
+        "jest": "^27.4.7",
         "react-test-renderer": "^17.0.2",
         "ts-jest": "^27.1.2",
         "typescript": "^4.5.4"

package/src/app/ReactApp.ts

@@ -223,8 +223,9 @@ export class ReactApp<
                     React.Fragment,
                     null,
                     main,
+                    React.createElement('br'),
                     React.createElement(
-                        'div',
+                        'span',
                         { style: { fontSize: '9px' } },
                         tip
                     )

package/src/index.ts

@@ -55,6 +55,7 @@ export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
+export * from './mu/MobileListItemRenderer';
 export * from './mu/MoreFab';
 export * from './mu/MUGlobal';
 export * from './mu/NotifierMU';

package/src/mu/DnDList.tsx

@@ -57,13 +57,19 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
      */
     onChange?: (items: D[]) => void;
 
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
+
     /**
      * Top and bottom sides renderer
      */
     sideRenderer?: (
         top: boolean,
         addItem: (item: D) => boolean,
-        addItems: (items: D[]) => number
+        addItems: (items: D[]) => number,
+        reloadItems: () => void
     ) => React.ReactNode;
 
     /**
@@ -93,6 +99,7 @@ export function DnDList<
         loadData,
         name,
         onChange,
+        onDragEnd,
         sideRenderer
     } = props;
 
@@ -108,7 +115,7 @@ export function DnDList<
     };
 
     // Drag end handler
-    const onDragEnd = (result: DropResult) => {
+    const onDragEndLocal = (result: DropResult) => {
         // Dropped outside the list
         if (!result.destination) {
             return;
@@ -125,6 +132,9 @@ export function DnDList<
 
         // Update the state
         changeItems(newItems);
+
+        // Drag end handler
+        if (onDragEnd) onDragEnd(newItems);
     };
 
     // Add item
@@ -146,7 +156,11 @@ export function DnDList<
     // Edit item
     const editItem = (newItem: D, index: number) => {
         // Existence check
-        if (items.some((item) => item[labelField] === newItem[labelField])) {
+        const newIndex = items.findIndex(
+            (item) => item[labelField] === newItem[labelField]
+        );
+        if (newIndex >= 0 && newIndex != index) {
+            // Label field is the same with a different item
             return false;
         }
 
@@ -197,17 +211,23 @@ export function DnDList<
         changeItems(newItems);
     };
 
-    React.useEffect(() => {
+    // Reload items
+    const reloadItems = () => {
         // Load data
         loadData(name).then((items) => setItems(items));
+    };
+
+    React.useEffect(() => {
+        // Load data
+        reloadItems();
     }, [name]);
 
     // Layout
     return (
         <React.Fragment>
-            {sideRenderer && sideRenderer(true, addItem, addItems)}
+            {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
             <Component {...componentProps}>
-                <DragDropContext onDragEnd={onDragEnd}>
+                <DragDropContext onDragEnd={onDragEndLocal}>
                     <Droppable droppableId={name}>
                         {(provided, snapshot) => (
                             <div
@@ -261,7 +281,8 @@ export function DnDList<
                     </Droppable>
                 </DragDropContext>
             </Component>
-            {sideRenderer && sideRenderer(false, addItem, addItems)}
+            {sideRenderer &&
+                sideRenderer(false, addItem, addItems, reloadItems)}
         </React.Fragment>
     );
 }

package/src/mu/MobileListItemRenderer.tsx

@@ -0,0 +1,106 @@
+import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
+import React from 'react';
+import { ListItemReact } from '../components/ListItemReact';
+import { MoreFab } from './MoreFab';
+import { MUGlobal } from './MUGlobal';
+import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+
+function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
+    // Actions
+    const actions: ListItemReact[] = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean') return;
+        actions.push(action);
+    });
+    return actions;
+}
+
+export function MobileListItemRenderer<T>(
+    { data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
+    margin: {},
+    renderer: (
+        data: T
+    ) => [
+        string,
+        string | undefined,
+        React.ReactNode | (ListItemReact | boolean)[],
+        React.ReactNode
+    ]
+) {
+    // Loading
+    if (data == null) return <LinearProgress />;
+
+    // Elements
+    const [title, subheader, actions, children] = renderer(data);
+
+    // Half
+    const halfMargin = MUGlobal.half(margin);
+
+    return (
+        <Card
+            sx={{
+                height: (theme) =>
+                    MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
+                marginLeft: margin,
+                marginRight: margin,
+                marginTop: halfMargin,
+                marginBottom: halfMargin
+            }}
+        >
+            <CardHeader
+                sx={{ paddingBottom: 0.5 }}
+                action={
+                    Array.isArray(actions) ? (
+                        <MoreFab
+                            iconButton
+                            size="small"
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'right'
+                            }}
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right'
+                            }}
+                            actions={getActions(actions)}
+                            PaperProps={{
+                                elevation: 0,
+                                sx: {
+                                    overflow: 'visible',
+                                    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                                    mt: -0.4,
+                                    '& .MuiAvatar-root': {
+                                        width: 32,
+                                        height: 32,
+                                        ml: -0.5,
+                                        mr: 1
+                                    },
+                                    '&:before': {
+                                        content: '""',
+                                        display: 'block',
+                                        position: 'absolute',
+                                        top: 0,
+                                        right: 14,
+                                        width: 10,
+                                        height: 10,
+                                        bgcolor: 'background.paper',
+                                        transform:
+                                            'translateY(-50%) rotate(45deg)',
+                                        zIndex: 0
+                                    }
+                                }
+                            }}
+                        />
+                    ) : (
+                        actions
+                    )
+                }
+                title={title}
+                titleTypographyProps={{ variant: 'body2' }}
+                subheader={subheader}
+                subheaderTypographyProps={{ variant: 'caption' }}
+            />
+            <CardContent sx={{ paddingTop: 0 }}>{children}</CardContent>
+        </Card>
+    );
+}