fixing linting

lxbxinwei · Feb 4, 2020 · adb3957 · adb3957
1 parent fc9ac27
commit adb3957
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 97 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -208,6 +208,20 @@ module.exports = {
 
     // don't need to initialize state in a constructor
     'react/state-in-constructor': 'off',
+
+    'jest/expect-expect': [
+      'error',
+      {
+        assertFunctionNames: [
+          'expect',
+          // these functions will run expect internally
+          'withWarn',
+          'withError',
+          'withoutError',
+          'withoutWarn',
+        ],
+      },
+    ],
   },
   overrides: [
     // Forbid using not es5 methods

diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.js
@@ -7,5 +7,8 @@ module.exports = {
   rules: {
     // Allowing Array.from
     'no-restricted-syntax': 'off',
-  }
+
+    // not using jest expects
+    'jest/expect-expect': 'off',
+  },
 };
diff --git a/docs/api/draggable.md b/docs/api/draggable.md
@@ -96,7 +96,11 @@ The `React` children of a `<Draggable />` must be a function that returns a `Rea
 ```
 
 ```js
-type DraggableChildrenFn = (DraggableProvided, DraggableStateSnapshot, DraggableRubric) => Node
+type DraggableChildrenFn = (
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DraggableRubric,
+) => Node;
 ```
 
 The function is provided with three arguments:

