@etsoo/react 1.4.12 → 1.4.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app/ReactApp.js +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/mu/MobileListItemRenderer.d.ts +9 -0
- package/lib/mu/MobileListItemRenderer.js +63 -0
- package/package.json +1 -1
- package/src/app/ReactApp.ts +2 -1
- package/src/index.ts +1 -0
- package/src/mu/MobileListItemRenderer.tsx +106 -0
package/lib/app/ReactApp.js
CHANGED
|
@@ -96,7 +96,7 @@ export class ReactApp extends CoreApp {
|
|
|
96
96
|
if (startPos > 0) {
|
|
97
97
|
const main = message.substring(0, startPos).trim();
|
|
98
98
|
const tip = message.substring(startPos);
|
|
99
|
-
const titleNode = React.createElement(React.Fragment, null, main, React.createElement('
|
|
99
|
+
const titleNode = React.createElement(React.Fragment, null, main, React.createElement('br'), React.createElement('span', { style: { fontSize: '9px' } }, tip));
|
|
100
100
|
this.notifier.alert(titleNode, callback);
|
|
101
101
|
return;
|
|
102
102
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -48,6 +48,7 @@ export * from './mu/ItemList';
|
|
|
48
48
|
export * from './mu/ListItemRightIcon';
|
|
49
49
|
export * from './mu/LoadingButton';
|
|
50
50
|
export * from './mu/MaskInput';
|
|
51
|
+
export * from './mu/MobileListItemRenderer';
|
|
51
52
|
export * from './mu/MoreFab';
|
|
52
53
|
export * from './mu/MUGlobal';
|
|
53
54
|
export * from './mu/NotifierMU';
|
package/lib/index.js
CHANGED
|
@@ -51,6 +51,7 @@ export * from './mu/ItemList';
|
|
|
51
51
|
export * from './mu/ListItemRightIcon';
|
|
52
52
|
export * from './mu/LoadingButton';
|
|
53
53
|
export * from './mu/MaskInput';
|
|
54
|
+
export * from './mu/MobileListItemRenderer';
|
|
54
55
|
export * from './mu/MoreFab';
|
|
55
56
|
export * from './mu/MUGlobal';
|
|
56
57
|
export * from './mu/NotifierMU';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ListItemReact } from '../components/ListItemReact';
|
|
3
|
+
import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
|
|
4
|
+
export declare function MobileListItemRenderer<T>({ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>, margin: {}, renderer: (data: T) => [
|
|
5
|
+
string,
|
|
6
|
+
string | undefined,
|
|
7
|
+
React.ReactNode | (ListItemReact | boolean)[],
|
|
8
|
+
React.ReactNode
|
|
9
|
+
]): JSX.Element;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { MoreFab } from './MoreFab';
|
|
4
|
+
import { MUGlobal } from './MUGlobal';
|
|
5
|
+
function getActions(input) {
|
|
6
|
+
// Actions
|
|
7
|
+
const actions = [];
|
|
8
|
+
input.forEach((action) => {
|
|
9
|
+
if (typeof action === 'boolean')
|
|
10
|
+
return;
|
|
11
|
+
actions.push(action);
|
|
12
|
+
});
|
|
13
|
+
return actions;
|
|
14
|
+
}
|
|
15
|
+
export function MobileListItemRenderer({ data, itemHeight }, margin, renderer) {
|
|
16
|
+
// Loading
|
|
17
|
+
if (data == null)
|
|
18
|
+
return React.createElement(LinearProgress, null);
|
|
19
|
+
// Elements
|
|
20
|
+
const [title, subheader, actions, children] = renderer(data);
|
|
21
|
+
// Half
|
|
22
|
+
const halfMargin = MUGlobal.half(margin);
|
|
23
|
+
return (React.createElement(Card, { sx: {
|
|
24
|
+
height: (theme) => MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
|
|
25
|
+
marginLeft: margin,
|
|
26
|
+
marginRight: margin,
|
|
27
|
+
marginTop: halfMargin,
|
|
28
|
+
marginBottom: halfMargin
|
|
29
|
+
} },
|
|
30
|
+
React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
|
|
31
|
+
vertical: 'bottom',
|
|
32
|
+
horizontal: 'right'
|
|
33
|
+
}, transformOrigin: {
|
|
34
|
+
vertical: 'top',
|
|
35
|
+
horizontal: 'right'
|
|
36
|
+
}, actions: getActions(actions), PaperProps: {
|
|
37
|
+
elevation: 0,
|
|
38
|
+
sx: {
|
|
39
|
+
overflow: 'visible',
|
|
40
|
+
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
|
|
41
|
+
mt: -0.4,
|
|
42
|
+
'& .MuiAvatar-root': {
|
|
43
|
+
width: 32,
|
|
44
|
+
height: 32,
|
|
45
|
+
ml: -0.5,
|
|
46
|
+
mr: 1
|
|
47
|
+
},
|
|
48
|
+
'&:before': {
|
|
49
|
+
content: '""',
|
|
50
|
+
display: 'block',
|
|
51
|
+
position: 'absolute',
|
|
52
|
+
top: 0,
|
|
53
|
+
right: 14,
|
|
54
|
+
width: 10,
|
|
55
|
+
height: 10,
|
|
56
|
+
bgcolor: 'background.paper',
|
|
57
|
+
transform: 'translateY(-50%) rotate(45deg)',
|
|
58
|
+
zIndex: 0
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
} })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
|
|
62
|
+
React.createElement(CardContent, { sx: { paddingTop: 0 } }, children)));
|
|
63
|
+
}
|
package/package.json
CHANGED
package/src/app/ReactApp.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -55,6 +55,7 @@ export * from './mu/ItemList';
|
|
|
55
55
|
export * from './mu/ListItemRightIcon';
|
|
56
56
|
export * from './mu/LoadingButton';
|
|
57
57
|
export * from './mu/MaskInput';
|
|
58
|
+
export * from './mu/MobileListItemRenderer';
|
|
58
59
|
export * from './mu/MoreFab';
|
|
59
60
|
export * from './mu/MUGlobal';
|
|
60
61
|
export * from './mu/NotifierMU';
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ListItemReact } from '../components/ListItemReact';
|
|
4
|
+
import { MoreFab } from './MoreFab';
|
|
5
|
+
import { MUGlobal } from './MUGlobal';
|
|
6
|
+
import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
|
|
7
|
+
|
|
8
|
+
function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
|
|
9
|
+
// Actions
|
|
10
|
+
const actions: ListItemReact[] = [];
|
|
11
|
+
input.forEach((action) => {
|
|
12
|
+
if (typeof action === 'boolean') return;
|
|
13
|
+
actions.push(action);
|
|
14
|
+
});
|
|
15
|
+
return actions;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export function MobileListItemRenderer<T>(
|
|
19
|
+
{ data, itemHeight }: ScrollerListExInnerItemRendererProps<T>,
|
|
20
|
+
margin: {},
|
|
21
|
+
renderer: (
|
|
22
|
+
data: T
|
|
23
|
+
) => [
|
|
24
|
+
string,
|
|
25
|
+
string | undefined,
|
|
26
|
+
React.ReactNode | (ListItemReact | boolean)[],
|
|
27
|
+
React.ReactNode
|
|
28
|
+
]
|
|
29
|
+
) {
|
|
30
|
+
// Loading
|
|
31
|
+
if (data == null) return <LinearProgress />;
|
|
32
|
+
|
|
33
|
+
// Elements
|
|
34
|
+
const [title, subheader, actions, children] = renderer(data);
|
|
35
|
+
|
|
36
|
+
// Half
|
|
37
|
+
const halfMargin = MUGlobal.half(margin);
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Card
|
|
41
|
+
sx={{
|
|
42
|
+
height: (theme) =>
|
|
43
|
+
MUGlobal.adjustWithTheme(itemHeight, margin, theme.spacing),
|
|
44
|
+
marginLeft: margin,
|
|
45
|
+
marginRight: margin,
|
|
46
|
+
marginTop: halfMargin,
|
|
47
|
+
marginBottom: halfMargin
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
<CardHeader
|
|
51
|
+
sx={{ paddingBottom: 0.5 }}
|
|
52
|
+
action={
|
|
53
|
+
Array.isArray(actions) ? (
|
|
54
|
+
<MoreFab
|
|
55
|
+
iconButton
|
|
56
|
+
size="small"
|
|
57
|
+
anchorOrigin={{
|
|
58
|
+
vertical: 'bottom',
|
|
59
|
+
horizontal: 'right'
|
|
60
|
+
}}
|
|
61
|
+
transformOrigin={{
|
|
62
|
+
vertical: 'top',
|
|
63
|
+
horizontal: 'right'
|
|
64
|
+
}}
|
|
65
|
+
actions={getActions(actions)}
|
|
66
|
+
PaperProps={{
|
|
67
|
+
elevation: 0,
|
|
68
|
+
sx: {
|
|
69
|
+
overflow: 'visible',
|
|
70
|
+
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
|
|
71
|
+
mt: -0.4,
|
|
72
|
+
'& .MuiAvatar-root': {
|
|
73
|
+
width: 32,
|
|
74
|
+
height: 32,
|
|
75
|
+
ml: -0.5,
|
|
76
|
+
mr: 1
|
|
77
|
+
},
|
|
78
|
+
'&:before': {
|
|
79
|
+
content: '""',
|
|
80
|
+
display: 'block',
|
|
81
|
+
position: 'absolute',
|
|
82
|
+
top: 0,
|
|
83
|
+
right: 14,
|
|
84
|
+
width: 10,
|
|
85
|
+
height: 10,
|
|
86
|
+
bgcolor: 'background.paper',
|
|
87
|
+
transform:
|
|
88
|
+
'translateY(-50%) rotate(45deg)',
|
|
89
|
+
zIndex: 0
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
) : (
|
|
95
|
+
actions
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
title={title}
|
|
99
|
+
titleTypographyProps={{ variant: 'body2' }}
|
|
100
|
+
subheader={subheader}
|
|
101
|
+
subheaderTypographyProps={{ variant: 'caption' }}
|
|
102
|
+
/>
|
|
103
|
+
<CardContent sx={{ paddingTop: 0 }}>{children}</CardContent>
|
|
104
|
+
</Card>
|
|
105
|
+
);
|
|
106
|
+
}
|