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

…bility * Simplify & clean up LabwareOnDeck, labware overlays, and related compenents & types
Opentrons · Sep 28, 2018 · db28176 · db28176
1 parent 343e845
commit db28176
Show file tree

Hide file tree

Showing 10 changed files with 237 additions and 225 deletions.
diff --git a/components/interfaces/DeckSlot.js b/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

diff --git a/components/src/deck/LabwareContainer.js b/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>

diff --git a/protocol-designer/src/components/LabwareSelectionModal/index.js b/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),
   }
 }

diff --git a/protocol-designer/src/components/labware/ClickableText.js b/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

diff --git a/protocol-designer/src/components/labware/DisabledSelectSlotOverlay.js b/protocol-designer/src/components/labware/DisabledSelectSlotOverlay.js
@@ -1,17 +1,17 @@
 // @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}
+type DisabledSelectSlotOverlayProps = {
+  cancelMove: () => mixed,
+}
+
 class DisabledSelectSlotOverlay extends React.Component<DisabledSelectSlotOverlayProps> {
-  cancelMove = () => {
-    this.props.setMoveLabwareMode()
-  }
   render () {
     return (
-      <HandleKeypress preventDefault handlers={[{key: 'Escape', onPress: this.cancelMove}]}>
+      <HandleKeypress preventDefault handlers={[{key: 'Escape', onPress: this.props.cancelMove}]}>
         <g className={cx(styles.slot_overlay, styles.disabled)}>
           <rect className={styles.overlay_panel} />
           <g className={styles.clickable_text}>