@abhishekzambare/react-grid-dnd 0.0.11 → 0.0.12

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 (5) hide show
  1. package/README.md +120 -116
  2. package/Readme.md +120 -116
  3. package/dist/react-grid-dnd.cjs +1 -1
  4. package/dist/react-grid-dnd.js +9 -5
  5. package/package.json +77 -72
package/README.md CHANGED
@@ -33,44 +33,44 @@ Because `GridItem` components are rendered with absolute positioning, you need t
33
33
 
34
34
  ```jsx
35
35
  import {
36
- GridContextProvider,
37
- GridDropZone,
38
- GridItem,
39
- swap,
36
+ GridContextProvider,
37
+ GridDropZone,
38
+ GridItem,
39
+ swap,
40
40
  } from "react-grid-dnd";
41
41
 
42
42
  function Example() {
43
- const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state
44
-
45
- // target id will only be set if dragging from one dropzone to another.
46
- function onChange(sourceId, sourceIndex, targetIndex, targetId) {
47
- const nextState = swap(items, sourceIndex, targetIndex);
48
- setItems(nextState);
49
- }
50
-
51
- return (
52
- <GridContextProvider onChange={onChange}>
53
- <GridDropZone
54
- id="items"
55
- boxesPerRow={4}
56
- rowHeight={100}
57
- style={{ height: "400px" }}
58
- >
59
- {items.map((item) => (
60
- <GridItem key={item}>
61
- <div
62
- style={{
63
- width: "100%",
64
- height: "100%",
65
- }}
43
+ const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state
44
+
45
+ // target id will only be set if dragging from one dropzone to another.
46
+ function onChange(sourceId, sourceIndex, targetIndex, targetId) {
47
+ const nextState = swap(items, sourceIndex, targetIndex);
48
+ setItems(nextState);
49
+ }
50
+
51
+ return (
52
+ <GridContextProvider onChange={onChange}>
53
+ <GridDropZone
54
+ id="items"
55
+ boxesPerRow={4}
56
+ rowHeight={100}
57
+ style={{ height: "400px" }}
66
58
  >
67
- {item}
68
- </div>
69
- </GridItem>
70
- ))}
71
- </GridDropZone>
72
- </GridContextProvider>
73
- );
59
+ {items.map((item) => (
60
+ <GridItem key={item}>
61
+ <div
62
+ style={{
63
+ width: "100%",
64
+ height: "100%",
65
+ }}
66
+ >
67
+ {item}
68
+ </div>
69
+ </GridItem>
70
+ ))}
71
+ </GridDropZone>
72
+ </GridContextProvider>
73
+ );
74
74
  }
75
75
  ```
76
76
 
