@etsoo/react 1.5.20 → 1.5.24

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.
Files changed (6) hide show
  1. package/lib/mu/MobileListItemRenderer.js +1 -36
  2. package/lib/mu/MoreFab.d.ts +5 -1
  3. package/lib/mu/MoreFab.js +43 -4
  4. package/package.json +8 -8
  5. package/src/mu/MobileListItemRenderer.tsx +1 -38
  6. package/src/mu/MoreFab.tsx +50 -5
package/lib/mu/MobileListItemRenderer.js CHANGED
@@ -1,16 +1,6 @@
1
1
  import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
2
2
  import React from 'react';
3
3
  import { MoreFab } from './MoreFab';
4
- function getActions(input) {
5
- // Actions
6
- const actions = [];
7
- input.forEach((action) => {
8
- if (typeof action === 'boolean')
9
- return;
10
- actions.push(action);
11
- });
12
- return actions;
13
- }
14
4
  /**
15
5
  * Default mobile list item renderer
16
6
  * @param param0 List renderer props
@@ -34,32 +24,7 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
34
24
  }, transformOrigin: {
35
25
  vertical: 'top',
36
26
  horizontal: 'right'
37
- }, actions: getActions(actions), PaperProps: {
38
- elevation: 0,
39
- sx: {
40
- overflow: 'visible',
41
- filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
42
- mt: -0.4,
43
- '& .MuiAvatar-root': {
44
- width: 32,
45
- height: 32,
46
- ml: -0.5,
47
- mr: 1
48
- },
49
- '&:before': {
50
- content: '""',
51
- display: 'block',
52
- position: 'absolute',
53
- top: 0,
54
- right: 14,
55
- width: 10,
56
- height: 10,
57
- bgcolor: 'background.paper',
58
- transform: 'translateY(-50%) rotate(45deg)',
59
- zIndex: 0
60
- }
61
- }
62
- } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
27
+ }, actions: actions })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
63
28
  React.createElement(CardContent, { sx: {
64
29
  paddingTop: 0,
65
30
  paddingBottom: cardActions == null
package/lib/mu/MoreFab.d.ts CHANGED
@@ -9,7 +9,11 @@ export interface MoreFabProps extends CustomFabProps {
9
9
  /**
10
10
  * Actions
11
11
  */
12
- actions?: ListItemReact[];
12
+ actions?: (ListItemReact | boolean)[];
13
+ /**
14
+ * Dray arrow
15
+ */
16
+ drawArrow?: boolean;
13
17
  /**
14
18
  * Main icon
15
19
  */
package/lib/mu/MoreFab.js CHANGED
@@ -2,16 +2,53 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
2
2
  import React from 'react';
3
3
  import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
4
4
  import { Link } from '@reach/router';
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
+ }
5
15
  /**
6
16
  * More fab
7
17
  * @returns Component
8
18
  */
