diff --git a/app/src/assets/localization/en/quick_transfer.json b/app/src/assets/localization/en/quick_transfer.json index 294e946aa46..b6e5cccfe57 100644 --- a/app/src/assets/localization/en/quick_transfer.json +++ b/app/src/assets/localization/en/quick_transfer.json @@ -1,10 +1,12 @@ { + "add_or_remove_columns": "add or remove columns", "add_or_remove": "add or remove", "advanced_settings": "Advanced settings", "all": "All labware", "aspirate_volume": "Aspirate volume per well", "aspirate_volume_µL": "Aspirate volume per well (µL)", "both_mounts": "Left + Right Mount", + "columns": "columns", "create_new_transfer": "Create new quick transfer", "create_transfer": "Create transfer", "destination": "Destination", @@ -21,6 +23,7 @@ "reservoir": "Reservoirs", "source": "Source", "select_attached_pipette": "Select attached pipette", + "select_by": "select by", "select_dest_labware": "Select destination labware", "select_dest_wells": "Select destination wells", "select_source_labware": "Select source labware", @@ -31,6 +34,7 @@ "set_transfer_volume": "Set transfer volume", "source_labware": "Source labware", "source_labware_d2": "Source labware in D2", + "starting_well": "starting well", "use_deck_slots": "Quick transfers use deck slots B2-D2. These slots hold a tip rack, a source labware, and a destination labware.Make sure that your deck configuration is up to date to avoid collisions.", "tip_management": "Tip management", "tip_rack": "Tip rack", @@ -42,5 +46,6 @@ "pipette_currently_attached": "Quick transfer options depend on the pipettes currently attached to your robot.", "wellPlate": "Well plates", "well_selection": "Well selection", - "well_ratio": "Quick transfers with multiple source wells can either be one-to-one (select {{wells}} for this transfer) or consolidate (select 1 destination well)." + "well_ratio": "Quick transfers with multiple source wells can either be one-to-one (select {{wells}} for this transfer) or consolidate (select 1 destination well).", + "wells": "wells" } diff --git a/app/src/atoms/buttons/IconButton.tsx b/app/src/atoms/buttons/IconButton.tsx index 6012fc35c20..48524f45205 100644 --- a/app/src/atoms/buttons/IconButton.tsx +++ b/app/src/atoms/buttons/IconButton.tsx @@ -1,17 +1,25 @@ import * as React from 'react' -import { BORDERS, COLORS, Icon, RESPONSIVENESS } from "@opentrons/components" -import { ODD_FOCUS_VISIBLE } from "./constants" -import styled, { css } from "styled-components" +import { css } from 'styled-components' +import { + BORDERS, + Btn, + COLORS, + Icon, + RESPONSIVENESS, +} from '@opentrons/components' +import { ODD_FOCUS_VISIBLE } from './constants' -interface IconButtonProps extends React.ButtonHTMLAttributes { +interface IconButtonProps + // extends React.ButtonHTMLAttributes { + extends React.ComponentProps { iconName: React.ComponentProps['name'] hasBackground?: boolean } -export function IconButton(props: IconButtonProps) { +export function IconButton(props: IconButtonProps): JSX.Element { const { iconName, hasBackground = false, ...buttonProps } = props return ( - + ) } - -const ButtonWrapper = styled('button') - diff --git a/app/src/organisms/WellSelection/index.tsx b/app/src/organisms/WellSelection/index.tsx index 14160e89a30..07e1388ebc8 100644 --- a/app/src/organisms/WellSelection/index.tsx +++ b/app/src/organisms/WellSelection/index.tsx @@ -1,9 +1,10 @@ import * as React from 'react' +import { useTranslation } from 'react-i18next' import reduce from 'lodash/reduce' import { - ALIGN_STRETCH, Box, + Checkbox, COLORS, DIRECTION_COLUMN, Flex, @@ -15,6 +16,9 @@ import { TYPOGRAPHY, WELL_LABEL_OPTIONS, } from '@opentrons/components' + +import { IconButton } from '../../atoms/buttons/IconButton' +import { RadioButton } from '../../atoms/buttons/RadioButton' import { arrayToWellGroup, getCollidingWells, @@ -28,8 +32,6 @@ import type { PipetteChannels, } from '@opentrons/shared-data' import type { GenericRect } from './types' -import { useTranslation } from 'react-i18next' -import { IconButton } from '../../atoms/buttons/IconButton' interface WellSelectionProps { definition: LabwareDefinition2 @@ -108,18 +110,18 @@ export function WellSelection(props: WellSelectionProps): JSX.Element { const allSelectedWells = channels === 8 || channels === 96 ? reduce( - selectedPrimaryWells, - (acc, _, wellName): WellGroup => { - const wellSet = getWellSetForMultichannel( - definition, - wellName, - channels - ) - if (!wellSet) return acc - return { ...acc, ...arrayToWellGroup(wellSet) } - }, - {} - ) + selectedPrimaryWells, + (acc, _, wellName): WellGroup => { + const wellSet = getWellSetForMultichannel( + definition, + wellName, + channels + ) + if (!wellSet) return acc + return { ...acc, ...arrayToWellGroup(wellSet) } + }, + {} + ) : selectedPrimaryWells const wellFill: WellFill = {} @@ -150,48 +152,117 @@ export function WellSelection(props: WellSelectionProps): JSX.Element { ) return definition.parameters.format === '384Standard' ? ( - + {labwareRender} - + + {channels === 1 ? : } + + ) : ( - { labwareRender } - + {labwareRender} + ) } -interface ButtonControlsProps { - channels: PipetteChannels - flex: React.ComponentProps['flex'] -} -function ButtonControls(props: ButtonControlsProps): JSX.Element { - const { channels, flex } = props +function SelectBy(): JSX.Element { const { t, i18n } = useTranslation('quick_transfer') - const addOrRemoveButtons = channels !== 96 ? ( - - {i18n.format(t('add_or_remove'), 'capitalize')} - - { console.log('TODO handle minus') }} - iconName="minus" - hasBackground /> - { console.log('TODO handle plus') }} - iconName="plus" - hasBackground /> - + return ( + + + {i18n.format(t('select_by'), 'capitalize')} + + console.log('columns')} + radioButtonType="small" + /> + console.log('wells')} + radioButtonType="small" + /> - ) : null + ) +} + +function StartingWell({ + channels, +}: { + channels: PipetteChannels +}): JSX.Element { + const { t, i18n } = useTranslation('quick_transfer') + + const checkboxWellOptions = + channels === 8 ? ['A1', 'B1'] : ['A1', 'A2', 'B1', 'B2'] + return ( - - {addOrRemoveButtons} + + + {i18n.format(t('starting_well'), 'capitalize')} + + {checkboxWellOptions.map(well => ( + console.log(well)} + /> + ))} ) } + +interface ButtonControlsProps { + channels: PipetteChannels +} +function ButtonControls(props: ButtonControlsProps): JSX.Element { + const { channels } = props + const { t, i18n } = useTranslation('quick_transfer') + + const addOrRemoveButtons = + channels !== 96 ? ( + + + {i18n.format( + t(channels === 8 ? 'add_or_remove_columns' : 'add_or_remove'), + 'capitalize' + )} + + + { + console.log('TODO handle minus') + }} + iconName="minus" + hasBackground + flex="1" + /> + { + console.log('TODO handle plus') + }} + iconName="plus" + hasBackground + flex="1" + /> + + + ) : null + return {addOrRemoveButtons} +} diff --git a/components/src/atoms/index.ts b/components/src/atoms/index.ts index 93a5eb64f26..f5ecc5bb98c 100644 --- a/components/src/atoms/index.ts +++ b/components/src/atoms/index.ts @@ -1,4 +1,5 @@ export * from './buttons' +export * from './Checkbox' export * from './CheckboxField' export * from './Chip' export * from './StepMeter'