@etsoo/react 1.4.67 → 1.4.71

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 (7) hide show
  1. package/lib/mu/DnDList.d.ts +4 -0
  2. package/lib/mu/DnDList.js +22 -17
  3. package/lib/mu/pages/ViewPage.d.ts +1 -1
  4. package/lib/mu/pages/ViewPage.js +4 -5
  5. package/package.json +1 -1
  6. package/src/mu/DnDList.tsx +85 -53
  7. package/src/mu/pages/ViewPage.tsx +21 -7
package/lib/mu/DnDList.d.ts CHANGED
@@ -16,6 +16,10 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
16
16
  * List container props
17
17
  */
18
18
  componentProps?: React.ComponentProps<E>;
19
+ /**
20
+ * List disabled
21
+ */
22
+ disabled?: boolean;
19
23
  /**
20
24
  * Get list item style callback
21
25
  */
package/lib/mu/DnDList.js CHANGED
@@ -9,7 +9,7 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
9
9
  */
10
10
  export function DnDList(props) {
11
11
  // Destruct
12
- const { children, Component = 'div', componentProps, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
12
+ const { children, Component = 'div', componentProps, disabled = false, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
13
13
  // State
14
14
  const [items, setItems] = React.useState([]);
15
15
  const changeItems = (items) => {
@@ -102,22 +102,27 @@ export function DnDList(props) {
102
102
  // Layout
103
103
  return (React.createElement(React.Fragment, null,
104
104
  sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
105
- React.createElement(Component, { ...componentProps },
106
- React.createElement(DragDropContext, { onDragEnd: onDragEndLocal },
107
- React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
108
- items.map((item, index) => {
109
- // Id
110
- const id = DataTypes.convert(item[labelField], 'string');
111
- if (id == null)
112
- return;
113
- return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
114
- ...getItemStyle(snapshot.isDragging, index),
115
- ...provided
116
- .draggableProps
117
- .style
118
- } }, children(item, index, deleteItem, editItem)))));
119
- }),
120
- provided.placeholder))))),
105
+ React.createElement(Component, { ...componentProps }, disabled ? (React.createElement("div", null, items.map((item, index) => {
106
+ // Id
107
+ const id = DataTypes.convert(item[labelField], 'string');
108
+ if (id == null)
109
+ return;
110
+ return (React.createElement("div", null, children(item, index, deleteItem, editItem)));
111
+ }))) : (React.createElement(DragDropContext, { onDragEnd: onDragEndLocal },
112
+ React.createElement(Droppable, { droppableId: name }, (provided, snapshot) => (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, style: getListStyle(snapshot.isDraggingOver) },
113
+ items.map((item, index) => {
114
+ // Id
115
+ const id = DataTypes.convert(item[labelField], 'string');
116
+ if (id == null)
117
+ return;
118
+ return (React.createElement(Draggable, { key: id, draggableId: id, index: index }, (provided, snapshot) => (React.createElement("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
119
+ ...getItemStyle(snapshot.isDragging, index),
120
+ ...provided
121
+ .draggableProps
122
+ .style
123
+ } }, children(item, index, deleteItem, editItem)))));
124
+ }),
125
+ provided.placeholder)))))),
121
126
  sideRenderer &&
122
127
  sideRenderer(false, addItem, addItems, reloadItems)));
123
128
  }
package/lib/mu/pages/ViewPage.d.ts CHANGED
@@ -35,7 +35,7 @@ export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'c
35
35
  /**
36
36
  * Actions
37
37
  */
38
- actions?: (data: T) => React.ReactNode;
38
+ actions?: React.ReactNode | ((data: T) => React.ReactNode);
39
39
  /**
40
40
  * Children
41
41
  */
package/lib/mu/pages/ViewPage.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { Utils } from '@etsoo/shared';
2
- import { Grid, LinearProgress, Typography } from '@mui/material';
2
+ import { Grid, LinearProgress, Stack, Typography } from '@mui/material';
3
3
  import React from 'react';