9
19
  export function MoreFab(props) {
10
20
  // Destruct
11
- const { actions, anchorOrigin = {
21
+ const { actions, drawArrow = true, anchorOrigin = {
12
22
  vertical: 'top',
13
23
  horizontal: 'right'
14
- }, color = 'primary', icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps, size, title, transformOrigin = {
24
+ }, color = 'primary', icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps = drawArrow
25
+ ? {
26
+ elevation: 0,
27
+ sx: {
28
+ overflow: 'visible',
29
+ filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
30
+ mt: -0.4,
31
+ '& .MuiAvatar-root': {
32
+ width: 32,
33
+ height: 32,
34
+ ml: -0.5,
35
+ mr: 1
36
+ },
37
+ '&:before': {
38
+ content: '""',
39
+ display: 'block',
40
+ position: 'absolute',
41
+ top: 0,
42
+ right: 14,
43
+ width: 10,
44
+ height: 10,
45
+ bgcolor: 'background.paper',
46
+ transform: 'translateY(-50%) rotate(45deg)',
47
+ zIndex: 0
48
+ }
49
+ }
50
+ }
51
+ : undefined, size, title, transformOrigin = {
15
52
  vertical: 'bottom',
16
53
  horizontal: 'right'
17
54
  } } = props;
@@ -30,13 +67,15 @@ export function MoreFab(props) {
30
67
  // No actions
31
68
  if (actions == null || actions.length == 0)
32
69
  return React.createElement(React.Fragment, null);
70
+ // Actions
71
+ const actionsLocal = getActions(actions);
33
72
  // Has any icon
34
- const hasIcon = actions.some((action) => action.icon != null);
73
+ const hasIcon = actionsLocal.some((action) => action.icon != null);
35
74
  // Main
36
75
  const main = iconButton ? (React.createElement(IconButton, { color: color, size: size, title: title, onClick: handleClick }, icon)) : (React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick }, icon));
37
76
  return (React.createElement(React.Fragment, null,
38
77
  main,
39
- React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actions.map(({ label, icon, action }, index) => label === '-' ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === 'string'
78
+ React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actionsLocal.map(({ label, icon, action }, index) => label === '-' ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === 'string'
40
79
  ? action.includes('://')
41
80
  ? {
42
81
  component: 'a',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.5.20",
3
+ "version": "1.5.24",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -47,14 +47,14 @@
47
47
  "homepage": "https://github.com/ETSOO/AppReact#readme",
48
48
  "dependencies": {
49
49
  "@emotion/css": "^11.7.1",
50
- "@emotion/react": "^11.7.1",
50
+ "@emotion/react": "^11.8.1",
51
51
  "@emotion/style": "^0.8.0",
52
- "@emotion/styled": "^11.6.0",
53
- "@etsoo/appscript": "^1.2.50",
52
+ "@emotion/styled": "^11.8.1",
53
+ "@etsoo/appscript": "^1.2.53",
54
54
  "@etsoo/notificationbase": "^1.1.1",
55
55
  "@etsoo/shared": "^1.1.11",
56
- "@mui/icons-material": "^5.4.1",
57
- "@mui/material": "^5.4.1",
56
+ "@mui/icons-material": "^5.4.2",
57
+ "@mui/material": "^5.4.2",
58
58
  "@reach/router": "^1.3.4",
59
59
  "@types/pica": "^9.0.0",
60
60
  "@types/pulltorefreshjs": "^0.1.5",
@@ -76,8 +76,8 @@
76
76
  "react-window": "^1.8.6"
77
77
  },
78
78
  "devDependencies": {
79
- "@babel/cli": "^7.17.0",
80
- "@babel/core": "^7.17.2",
79
+ "@babel/cli": "^7.17.3",
80
+ "@babel/core": "^7.17.5",
81
81
  "@babel/plugin-transform-runtime": "^7.17.0",
82
82
  "@babel/preset-env": "^7.16.11",
83
83
  "@babel/runtime-corejs3": "^7.17.2",
package/src/mu/MobileListItemRenderer.tsx CHANGED
@@ -4,16 +4,6 @@ import { ListItemReact } from '../components/ListItemReact';
4
4
  import { MoreFab } from './MoreFab';
5
5
  import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
6
6
 
7
- function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
8
- // Actions
9
- const actions: ListItemReact[] = [];
10
- input.forEach((action) => {
11
- if (typeof action === 'boolean') return;
12
- actions.push(action);
13
- });
14
- return actions;
15
- }
16
-
17
7
  /**
18
8
  * Default mobile list item renderer
19
9
  * @param param0 List renderer props
@@ -61,34 +51,7 @@ export function MobileListItemRenderer<T>(
61
51
  vertical: 'top',
62
52
  horizontal: 'right'
63
53
  }}
64
- actions={getActions(actions)}
65
- PaperProps={{
66
- elevation: 0,
67
- sx: {
68
- overflow: 'visible',
69
- filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
70
- mt: -0.4,
71
- '& .MuiAvatar-root': {
72
- width: 32,
73
- height: 32,
74
- ml: -0.5,
75
- mr: 1
76
- },
77
- '&:before': {
78
- content: '""',
79
- display: 'block',
80
- position: 'absolute',
81
- top: 0,
82
- right: 14,
83
- width: 10,
84
- height: 10,
85
- bgcolor: 'background.paper',
86
- transform:
87
- 'translateY(-50%) rotate(45deg)',
88
- zIndex: 0
89
- }
90
- }
91
- }}
54
+ actions={actions}
92
55
  />
93
56
  ) : (
94
57
  actions
package/src/mu/MoreFab.tsx CHANGED
@@ -5,7 +5,6 @@ import {
5
5
  Divider,
6
6
  Fab,
7
7
  IconButton,
8
- Link as MLink,
9
8
  ListItemIcon,
10
9
  ListItemText,
11
10
  Menu,
@@ -23,7 +22,12 @@ export interface MoreFabProps extends CustomFabProps {
23
22
  /**
24
23
  * Actions
25
24
  */
26
- actions?: ListItemReact[];
25
+ actions?: (ListItemReact | boolean)[];
26
+
27
+ /**
28
+ * Dray arrow
29
+ */
30
+ drawArrow?: boolean;
27
31
 
28
32
  /**
29
33
  * Main icon
@@ -54,6 +58,16 @@ export interface MoreFabProps extends CustomFabProps {
54
58
  transformOrigin?: PopoverOrigin;
55
59
  }
56
60
 
61
+ function getActions(input: (ListItemReact | boolean)[]): ListItemReact[] {
62
+ // Actions
63
+ const actions: ListItemReact[] = [];
64
+ input.forEach((action) => {
65
+ if (typeof action === 'boolean') return;
66
+ actions.push(action);
67
+ });
68
+ return actions;
69
+ }
70
+
57
71
  /**
58
72
  * More fab
59
73
  * @returns Component
@@ -62,6 +76,7 @@ export function MoreFab(props: MoreFabProps) {
62
76
  // Destruct
63
77
  const {
64
78
  actions,
79
+ drawArrow = true,
65
80
  anchorOrigin = {
66
81
  vertical: 'top',
67
82
  horizontal: 'right'
@@ -69,7 +84,34 @@ export function MoreFab(props: MoreFabProps) {
69
84
  color = 'primary',
70
85
  icon = <MoreHorizIcon />,
71
86
  iconButton = false,
72
- PaperProps,
87
+ PaperProps = drawArrow
88
+ ? {
89
+ elevation: 0,
90
+ sx: {
91
+ overflow: 'visible',
92
+ filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
93
+ mt: -0.4,
94
+ '& .MuiAvatar-root': {
95
+ width: 32,
96
+ height: 32,
97
+ ml: -0.5,
98
+ mr: 1
99
+ },
100
+ '&:before': {
101
+ content: '""',
102
+ display: 'block',
103
+ position: 'absolute',
104
+ top: 0,
105
+ right: 14,
106
+ width: 10,
107
+ height: 10,
108
+ bgcolor: 'background.paper',
109
+ transform: 'translateY(-50%) rotate(45deg)',
110
+ zIndex: 0
111
+ }
112
+ }
113
+ }
114
+ : undefined,
73
115
  size,
74
116
  title,
75
117
  transformOrigin = {
@@ -97,8 +139,11 @@ export function MoreFab(props: MoreFabProps) {
97
139
  // No actions
98
140
  if (actions == null || actions.length == 0) return <React.Fragment />;
99
141
 
142
+ // Actions
143
+ const actionsLocal = getActions(actions);
144
+
100
145
  // Has any icon
101
- const hasIcon = actions.some((action) => action.icon != null);
146
+ const hasIcon = actionsLocal.some((action) => action.icon != null);
102
147
 
103
148
  // Main
104
149
  const main = iconButton ? (
@@ -129,7 +174,7 @@ export function MoreFab(props: MoreFabProps) {
129
174
  onClose={handleClose}
130
175
  PaperProps={PaperProps}
131
176
  >
132
- {actions.map(({ label, icon, action }, index) =>
177
+ {actionsLocal.map(({ label, icon, action }, index) =>
133
178
  label === '-' ? (
134
179
  <Divider key={index} />
135
180
  ) : (