@dashadmin/react-18-beautiful-dnd-grid 1.3.31

package/README.md

@@ -0,0 +1,38 @@
+# react-beautiful-dnd-grid
+
+🚨 Beware: this package is not production-ready. Feel free to file a PR. 🚨
+
+## Installation
+
+```
+npm i -S react-beautiful-dnd-grid
+```
+
+## Demo
+
+https://stackblitz.com/edit/react-beautiful-dnd-grid-demo
+
+![Demo gif](./doc/demo.gif)
+
+## Usage
+
+```javascript
+import React from "react";
+import { ListManager } from "react-beautiful-dnd-grid";
+
+const noop = function() {};
+
+const list = [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];
+
+const ListElement = props => <div>id: {props.item.id}</div>;
+
+const Component = () => (
+  <ListManager
+    items={list}
+    direction="horizontal"
+    maxItems={3}
+    render={item => <ListElement item={item} />}
+    onDragEnd={noop}
+  />
+);
+```

package/package.json

@@ -0,0 +1,80 @@
+{
+	"name": "@dashadmin/react-18-beautiful-dnd-grid",
+	"version": "1.3.31",
+	"description": "Grid management for react-beautiful-dnd",
+	"main": "src/index.ts",
+	"module": "src/index.ts",
+	"types": "src/index.ts",
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"import": "./src/index.ts",
+			"require": "./src/index.ts"
+		}
+	},
+	"type": "module",
+	"files": [
+		"lib",
+		"src"
+	],
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	},
+	"scripts": {
+		"tsc": "tsc -p tsconfig.json",
+		"test": "jest --watch --config jest.config.json",
+		"format": "prettier --write 'src/**/*.{ts,tsx}'",
+		"build": "echo 'Skipping build for react-18-beautiful-dnd-grid'",
+		"_build": "rm -rf lib && mkdir lib && tsc -p tsconfig.build.json --noEmitOnError false",
+		"test:pack": "npm run build && npm pack",
+		"test:demo": "npm run build && rm -rf demo/src/lib && cp -r lib demo/src/lib",
+		"prepublishOnly": "npm run build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/mathieueveillard/react-beautiful-dnd-grid.git"
+	},
+	"keywords": [
+		"react",
+		"dnd",
+		"grid",
+		"component"
+	],
+	"author": "Mathieu Eveillard",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/mathieueveillard/react-beautiful-dnd-grid/issues"
+	},
+	"homepage": "https://github.com/mathieueveillard/react-beautiful-dnd-grid#readme",
+	"devDependencies": {
+		"@types/enzyme": "^3.10.3",
+		"@types/enzyme-adapter-react-16": "^1.0.5",
+		"@types/jest": "^24.0.18",
+		"@types/node": "^12.7.7",
+		"@types/react": "^16.9.3",
+		"@types/uuid": "^3.4.5",
+		"@dashadmin/dash-tsconfig": "workspace:*",
+		"enzyme": "^3.10.0",
+		"enzyme-adapter-react-16": "^1.14.0",
+		"jest": "^24.9.0",
+		"jsdom": "^15.1.1",
+		"prettier": "^1.18.2",
+		"react-dom": "^16.9.0",
+		"ts-jest": "^24.1.0",
+		"typescript": "^3.6.3"
+	},
+	"dependencies": {
+		"@hello-pangea/dnd": "^18.0.1",
+		"@react-dnd/asap": "^5.0.2",
+		"nanoid": "^5.0.8",
+		"react": "latest"
+	},
+	"eslintConfig": {
+		"extends": "react-app"
+	},
+	"prettier": {
+		"printWidth": 120
+	}
+}

package/src/DragAndDropWrapper/DragAndDropWrapper.tsx

