@etsoo/react 1.5.58 → 1.5.61

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 (8) hide show
  1. package/.github/workflows/main.yml +1 -1
  2. package/lib/index.d.ts +0 -1
  3. package/lib/index.js +0 -1
  4. package/package.json +8 -10
  5. package/src/index.ts +0 -1
  6. package/lib/mu/DnDList.d.ts +0 -62
  7. package/lib/mu/DnDList.js +0 -128
  8. package/src/mu/DnDList.tsx +0 -323
package/.github/workflows/main.yml CHANGED
@@ -28,7 +28,7 @@ jobs:
28
28
  # Setup .npmrc file to publish to npm
29
29
  - uses: actions/setup-node@v1
30
30
  with:
31
- node-version: '14.18'
31
+ node-version: '18.x'
32
32
  registry-url: 'https://registry.npmjs.org'
33
33
 
34
34
  # Named after Continuous Integration, installs dependencies directly from package-lock.json
package/lib/index.d.ts CHANGED
@@ -42,7 +42,6 @@ export * from './mu/CustomFabProps';
42
42
  export * from './mu/DataGridEx';
43
43
  export * from './mu/DataGridRenderers';
44
44
  export * from './mu/DialogButton';
45
- export * from './mu/DnDList';
46
45
  export * from './mu/DraggablePaperComponent';
47
46
  export * from './mu/EmailInput';
48
47
  export * from './mu/FabBox';
package/lib/index.js CHANGED
@@ -45,7 +45,6 @@ export * from './mu/CustomFabProps';
45
45
  export * from './mu/DataGridEx';
46
46
  export * from './mu/DataGridRenderers';
47
47
  export * from './mu/DialogButton';
48
- export * from './mu/DnDList';
49
48
  export * from './mu/DraggablePaperComponent';
50
49
  export * from './mu/EmailInput';
51
50
  export * from './mu/FabBox';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.5.58",
3
+ "version": "1.5.61",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -54,19 +54,10 @@
54
54
  "@etsoo/shared": "^1.1.41",
55
55
  "@mui/icons-material": "^5.8.4",
56
56
  "@mui/material": "^5.9.3",
57
- "@types/pica": "^9.0.1",
58
- "@types/pulltorefreshjs": "^0.1.5",
59
- "@types/react": "^18.0.15",
60
- "@types/react-avatar-editor": "^12.0.0",
61
- "@types/react-beautiful-dnd": "^13.1.2",
62
- "@types/react-dom": "^18.0.6",
63
- "@types/react-input-mask": "^3.0.1",
64
- "@types/react-window": "^1.8.5",
65
57
  "pica": "^9.0.1",
66
58
  "pulltorefreshjs": "^0.1.22",
67
59
  "react": "^18.2.0",
68
60
  "react-avatar-editor": "^13.0.0",
69
- "react-beautiful-dnd": "^13.1.0",
70
61
  "react-dom": "^18.2.0",
71
62
  "react-draggable": "^4.4.5",
72
63
  "react-imask": "^6.4.2",
@@ -79,6 +70,13 @@
79
70
  "@babel/plugin-transform-runtime": "^7.18.10",
80
71
  "@babel/preset-env": "^7.18.10",
81
72
  "@babel/runtime-corejs3": "^7.18.9",
73
+ "@types/pica": "^9.0.1",
74
+ "@types/pulltorefreshjs": "^0.1.5",
75
+ "@types/react": "^18.0.15",
76
+ "@types/react-avatar-editor": "^12.0.0",
77
+ "@types/react-dom": "^18.0.6",
78
+ "@types/react-input-mask": "^3.0.1",
79
+ "@types/react-window": "^1.8.5",
82
80
  "@types/jest": "^28.1.6",
83
81
  "@types/react-test-renderer": "^18.0.0",
84
82
  "@typescript-eslint/eslint-plugin": "^5.32.0",
package/src/index.ts CHANGED
@@ -49,7 +49,6 @@ export * from './mu/CustomFabProps';
49
49
  export * from './mu/DataGridEx';
