@abhishekzambare/react-grid-dnd 0.0.2 → 0.0.3

package/README.md

@@ -1,75 +1,171 @@
-# React + TypeScript + Vite
+<div align="center">
+ <img 
+    max-width="300px"
+    alt="A demo showing views being swiped left and right."
+     src="https://raw.githubusercontent.com/bmcmahen/react-dnd-grid/master/demo.gif">
+</div>
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# react-grid-dnd
 
-Currently, two official plugins are available:
+[![npm package](https://img.shields.io/npm/v/react-dnd-grid/latest.svg)](https://www.npmjs.com/package/react-dnd-grid)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+Grid style drag and drop, built with React. See a live example on [codesandbox](https://codesandbox.io/embed/gracious-wozniak-kj9w8). You can also see it in action [here](https://react-gesture-responder.netlify.com/).
 
-## React Compiler
+## Features
 
-The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+- **Supports dragging between arbitrary number of lists**.
+- **Built with [react-gesture-responder](https://github.com/bmcmahen/react-gesture-responder) to enable better control over gesture delegation.**
+- **Disable drop targets or dragging altogether**
+- **Animated with react-spring**
 
-Note: This will impact Vite dev & build performances.
+## Install
 
-## Expanding the ESLint configuration
+Install `react-grid-dnd` and `react-gesture-responder` using yarn or npm.
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```
+yarn add react-grid-dnd react-gesture-responder
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## Usage
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Because `GridItem` components are rendered with absolute positioning, you need to ensure that `GridDropZone` has a specified height or flex, like in the example below.
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```jsx
+import {
+  GridContextProvider,
+  GridDropZone,
+  GridItem,
+  swap,
+} from "react-grid-dnd";
+
+function Example() {
+  const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state
+
+  // target id will only be set if dragging from one dropzone to another.
+  function onChange(sourceId, sourceIndex, targetIndex, targetId) {
+    const nextState = swap(items, sourceIndex, targetIndex);
+    setItems(nextState);
+  }
+
+  return (
+    <GridContextProvider onChange={onChange}>
+      <GridDropZone
+        id="items"
+        boxesPerRow={4}
+        rowHeight={100}
+        style={{ height: "400px" }}
+      >
+        {items.map((item) => (
+          <GridItem key={item}>
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            >
+              {item}
+            </div>
+          </GridItem>
+        ))}
+      </GridDropZone>
+    </GridContextProvider>
+  );
+}
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
+## Dragging between lists
+
+You can see this example in action on [codesandbox](https://codesandbox.io/embed/gracious-wozniak-kj9w8).
+
+```jsx
+import {
+  GridContextProvider,
+  GridDropZone,
+  GridItem,
+  swap,
+  move,
+} from "react-grid-dnd";
+
+function App() {
+  const [items, setItems] = React.useState({
+    left: [
+      { id: 1, name: "ben" },
+      { id: 2, name: "joe" },
+      { id: 3, name: "jason" },
+      { id: 4, name: "chris" },
+      { id: 5, name: "heather" },
+      { id: 6, name: "Richard" },
+    ],
+    right: [
+      { id: 7, name: "george" },
+      { id: 8, name: "rupert" },
+      { id: 9, name: "alice" },
+      { id: 10, name: "katherine" },
+      { id: 11, name: "pam" },
+      { id: 12, name: "katie" },
     ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+  });
+
+  function onChange(sourceId, sourceIndex, targetIndex, targetId) {
+    if (targetId) {
+      const result = move(
+        items[sourceId],
+        items[targetId],
+        sourceIndex,
+        targetIndex,
+      );
+      return setItems({
+        ...items,
+        [sourceId]: result[0],
+        [targetId]: result[1],
+      });
+    }
+
+    const result = swap(items[sourceId], sourceIndex, targetIndex);
+    return setItems({
+      ...items,
+      [sourceId]: result,
+    });
+  }
+
+  return (
+    <GridContextProvider onChange={onChange}>
+      <div className="container">
+        <GridDropZone
+          className="dropzone left"
+          id="left"
+          boxesPerRow={4}
+          rowHeight={70}
+        >
+          {items.left.map((item) => (
+            <GridItem key={item.name}>
+              <div className="grid-item">
+                <div className="grid-item-content">
+                  {item.name[0].toUpperCase()}
+                </div>
+              </div>
+            </GridItem>
+          ))}
+        </GridDropZone>
+        <GridDropZone
+          className="dropzone right"
+          id="right"
+          boxesPerRow={4}
+          rowHeight={70}
+        >
+          {items.right.map((item) => (
+            <GridItem key={item.name}>
+              <div className="grid-item">
+                <div className="grid-item-content">
+                  {item.name[0].toUpperCase()}
+                </div>
+              </div>
+            </GridItem>
+          ))}
+        </GridDropZone>
+      </div>
+    </GridContextProvider>
+  );
+}
 ```

package/package.json

@@ -15,15 +15,13 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/react-grid-dnd.umd.cjs",
   "module": "./dist/react-grid-dnd.js",
   "exports": {
     ".": {
-      "import": "./dist/react-grid-dnd.js",
-      "require": "./dist/react-grid-dnd.umd.cjs"
+      "import": "./dist/react-grid-dnd.js"
     }
   },
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://github.com/Macintosh98/react-grid-dnd",
   "bugs": {
     "url": "https://github.com/Macintosh98/react-grid-dnd/issues"