refactor(protocol-designer): refactor PD labware components for reada…

…bility (#2390)

components/interfaces/DeckSlot.js

@@ -3,8 +3,6 @@ import * as React from 'react'
 
 export type DeckSlotProps = {
   slot: string,
-  width: number,
-  height: number,
   highlighted?: boolean,
   containerType?: string,
   children?: React.Node

components/src/deck/LabwareContainer.js

@@ -1,20 +1,23 @@
 // @flow
 import * as React from 'react'
+import {SLOT_HEIGHT_MM, SLOT_WIDTH_MM} from '@opentrons/shared-data'
 import styles from './LabwareContainer.css'
 
 const defs = {roundSlotClipPath: 'roundSlotClipPath'} // TODO: import these defs instead of hard-coding in applications? Or should they be passed to children?
 
 type Props = {
   x?: number,
   y?: number,
-  height: number,
-  width: number,
+  height?: number,
+  width?: number,
   highlighted?: boolean,
   children?: React.Node,
 }
 
 export default function LabwareContainer (props: Props) {
-  const {x, y, height, width, highlighted, children} = props
+  const {x, y, highlighted, children} = props
+  const height = props.height || SLOT_HEIGHT_MM
+  const width = props.width || SLOT_WIDTH_MM
 
   return (
     <g>

protocol-designer/src/components/LabwareSelectionModal/index.js

@@ -17,7 +17,7 @@ type SP = {
 
 function mapStateToProps (state: BaseState): SP {
   return {
-    slot: labwareIngredSelectors.canAdd(state) || null,
+    slot: labwareIngredSelectors.selectedAddLabwareSlot(state) || null,
     permittedTipracks: pipetteSelectors.permittedTipracks(state),
   }
 }

protocol-designer/src/components/labware/ClickableText.js

@@ -8,7 +8,7 @@ type Props = {
   height?: string | number,
   text?: string,
   iconName?: IconName,
-  onClick?: (e: SyntheticEvent<*>) => void,
+  onClick?: (e: SyntheticEvent<*>) => mixed,
 }
 
 const DEFAULT_HEIGHT = 15

protocol-designer/src/components/labware/DisabledSelectSlotOverlay.js

@@ -1,26 +1,25 @@
 // @flow
 import React from 'react'
 import cx from 'classnames'
-import {HandleKeypress, type DeckSlot} from '@opentrons/components'
+import {HandleKeypress} from '@opentrons/components'
 import styles from './labware.css'
 
-type DisabledSelectSlotOverlayProps = {setMoveLabwareMode: (slot: ?DeckSlot) => void}
-class DisabledSelectSlotOverlay extends React.Component<DisabledSelectSlotOverlayProps> {
-  cancelMove = () => {
-    this.props.setMoveLabwareMode()
-  }
-  render () {
-    return (
-      <HandleKeypress preventDefault handlers={[{key: 'Escape', onPress: this.cancelMove}]}>
-        <g className={cx(styles.slot_overlay, styles.disabled)}>
-          <rect className={styles.overlay_panel} />
-          <g className={styles.clickable_text}>
-            <text x="0" y="40%">Select a slot</text>
-          </g>
+type Props = {
+  cancelMove: () => mixed,
+}
+
+function DisabledSelectSlotOverlay (props: Props) {
+  const {cancelMove} = props
+  return (
+    <HandleKeypress preventDefault handlers={[{key: 'Escape', onPress: cancelMove}]}>
+      <g className={cx(styles.slot_overlay, styles.disabled)}>
+        <rect className={styles.overlay_panel} />
+        <g className={styles.clickable_text}>
+          <text x="0" y="40%">Select a slot</text>
         </g>
-      </HandleKeypress>
-    )
-  }
+      </g>
+    </HandleKeypress>
+  )
 }
 
 export default DisabledSelectSlotOverlay