@@ -0,0 +1,79 @@
+import React, { ReactElement } from "react";
+import { DragDropContext, Droppable, DroppableProvided, DroppableStateSnapshot, DropResult } from "@hello-pangea/dnd";
+import { ListManagerItem } from "./ListManagerItem";
+import { generateId, hashAny } from "../ListManager";
+
+interface Location {
+  id: string;
+  index: number;
+}
+
+export interface DragAndDropResult {
+  source: Location;
+  destination: Location;
+}
+
+export interface Chunk {
+  id: string;
+  items: any[];
+}
+
+export interface Props {
+  chunks: Chunk[];
+  direction: "horizontal" | "vertical";
+  render(item: any): ReactElement<{}>;
+  onDragEnd(result: DragAndDropResult): void;
+}
+
+const horizontalStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "flex-start"
+};
+{/* @ts-ignore */ }
+export const DragAndDropWrapper: React.StatelessComponent<Props> = ({
+  onDragEnd,
+  chunks,
+  direction,
+  render
+}: Props) => {
+  return (
+    <DragDropContext onDragEnd={mapAndInvoke(onDragEnd)}>
+      {chunks.map(({ id: droppableId, items }: Chunk) => (
+        <Droppable key={droppableId} droppableId={droppableId} direction={direction}>
+          {(provided: DroppableProvided, _: DroppableStateSnapshot) => (
+            <div
+              ref={provided.innerRef}
+              style={direction === "horizontal" ? horizontalStyle : undefined}
+              {...provided.droppableProps}
+            >
+              {items.map((item: any, index: number) => (
+
+                <ListManagerItem key={hashAny(item)} item={item} index={index} render={render} />
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      ))}
+    </DragDropContext>
+  );
+};
+
+function mapAndInvoke(onDragEnd: (result: DragAndDropResult) => void) {
+  return function({ source, destination }: DropResult): void {
+    if (destination !== undefined && destination !== null) {
+      const result: DragAndDropResult = {
+        source: {
+          id: source.droppableId,
+          index: source.index
+        },
+        destination: {
+          id: destination.droppableId,
+          index: destination.index
+        }
+      };
+      onDragEnd(result);
+    }
+  };
+}

package/src/DragAndDropWrapper/ListManagerItem.spec.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { shallow, ShallowWrapper } from "enzyme";
+import { ListManagerItem } from "./ListManagerItem";
+import { Draggable } from "@hello-pangea/dnd";
+
+describe("<ListManagerItem />", () => {
+  const item = "item";
+  const index: number = 0;
+  const render = () => <div />;
+
+  it("should render without crashing", () => {
+    shallow(<ListManagerItem item={item} index={index} render={render} />);
+  });
+
+  it("should render a <Draggable /> element", () => {
+    const wrapper: ShallowWrapper = shallow(<ListManagerItem item={item} index={index} render={render} />);
+    expect(wrapper.findWhere(n => n.type() === Draggable).length).toEqual(1);
+  });
+});

package/src/DragAndDropWrapper/ListManagerItem.tsx

@@ -0,0 +1,24 @@
+import React, { ReactElement } from "react";
+import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { generateId, hashAny } from "../ListManager";
+
+
+export interface ListManagerItemProps {
+  item: any;
+  index: number;
+  render(item: any): ReactElement<{}>;
+}
+{/* @ts-ignore */}
+export const ListManagerItem: React.StatelessComponent<ListManagerItemProps> = ({
+  item,
+  index,
+  render
+}: ListManagerItemProps) => (
+  <Draggable draggableId={hashAny(item)} index={index}>
+    {(provided: DraggableProvided, _: DraggableStateSnapshot) => (
+      <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+        {render(item)}
+      </div>
+    )}
+  </Draggable>
+);

package/src/ListManager.spec.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { shallow, mount, ReactWrapper } from "enzyme";
+import { ListManager } from "./ListManager";
+import { ListManagerItem } from "./DragAndDropWrapper/ListManagerItem";
+
+describe("<ListManager />", () => {
+  const item0 = {
+    id: "id0"
+  };
+  const item1 = {
+    id: "id1"
+  };
+  const item2 = {
+    id: "id2"
+  };
+  const item3 = {
+    id: "id3"
+  };
+  const items = [item0, item1, item2];
+
+  const render = () => <div className="render-props-class" />;
+
+  const onDragEnd = jest.fn();
+
+  it("should render without crashing", () => {
+    shallow(<ListManager items={items} direction="vertical" maxItems={3} render={render} onDragEnd={onDragEnd} />);
+  });
+
+  it("should render a list of <ListManagerItem /> and react to props", () => {
+    const wrapper: ReactWrapper = mount(
+      <ListManager items={items} direction="vertical" maxItems={3} render={render} onDragEnd={onDragEnd} />
+    );
+    expect(wrapper.findWhere(n => n.type() === ListManagerItem).length).toEqual(items.length);
+    wrapper.setProps({ items: [...items, item3] });
+    expect(wrapper.findWhere(n => n.type() === ListManagerItem).length).toEqual(items.length + 1);
+  });
+
+  it("should render the render props", () => {
+    const wrapper: ReactWrapper = mount(
+      <ListManager items={items} direction="vertical" maxItems={3} render={render} onDragEnd={onDragEnd} />
+    );
+    expect(wrapper.exists(".render-props-class")).toEqual(true);
+  });
+});

package/src/ListManager.tsx

@@ -0,0 +1,31 @@
+import { DragAndDropWrapper } from "./DragAndDropWrapper/DragAndDropWrapper";
+import { withMaxItems } from "./withMaxItems/withMaxItems";
+import { withReactToItemsChange } from "./withReactToItemsChange/withReactToItemsChange";
+//import { nanoid } from 'nanoid/non-secure'
+
+export function hashAny(input: any): string {
+    const str = typeof input === 'string' 
+      ? input 
+      : JSON.stringify(input);
+      
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36);
+  }
+
+export const generateId = (() => {
+    let counter = 0;
+    return (prefix = 'grid-item-') => {
+      counter += 1;
+      return `${hashAny(prefix.toString() || Date.now())}${counter}`;
+    };
+  })();
+
+const ComponentWithMaxItems = withMaxItems(DragAndDropWrapper, generateId);
+const ComponentWithReactToItemsChange = withReactToItemsChange(ComponentWithMaxItems);
+
+export const ListManager = ComponentWithReactToItemsChange;

package/src/index.ts

@@ -0,0 +1 @@
+export { ListManager } from "./ListManager";

package/src/setupTests.ts

@@ -0,0 +1,31 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new Adapter() });
+
+const { JSDOM } = require("jsdom");
+
+const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
+const { window } = jsdom;
+
+function copyProps(src, target) {
+  Object.defineProperties(target, {
+    ...Object.getOwnPropertyDescriptors(src),
+    ...Object.getOwnPropertyDescriptors(target)
+  });
+}
+
+global["window"] = window;
+global["document"] = window.document;
+global["navigator"] = {
+  userAgent: "node.js"
+};
+global["requestAnimationFrame"] = function(callback) {
+  return setTimeout(callback, 0);
+};
+global["cancelAnimationFrame"] = function(id) {
+  clearTimeout(id);
+};
+copyProps(window, global);
+
+export default undefined;

package/src/util/omit/index.ts

@@ -0,0 +1 @@
+export type Omit<P, O> = Pick<P, Exclude<keyof P, keyof O>>;

package/src/withMaxItems/compute/computeOriginalIndex.spec.ts

@@ -0,0 +1,141 @@
+import { computeOriginalIndex, computeOriginalIndexAfterDrop } from "./computeOriginalIndex";
+
+describe("computeOriginalIndex", () => {
+  it("should compute the index of an item in the original array of items", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const chunkIndex: number = 0;
+    const indexInChunk: number = 0;
+
+    // WHEN
+    const actual: number = computeOriginalIndex(maxItems, chunkIndex, indexInChunk);
+
+    // THEN
+    const expected: number = 0;
+    expect(actual).toEqual(expected);
+  });
+
+  it("should compute the index of an item in the original array of items", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const chunkIndex: number = 0;
+    const indexInChunk: number = 3;
+
+    // WHEN
+    const actual: number = computeOriginalIndex(maxItems, chunkIndex, indexInChunk);
+
+    // THEN
+    const expected: number = 3;
+    expect(actual).toEqual(expected);
+  });
+
+  it("should compute the index of an item in the original array of items", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const chunkIndex: number = 1;
+    const indexInChunk: number = 0;
+
+    // WHEN
+    const actual: number = computeOriginalIndex(maxItems, chunkIndex, indexInChunk);
+
+    // THEN
+    const expected: number = 4;
+    expect(actual).toEqual(expected);
+  });
+
+  it("should compute the index of an item in the original array of items", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const chunkIndex: number = 1;
+    const indexInChunk: number = 1;
+
+    // WHEN
+    const actual: number = computeOriginalIndex(maxItems, chunkIndex, indexInChunk);
+
+    // THEN
+    const expected: number = 5;
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe("computeOriginalIndexAfterDrop", () => {
+  it("should compute the index of an item in the original array of items after drop", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const sourceChunkIndex: number = 0;
+    const destinationChunkIndex: number = 0;
+    const indexInChunk: number = 1;
+
+    // WHEN
+    const actual: number = computeOriginalIndexAfterDrop(
+      maxItems,
+      sourceChunkIndex,
+      destinationChunkIndex,
+      indexInChunk
+    );
+
+    // THEN
+    const expected: number = 1;
+    expect(actual).toEqual(expected);
+  });
+
+  it("should compute the index of an item in the original array of items after drop", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const sourceChunkIndex: number = 1;
+    const destinationChunkIndex: number = 0;
+    const indexInChunk: number = 1;
+
+    // WHEN
+    const actual: number = computeOriginalIndexAfterDrop(
+      maxItems,
+      sourceChunkIndex,
+      destinationChunkIndex,
+      indexInChunk
+    );
+
+    // THEN
+    const expected: number = 1;
+    expect(actual).toEqual(expected);
+  });
+
+  it("should compute the index of an item in the original array of items after drop", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const sourceChunkIndex: number = 0;
+    const destinationChunkIndex: number = 1;
+    const indexInChunk: number = 0;
+
+    // WHEN
+    const actual: number = computeOriginalIndexAfterDrop(
+      maxItems,
+      sourceChunkIndex,
+      destinationChunkIndex,
+      indexInChunk
+    );
+
+    // THEN
+    const expected: number = 3;
+    expect(actual).toEqual(expected);
+  });
+
+  it("should compute the index of an item in the original array of items after drop", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const sourceChunkIndex: number = 0;
+    const destinationChunkIndex: number = 1;
+    const indexInChunk: number = 1;
+
+    // WHEN
+    const actual: number = computeOriginalIndexAfterDrop(
+      maxItems,
+      sourceChunkIndex,
+      destinationChunkIndex,
+      indexInChunk
+    );
+
+    // THEN
+    const expected: number = 4;
+    expect(actual).toEqual(expected);
+  });
+});