50
50
  export * from './mu/DataGridRenderers';
51
51
  export * from './mu/DialogButton';
52
- export * from './mu/DnDList';
53
52
  export * from './mu/DraggablePaperComponent';
54
53
  export * from './mu/EmailInput';
55
54
  export * from './mu/FabBox';
package/lib/mu/DnDList.d.ts DELETED
@@ -1,62 +0,0 @@
1
- import React, { CSSProperties } from 'react';
2
- /**
3
- * DnD list props
4
- */
5
- export interface DnDListProps<D extends {}, E extends React.ElementType> {
6
- /**
7
- * Item renderer
8
- */
9
- children: (item: D, index: number, deleteItem: (index: number) => void, editItem: (newItem: D, index: number) => boolean) => React.ReactNode;
10
- /**
11
- * List container component
12
- * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
13
- */
14
- Component?: E;
15
- /**
16
- * List container props
17
- */
18
- componentProps?: React.ComponentProps<E>;
19
- /**
20
- * List disabled
21
- */
22
- disabled?: boolean;
23
- /**
24
- * Get list item style callback
25
- */
26
- getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
27
- /**
28
- * Get list style callback
29
- */
30
- getListStyle?: (isDraggingOver: boolean) => CSSProperties;
31
- /**
32
- * Label field
33
- */
34
- labelField: string & keyof D;
35
- /**
36
- * Load data
37
- */
38
- loadData: (name: string) => PromiseLike<D[]>;
39
- /**
40
- * Data change handler
41
- */
42
- onChange?: (items: D[]) => void;
43
- /**
44
- * Drag end handler
45
- */
46
- onDragEnd?: (items: D[]) => void;
47
- /**
48
- * Top and bottom sides renderer
49
- */
50
- sideRenderer?: (top: boolean, addItem: (item: D) => boolean, addItems: (items: D[]) => number, reloadItems: () => void) => React.ReactNode;
51
- /**
52
- * Name for hidden form input
53
- */
54
- name: string;
55
- }
56
- /**
57
- * Drag and drop list
58
- * https://github.com/atlassian/react-beautiful-dnd
59
- * @param props Props
60
- * @returns Component
61
- */
62
- export declare function DnDList<D extends {}, E extends React.ElementType = React.ElementType>(props: DnDListProps<D, E>): JSX.Element;
package/lib/mu/DnDList.js DELETED
@@ -1,128 +0,0 @@
1
- import { DataTypes } from '@etsoo/shared';
2
- import React from 'react';
3
- import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
4
- /**
5
- * Drag and drop list
6
- * https://github.com/atlassian/react-beautiful-dnd
7
- * @param props Props
8
- * @returns Component
9
- */
10
- export function DnDList(props) {
11
- // Destruct
12
- const { children, Component = 'div', componentProps, disabled = false, getItemStyle = (_isDragging) => ({}), getListStyle = () => undefined, labelField, loadData, name, onChange, onDragEnd, sideRenderer } = props;
13
- // State
14
- const [items, setItems] = React.useState([]);
15
- const changeItems = (items) => {
16
- // Possible to alter items with the handler
17
- if (onChange)
18
- onChange(items);
19
- // Update state
20
- setItems(items);
21
- };
22
- // Drag end handler
23
- const onDragEndLocal = (result) => {
24
- // Dropped outside the list
25
- if (!result.destination) {
26
- return;
27
- }
28
- // Clone
29
- const newItems = [...items];
30
- // Removed item
31
- const [removed] = newItems.splice(result.source.index, 1);
32
- // Insert to the destination index
33
- newItems.splice(result.destination.index, 0, removed);
34
- // Update the state
35
- changeItems(newItems);
36
- // Drag end handler
37
- if (onDragEnd)
38
- onDragEnd(newItems);
39
- };
40
- // Add item
41
- const addItem = (newItem) => {
42
- // Existence check
43
- if (items.some((item) => item[labelField] === newItem[labelField])) {
44
- return false;
45
- }
46
- // Clone
47
- const newItems = [newItem, ...items];
48
- // Update the state
49
- changeItems(newItems);
50
- return true;
51
- };
52
- // Edit item
53
- const editItem = (newItem, index) => {
54
- // Existence check
55
- const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
56
- if (newIndex >= 0 && newIndex != index) {
57
- // Label field is the same with a different item
58
- return false;
59
- }
60
- // Clone
61
- const newItems = [...items];
62
- // Remove the item
63
- newItems.splice(index, 1, newItem);
64
- // Update the state
65
- changeItems(newItems);
66
- return true;
67
- };
68
- // Add items
69
- const addItems = (inputItems) => {
70
- // Clone
71
- const newItems = [...items];
72
- // Insert items
73
- inputItems.forEach((newItem) => {
74
- // Existence check
75
- if (newItems.some((item) => item[labelField] == newItem[labelField])) {
76
- return;
77
- }
78
- newItems.push(newItem);
79
- });
80
- // Update the state
81
- changeItems(newItems);
82
- return newItems.length - items.length;
83
- };
84
- // Delete item
85
- const deleteItem = (index) => {
86
- // Clone
87
- const newItems = [...items];
88
- // Remove the item
89
- newItems.splice(index, 1);
90
- // Update the state
91
- changeItems(newItems);
92
- };
93
- // Reload items
94
- const reloadItems = () => {
95
- // Load data
96
- loadData(name).then((items) => setItems(items));
97
- };
98
- React.useEffect(() => {
99
- // Load data
100
- reloadItems();
101
- }, [name]);
102
- // Layout
103
- return (React.createElement(React.Fragment, null,
104
- sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
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)))))),
126
- sideRenderer &&
127
- sideRenderer(false, addItem, addItems, reloadItems)));
128
- }
package/src/mu/DnDList.tsx DELETED
@@ -1,323 +0,0 @@
1
- import { DataTypes } from '@etsoo/shared';
2
- import React, { CSSProperties } from 'react';
3
- import {
4
- DragDropContext,
5
- Draggable,
6
- Droppable,
7
- DropResult
8
- } from 'react-beautiful-dnd';
9
-
10
- /**
11
- * DnD list props
12
- */
13
- export interface DnDListProps<D extends {}, E extends React.ElementType> {
14
- /**
15
- * Item renderer
16
- */
17
- children: (
18
- item: D,
19
- index: number,
20
- deleteItem: (index: number) => void,
21
- editItem: (newItem: D, index: number) => boolean
22
- ) => React.ReactNode;
23
-
24
- /**
25
- * List container component
26
- * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
27
- */
28
- Component?: E;
29
-
30
- /**
31
- * List container props
32
- */
33
- componentProps?: React.ComponentProps<E>;
34
-
35
- /**
36
- * List disabled
37
- */
38
- disabled?: boolean;
39
-
40
- /**
41
- * Get list item style callback
42
- */
43
- getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
44
-
45
- /**
46
- * Get list style callback
47
- */
48
- getListStyle?: (isDraggingOver: boolean) => CSSProperties;
49
-
50
- /**
51
- * Label field
52
- */
53
- labelField: string & keyof D;
54
-
55
- /**
56
- * Load data
57
- */
58
- loadData: (name: string) => PromiseLike<D[]>;
59
-
60
- /**
61
- * Data change handler
62
- */
63
- onChange?: (items: D[]) => void;
64
-
65
- /**
66
- * Drag end handler
67
- */
68
- onDragEnd?: (items: D[]) => void;
69
-
70
- /**
71
- * Top and bottom sides renderer
72
- */
73
- sideRenderer?: (
74
- top: boolean,
75
- addItem: (item: D) => boolean,
76
- addItems: (items: D[]) => number,
77
- reloadItems: () => void
78
- ) => React.ReactNode;
79
-
80
- /**
81
- * Name for hidden form input
82
- */
83
- name: string;
84
- }
85
-
86
- /**
87
- * Drag and drop list
88
- * https://github.com/atlassian/react-beautiful-dnd
89
- * @param props Props
90
- * @returns Component
91
- */
92
- export function DnDList<
93
- D extends {},
94
- E extends React.ElementType = React.ElementType
95
- >(props: DnDListProps<D, E>) {
96
- // Destruct
97
- const {
98
- children,
99
- Component = 'div',
100
- componentProps,
101
- disabled = false,
102
- getItemStyle = (_isDragging) => ({}),
103
- getListStyle = () => undefined,
104
- labelField,
105
- loadData,
106
- name,
107
- onChange,
108
- onDragEnd,
109
- sideRenderer
110
- } = props;
111
-
112
- // State
113
- const [items, setItems] = React.useState<D[]>([]);
114
-
115
- const changeItems = (items: D[]) => {
116
- // Possible to alter items with the handler
117
- if (onChange) onChange(items);
118
-
119
- // Update state
120
- setItems(items);
121
- };
122
-
123
- // Drag end handler
124
- const onDragEndLocal = (result: DropResult) => {
125
- // Dropped outside the list
126
- if (!result.destination) {
127
- return;
128
- }
129
-
130
- // Clone
131
- const newItems = [...items];
132
-
133
- // Removed item
134
- const [removed] = newItems.splice(result.source.index, 1);
135
-
136
- // Insert to the destination index
137
- newItems.splice(result.destination.index, 0, removed);
138
-
139
- // Update the state
140
- changeItems(newItems);
141
-
142
- // Drag end handler
143
- if (onDragEnd) onDragEnd(newItems);
144
- };
145
-
146
- // Add item
147
- const addItem = (newItem: D) => {
148
- // Existence check
149
- if (items.some((item) => item[labelField] === newItem[labelField])) {
150
- return false;
151
- }
152
-
153
- // Clone
154
- const newItems = [newItem, ...items];
155
-
156
- // Update the state
157
- changeItems(newItems);
158
-
159
- return true;
160
- };
161
-
162
- // Edit item
163
- const editItem = (newItem: D, index: number) => {
164
- // Existence check
165
- const newIndex = items.findIndex(
166
- (item) => item[labelField] === newItem[labelField]
167
- );
168
- if (newIndex >= 0 && newIndex != index) {
169
- // Label field is the same with a different item
170
- return false;
171
- }
172
-
173
- // Clone
174
- const newItems = [...items];
175
-
176
- // Remove the item
177
- newItems.splice(index, 1, newItem);
178
-
179
- // Update the state
180
- changeItems(newItems);
181
-
182
- return true;
183
- };
184
-
185
- // Add items
186
- const addItems = (inputItems: D[]) => {
187
- // Clone
188
- const newItems = [...items];
189
-
190
- // Insert items
191
- inputItems.forEach((newItem) => {
192
- // Existence check
193
- if (
194
- newItems.some((item) => item[labelField] == newItem[labelField])
195
- ) {
196
- return;
197
- }
198
-
199
- newItems.push(newItem);
200
- });
201
-
202
- // Update the state
203
- changeItems(newItems);
204
-
205
- return newItems.length - items.length;
206
- };
207
-
208
- // Delete item
209
- const deleteItem = (index: number) => {
210
- // Clone
211
- const newItems = [...items];
212
-
213
- // Remove the item
214
- newItems.splice(index, 1);
215
-
216
- // Update the state
217
- changeItems(newItems);
218
- };
219
-
220
- // Reload items
221
- const reloadItems = () => {
222
- // Load data
223
- loadData(name).then((items) => setItems(items));
224
- };
225
-
226
- React.useEffect(() => {
227
- // Load data
228
- reloadItems();
229
- }, [name]);
230
-
231
- // Layout
232
- return (
233
- <React.Fragment>
234
- {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
235
- <Component {...componentProps}>
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
- )}
318
- </Component>
319
- {sideRenderer &&
320
- sideRenderer(false, addItem, addItems, reloadItems)}
321
- </React.Fragment>
322
- );
323
- }