initial commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/react"]
+}

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "globalReturn": true,
+      "jsx": true,
+    },
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+  },
+  "settings": {
+    "react": {
+      "version": "18.2",
+    },
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-unused-vars": ["error", { "ignoreRestSiblings": true }],
+  },
+};

.gitignore

@@ -0,0 +1,12 @@
+# User files
+node_modules/
+.DS_Store
+
+# IntelliJ project files
+.idea
+*.iml
+out
+gen
+
+# VS Code
+.vscode/

CHANGELOG.md

@@ -0,0 +1,18 @@
+## Description
+
+[*] - a breaking change
+
+## 3.0.0
+- [*] update all packages to the latest versions
+- [*] stop using (and uninstall) `prop-types` package
+- switch all files from `js` to `ts`/`tsx` and set better types
+- add `onDragStart` and `onDragEnd` props
+
+## 2.0.0
+
+- [*] move styles out of js (now should be imported explicitly)
+- [*] add `targetPath` to `onChange` (and change signature of the callback)
+- [*] change signature of the `confirmChange` callback for consistency
+- add `depth` param to `renderItem`
+- add `idProp` prop for adjusting `id` prop name
+- add typescript types

LICENSE.md

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) primetwig
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,93 @@
+## Table of Contents
+
+- [Demo](#demo)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Options](#options)
+- [Todo](#todo)
+- [License](#license)
+
+## Demo
+
+[Demo](https://primetwig.github.io/react-nestable/dist/example/)
+
+
+## Installation
+
+```
+npm install -save react-nestable
+```
+
+## Usage
+
+```
+import Nestable from 'react-nestable';
+
+// this usually goes once
+// to the entry point of the whole app
+// (e.g. src/index.js)
+import 'react-nestable/dist/styles/index.css';
+
+// every item must have a unique `id`
+// in order to distinguish elements
+const items = [
+  { id: 0, text: 'Andy' },
+  {
+    id: 1, text: 'Harry',
+    children: [
+      { id: 2, text: 'David' }
+    ]
+  },
+  { id: 3, text: 'Lisa' }
+];
+
+const renderItem = ({ item }) => item.text;
+
+const Example = () => (
+  <Nestable
+    items={items}
+    renderItem={renderItem}
+  />
+);
+```
+
+## Options
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| childrenProp | string | `"children"` | Name of a property for children. |
+| className | string | `undefined` | Extra class name which can be passed to a root element. |
+| collapsed | boolean | `false` | Makes groups collapsed by default. |
+| confirmChange | function | `() => true` | Callback which has a single parameter with keys: `dragItem` - item which is being dragged, `destinationParent` - item where dragItem is about to land (or `null` if moving to root). Let function return `false` if this movement should not happen. |
+| group | string or number | `random string` | Different group names may be passed if you have more than one nestable component on a page and want some extra styles for portal instances. |
+| handler | node | `undefined` | If you pass it, it will get wrapped with drag handlers and you may use it in your render method. |
+| idProp | string | `"id"` | Name of a property for id. |
+| items | array | `[]` | Array of items. Every item must be of shape `{id: @uniq}` to distinguish elements. |
+| maxDepth | number | `10` | Maximum available level of nesting. |
+| onChange | function | `() => {}` | Callback which has a single parameter with keys: `items` - new array after position was changed, `dragItem` - item which has been moved, `targetPath` - array of numbers, those numbers are indices and they make path to a location, to where item has been moved. |
+| onDragEnd | function | `() => {}` | Callback which has no parameters. It is invoked when dragging ends via drop or cancel. |
+| onDragStart | function | `() => {}` | Callback which has a single parameter with keys: `dragItem` - item which has been moved. |
+| renderCollapseIcon | function | `() => <DefaultIcon />` | Function for rendering collapse icon. Has a single parameter with keys: `isCollapsed` - boolean, true if this group has children and is collapsed. |
+| renderItem | function | `({item}) => String(item)` | Function for rendering every item. Has a single parameter with keys: `item` - item from your array, `index` - number, index of the item, `depth` - number, depth of the item, `collapseIcon` - node, icon for items with children (allows you to collapse the group), `handler` - node, which you have passed via the same property, but wrapped with some additional events. |
+| threshold | number | `30` | Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element. |
+
+#### Public methods
+
+| Method | Accepts | Description |
+|--------|---------|-------------|
+| collapse | string or array | `"NONE"` - expand all groups; `"ALL"` - collapse all groups; `[]` - collapse all groups with ids from given array. |
+
+## Todo
+
+- add touch
+- cover with tests
+
+PS: Please, make an issue or create a PR if you need any more functionality.
+
+## License
+
+ISC
+
+Номер звернення: 315269
+Дата звернення: 24-08-2023
+E-mail: primetwig@gmail.com

dist/Icon/Icon.d.ts

@@ -0,0 +1,6 @@
+import React, { PureComponent } from 'react';
+import { IconProps } from '../types';
+declare class Icon extends PureComponent<IconProps> {
+    render(): React.JSX.Element;
+}
+export default Icon;

dist/Icon/index.d.ts

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;

dist/Nestable/Nestable.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react-addons-update" />
+import React, { Component, CSSProperties } from 'react';
+import { NestableProps, NestableState, Item, Collapse } from '../types';
+declare class Nestable extends Component<NestableProps, NestableState> {
+    el: Element | null;
+    elCopyStyles: CSSProperties | null;
+    mouse: {
+        last: {
+            x: number;
+        };
+        shift: {
+            x: number;
+        };
+    };
+    constructor(props: NestableProps);
+    static defaultProps: Partial<NestableProps>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: NestableProps): void;
+    componentWillUnmount(): void;
+    collapse: Collapse;
+    startTrackMouse: () => void;
+    stopTrackMouse: () => void;
+    moveItem({ dragItem, pathFrom, pathTo }: {
+        dragItem: Item;
+        pathFrom: number[];
+        pathTo: number[];
+    }, extraProps?: Partial<NestableState>): void;
+    tryIncreaseDepth(dragItem: Item): void;
+    tryDecreaseDepth(dragItem: Item): void;
+    dragApply(): void;
+    dragRevert(): void;
+    getPathById(id: unknown, items?: Item[]): number[];
+    getItemByPath(path: number[], items?: Item[]): Item;
+    getItemDepth: (item: Item) => number;
+    getSplicePath(path: number[], options?: {
+        numToRemove?: number;
+        itemsToInsert?: Item[];
+        childrenProp?: NestableProps['childrenProp'];
+    }): React.UpdateSpecPath;
+    getRealNextPath(prevPath: number[], nextPath: number[], dragItemSize: number): number[];
+    getItemOptions(): {
+        dragItem: Item;
+        idProp: string;
+        childrenProp: string;
+        renderItem: import("../types").RenderItem;
+        renderCollapseIcon: import("../types").RenderCollapseIcon;
+        handler: React.ReactNode;
+        checkIfCollapsed: (item: Item) => boolean;
+        onDragStart: (e: MouseEvent, item: Item) => void;
+        onMouseEnter: (e: MouseEvent, item: Item) => void;
+        onToggleCollapse: (item: Item, isGetter?: true) => {
+            collapsedItems: unknown[];
+        };
+    };
+    checkIfCollapsed: (item: Item) => boolean;
+    onDragStart: (e: MouseEvent, item: Item) => void;
+    onDragEnd: (e: MouseEvent, isCancel?: boolean) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseEnter: (e: MouseEvent, item: Item) => void;
+    onToggleCollapse: (item: Item, isGetter?: true) => {
+        collapsedItems: unknown[];
+    };
+    onKeyDown: (e: KeyboardEvent) => void;
+    renderDragLayer(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default Nestable;