package/src/withMaxItems/compute/computeOriginalIndex.ts

@@ -0,0 +1,12 @@
+export function computeOriginalIndex(maxItems: number, chunkIndex: number, indexInChunk: number): number {
+  return chunkIndex * maxItems + indexInChunk;
+}
+
+export function computeOriginalIndexAfterDrop(
+  maxItems: number,
+  sourceChunkIndex: number,
+  destinationChunkIndex: number,
+  indexInChunk: number
+): number {
+  return destinationChunkIndex * maxItems + indexInChunk + (sourceChunkIndex < destinationChunkIndex ? -1 : 0);
+}

package/src/withMaxItems/compute/index.ts

@@ -0,0 +1,2 @@
+export { splitItems } from "./splitItems";
+export { computeOriginalIndex, computeOriginalIndexAfterDrop } from "./computeOriginalIndex";

package/src/withMaxItems/compute/splitItems.spec.ts

@@ -0,0 +1,68 @@
+import { splitItems } from "./splitItems";
+import { Chunk } from "../withMaxItems";
+
+describe("splitItems", () => {
+  it("should split items according to maxItems (less items than maxItems)", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const items = [{ id: "0" }, { id: "1" }, { id: "2" }];
+    const createId: () => string = jest.fn().mockReturnValue("id");
+
+    // WHEN
+    const actual: Chunk[] = splitItems(maxItems, items, createId);
+
+    // THEN
+    const expected: Chunk[] = [
+      {
+        id: "id",
+        items: [{ id: "0" }, { id: "1" }, { id: "2" }]
+      }
+    ];
+    expect(actual).toEqual(expected);
+  });
+
+  it("should split items according to maxItems (as many items as maxItems)", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const items = [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }];
+    const createId: () => string = jest.fn().mockReturnValue("id");
+
+    // WHEN
+    const actual: Chunk[] = splitItems(maxItems, items, createId);
+
+    // THEN
+    const expected: Chunk[] = [
+      {
+        id: "id",
+        items: [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }]
+      }
+    ];
+    expect(actual).toEqual(expected);
+  });
+
+  it("should split items according to maxItems (more items than maxItems)", () => {
+    // GIVEN
+    const maxItems: number = 4;
+    const items = [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];
+    const createId: () => string = jest
+      .fn()
+      .mockReturnValueOnce("id0")
+      .mockReturnValueOnce("id1");
+
+    // WHEN
+    const actual: Chunk[] = splitItems(maxItems, items, createId);
+
+    // THEN
+    const expected: Chunk[] = [
+      {
+        id: "id0",
+        items: [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }]
+      },
+      {
+        id: "id1",
+        items: [{ id: "4" }]
+      }
+    ];
+    expect(actual).toEqual(expected);
+  });
+});

