@etsoo/react 1.5.59 → 1.5.62

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/index.d.ts +0 -1
  2. package/lib/index.js +0 -1
  3. package/package.json +1 -2
  4. package/src/index.ts +0 -1
  5. package/lib/mu/DnDList.d.ts +0 -62
  6. package/lib/mu/DnDList.js +0 -110
  7. package/src/mu/DnDList.tsx +0 -259
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.59",
3
+ "version": "1.5.62",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -46,7 +46,6 @@
46
46
  },
47
47
  "homepage": "https://github.com/ETSOO/AppReact#readme",
48
48
  "dependencies": {
49
- "@dnd-kit/core": "^6.0.5",
50
49
  "@emotion/css": "^11.10.0",
51
50
  "@emotion/react": "^11.10.0",
52
51
  "@emotion/styled": "^11.10.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,110 +0,0 @@
1
- import { DndContext } from '@dnd-kit/core';
2
- import { DataTypes } from '@etsoo/shared';
3
- import React from 'react';
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
- // Clone
25
- const newItems = [...items];
26
- // Removed item
27
- // const [removed] = newItems.splice(result.source.index, 1);
28
- // Insert to the destination index
29
- // newItems.splice(result.destination.index, 0, removed);
30
- // Update the state
31
- changeItems(newItems);
32
- // Drag end handler
33
- if (onDragEnd)
34
- onDragEnd(newItems);
35
- };
36
- // Add item
37
- const addItem = (newItem) => {
38
- // Existence check
39
- if (items.some((item) => item[labelField] === newItem[labelField])) {
40
- return false;
41
- }
42
- // Clone
43
- const newItems = [newItem, ...items];
44
- // Update the state
45
- changeItems(newItems);
46
- return true;
47
- };
48
- // Edit item
49
- const editItem = (newItem, index) => {
50
- // Existence check
51
- const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
52
- if (newIndex >= 0 && newIndex != index) {
53
- // Label field is the same with a different item
54
- return false;
55
- }
56
- // Clone
57
- const newItems = [...items];
58
- // Remove the item
59
- newItems.splice(index, 1, newItem);
60
- // Update the state
61
- changeItems(newItems);
62
- return true;
63
- };
64
- // Add items
65
- const addItems = (inputItems) => {
66
- // Clone
67
- const newItems = [...items];
68
- // Insert items
69
- inputItems.forEach((newItem) => {
70
- // Existence check
71
- if (newItems.some((item) => item[labelField] == newItem[labelField])) {
72
- return;
73
- }
74
- newItems.push(newItem);
75
- });
76
- // Update the state
77
- changeItems(newItems);
78
- return newItems.length - items.length;
79
- };
80
- // Delete item
81
- const deleteItem = (index) => {
82
- // Clone
83
- const newItems = [...items];
84
- // Remove the item
85
- newItems.splice(index, 1);
86
- // Update the state
87
- changeItems(newItems);
88
- };
89
- // Reload items
90
- const reloadItems = () => {
91
- // Load data
92
- loadData(name).then((items) => setItems(items));
93
- };
94
- React.useEffect(() => {
95
- // Load data
96
- reloadItems();
97
- }, [name]);
98
- // Layout
99
- return (React.createElement(React.Fragment, null,
100
- sideRenderer && sideRenderer(true, addItem, addItems, reloadItems),
101
- React.createElement(Component, { ...componentProps }, disabled ? (React.createElement("div", { style: getListStyle(false) }, items.map((item, index) => {
102
- // Id
103
- const id = DataTypes.convert(item[labelField], 'string');
104
- if (id == null)
105
- return;
106
- return (React.createElement("div", { key: id, style: getItemStyle(false, index) }, children(item, index, deleteItem, editItem)));
107
- }))) : (React.createElement(DndContext, { onDragEnd: onDragEndLocal }))),
108
- sideRenderer &&
109
- sideRenderer(false, addItem, addItems, reloadItems)));
110
- }
package/src/mu/DnDList.tsx DELETED
@@ -1,259 +0,0 @@
1
- import { DndContext, DragEndEvent } from '@dnd-kit/core';
2
- import { DataTypes } from '@etsoo/shared';
3
- import React, { CSSProperties } from 'react';
4
-
5
- /**
6
- * DnD list props
7
- */
8
- export interface DnDListProps<D extends {}, E extends React.ElementType> {
9
- /**
10
- * Item renderer
11
- */
12
- children: (
13
- item: D,
14
- index: number,
15
- deleteItem: (index: number) => void,
16
- editItem: (newItem: D, index: number) => boolean
17
- ) => React.ReactNode;
18
-
19
- /**
20
- * List container component
21
- * https://javascript.plainenglish.io/building-a-polymorphic-component-in-react-and-typescript-d9f236950af4
22
- */
23
- Component?: E;
24
-
25
- /**
26
- * List container props
27
- */
28
- componentProps?: React.ComponentProps<E>;
29
-
30
- /**
31
- * List disabled
32
- */
33
- disabled?: boolean;
34
-
35
- /**
36
- * Get list item style callback
37
- */
38
- getItemStyle?: (isDragging: boolean, index: number) => CSSProperties;
39
-
40
- /**
41
- * Get list style callback
42
- */
43
- getListStyle?: (isDraggingOver: boolean) => CSSProperties;
44
-
45
- /**
46
- * Label field
47
- */
48
- labelField: string & keyof D;
49
-
50
- /**
51
- * Load data
52
- */
53
- loadData: (name: string) => PromiseLike<D[]>;
54
-
55
- /**
56
- * Data change handler
57
- */
58
- onChange?: (items: D[]) => void;
59
-
60
- /**
61
- * Drag end handler
62
- */
63
- onDragEnd?: (items: D[]) => void;
64
-
65
- /**
66
- * Top and bottom sides renderer
67
- */
68
- sideRenderer?: (
69
- top: boolean,
70
- addItem: (item: D) => boolean,
71
- addItems: (items: D[]) => number,
72
- reloadItems: () => void
73
- ) => React.ReactNode;
74
-
75
- /**
76
- * Name for hidden form input
77
- */
78
- name: string;
79
- }
80
-
81
- /**
82
- * Drag and drop list
83
- * https://github.com/atlassian/react-beautiful-dnd
84
- * @param props Props
85
- * @returns Component
86
- */
87
- export function DnDList<
88
- D extends {},
89
- E extends React.ElementType = React.ElementType
90
- >(props: DnDListProps<D, E>) {
91
- // Destruct
92
- const {
93
- children,
94
- Component = 'div',
95
- componentProps,
96
- disabled = false,
97
- getItemStyle = (_isDragging) => ({}),
98
- getListStyle = () => undefined,
99
- labelField,
100
- loadData,
101
- name,
102
- onChange,
103
- onDragEnd,
104
- sideRenderer
105
- } = props;
106
-
107
- // State
108
- const [items, setItems] = React.useState<D[]>([]);
109
-
110
- const changeItems = (items: D[]) => {
111
- // Possible to alter items with the handler
112
- if (onChange) onChange(items);
113
-
114
- // Update state
115
- setItems(items);
116
- };
117
-
118
- // Drag end handler
119
- const onDragEndLocal = (result: DragEndEvent) => {
120
- // Clone
121
- const newItems = [...items];
122
-
123
- // Removed item
124
- // const [removed] = newItems.splice(result.source.index, 1);
125
-
126
- // Insert to the destination index
127
- // newItems.splice(result.destination.index, 0, removed);
128
-
129
- // Update the state
130
- changeItems(newItems);
131
-
132
- // Drag end handler
133
- if (onDragEnd) onDragEnd(newItems);
134
- };
135
-
136
- // Add item
137
- const addItem = (newItem: D) => {
138
- // Existence check
139
- if (items.some((item) => item[labelField] === newItem[labelField])) {
140
- return false;
141
- }
142
-
143
- // Clone
144
- const newItems = [newItem, ...items];
145
-
146
- // Update the state
147
- changeItems(newItems);
148
-
149
- return true;
150
- };
151
-
152
- // Edit item
153
- const editItem = (newItem: D, index: number) => {
154
- // Existence check
155
- const newIndex = items.findIndex(
156
- (item) => item[labelField] === newItem[labelField]
157
- );
158
- if (newIndex >= 0 && newIndex != index) {
159
- // Label field is the same with a different item
160
- return false;
161
- }
162
-
163
- // Clone
164
- const newItems = [...items];
165
-
166
- // Remove the item
167
- newItems.splice(index, 1, newItem);
168
-
169
- // Update the state
170
- changeItems(newItems);
171
-
172
- return true;
173
- };
174
-
175
- // Add items
176
- const addItems = (inputItems: D[]) => {
177
- // Clone
178
- const newItems = [...items];
179
-
180
- // Insert items
181
- inputItems.forEach((newItem) => {
182
- // Existence check
183
- if (
184
- newItems.some((item) => item[labelField] == newItem[labelField])
185
- ) {
186
- return;
187
- }
188
-
189
- newItems.push(newItem);
190
- });
191
-
192
- // Update the state
193
- changeItems(newItems);
194
-
195
- return newItems.length - items.length;
196
- };
197
-
198
- // Delete item
199
- const deleteItem = (index: number) => {
200
- // Clone
201
- const newItems = [...items];
202
-
203
- // Remove the item
204
- newItems.splice(index, 1);
205
-
206
- // Update the state
207
- changeItems(newItems);
208
- };
209
-
210
- // Reload items
211
- const reloadItems = () => {
212
- // Load data
213
- loadData(name).then((items) => setItems(items));
214
- };
215
-
216
- React.useEffect(() => {
217
- // Load data
218
- reloadItems();
219
- }, [name]);
220
-
221
- // Layout
222
- return (
223
- <React.Fragment>
224
- {sideRenderer && sideRenderer(true, addItem, addItems, reloadItems)}
225
- <Component {...componentProps}>
226
- {disabled ? (
227
- <div style={getListStyle(false)}>
228
- {items.map((item, index) => {
229
- // Id
230
- const id = DataTypes.convert(
231
- item[labelField],
232
- 'string'
233
- );
234
- if (id == null) return;
235
-
236
- return (
237
- <div
238
- key={id}
239
- style={getItemStyle(false, index)}
240
- >
241
- {children(
242
- item,
243
- index,
244
- deleteItem,
245
- editItem
246
- )}
247
- </div>
248
- );
249
- })}
250
- </div>
251
- ) : (
252
- <DndContext onDragEnd={onDragEndLocal}></DndContext>
253
- )}
254
- </Component>
255
- {sideRenderer &&
256
- sideRenderer(false, addItem, addItems, reloadItems)}
257
- </React.Fragment>
258
- );
259
- }