4
4
  import { globalApp } from '../../app/ReactApp';
5
- import { HBox } from '../FlexBox';
6
5
  import { GridDataFormat } from '../GridDataFormat';
7
6
  import { MUGlobal } from '../MUGlobal';
8
7
  import { CommonPage } from './CommonPage';
@@ -71,7 +70,7 @@ export function ViewPage(props) {
71
70
  setData(result);
72
71
  };
73
72
  return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? onRefresh : undefined, onUpdate: supportRefresh ? undefined : onRefresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
74
- React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, sx: {
73
+ React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", sx: {
75
74
  '.MuiTypography-subtitle2': {
76
75
  fontWeight: 'bold'
77
76
  }
@@ -87,6 +86,6 @@ export function ViewPage(props) {
87
86
  ":"),
88
87
  React.createElement(Typography, { variant: "subtitle2" }, itemData)));
89
88
  })),
90
- actions != null && (React.createElement(HBox, { paddingTop: paddings, paddingBottom: paddings }, Utils.getResult(children, data))),
91
- children))));
89
+ actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data))),
90
+ Utils.getResult(children, data)))));
92
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.67",
3
+ "version": "1.4.71",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/mu/DnDList.tsx CHANGED
@@ -32,6 +32,11 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
32
32
  */
33
33
  componentProps?: React.ComponentProps<E>;
34
34
 
35
+ /**
36
+ * List disabled
37
+ */
38
+ disabled?: boolean;
39
+
35
40
  /**
36
41
  * Get list item style callback
37
42
  */
@@ -93,6 +98,7 @@ export function DnDList<
93
98
  children,
94
99
  Component = 'div',
95
100
  componentProps,
101
+ disabled = false,
96
102
  getItemStyle = (_isDragging) => ({}),
97
103
  getListStyle = () => undefined,
98
104
  labelField,
@@ -227,59 +233,85 @@ export function DnDList<
227
233
  <React.Fragment>