package/src/withMaxItems/compute/splitItems.ts

@@ -0,0 +1,21 @@
+import { Chunk } from "../withMaxItems";
+
+export function splitItems(maxItems: number, items: any[], createId: () => string): Chunk[] {
+  const slicedItems: any[][] = sliceIntoItems(maxItems, items);
+  return slicedItems.map(mapToChunk(createId));
+}
+
+function sliceIntoItems(maxItems: number, items: any[]): any[][] {
+  const numberOfSlices: number = Math.ceil(items.length / maxItems);
+  const sliceIndexes: number[] = Array.apply(null, Array(numberOfSlices)).map((_, index: number) => index);
+  return sliceIndexes.map((index: number) => items.slice(index * maxItems, index * maxItems + maxItems));
+}
+
+function mapToChunk(createId: () => string) {
+  return function(items: any[]): Chunk {
+    return {
+      id: createId(),
+      items
+    };
+  };
+}

package/src/withMaxItems/withMaxItems.spec.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Props, withMaxItems, WithMaxItemsProps, DragAndDropResult } from "./withMaxItems";
+import { mount, ReactWrapper } from "enzyme";
+
+describe("withMaxItems", () => {
+  it("Should split items in chunks according to the maxItems props", () => {
+    // GIVEN
+    const items = [
+      {
+        id: "id0"
+      },
+      {
+        id: "id1"
+      },
+      {
+        id: "id2"
+      }
+    ];
+    const dragAndDropResult: DragAndDropResult = {
+      source: {
+        id: "id1",
+        index: 0
+      },
+      destination: {
+        id: "id0",
+        index: 0
+      }
+    };
+    const Component: React.StatelessComponent<Props> = ({ onDragEnd }: Props) => (
+      <div onClick={() => onDragEnd(dragAndDropResult)} />
+    );
+    const createId = jest
+      .fn()
+      .mockReturnValueOnce("id0")
+      .mockReturnValueOnce("id1");
+    const props: WithMaxItemsProps = {
+      items,
+      maxItems: 2,
+      onDragEnd: jest.fn()
+    };
+    const ComponentWithMaxItems = withMaxItems(Component, createId);
+
+    // WHEN
+    const wrapper: ReactWrapper = mount(<ComponentWithMaxItems {...props} />);
+    wrapper.simulate("click");
+
+    // THEN
+    expect(props.onDragEnd).toHaveBeenCalledWith(2, 0);
+  });
+});

