Merge pull request #17 from jagaapple/release/v0.1.1

# Changes and Fixes
- Fix priority of dragging cursor style #16

Author: jagaapple

CHANGELOG.md

@@ -1,3 +1,6 @@
 # Changelog
+## 0.1.1 (2020-03-21)
+- Fix priority of dragging cursor style #16 [@jagaapple](https://github.com/jagaapple)
+
 ## 0.1.0 (2020-03-21)
 - Initial public release - [@jagaapple](https://github.com/jagaapple)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sortful",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Sortable components for horizontal and vertical, nested, and tree forms.",
   "keywords": [
     "React",

package.json

@@ -3,27 +3,65 @@ import * as sinon from "sinon";
 import { clearBodyStyle, setBodyStyle } from "./body";
 
 describe("setBodyStyle", () => {
+  let dummyDocumentElement: Document;
+  let dummyElement: HTMLElement;
+  let elementCreatorMock: sinon.SinonStub<Parameters<Document["createElement"]>, ReturnType<Document["createElement"]>>;
+  let elementAttributeSetterSpy: sinon.SinonSpy<Parameters<Element["setAttribute"]>, ReturnType<Element["setAttribute"]>>;
+  let childAppenderSpy: sinon.SinonSpy<Parameters<Node["appendChild"]>, ReturnType<Node["appendChild"]>>;
+
+  beforeEach(() => {
+    elementAttributeSetterSpy = sinon.spy() as any;
+    dummyElement = { setAttribute: elementAttributeSetterSpy, textContent: "" } as any;
+
+    elementCreatorMock = sinon.mock().returns(dummyElement) as any;
+    childAppenderSpy = sinon.spy() as any;
+    dummyDocumentElement = { createElement: elementCreatorMock, head: { appendChild: childAppenderSpy } } as any;
+  });
+  afterEach(() => {
+    sinon.restore();
+  });
+
   it('should set `style.userSelect` to "none"', () => {
     const bodyElement = { style: {} } as HTMLElement;
 
-    setBodyStyle(bodyElement, undefined);
+    setBodyStyle(bodyElement, undefined, dummyDocumentElement);
     expect(bodyElement.style.userSelect).toBe("none");
   });
 
+  context("when `draggingCusrsorStyle` is undefined", () => {
+    it("should not call `document.createElement`", () => {
+      const bodyElement = { style: {} } as HTMLElement;
+
+      setBodyStyle(bodyElement, undefined, dummyDocumentElement);
+      expect(elementCreatorMock.called).toBe(false);
+    });
+
+    it("should not call `document.head.appendChild`", () => {
+      const bodyElement = { style: {} } as HTMLElement;
+
+      setBodyStyle(bodyElement, undefined, dummyDocumentElement);
+      expect(childAppenderSpy.called).toBe(false);
+    });
+  });
+
   context("when `draggingCusrsorStyle` is not undefined", () => {
+    const draggingCusrsorStyle = "dummy";
+
     it('should set `style.userSelect` to "none"', () => {
       const bodyElement = { style: {} } as HTMLElement;
 
-      setBodyStyle(bodyElement, undefined);
+      setBodyStyle(bodyElement, draggingCusrsorStyle, dummyDocumentElement);
       expect(bodyElement.style.userSelect).toBe("none");
     });
 
-    it("should set `style.cursor` to the string", () => {
+    it("should create a style element, set attributes, and append to a document element", () => {
       const bodyElement = { style: {} } as HTMLElement;
-      const draggingCusrsorStyle = "dummy";
 
-      setBodyStyle(bodyElement, draggingCusrsorStyle);
-      expect(bodyElement.style.cursor).toBe(draggingCusrsorStyle);
+      setBodyStyle(bodyElement, draggingCusrsorStyle, dummyDocumentElement);
+      expect(elementCreatorMock.calledOnceWith("style")).toBe(true);
+      expect(dummyElement.textContent).toBe(`* { cursor: ${draggingCusrsorStyle} !important; }`);
+      expect(elementAttributeSetterSpy.calledOnceWith("id", "react-sortful-global-style")).toBe(true);
+      expect(childAppenderSpy.calledOnceWith(dummyElement)).toBe(true);
     });
   });
 });
@@ -34,24 +72,46 @@ describe("clearBodyStyle", () => {
     Parameters<CSSStyleDeclaration["removeProperty"]>,
     ReturnType<CSSStyleDeclaration["removeProperty"]>
   >;
+  let dummyDocumentElement: Document;
+  let dummyElement: HTMLElement;
+  let elementGetterMock: sinon.SinonStub<Parameters<Document["getElementById"]>, ReturnType<Document["getElementById"]>>;
+  let elementRemoverSpy: sinon.SinonSpy<Parameters<Element["remove"]>, ReturnType<Element["remove"]>>;
 
-  beforeAll(() => {
+  beforeEach(() => {
     propertyRemoverSpy = sinon.spy() as any;
     bodyElement = { style: { removeProperty: propertyRemoverSpy } } as any;
+
+    elementRemoverSpy = sinon.spy() as any;
+    dummyElement = { remove: elementRemoverSpy } as any;
+
+    elementGetterMock = sinon.mock().returns(dummyElement) as any;
+    dummyDocumentElement = { getElementById: elementGetterMock } as any;
   });
   afterEach(() => {
     sinon.restore();
   });
 
   it('should call `style.removeProperty` with "user-select" of `bodyElement`', () => {
-    clearBodyStyle(bodyElement);
+    clearBodyStyle(bodyElement, dummyDocumentElement);
 
     expect(propertyRemoverSpy.calledWith("user-select")).toBe(true);
   });
 
-  it('should call `style.removeProperty` with "cursor" of `bodyElement`', () => {
-    clearBodyStyle(bodyElement);
+  it("should remove a style element created by react-sortful", () => {
+    clearBodyStyle(bodyElement, dummyDocumentElement);
+
+    expect(elementGetterMock.calledOnceWith("react-sortful-global-style")).toBe(true);
+    expect(elementRemoverSpy.calledOnce).toBe(true);
+  });
+
+  context("when `documentElement.getElementById` returns null", () => {
+    beforeEach(() => {
+      elementGetterMock = sinon.mock().returns(null) as any;
+      dummyDocumentElement = { getElementById: elementGetterMock } as any;
+    });
 
-    expect(propertyRemoverSpy.calledWith("cursor")).toBe(true);
+    it("should not raise any errors", () => {
+      expect(() => clearBodyStyle(bodyElement, dummyDocumentElement)).not.toThrowError();
+    });
   });
 });

src/item/body.spec.ts

@@ -1,15 +1,32 @@
-export const setBodyStyle = (bodyElement: HTMLElement, draggingCusrsorStyle: string | undefined) => {
+const styleElementId = "react-sortful-global-style";
+
+export const setBodyStyle = (
+  bodyElement: HTMLElement,
+  draggingCusrsorStyle: string | undefined,
+  // istanbul ignore next
+  documentElement = document,
+) => {
   // Disables to select elements in entire page.
   bodyElement.style.userSelect = "none";
 
   // Applies a cursor style when dragging.
-  if (draggingCusrsorStyle != undefined) bodyElement.style.cursor = draggingCusrsorStyle;
+  if (draggingCusrsorStyle != undefined) {
+    const styleElement = documentElement.createElement("style");
+    styleElement.textContent = `* { cursor: ${draggingCusrsorStyle} !important; }`;
+    styleElement.setAttribute("id", styleElementId);
+
+    documentElement.head.appendChild(styleElement);
+  }
 };
 
-export const clearBodyStyle = (bodyElement: HTMLElement) => {
+export const clearBodyStyle = (
+  bodyElement: HTMLElement,
+  // istanbul ignore next
+  documentElement = document,
+) => {
   // Enables to select elements in entire page.
   bodyElement.style.removeProperty("user-select");
 
   // Resets a cursor style when dragging.
-  bodyElement.style.removeProperty("cursor");
+  documentElement.getElementById(styleElementId)?.remove();
 };

src/item/body.ts

@@ -1,9 +1,9 @@
 declare const styles: {
   readonly "wrapper": string;
   readonly "dropLine": string;
+  readonly "dragHandle": string;
   readonly "item": string;
   readonly "placeholder": string;
-  readonly "dragHandle": string;
   readonly "ghost": string;
 };
 export = styles;

stories/3-advanced-examples/custom-drag-handle.css.d.ts

@@ -69,16 +69,15 @@ const renderDropLineElement = (injectedProps: DropLineRendererInjectedProps) =>
 
 export const KanbanComponent = () => {
   const [itemEntitiesMapState, setItemEntitiesMapState] = React.useState(initialItemEntitiesMap);
-  const [isDraggingAnyItemState, setIsDraggingAnyItemState] = React.useState(false);
 
   const createItemElements = React.useCallback(
     (items: DummyItem[]) =>
       items.map((item, index) => (
         <Item key={item.id} identifier={item.id} index={index}>
-          <div className={classnames(styles.item, { [styles.draggingAny]: isDraggingAnyItemState })}>{item.title}</div>
+          <div className={styles.item}>{item.title}</div>
         </Item>
       )),
-    [isDraggingAnyItemState],
+    [],
   );
   const leftItemElements = React.useMemo(() => {
     const leftItems = itemEntitiesMapState.get(leftRootItemId)!.children!.map((itemId) => itemEntitiesMapState.get(itemId)!);
@@ -130,12 +129,7 @@ export const KanbanComponent = () => {
     [],
   );
 
-  const onDragStart = React.useCallback(() => {
-    setIsDraggingAnyItemState(true);
-  }, []);
   const onDragEnd = React.useCallback((meta: DragEndMeta<DummyItem["id"]>) => {
-    setIsDraggingAnyItemState(false);
-
     if (meta.groupIdentifier === meta.nextGroupIdentifier && meta.index === meta.nextIndex) return;
 
     const newMap = new Map(itemEntitiesMapState.entries());
@@ -179,7 +173,6 @@ export const KanbanComponent = () => {
       renderStackedGroup={renderStackedGroupElement}
       draggingCursorStyle="grabbing"
       itemSpacing={10}
-      onDragStart={onDragStart}
       onDragEnd={onDragEnd}
     >
       <Item identifier={leftRootItem.id} index={0} isLocked isGroup isLonely>

stories/3-advanced-examples/kanban.component.tsx

@@ -55,10 +55,6 @@
 .item.placeholder {
   color: white;
   background-color: #cfdce5;
-  cursor: grabbing;
-}
-.item.draggingAny {
-  cursor: grabbing;
 }
 
 .ghost {

stories/3-advanced-examples/kanban.css

@@ -7,7 +7,6 @@ declare const styles: {
   readonly "items": string;
   readonly "item": string;
   readonly "placeholder": string;
-  readonly "draggingAny": string;
   readonly "ghost": string;
 };
 export = styles;