@etsoo/react 1.4.70 → 1.4.74
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/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/mu/DnDList.d.ts +4 -0
- package/lib/mu/DnDList.js +22 -17
- package/lib/mu/SelectBool.d.ts +14 -0
- package/lib/mu/SelectBool.js +21 -0
- package/lib/mu/pages/ViewPage.js +2 -2
- package/package.json +2 -2
- package/src/index.ts +1 -0
- package/src/mu/DnDList.tsx +88 -53
- package/src/mu/SelectBool.tsx +31 -0
- package/src/mu/pages/ViewPage.tsx +3 -0
package/lib/index.d.ts
CHANGED
|
@@ -64,6 +64,7 @@ export * from './mu/ScrollTopFab';
|
|
|
64
64
|
export * from './mu/SearchBar';
|
|
65
65
|
export * from './mu/SearchField';
|
|
66
66
|
export * from './mu/SearchOptionGroup';
|
|
67
|
+
export * from './mu/SelectBool';
|
|
67
68
|
export * from './mu/SelectEx';
|
|
68
69
|
export * from './mu/Switch';
|
|
69
70
|
export * from './mu/SwitchAnt';
|
package/lib/index.js
CHANGED
|
@@ -67,6 +67,7 @@ export * from './mu/ScrollTopFab';
|
|
|
67
67
|
export * from './mu/SearchBar';
|
|
68
68
|
export * from './mu/SearchField';
|
|
69
69
|
export * from './mu/SearchOptionGroup';
|
|
70
|
+
export * from './mu/SelectBool';
|
|
70
71
|
export * from './mu/SelectEx';
|
|
71
72
|
export * from './mu/Switch';
|
|
72
73
|
export * from './mu/SwitchAnt';
|
package/lib/mu/DnDList.d.ts
CHANGED
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
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
105
|
+
React.createElement(Component, { ...componentProps }, disabled ? (React.createElement("div", { style: getListStyle(false) }, 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", { key: id, style: getItemStyle(false, index) }, 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
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IdLabelDto } from '@etsoo/appscript';
|
|
3
|
+
import { SelectExProps } from './SelectEx';
|
|
4
|
+
/**
|
|
5
|
+
* SelectBool props
|
|
6
|
+
*/
|
|
7
|
+
export interface SelectBoolProps extends Omit<SelectExProps<IdLabelDto<string>>, 'options' | 'loadData'> {
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* SelectBool (yes/no)
|
|
11
|
+
* @param props Props
|
|
12
|
+
* @returns Component
|
|
13
|
+
*/
|
|
14
|
+
export declare function SelectBool(props: SelectBoolProps): JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { globalApp } from '..';
|
|
3
|
+
import { SelectEx } from './SelectEx';
|
|
4
|
+
/**
|
|
5
|
+
* SelectBool (yes/no)
|
|
6
|
+
* @param props Props
|
|
7
|
+
* @returns Component
|
|
8
|
+
*/
|
|
9
|
+
export function SelectBool(props) {
|
|
10
|
+
// Destruct
|
|
11
|
+
const { search = true, ...rest } = props;
|
|
12
|
+
// Options
|
|
13
|
+
const options = [
|
|
14
|
+
{ id: 'false', label: globalApp.get('no') },
|
|
15
|
+
{ id: 'true', label: globalApp.get('yes') }
|
|
16
|
+
];
|
|
17
|
+
if (search)
|
|
18
|
+
options.unshift({ id: '', label: '---' });
|
|
19
|
+
// Layout
|
|
20
|
+
return React.createElement(SelectEx, { options: options, search: search, ...rest });
|
|
21
|
+
}
|
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", justifyContent: "flex-end", 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.
|
|
3
|
+
"version": "1.4.74",
|
|
4
4
|
"description": "TypeScript ReactJs framework",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@emotion/react": "^11.7.1",
|
|
51
51
|
"@emotion/style": "^0.8.0",
|
|
52
52
|
"@emotion/styled": "^11.6.0",
|
|
53
|
-
"@etsoo/appscript": "^1.2.
|
|
53
|
+
"@etsoo/appscript": "^1.2.28",
|
|
54
54
|
"@etsoo/notificationbase": "^1.1.0",
|
|
55
55
|
"@etsoo/shared": "^1.1.6",
|
|
56
56
|
"@mui/icons-material": "^5.3.1",
|
package/src/index.ts
CHANGED
|
@@ -71,6 +71,7 @@ export * from './mu/ScrollTopFab';
|
|
|
71
71
|
export * from './mu/SearchBar';
|
|
72
72
|
export * from './mu/SearchField';
|
|
73
73
|
export * from './mu/SearchOptionGroup';
|
|
74
|
+
export * from './mu/SelectBool';
|
|
74
75
|
export * from './mu/SelectEx';
|
|
75
76
|
export * from './mu/Switch';
|
|
76
77
|
export * from './mu/SwitchAnt';
|
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,88 @@ export function DnDList<
|
|
|
227
233
|
<React.Fragment>
|
|
228
234
|
{sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
|
|
229
235
|
<Component {...componentProps}>
|
|
230
|
-
|
|
231
|
-
<
|
|
232
|
-
{(
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
)
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
236
|
+
{disabled ? (
|
|
237
|
+
<div style={getListStyle(false)}>
|
|
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
|
+
key={id}
|
|
249
|
+
style={getItemStyle(false, index)}
|
|
250
|
+
>
|
|
251
|
+
{children(
|
|
252
|
+
item,
|
|
253
|
+
index,
|
|
254
|
+
deleteItem,
|
|
255
|
+
editItem
|
|
256
|
+
)}
|
|
257
|
+
</div>
|
|
258
|
+
);
|
|
259
|
+
})}
|
|
260
|
+
</div>
|
|
261
|
+
) : (
|
|
262
|
+
<DragDropContext onDragEnd={onDragEndLocal}>
|
|
263
|
+
<Droppable droppableId={name}>
|
|
264
|
+
{(provided, snapshot) => (
|
|
265
|
+
<div
|
|
266
|
+
{...provided.droppableProps}
|
|
267
|
+
ref={provided.innerRef}
|
|
268
|
+
style={getListStyle(
|
|
269
|
+
snapshot.isDraggingOver
|
|
270
|
+
)}
|
|
271
|
+
>
|
|
272
|
+
{items.map((item, index) => {
|
|
273
|
+
// Id
|
|
274
|
+
const id = DataTypes.convert(
|
|
275
|
+
item[labelField],
|
|
276
|
+
'string'
|
|
277
|
+
);
|
|
278
|
+
if (id == null) return;
|
|
279
|
+
|
|
280
|
+
return (
|
|
281
|
+
<Draggable
|
|
282
|
+
key={id}
|
|
283
|
+
draggableId={id}
|
|
284
|
+
index={index}
|
|
285
|
+
>
|
|
286
|
+
{(provided, snapshot) => (
|
|
287
|
+
<div
|
|
288
|
+
ref={provided.innerRef}
|
|
289
|
+
{...provided.draggableProps}
|
|
290
|
+
{...provided.dragHandleProps}
|
|
291
|
+
style={{
|
|
292
|
+
...getItemStyle(
|
|
293
|
+
snapshot.isDragging,
|
|
294
|
+
index
|
|
295
|
+
),
|
|
296
|
+
...provided
|
|
297
|
+
.draggableProps
|
|
298
|
+
.style
|
|
299
|
+
}}
|
|
300
|
+
>
|
|
301
|
+
{children(
|
|
302
|
+
item,
|
|
303
|
+
index,
|
|
304
|
+
deleteItem,
|
|
305
|
+
editItem
|
|
306
|
+
)}
|
|
307
|
+
</div>
|
|
308
|
+
)}
|
|
309
|
+
</Draggable>
|
|
310
|
+
);
|
|
311
|
+
})}
|
|
312
|
+
{provided.placeholder}
|
|
313
|
+
</div>
|
|
314
|
+
)}
|
|
315
|
+
</Droppable>
|
|
316
|
+
</DragDropContext>
|
|
317
|
+
)}
|
|
283
318
|
</Component>
|
|
284
319
|
{sideRenderer &&
|
|
285
320
|
sideRenderer(false, addItem, addItems, reloadItems)}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { IdLabelDto } from '@etsoo/appscript';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { globalApp } from '..';
|
|
4
|
+
import { SelectEx, SelectExProps } from './SelectEx';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* SelectBool props
|
|
8
|
+
*/
|
|
9
|
+
export interface SelectBoolProps
|
|
10
|
+
extends Omit<SelectExProps<IdLabelDto<string>>, 'options' | 'loadData'> {}
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* SelectBool (yes/no)
|
|
14
|
+
* @param props Props
|
|
15
|
+
* @returns Component
|
|
16
|
+
*/
|
|
17
|
+
export function SelectBool(props: SelectBoolProps) {
|
|
18
|
+
// Destruct
|
|
19
|
+
const { search = true, ...rest } = props;
|
|
20
|
+
|
|
21
|
+
// Options
|
|
22
|
+
const options: IdLabelDto<string>[] = [
|
|
23
|
+
{ id: 'false', label: globalApp.get('no')! },
|
|
24
|
+
{ id: 'true', label: globalApp.get('yes')! }
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
if (search) options.unshift({ id: '', label: '---' });
|
|
28
|
+
|
|
29
|
+
// Layout
|
|
30
|
+
return <SelectEx options={options} search={search} {...rest} />;
|
|
31
|
+
}
|
|
@@ -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,9 +218,11 @@ 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"
|
|
225
|
+
justifyContent="flex-end"
|
|
223
226
|
paddingTop={paddings}
|
|
224
227
|
paddingBottom={paddings}
|
|
225
228
|
gap={paddings}
|