package/src/withMaxItems/withMaxItems.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Omit } from "../util/omit";
+import { splitItems, computeOriginalIndex, computeOriginalIndexAfterDrop } from "./compute";
+
+interface Location {
+  id: string;
+  index: number;
+}
+
+export interface DragAndDropResult {
+  source: Location;
+  destination: Location;
+}
+
+export interface Chunk {
+  id: string;
+  items: any[];
+}
+
+export interface Props {
+  chunks: Chunk[];
+  onDragEnd(result: DragAndDropResult): void;
+}
+
+export interface WithMaxItemsProps {
+  items: any[];
+  maxItems?: number;
+  onDragEnd(sourceIndex: number, destinationIndex: number): void;
+}
+
+interface WithMaxItemsState {
+  maxItems: number;
+  items: any[];
+  chunks: Chunk[];
+}
+
+export const withMaxItems = <T, P extends Props>(
+  Component: React.FC<P>,
+  createId: () => string
+): React.FC<Omit<P, Props> & WithMaxItemsProps> => {
+  const ComponentWithMaxItems: React.FC<Omit<P, Props> & WithMaxItemsProps> = (props) => {
+    const [state, setState] = React.useState<WithMaxItemsState>(() => {
+      const maxItems: number = props.maxItems && props.maxItems > 0 ? props.maxItems : props.items.length;
+      return {
+        maxItems,
+        items: props.items,
+        chunks: splitItems(maxItems, props.items, createId)
+      };
+    });
+
+    const findChunkIndex = (id: string): number => {
+      return state.chunks.findIndex((chunk: Chunk) => chunk.id === id);
+    };
+
+    const onDragEnd = ({ source, destination }: DragAndDropResult): void => {
+      if (destination) {
+        const { index: indexInSourceChunk, id: sourceChunkId } = source;
+        const { index: indexInDestinationChunk, id: destinationChunkId } = destination;
+        const sourceChunkIndex: number = findChunkIndex(sourceChunkId);
+        const destinationChunkIndex: number = findChunkIndex(destinationChunkId);
+        const sourceIndex: number = computeOriginalIndex(state.maxItems, sourceChunkIndex, indexInSourceChunk);
+        const destinationIndex: number = computeOriginalIndexAfterDrop(
+          state.maxItems,
+          sourceChunkIndex,
+          destinationChunkIndex,
+          indexInDestinationChunk
+        );
+        props.onDragEnd(sourceIndex, destinationIndex);
+      }
+    };
+
+    const { items, maxItems, onDragEnd: _, ...rest } = props;
+    return <Component {...{ chunks: state.chunks, onDragEnd }} {...((rest as unknown) as P)} />;
+  };
+  return ComponentWithMaxItems;
+};

