@etsoo/react 1.4.70 → 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 (6) 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.js +2 -2
  4. package/package.json +1 -1
  5. package/src/mu/DnDList.tsx +85 -53
  6. package/src/mu/pages/ViewPage.tsx +2 -0
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.js CHANGED
@@ -70,7 +70,7 @@ export function ViewPage(props) {
70
70
  setData(result);
71
71
  };
72
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,
73
- React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, sx: {
73
+ React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", sx: {
74
74
  '.MuiTypography-subtitle2': {
75
75
  fontWeight: 'bold'
76
76
  }
@@ -86,6 +86,6 @@ export function ViewPage(props) {
86
86
  ":"),
87
87
  React.createElement(Typography, { variant: "subtitle2" }, itemData)));
88
88
  })),
89
- actions != null && (React.createElement(Stack, { direction: "row", width: "100%", flexWrap: "wrap", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data))),
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
90
  Utils.getResult(children, data)))));
91
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.70",
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
@@ -186,6 +186,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
186
186
  container
187
187
  justifyContent="left"
188
188
  spacing={paddings}
189
+ className="ET-ViewPage"
189
190
  sx={{
190
191
  '.MuiTypography-subtitle2': {
191
192
  fontWeight: 'bold'
@@ -217,6 +218,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
217
218
  </Grid>
218
219
  {actions != null && (
219
220
  <Stack
221
+ className="ET-ViewPage-Actions"
220
222
  direction="row"
221
223
  width="100%"
222
224
  flexWrap="wrap"