228
234
  {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
229
235
  <Component {...componentProps}>
230
- <DragDropContext onDragEnd={onDragEndLocal}>
231
- <Droppable droppableId={name}>
232
- {(provided, snapshot) => (
233
- <div
234
- {...provided.droppableProps}
235
- ref={provided.innerRef}
236
- style={getListStyle(snapshot.isDraggingOver)}
237
- >
238
- {items.map((item, index) => {
239
- // Id
240
- const id = DataTypes.convert(
241
- item[labelField],
242
- 'string'
243
- );
244
- if (id == null) return;
245
-
246
- return (
247
- <Draggable
248
- key={id}
249
- draggableId={id}
250
- index={index}
251
- >
252
- {(provided, snapshot) => (
253
- <div
254
- ref={provided.innerRef}
255
- {...provided.draggableProps}
256
- {...provided.dragHandleProps}
257
- style={{
258
- ...getItemStyle(
259
- snapshot.isDragging,
260
- index
261
- ),
262
- ...provided
263
- .draggableProps
264
- .style
265
- }}
266
- >
267
- {children(
268
- item,
269
- index,
270
- deleteItem,
271
- editItem
272
- )}
273
- </div>
274
- )}
275
- </Draggable>
276
- );
277
- })}
278
- {provided.placeholder}
279
- </div>
280
- )}
281
- </Droppable>
282
- </DragDropContext>
236
+ {disabled ? (
237
+ <div>
238
+ {items.map((item, index) => {
239
+ // Id
240
+ const id = DataTypes.convert(
241
+ item[labelField],
242
+ 'string'
243
+ );
244
+ if (id == null) return;
245
+
246
+ return (
247
+ <div>
248
+ {children(
249
+ item,
250
+ index,
251
+ deleteItem,
252
+ editItem
253
+ )}
254
+ </div>
255
+ );
256
+ })}
257
+ </div>
258
+ ) : (
259
+ <DragDropContext onDragEnd={onDragEndLocal}>
260
+ <Droppable droppableId={name}>
261
+ {(provided, snapshot) => (
262
+ <div
263
+ {...provided.droppableProps}
264
+ ref={provided.innerRef}
265
+ style={getListStyle(
266
+ snapshot.isDraggingOver
267
+ )}
268
+ >
269
+ {items.map((item, index) => {
270
+ // Id
271
+ const id = DataTypes.convert(
272
+ item[labelField],
273
+ 'string'
274
+ );
275
+ if (id == null) return;
276
+
277
+ return (
278
+ <Draggable
279
+ key={id}
280
+ draggableId={id}
281
+ index={index}
282
+ >
283
+ {(provided, snapshot) => (
284
+ <div
285
+ ref={provided.innerRef}
286
+ {...provided.draggableProps}
287
+ {...provided.dragHandleProps}
288
+ style={{
289
+ ...getItemStyle(
290
+ snapshot.isDragging,
291
+ index
292
+ ),
293
+ ...provided
294
+ .draggableProps
295
+ .style
296
+ }}
297
+ >
298
+ {children(
299
+ item,
300
+ index,
301
+ deleteItem,
302
+ editItem
303
+ )}
304
+ </div>
305
+ )}
306
+ </Draggable>
307
+ );
308
+ })}
309
+ {provided.placeholder}
310
+ </div>
311
+ )}
312
+ </Droppable>
313
+ </DragDropContext>
314
+ )}
283
315
  </Component>
284
316
  {sideRenderer &&
285
317
  sideRenderer(false, addItem, addItems, reloadItems)}
package/src/mu/pages/ViewPage.tsx CHANGED
@@ -1,12 +1,17 @@
1
1
  import { Utils } from '@etsoo/shared';
2
- import { Grid, GridProps, LinearProgress, Typography } from '@mui/material';
2
+ import {
3
+ Grid,
4
+ GridProps,
5
+ LinearProgress,
6
+ Stack,
7
+ Typography
8
+ } from '@mui/material';
3
9
  import React from 'react';
4
10
  import { globalApp } from '../../app/ReactApp';
5
11
  import {
6
12
  GridColumnRenderProps,
7
13
  GridDataType
8
14
  } from '../../components/GridColumn';
9
- import { HBox } from '../FlexBox';
10
15
  import { GridDataFormat } from '../GridDataFormat';
11
16
  import { MUGlobal } from '../MUGlobal';
12
17
  import { CommonPage } from './CommonPage';
@@ -55,7 +60,7 @@ export interface ViewPageProps<T extends {}>
55
60
  /**
56
61
  * Actions
57
62
  */
58
- actions?: (data: T) => React.ReactNode;
63
+ actions?: React.ReactNode | ((data: T) => React.ReactNode);
59
64
 
60
65
  /**
61
66
  * Children
@@ -181,6 +186,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
181
186
  container
182
187
  justifyContent="left"
183
188
  spacing={paddings}
189
+ className="ET-ViewPage"
184
190
  sx={{
185
191
  '.MuiTypography-subtitle2': {
186
192
  fontWeight: 'bold'
@@ -211,11 +217,19 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
211
217
  })}
212
218
  </Grid>
213
219
  {actions != null && (
214
- <HBox paddingTop={paddings} paddingBottom={paddings}>
215
- {Utils.getResult(children, data)}
216
- </HBox>
220
+ <Stack
221
+ className="ET-ViewPage-Actions"
222
+ direction="row"
223
+ width="100%"
224
+ flexWrap="wrap"
225
+ paddingTop={paddings}
226
+ paddingBottom={paddings}
227
+ gap={paddings}
228
+ >
229
+ {Utils.getResult(actions, data)}
230
+ </Stack>
217
231
  )}
218
- {children}
232
+ {Utils.getResult(children, data)}
219
233
  </React.Fragment>
220
234
  )}
221
235
  </CommonPage>