Merge pull request #1291 from guardian/jsh-tr/deeper-dnd

[Housekeeping]: Rename root-level drag and drop element; improve comments in WithDimensions component
guardian · Dec 22, 2020 · ca48acd · ca48acd
2 parents 9aa6db7 + fca27de
commit ca48acd
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 32 deletions.
diff --git a/fronts-client/src/components/Clipboard.tsx b/fronts-client/src/components/Clipboard.tsx
@@ -1,7 +1,7 @@
 import { Dispatch } from 'types/Store';
 import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
-import { Root, Move, PosSpec } from 'lib/dnd';
+import { DragAndDropRoot, Move, PosSpec } from 'lib/dnd';
 import type { State } from 'types/State';
 import { insertCardFromDropEvent } from 'util/collectionUtils';
 import {
@@ -168,7 +168,7 @@ class Clipboard extends React.Component<ClipboardProps> {
  <ButtonLabel>Clear clipboard</ButtonLabel>
  </ClearClipboardButton>
  </ClipboardHeader>
- <Root
+ <DragAndDropRoot
  id="clipboard"
  data-testid="clipboard"
  style={{ display: 'flex', flex: 1 }}
@@ -227,7 +227,7 @@ class Clipboard extends React.Component<ClipboardProps> {
  </>
  )}
  </ClipboardLevel>
- </Root>
+ </DragAndDropRoot>
  </ClipboardBody>
  </StyledDragIntentContainer>
  </ClipboardWrapper>

diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import sortBy from 'lodash/sortBy';
 import debounce from 'lodash/debounce';
 import { events } from 'services/GA';
-import { Root, PosSpec, Move } from 'lib/dnd';
+import { DragAndDropRoot, PosSpec, Move } from 'lib/dnd';
 import Collection from './Collection';
 import type { State } from 'types/State';
 import WithDimensions from 'components/util/WithDimensions';
@@ -202,7 +202,7 @@ class FrontContent extends React.Component<FrontProps, FrontState> {
  >
  <WithDimensions>
  {({ width }) => (
- <Root id={this.props.id} data-testid={this.props.id}>
+ <DragAndDropRoot id={this.props.id} data-testid={this.props.id}>
  {front.collections.map((collectionId) => (
  <CollectionContainer
  key={collectionId}
@@ -237,7 +237,7 @@ class FrontContent extends React.Component<FrontProps, FrontState> {
  />
  </CollectionContainer>
  ))}
- </Root>
+ </DragAndDropRoot>
  )}
  </WithDimensions>
  </FrontCollectionsContainer>

diff --git a/fronts-client/src/components/util/WithDimensions.tsx b/fronts-client/src/components/util/WithDimensions.tsx
@@ -13,12 +13,12 @@ interface Props {
 const initialState = { width: undefined, height: undefined } as Dimensions;
 
 /**
- * Supplies the dimensions of the given element to its children.
+ * Supplies the dimensions of the wrapper div provided by this component to its children.
  *
  * ```
- * <WithDimensions element={this.someHTMLElement}>
+ * <WithDimensions>
  * {({ width, height }) => (
- * <p>`The dimensions of the given element are ${width} x ${height}`</p>
+ * <p>`The dimensions of the parent div element are ${width} x ${height}`</p>
  * )
  * </WithDimensions>
  * ```

diff --git a/fronts-client/src/lib/dnd/Root.tsx b/fronts-client/src/lib/dnd/Root.tsx
@@ -30,7 +30,7 @@ const RootContainer = styled.div`
  }
 `;
 
-export default class Root extends React.Component<Props, State> {
+export default class DragAndDropRoot extends React.Component<Props, State> {
  public state = { store: createStore() };
  private rootRef = React.createRef<HTMLDivElement>();
 

diff --git a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
-import Root from '../Root';
+import DragAndDropRoot from '../Root';
 import Level from '../Level';
 
 const createDragEvent = (top: boolean) => {
@@ -64,7 +64,7 @@ describe('Curation', () => {
  let edit: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '1' }, { id: '2' }]}
  type="a"
@@ -103,7 +103,7 @@ describe('Curation', () => {
  );
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(nodeProps)(dropProps);
@@ -121,7 +121,7 @@ describe('Curation', () => {
  let edit: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '1' }, { id: '2' }]}
  type="a"
@@ -157,7 +157,7 @@ describe('Curation', () => {
  );
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(nodeProps)(dropProps);
@@ -177,7 +177,7 @@ describe('Curation', () => {
  let edit: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '1' }, { id: '2' }]}
  type="a"
@@ -214,7 +214,7 @@ describe('Curation', () => {
  );
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(nodeProps)(dropProps);
@@ -228,7 +228,7 @@ describe('Curation', () => {
  let to: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '2' }]}
  parentId="1"
@@ -260,7 +260,7 @@ describe('Curation', () => {
  </Level>
  )}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  const data = {
@@ -283,7 +283,7 @@ describe('Curation', () => {
  let edit;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '2' }]}
  type="a"
@@ -317,7 +317,7 @@ describe('Curation', () => {
  );
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(dragProps)(dropProps);
@@ -331,7 +331,7 @@ describe('Curation', () => {
  let edit: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  parentType="root"
  parentId="root"
@@ -355,7 +355,7 @@ describe('Curation', () => {
  return false;
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(dragProps)(dropProps);
@@ -369,7 +369,7 @@ describe('Curation', () => {
  let edit: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '1' }]}
  parentType="root"
@@ -390,7 +390,7 @@ describe('Curation', () => {
  return null;
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(dragProps)(dropProps);
@@ -404,7 +404,7 @@ describe('Curation', () => {
  let edit: any;
 
  setup(
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  arr={[{ id: '1' }]}
  parentType="root"
@@ -425,7 +425,7 @@ describe('Curation', () => {
  return null;
  }}
  </Level>
- </Root>
+ </DragAndDropRoot>
  );
 
  runDrag(dragProps)(dropProps);
@@ -440,7 +440,7 @@ describe('Curation', () => {
 
  setup(
  <div>
- <Root id="@@ROOT">
+ <DragAndDropRoot id="@@ROOT">
  <Level
  type="a"
  getId={({ id }) => id}
@@ -456,8 +456,8 @@ describe('Curation', () => {
  return null;
  }}
  </Level>
- </Root>
- <Root id="@@ROOT2">
+ </DragAndDropRoot>
+ <DragAndDropRoot id="@@ROOT2">
  <Level
  type="a"
  getId={({ id }) => id}
@@ -475,7 +475,7 @@ describe('Curation', () => {
  >
  {() => null}
  </Level>
- </Root>
+ </DragAndDropRoot>
  </div>
  );
 

diff --git a/fronts-client/src/lib/dnd/index.ts b/fronts-client/src/lib/dnd/index.ts
@@ -1,4 +1,4 @@
-export { default as Root } from './Root';
+export { default as DragAndDropRoot } from './Root';
 export {
  default as Level,
  Move,