import * as React from 'react' ; import cx from 'classnames' ; import type { Labware } from '../../../redux/robot' ; import { getLabwareDisplayName } from '@opentrons/shared-data' ; import { ModalPage } from '@opentrons/components' ; import { ConfirmModalContents } from './ConfirmModalContents' ; import styles from './styles.css' ; export interface ConfirmModalProps { labware : Labware ; calibrateToBottom : boolean ; onBackClick : ( ) => unknown ; } export function ConfirmModal ( props ) { const { labware , onBackClick , calibrateToBottom } = props ; const backClickDisabled = labware . isMoving || labware . calibration === 'picked-up' ; const contentsStyle = labware . calibration . match ( /^(moving-to-slot|picking-up|dropping-tip|confirming)$/ ) ? cx ( styles . modal_contents , styles . in_progress_contents ) : styles . modal_contents ; const labwareDisplayName = labware . definition ? getLabwareDisplayName ( labware . definition ) : labware . name ; const titleBar = { title : 'Calibrate Labware' , subtitle : labwareDisplayName . replace ( 'µL' , 'uL' ) , back : { onClick : onBackClick , disabled : backClickDisabled } , } ; return ( < ModalPage titleBar = { titleBar } contentsClassName = { contentsStyle } heading = { < span className = { styles . wizard_title } > Calibrate pipette to { labwareDisplayName } < /span>}> < ConfirmModalContents labware = { labware } calibrateToBottom = { calibrateToBottom } / > < /ModalPage>); }