diff --git a/docs/guides/content-security-policy.md b/docs/guides/content-security-policy.md
@@ -11,7 +11,7 @@ Background reading on CSP
 - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
 - [Helmetjs guide](https://helmetjs.github.io/docs/csp/)
 
-`react-beautiful-dnd` creates a `<style>` element in the `<head>` and dynamically updates it's value (see [/docs/guides/preset-styles.md] and [Dragging React performance forward](https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33)). This is considered a *unsafe inline* and will violate the strict CSP policy: `Content-Security-Policy: style-src 'self'`
+`react-beautiful-dnd` creates a `<style>` element in the `<head>` and dynamically updates it's value (see [/docs/guides/preset-styles.md] and [Dragging React performance forward](https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33)). This is considered a _unsafe inline_ and will violate the strict CSP policy: `Content-Security-Policy: style-src 'self'`
 
 ## Option 1: use `unsafe-inline`
 
@@ -29,9 +29,7 @@ You can use the stricter directive `Content-Security-Policy: style-src 'self'` a
 The [JSS](https://cssinjs.org/?v=v10.0.0) project has a great [CSP guide](https://cssinjs.org/csp) which goes through how you can setup a a `nonce`. Once you have a `nonce` value in the browser you can pass it into a `<DragDropContext />` to tell `react-beautiful-dnd` to use the `nonce`.
 
 ```js
-<DragDropContext nonce={getNonce()}>
-{/*...*/}
-</DragDropContext>
+<DragDropContext nonce={getNonce()}>{/*...*/}</DragDropContext>
 ```
 
 [← Back to documentation](/README.md#documentation-)
diff --git a/docs/guides/setup-problem-detection-and-error-recovery.md b/docs/guides/setup-problem-detection-and-error-recovery.md
@@ -18,14 +18,15 @@ Some setup problems will cause errors. These are logged with `console.error`. We
 <details>
   <summary>More details if you are interested</summary>
 
-  If we threw setup errors, here is the infinite loop:
+If we threw setup errors, here is the infinite loop:
 
-  1. Mount application
-  2. Error detected (we usually do it in a `useEffect`) and thrown
-  3. Error caught in `componentDidCatch`
-  4. React tree recovered (remounted). Goto step 2.
+1. Mount application
+2. Error detected (we usually do it in a `useEffect`) and thrown
+3. Error caught in `componentDidCatch`
+4. React tree recovered (remounted). Goto step 2.
+
+We could work around this loop condition, but it would lead to conditionally throwing, and otherwise logging. It is also tricky to avoid double logging of errors. Given that we are trying to recover the React tree, there is not a lot of value in throwing any setup problem in the first place. So we just log the problem in the `console`.
 
-  We could work around this loop condition, but it would lead to conditionally throwing, and otherwise logging. It is also tricky to avoid double logging of errors. Given that we are trying to recover the React tree, there is not a lot of value in throwing any setup problem in the first place. So we just log the problem in the `console`.
 </details>
 
 ### Production builds
@@ -38,7 +39,7 @@ Here are a few guides on how to drop development only code from your production
 
 ### Disable logging
 
-If you want to disable the warnings in *development*, you just need to update a flag on the `window`:
+If you want to disable the warnings in _development_, you just need to update a flag on the `window`:
 
 ```js
 // disable all react-beautiful-dnd development warnings

diff --git a/docs/patterns/virtual-lists.md b/docs/patterns/virtual-lists.md
@@ -146,6 +146,4 @@ function render(provided: DroppableProvided, snapshot: DroppableStateSnapshot) {
 }
 ```
 
-
-
 [← Back to documentation](/README.md#documentation-)
diff --git a/docs/sensors/sensor-api.md b/docs/sensors/sensor-api.md
@@ -15,15 +15,15 @@ These are some examples to show off what is possible with the Sensor API. They a
 
 (Please be sure to use prefix `rbd-`)
 
-| Voice 🗣 | Webcam 📷 | Thought 🧠 |
-| :-------: | :---------: | :----------: |
-| ![voice sensor](https://user-images.githubusercontent.com/2182637/66467095-87dc4380-eacf-11e9-9e2e-7ae1a59bfddf.gif) | ![webcam sensor](https://user-images.githubusercontent.com/2182637/66466837-1603fa00-eacf-11e9-8c15-5ed324c8916f.gif) | ![thought sensor](https://raw.githubusercontent.com/charliegerard/rbd-thought-sensor/master/demo.gif) |
+|                                                                 Voice 🗣                                                                  |                                                              Webcam 📷                                                               |                                                                  Thought 🧠                                                                  |
+| :--------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: |
+|           ![voice sensor](https://user-images.githubusercontent.com/2182637/66467095-87dc4380-eacf-11e9-9e2e-7ae1a59bfddf.gif)           |        ![webcam sensor](https://user-images.githubusercontent.com/2182637/66466837-1603fa00-eacf-11e9-8c15-5ed324c8916f.gif)         |                    ![thought sensor](https://raw.githubusercontent.com/charliegerard/rbd-thought-sensor/master/demo.gif)                     |
 | [`rbd-voice-sensor`](https://github.com/danieldelcore/rbd-voice-sensor)<br>created by [@danieldelcore](https://github.com/danieldelcore) | [`rbd-webcam-sensor`](https://github.com/kangweichan/rbd-webcam-sensor)<br>created by [@kangweichan](https://github.com/kangweichan) | [`rbd-thought-sensor`](https://github.com/charliegerard/rbd-thought-sensor)<br>created by [@charliegerard](https://github.com/charliegerard) |
 
-| With controls | Run sheet | Onboarding   |
-| :--------: | :---------: | :------------: |
+|                                                  With controls                                                   |                                                             Run sheet                                                              |                                                     Onboarding                                                     |
+| :--------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: |
 | ![controls](https://user-images.githubusercontent.com/2182637/66469550-c07e1c00-ead3-11e9-8e45-3cb114cf3c97.gif) | ![multiple-drag-drop-context](https://user-images.githubusercontent.com/2182637/66472177-6c296b00-ead8-11e9-8966-bd194d3f8070.gif) | ![onboarding](https://user-images.githubusercontent.com/2182637/66466850-1bf9db00-eacf-11e9-958f-82f970f4111b.gif) |
-| Mapping controls to movements | Running scripted experiences along side a user controlled drag | A scripted onboarding experience for a trip planning application |
+|                                          Mapping controls to movements                                           |                                   Running scripted experiences along side a user controlled drag                                   |                          A scripted onboarding experience for a trip planning application                          |
 
 ## Overview
 

diff --git a/src/state/get-draggables-inside-droppable.js b/src/state/get-draggables-inside-droppable.js
@@ -7,23 +7,25 @@ import type {
   DraggableDimensionMap,
 } from '../types';
 
-export default memoizeOne((
-  // using droppableId to avoid cache busted when we
-  // update the droppable (such as when it scrolls)
-  droppableId: DroppableId,
-  draggables: DraggableDimensionMap,
-): DraggableDimension[] => {
-  const result = toDraggableList(draggables)
-    .filter(
-      (draggable: DraggableDimension): boolean =>
-        droppableId === draggable.descriptor.droppableId,
-    )
-    // Dimensions are not guarenteed to be ordered in the same order as keys
-    // So we need to sort them so they are in the correct order
-    .sort(
-      (a: DraggableDimension, b: DraggableDimension): number =>
-        a.descriptor.index - b.descriptor.index,
-    );
+export default memoizeOne(
+  (
+    // using droppableId to avoid cache busted when we
+    // update the droppable (such as when it scrolls)
+    droppableId: DroppableId,
+    draggables: DraggableDimensionMap,
+  ): DraggableDimension[] => {
+    const result = toDraggableList(draggables)
+      .filter(
+        (draggable: DraggableDimension): boolean =>
+          droppableId === draggable.descriptor.droppableId,
+      )
+      // Dimensions are not guarenteed to be ordered in the same order as keys
+      // So we need to sort them so they are in the correct order
+      .sort(
+        (a: DraggableDimension, b: DraggableDimension): number =>
+          a.descriptor.index - b.descriptor.index,
+      );
 
-  return result;
-});
+    return result;
+  },
+);
diff --git a/src/view/droppable/connected-droppable.js b/src/view/droppable/connected-droppable.js
@@ -72,65 +72,67 @@ export const makeMapStateToProps = (): Selector => {
     }),
   );
 
-  const getMapProps = memoizeOne((
-    id: DroppableId,
-    isEnabled: boolean,
-    isDraggingOverForConsumer: boolean,
-    isDraggingOverForImpact: boolean,
-    dragging: DraggableDimension,
-    // snapshot: StateSnapshot,
-    renderClone: ?DraggableChildrenFn,
-  ): MapProps => {
-    const draggableId: DraggableId = dragging.descriptor.id;
-    const isHome: boolean = dragging.descriptor.droppableId === id;
-
-    if (isHome) {
-      const useClone: ?UseClone = renderClone
-        ? {
-            render: renderClone,
-            dragging: getDraggableRubric(dragging.descriptor),
-          }
-        : null;
+  const getMapProps = memoizeOne(
+    (
+      id: DroppableId,
+      isEnabled: boolean,
+      isDraggingOverForConsumer: boolean,
+      isDraggingOverForImpact: boolean,
+      dragging: DraggableDimension,
+      // snapshot: StateSnapshot,
+      renderClone: ?DraggableChildrenFn,
+    ): MapProps => {
+      const draggableId: DraggableId = dragging.descriptor.id;
+      const isHome: boolean = dragging.descriptor.droppableId === id;
+
+      if (isHome) {
+        const useClone: ?UseClone = renderClone
+          ? {
+              render: renderClone,
+              dragging: getDraggableRubric(dragging.descriptor),
+            }
+          : null;
+
+        const snapshot: StateSnapshot = {
+          isDraggingOver: isDraggingOverForConsumer,
+          draggingOverWith: isDraggingOverForConsumer ? draggableId : null,
+          draggingFromThisWith: draggableId,
+          isUsingPlaceholder: true,
+        };
+
+        return {
+          placeholder: dragging.placeholder,
+          shouldAnimatePlaceholder: false,
+          snapshot,
+          useClone,
+        };
+      }
+
+      if (!isEnabled) {
+        return idleWithoutAnimation;
+      }
+
+      // not over foreign list - return idle
+      if (!isDraggingOverForImpact) {
+        return idleWithAnimation;
+      }
 
       const snapshot: StateSnapshot = {
         isDraggingOver: isDraggingOverForConsumer,
-        draggingOverWith: isDraggingOverForConsumer ? draggableId : null,
-        draggingFromThisWith: draggableId,
+        draggingOverWith: draggableId,
+        draggingFromThisWith: null,
         isUsingPlaceholder: true,
       };
 
       return {
         placeholder: dragging.placeholder,
-        shouldAnimatePlaceholder: false,
+        // Animating placeholder in foreign list
+        shouldAnimatePlaceholder: true,
         snapshot,
-        useClone,
+        useClone: null,
       };
-    }
-
-    if (!isEnabled) {
-      return idleWithoutAnimation;
-    }
-
-    // not over foreign list - return idle
-    if (!isDraggingOverForImpact) {
-      return idleWithAnimation;
-    }
-
-    const snapshot: StateSnapshot = {
-      isDraggingOver: isDraggingOverForConsumer,
-      draggingOverWith: draggableId,
-      draggingFromThisWith: null,
-      isUsingPlaceholder: true,
-    };
-
-    return {
-      placeholder: dragging.placeholder,
-      // Animating placeholder in foreign list
-      shouldAnimatePlaceholder: true,
-      snapshot,
-      useClone: null,
-    };
-  });
+    },
+  );
 
   const selector = (state: State, ownProps: OwnProps): MapProps => {
     // not checking if item is disabled as we need the home list to display a placeholder

diff --git a/stories/35-function-component.stories.js b/stories/35-function-component.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import QuoteApp from './src/function-component/quote-app';
 
-storiesOf('Function component usage', module).add(
-  'using rbd with function components and hooks',
-  () => <QuoteApp />,
-);
+storiesOf(
+  'Function component usage',
+  module,
+).add('using rbd with function components and hooks', () => <QuoteApp />);
diff --git a/test/test-flow-types.js b/test/test-flow-types.js
@@ -37,7 +37,9 @@ import { DragDropContext, Droppable, Draggable } from '../src';
     {/* $ExpectError draggableId is required */}
     <Draggable index={0}>{() => null}</Draggable>
     {/* $ExpectError draggableId must be a string */}
-    <Draggable draggableId={2} index={0}>{() => null}</Draggable>
+    <Draggable draggableId={2} index={0}>
+      {() => null}
+    </Draggable>
     {/* $ExpectError index is required */}
     <Draggable draggableId="">{() => null}</Draggable>
     {/* $ExpectError children as function is required*/}

diff --git a/test/unit/integration/responders-integration.spec.js b/test/unit/integration/responders-integration.spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable jest/expect-expect */
 // @flow
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';

diff --git a/test/unit/state/auto-scroll/can-scroll.spec.js b/test/unit/state/auto-scroll/can-scroll.spec.js
@@ -205,7 +205,10 @@ describe('can partially scroll', () => {
   it('should return false if on the min point and move backward in any direction', () => {
     const current: Position = origin;
     const max: Position = { x: 100, y: 200 };
-    const tooFarBack: Position[] = [{ x: 0, y: -1 }, { x: -1, y: 0 }];
+    const tooFarBack: Position[] = [
+      { x: 0, y: -1 },
+      { x: -1, y: 0 },
+    ];
 
     tooFarBack.forEach((point: Position) => {
       const result: boolean = canPartiallyScroll({
@@ -243,7 +246,10 @@ describe('can partially scroll', () => {
     const max: Position = { x: 100, y: 200 };
     const current: Position = { x: 110, y: 220 };
     // Small changes that would still result in a current scroll greater than the max scroll
-    const backwards: Position[] = [{ x: -1, y: 0 }, { x: 0, y: -1 }];
+    const backwards: Position[] = [
+      { x: -1, y: 0 },
+      { x: 0, y: -1 },
+    ];
 
     backwards.forEach((change: Position) => {
       const result: boolean = canPartiallyScroll({
@@ -259,7 +265,10 @@ describe('can partially scroll', () => {
   it('should return false if moving forwards and the current scroll is greater than the max scroll', () => {
     const max: Position = { x: 100, y: 200 };
     const current: Position = { x: 110, y: 220 };
-    const forwards: Position[] = [{ x: 1, y: 0 }, { x: 0, y: 1 }];
+    const forwards: Position[] = [
+      { x: 1, y: 0 },
+      { x: 0, y: 1 },
+    ];
 
     forwards.forEach((change: Position) => {
       const result: boolean = canPartiallyScroll({
Original file line number	Diff line number	Diff line change
Expand Up		@@ -146,6 +146,4 @@ function render(provided: DroppableProvided, snapshot: DroppableStateSnapshot) {
		}
		```



		[← Back to documentation](/README.md#documentation-)