@@ -80,92 +80,96 @@ You can see this example in action on [codesandbox](https://codesandbox.io/embed
80
80
 
81
81
  ```jsx
82
82
  import {
83
- GridContextProvider,
84
- GridDropZone,
85
- GridItem,
86
- swap,
87
- move,
83
+ GridContextProvider,
84
+ GridDropZone,
85
+ GridItem,
86
+ swap,
87
+ move,
88
88
  } from "react-grid-dnd";
89
89
 
90
90
  function App() {
91
- const [items, setItems] = React.useState({
92
- left: [
93
- { id: 1, name: "ben" },
94
- { id: 2, name: "joe" },
95
- { id: 3, name: "jason" },
96
- { id: 4, name: "chris" },
97
- { id: 5, name: "heather" },
98
- { id: 6, name: "Richard" },
99
- ],
100
- right: [
101
- { id: 7, name: "george" },
102
- { id: 8, name: "rupert" },
103
- { id: 9, name: "alice" },
104
- { id: 10, name: "katherine" },
105
- { id: 11, name: "pam" },
106
- { id: 12, name: "katie" },
107
- ],
108
- });
109
-
110
- function onChange(sourceId, sourceIndex, targetIndex, targetId) {
111
- if (targetId) {
112
- const result = move(
113
- items[sourceId],
114
- items[targetId],
115
- sourceIndex,
116
- targetIndex,
117
- );
118
- return setItems({
119
- ...items,
120
- [sourceId]: result[0],
121
- [targetId]: result[1],
122
- });
91
+ const [items, setItems] = React.useState({
92
+ left: [
93
+ { id: 1, name: "ben" },
94
+ { id: 2, name: "joe" },
95
+ { id: 3, name: "jason" },
96
+ { id: 4, name: "chris" },
97
+ { id: 5, name: "heather" },
98
+ { id: 6, name: "Richard" },
99
+ ],
100
+ right: [
101
+ { id: 7, name: "george" },
102
+ { id: 8, name: "rupert" },
103
+ { id: 9, name: "alice" },
104
+ { id: 10, name: "katherine" },
105
+ { id: 11, name: "pam" },
106
+ { id: 12, name: "katie" },
107
+ ],
108
+ });
109
+
110
+ function onChange(sourceId, sourceIndex, targetIndex, targetId) {
111
+ if (targetId) {
112
+ const result = move(
113
+ items[sourceId],
114
+ items[targetId],
115
+ sourceIndex,
116
+ targetIndex,
117
+ );
118
+ return setItems({
119
+ ...items,
120
+ [sourceId]: result[0],
121
+ [targetId]: result[1],
122
+ });
123
+ }
124
+
125
+ const result = swap(
126
+ items[sourceId],
127
+ sourceIndex,
128
+ targetIndex,
129
+ );
130
+ return setItems({
131
+ ...items,
132
+ [sourceId]: result,
133
+ });
123
134
  }
124
135
 
125
- const result = swap(items[sourceId], sourceIndex, targetIndex);
126
- return setItems({
127
- ...items,
128
- [sourceId]: result,
129
- });
130
- }
131
-
132
- return (
133
- <GridContextProvider onChange={onChange}>
134
- <div className="container">
135
- <GridDropZone
136
- className="dropzone left"
137
- id="left"
138
- boxesPerRow={4}
139
- rowHeight={70}
140
- >
141
- {items.left.map((item) => (
142
- <GridItem key={item.name}>
143
- <div className="grid-item">
144
- <div className="grid-item-content">
145
- {item.name[0].toUpperCase()}
146
- </div>
147
- </div>
148
- </GridItem>
149
- ))}
150
- </GridDropZone>
151
- <GridDropZone
152
- className="dropzone right"
153
- id="right"
154
- boxesPerRow={4}
155
- rowHeight={70}
156
- >
157
- {items.right.map((item) => (
158
- <GridItem key={item.name}>
159
- <div className="grid-item">
160
- <div className="grid-item-content">
161
- {item.name[0].toUpperCase()}
162
- </div>
163
- </div>
164
- </GridItem>
165
- ))}
166
- </GridDropZone>
167
- </div>
168
- </GridContextProvider>
169
- );
136
+ return (
137
+ <GridContextProvider onChange={onChange}>
138
+ <div className="container">
139
+ <GridDropZone
140
+ className="dropzone left"
141
+ id="left"
142
+ boxesPerRow={4}
143
+ rowHeight={70}
144
+ >
145
+ {items.left.map((item) => (
146
+ <GridItem key={item.name}>
147
+ <div className="grid-item">
148
+ <div className="grid-item-content">
149
+ {item.name[0].toUpperCase()}
150
+ </div>
151
+ </div>
152
+ </GridItem>
153
+ ))}
154
+ </GridDropZone>
155
+ <GridDropZone
156
+ className="dropzone right"
157
+ id="right"
158
+ boxesPerRow={4}
159
+ rowHeight={70}
160
+ >
161
+ {items.right.map((item) => (
162
+ <GridItem key={item.name}>
163
+ <div className="grid-item">
164
+ <div className="grid-item-content">
165
+ {item.name[0].toUpperCase()}
166
+ </div>
167
+ </div>
168
+ </GridItem>
169
+ ))}
170
+ </GridDropZone>
171
+ </div>
172
+ </GridContextProvider>
173
+ );
170
174
  }
171
175
  ```
package/Readme.md CHANGED
@@ -33,44 +33,44 @@ Because `GridItem` components are rendered with absolute positioning, you need t
33
33
 
34
34
  ```jsx
35
35
  import {
36
- GridContextProvider,
37
- GridDropZone,
38
- GridItem,
39
- swap,
36
+ GridContextProvider,
37
+ GridDropZone,
38
+ GridItem,
39
+ swap,
40
40
  } from "react-grid-dnd";
41
41
 
42
42
  function Example() {
43
- const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state
44
-
45
- // target id will only be set if dragging from one dropzone to another.
46
- function onChange(sourceId, sourceIndex, targetIndex, targetId) {
47
- const nextState = swap(items, sourceIndex, targetIndex);
48
- setItems(nextState);
49
- }
50
-
51
- return (
52
- <GridContextProvider onChange={onChange}>
53
- <GridDropZone
54
- id="items"
55
- boxesPerRow={4}
56
- rowHeight={100}
57
- style={{ height: "400px" }}
58
- >
59
- {items.map((item) => (
60
- <GridItem key={item}>
61
- <div
62
- style={{
63
- width: "100%",
64
- height: "100%",
65
- }}
43
+ const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state
44
+
45
+ // target id will only be set if dragging from one dropzone to another.
46
+ function onChange(sourceId, sourceIndex, targetIndex, targetId) {
47
+ const nextState = swap(items, sourceIndex, targetIndex);
48
+ setItems(nextState);
49
+ }
50
+
51
+ return (
52
+ <GridContextProvider onChange={onChange}>
53
+ <GridDropZone
54
+ id="items"
55
+ boxesPerRow={4}
56
+ rowHeight={100}
57
+ style={{ height: "400px" }}
66
58
  >
67
- {item}
68
- </div>
69
- </GridItem>
70
- ))}
71
- </GridDropZone>
72
- </GridContextProvider>
73
- );
59
+ {items.map((item) => (
60
+ <GridItem key={item}>
61
+ <div
62
+ style={{
63
+ width: "100%",
64
+ height: "100%",
65
+ }}
66
+ >
67
+ {item}
68
+ </div>
69
+ </GridItem>
70
+ ))}
71
+ </GridDropZone>
72
+ </GridContextProvider>
73
+ );
74
74
  }
75
75
  ```
76
76
 
@@ -80,92 +80,96 @@ You can see this example in action on [codesandbox](https://codesandbox.io/embed
80
80
 
81
81
  ```jsx
82
82
  import {
83
- GridContextProvider,
84
- GridDropZone,
85
- GridItem,
86
- swap,
87
- move,
83
+ GridContextProvider,
84
+ GridDropZone,
85
+ GridItem,
86
+ swap,
87
+ move,
88
88
  } from "react-grid-dnd";
89
89
 
90
90
  function App() {
91
- const [items, setItems] = React.useState({
92
- left: [
93
- { id: 1, name: "ben" },
94
- { id: 2, name: "joe" },
95
- { id: 3, name: "jason" },
96
- { id: 4, name: "chris" },
97
- { id: 5, name: "heather" },
98
- { id: 6, name: "Richard" },
99
- ],
100
- right: [
101
- { id: 7, name: "george" },
102
- { id: 8, name: "rupert" },
103
- { id: 9, name: "alice" },
104
- { id: 10, name: "katherine" },
105
- { id: 11, name: "pam" },
106
- { id: 12, name: "katie" },
107
- ],
108
- });
109
-
110
- function onChange(sourceId, sourceIndex, targetIndex, targetId) {
111
- if (targetId) {
112
- const result = move(
113
- items[sourceId],
114
- items[targetId],
115
- sourceIndex,
116
- targetIndex,
117
- );
118
- return setItems({
119
- ...items,
120
- [sourceId]: result[0],
121
- [targetId]: result[1],
122
- });
91
+ const [items, setItems] = React.useState({
92
+ left: [
93
+ { id: 1, name: "ben" },
94
+ { id: 2, name: "joe" },
95
+ { id: 3, name: "jason" },
96
+ { id: 4, name: "chris" },
97
+ { id: 5, name: "heather" },
98
+ { id: 6, name: "Richard" },
99
+ ],
100
+ right: [
101
+ { id: 7, name: "george" },
102
+ { id: 8, name: "rupert" },
103
+ { id: 9, name: "alice" },
104
+ { id: 10, name: "katherine" },
105
+ { id: 11, name: "pam" },
106
+ { id: 12, name: "katie" },
107
+ ],
108
+ });
109
+
110
+ function onChange(sourceId, sourceIndex, targetIndex, targetId) {
111
+ if (targetId) {
112
+ const result = move(
113
+ items[sourceId],
114
+ items[targetId],
115
+ sourceIndex,
116
+ targetIndex,
117
+ );
118
+ return setItems({
119
+ ...items,
120
+ [sourceId]: result[0],
121
+ [targetId]: result[1],
122
+ });
123
+ }
124
+
125
+ const result = swap(
126
+ items[sourceId],
127
+ sourceIndex,
128
+ targetIndex,
129
+ );
130
+ return setItems({
131
+ ...items,
132
+ [sourceId]: result,
133
+ });
123
134
  }
124
135
 
125
- const result = swap(items[sourceId], sourceIndex, targetIndex);
126
- return setItems({
127
- ...items,
128
- [sourceId]: result,
129
- });
130
- }
131
-
132
- return (
133
- <GridContextProvider onChange={onChange}>
134
- <div className="container">
135
- <GridDropZone
136
- className="dropzone left"
137
- id="left"
138
- boxesPerRow={4}
139
- rowHeight={70}
140
- >
141
- {items.left.map((item) => (
142
- <GridItem key={item.name}>
143
- <div className="grid-item">
144
- <div className="grid-item-content">
145
- {item.name[0].toUpperCase()}
146
- </div>
147
- </div>
148
- </GridItem>
149
- ))}
150
- </GridDropZone>
151
- <GridDropZone
152
- className="dropzone right"
153
- id="right"
154
- boxesPerRow={4}
155
- rowHeight={70}
156
- >
157
- {items.right.map((item) => (
158
- <GridItem key={item.name}>
159
- <div className="grid-item">
160
- <div className="grid-item-content">
161
- {item.name[0].toUpperCase()}
162
- </div>
163
- </div>
164
- </GridItem>
165
- ))}
166
- </GridDropZone>
167
- </div>
168
- </GridContextProvider>
169
- );
136
+ return (
137
+ <GridContextProvider onChange={onChange}>
138
+ <div className="container">
139
+ <GridDropZone
140
+ className="dropzone left"
141
+ id="left"
142
+ boxesPerRow={4}
143
+ rowHeight={70}
144
+ >
145
+ {items.left.map((item) => (
146
+ <GridItem key={item.name}>
147
+ <div className="grid-item">
148
+ <div className="grid-item-content">
149
+ {item.name[0].toUpperCase()}
150
+ </div>
151
+ </div>
152
+ </GridItem>
153
+ ))}
154
+ </GridDropZone>
155
+ <GridDropZone
156
+ className="dropzone right"
157
+ id="right"
158
+ boxesPerRow={4}
159
+ rowHeight={70}
160
+ >
161
+ {items.right.map((item) => (
162
+ <GridItem key={item.name}>
163
+ <div className="grid-item">
164
+ <div className="grid-item-content">
165
+ {item.name[0].toUpperCase()}
166
+ </div>
167
+ </div>
168
+ </GridItem>
169
+ ))}
170
+ </GridDropZone>
171
+ </div>
172
+ </GridContextProvider>
173
+ );
170
174
  }
171
175
  ```