package/src/withReactToItemsChange/withReactToItemsChange.spec.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Props, withReactToItemsChange } from "./withReactToItemsChange";
+import { mount, ReactWrapper } from "enzyme";
+
+describe("withReactToItemsChange", () => {
+  it("Should react to any change in items propided as props", () => {
+    // GIVEN
+    const items = [
+      {
+        id: "id0",
+        order: 0
+      },
+      {
+        id: "id1",
+        order: 1
+      },
+      {
+        id: "id2",
+        order: 2
+      }
+    ];
+    const callMeWhenComponentDidMount = jest.fn();
+    class Component extends React.Component<Props, {}> {
+      componentDidMount() {
+        callMeWhenComponentDidMount();
+      }
+      render() {
+        return <div />;
+      }
+    }
+    const props: Props = {
+      items
+    };
+    const ComponentWithReactToItemsChange = withReactToItemsChange(Component);
+
+    // WHEN
+    const wrapper: ReactWrapper = mount(<ComponentWithReactToItemsChange {...props} />);
+    items[1].order = -1;
+    wrapper.setProps({ items });
+
+    // THEN
+    expect(callMeWhenComponentDidMount).toHaveBeenCalledTimes(2);
+  });
+});

package/src/withReactToItemsChange/withReactToItemsChange.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { generateId, hashAny } from "../ListManager";
+
+export interface Props {
+  items: any[];
+}
+
+export const withReactToItemsChange = <P extends Props>(Component: React.FC<P>): React.FC<P> => (
+  props: P
+) => <Component key={hashAny(props.items)} {...props} />;