react-reorder-list 0.1.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 Sahil Aggawal, <aggarwalsahil2004@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# react-reorder-list
+A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.
+## Features
+- Reorders list of elements using drag and drop.
+- Easy to use
+- Fully Customizable
+- Handles nested lists easily. See [nested list usage](#nested-list-usage)
+## Installation
+To install react-reorder-list
+```bash
+  # with npm:
+  npm install react-reorder-list --save
+
+  # with yarn:
+  yarn add react-reorder-list
+
+  # with pnpm:
+  pnpm add react-reorder-list
+
+  # with bun:
+  bun add react-reorder-list
+```
+## Usage
+`react-reorder-list` default exports `<ReorderList>` component which encapsulates all the list items as its children.
+
+Items in this list can be reordered by simply dragging an item and dropping it in place of another item.
+#### Basic Usage
+An item can be dragged by clicking anywhere inside the item.
+```jsx
+import React from 'react'
+import ReorderList from 'react-reorder-list'
+
+export default function App() {
+    return <ReorderList useOnlyIconToDrag={false}>
+        {[0, 1, 2, 3, 4].map(i=> {
+            {/* Having a unique key is important */}
+            return <div key={i}>{i}</div>
+        })}
+    </ReorderList>
+}
+```
+#### Usage with ReorderIcon
+An item can be dragged only using the `<ReorderIcon>` present inside the item.
+```jsx
+import React from 'react'
+import ReorderList, { ReorderIcon } from 'react-reorder-list'
+
+export default function App() {
+    return <ReorderList>
+        {[0, 1, 2, 3, 4].map(i=> {
+            return <div key={i}>
+                <ReorderIcon />
+                <span>{i}</span>
+            </div>
+        })}
+    </ReorderList>
+}
+```
+#### Nested List Usage
+```jsx
+import React from 'react'
+import ReorderList, { ReorderIcon } from 'react-reorder-list'
+
+export default function App() {
+    return <ReorderList>
+        {[0, 1, 2].map(i => {
+            return <div key={i}>
+                <ReorderIcon />
+                <span>{'Parent' + i}</span>
+                <ReorderList>
+                    {[0, 1, 2].map(j => {
+                        return <div key={j} style={{ paddingLeft: '16px' }}>
+                            <ReorderIcon />
+                            <span>{'Child' + i + j}</span>
+                        </div>
+                    })}
+                </ReorderList>
+            </div>
+        })}
+    </ReorderList>
+}
+```
+## Speech Component API Reference
+Here is the full API for the `<ReorderList>` component, these properties can be set on an instance of ReorderList:
+| Parameter | Type | Required | Default | Description |
+| - | - | - | - | - |
+| `useOnlyIconToDrag` | `Boolean` | No | true | See [usage with ReorderIcon](#usage-with-reordericon) |
+| `selectedItemOpacity` | `Number (0 to 1)` | No | 0.5 | This determines the opacity of the item being dragged, until released. |
+| `onPositionChange` | [`PositionChangeHandler`](#positionchangehandler) | No | - |  |
+| `disable` | `Boolean` | No | false | When set to true, `ReorderList` will work as a plain `div` with no functionality. |
+| `props` | `React.DetailedHTMLProps` | No | - | Props to customize the `<ReorderList>` component. |
+### Types
+#### PositionChangeHandler
+```typescript
+import { ReactNode } from 'react';
+type PositionChangeHandler = (params?: { start?: number, end?: number, oldItems?: ReactNode, newItems?: ReactNode }) => void
+```
+## Author
+[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)

package/dist/icons.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+export declare function PiDotsSixVerticalBold(props: IconProps): React.JSX.Element;

package/dist/icons.js

@@ -0,0 +1,6 @@
+import React from "react";
+export function PiDotsSixVerticalBold(props) {
+    return React.createElement("span", Object.assign({}, props),
+        React.createElement("svg", { viewBox: "0 0 256 256", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
+            React.createElement("path", { d: "M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z" })));
+}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type PositionChangeHandler = (params?: {
+    start?: number;
+    end?: number;
+    oldItems?: ReactNode;
+    newItems?: ReactNode;
+}) => void;
+export type ReorderListProps = {
+    useOnlyIconToDrag?: boolean;
+    selectedItemOpacity?: number;
+    onPositionChange?: PositionChangeHandler;
+    disable?: boolean;
+    props?: Props;
+    children?: ReactNode;
+};
+export type { IconProps } from './icons.js';
+export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, onPositionChange, disable, props, children }: ReorderListProps): React.JSX.Element;
+export declare const ReorderIcon: ({ children, style, ...props }: Props) => React.JSX.Element;

package/dist/index.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Children, cloneElement, isValidElement, useMemo, useState } from 'react';
+import { PiDotsSixVerticalBold } from './icons.js';
+export default function ReorderList({ useOnlyIconToDrag = true, selectedItemOpacity = 0.5, onPositionChange, disable = false, props, children }) {
+    const [start, setStart] = useState(-1);
+    const [selected, setSelected] = useState(-1);
+    const [items, setItems] = useState(children);
+    const [temp, setTemp] = useState([]);
+    return React.createElement("div", Object.assign({}, props), disable ? children : Children.map(items, (child, i) => {
+        if (!isValidElement(child))
+            return child;
+        return React.createElement(ReorderItem, { key: child.key || i, opacity: selected === i ? selectedItemOpacity : 1, useOnlyIconToDrag: useOnlyIconToDrag, onDragStart: event => {
+                event.stopPropagation();
+                setStart(i);
+                setSelected(i);
+                setTemp(items);
+            }, onDragEnter: event => {
+                event.stopPropagation();
+                if (start === -1)
+                    return;
+                setSelected(i);
+                setItems(() => {
+                    const items = temp.filter((_, i) => i !== start);
+                    items.splice(i, 0, temp[start]);
+                    return items;
+                });
+            }, onDragEnd: event => {
+                event.stopPropagation();
+                if (i !== start)
+                    onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end: i, oldItems: temp, newItems: items });
+                setStart(-1);
+                setSelected(-1);
+            } }, child);
+    }));
+}
+function ReorderItem({ useOnlyIconToDrag, opacity, onDragStart, onDragEnter, onDragEnd, children }) {
+    const [draggable, setDraggable] = useState(!useOnlyIconToDrag);
+    const recursiveChildren = useMemo(() => recursiveClone(children), [children]);
+    function recursiveClone(children) {
+        return Children.map(children, child => {
+            if (!isValidElement(child))
+                return child;
+            const childProps = {};
+            if (useOnlyIconToDrag && child.type.name === 'ReorderIcon') {
+                childProps.onPointerEnter = () => setDraggable(true);
+                childProps.onPointerLeave = () => setDraggable(false);
+            }
+            return cloneElement(child, Object.assign({ children: recursiveClone(child.props.children) }, childProps));
+        });
+    }
+    return React.createElement("div", { draggable: draggable, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragEnd: onDragEnd, style: { opacity } }, recursiveChildren);
+}
+export const ReorderIcon = (_a) => {
+    var { children = React.createElement(PiDotsSixVerticalBold, null), style } = _a, props = __rest(_a, ["children", "style"]);
+    return React.createElement("span", Object.assign({ style: Object.assign({ cursor: "grab" }, style) }, props), children);
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "react-reorder-list",
+  "version": "0.1.0",
+  "description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SahilAggarwal2004/react-reorder-list.git"
+  },
+  "keywords": [
+    "react-reorder-list",
+    "react",
+    "reorder",
+    "list",
+    "component",
+    "drag-and-drop",
+    "dnd",
+    "typescript",
+    "jsx",
+    "html"
+  ],
+  "author": "Sahil Aggarwal",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SahilAggarwal2004/react-reorder-list/issues"
+  },
+  "homepage": "https://github.com/SahilAggarwal2004/react-reorder-list#readme",
+  "peerDependencies": {
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48"
+  },
+  "scripts": {
+    "build": "pnpm i && tsc"
+  }
+}