customize select a nit

components/src/index.js

@@ -17,7 +17,7 @@ export * from './CenteredTextSvg'
 export * from './deck'
 export * from './forms'
 export * from './icons'
-export * from './instrument-diagram'
+export * from './instrument'
 export * from './interaction-enhancers'
 export * from './lists'
 export * from './modals'

components/src/instrument/PipetteSelect.css

@@ -0,0 +1,55 @@
+@import '@opentrons/components';
+
+.dropdown_icon_wrapper {
+ position: absolute;
+ top: 0.25rem;
+ right: 0.25rem;
+ width: 1.25rem;
+ pointer-events: none;
+
+ & > svg {
+ color: var(--c-dark-gray);
+ }
+
+ &.flipped > svg {
+ transform: rotate(180deg);
+ }
+}
+
+.select_control {
+ @apply --font-body-1-dark;
+
+ background-color: var(--c-light-gray);
+ border: none;
+ padding: 0.25rem 0;
+ outline: none;
+ border-radius: var(--bd-radius-form-field);
+ height: 1.75rem;
+ box-shadow: none;
+
+ &.focus {
+ background-color: var(--c-white);
+ box-shadow: var(--shadow-lvl-1);
+ }
+}
+
+.select_menu {
+ @apply --font-body-1-dark;
+
+ background-color: var(--c-light-gray);
+ border-radius: var(--bd-radius-form-field);
+}
+
+.select_group {
+ &:not(:first-child) {
+ border-top: 1px solid color(var(--c-med-gray) alpha(0.4));
+ }
+}
+
+.select_caption {
+ font-size: var(--fs-caption);
+}
+
+.pipette_option {
+
+}

components/src/instrument/PipetteSelect.js

@@ -0,0 +1,179 @@
+// @flow
+import * as React from 'react'
+import cx from 'classnames'
+import find from 'lodash/find'
+import flatMap from 'lodash/flatMap'
+
+import Select, { components } from 'react-select'
+
+import { type PipetteNameSpec } from '@opentrons/shared-data'
+import { Icon } from '../icons'
+import styles from './PipetteSelect.css'
+
+// TODO(mc, 2018-10-23): we use "name", react-select uses "label"; align usage
+export type ValueType = ?string
+export type OptionType = {|
+ value: ValueType,
+ label: React.Node,
+ isDisabled?: boolean,
+|}
+export type GroupType = {| options: Array<OptionType>, label: React.Node |}
+export type SelectOption = OptionType | GroupType
+
+export type MenuPosition = 'absolute' | 'fixed'
+
+type OptionList = Array<OptionType>
+
+type SelectProps = {
+ /** optional HTML id for container */
+ id?: string,
+ /** React-Select option, usually label, value */
+ options: Array<SelectOption>,
+ /** currently selected value */
+ value: ValueType,
+ /** change handler called with (name, value) */
+ onValueChange: (name: string, value: ValueType) => mixed,
+}
+
+const SELECT_STYLES = {
+ input: () => ({ padding: 0 }),
+ groupHeading: () => ({ margin: 0 }),
+ menu: () => ({ margin: 0 }),
+ menuList: () => ({ padding: 0 }),
+}
+
+const clearStyles = () => null
+
+const getOpts = (og: OptionType | GroupType): OptionList => og.options || [og]
+
+export default class SelectField extends React.Component<SelectProps> {
+ handleChange = (option: OptionType) => {
+ const { name, onValueChange } = this.props
+ onValueChange(name, option.value)
+ }
+
+ handleBlur = () => {
+ const { name, onLoseFocus } = this.props
+ if (onLoseFocus) onLoseFocus(name)
+ }
+
+ render() {
+ const {
+ id,
+ name,
+ options,
+ disabled,
+ placeholder,
+ className,
+ error,
+ menuPosition,
+ } = this.props
+ const allOptions = flatMap(options, getOpts)
+ const value = find(allOptions, { value: this.props.value }) || null
+ const caption = error || this.props.caption
+ const captionCx = cx(styles.select_caption, { [styles.error_color]: error })
+
+ return (
+ <div>
+ <Select
+ id={id}
+ name={name}
+ // $FlowFixMe: our types are more strict than react-select
+ options={options}
+ value={value}
+ error={error}
+ // $FlowFixMe: our types are more strict than react-select
+ onChange={this.handleChange}
+ onBlur={this.handleBlur}
+ isDisabled={disabled}
+ placeholder={placeholder}
+ styles={SELECT_STYLES}
+ components={{
+ Control,
+ DropdownIndicator,
+ Menu,
+ Group,
+ Option,
+ IndicatorSeparator: null,
+ }}
+ className={className}
+ menuPosition={menuPosition || 'absolute'}
+ />
+ {caption && <p className={captionCx}>{caption}</p>}
+ </div>
+ )
+ }
+}
+
+function Control(props: *) {
+ return (
+ <components.Control
+ {...props}
+ getStyles={clearStyles}
+ className={cx(styles.select_control, {
+ [styles.focus]: props.isFocused,
+ })}
+ />
+ )
+}
+
+function DropdownIndicator(props: *) {
+ const iconWrapperCx = cx(styles.dropdown_icon_wrapper, {
+ [styles.flipped]: props.selectProps.menuIsOpen,
+ })
+
+ return (
+ components.DropdownIndicator && (
+ <components.DropdownIndicator {...props}>
+ <div className={iconWrapperCx}>
+ <Icon name="menu-down" width="100%" />
+ </div>
+ </components.DropdownIndicator>
+ )
+ )
+}
+// custom Menu (options dropdown) component
+function Menu(props: *) {
+ return (
+ <components.Menu {...props}>
+ <div className={styles.select_menu}>{props.children}</div>
+ </components.Menu>
+ )
+}
+
+// custom option group wrapper component
+function Group(props: *) {
+ return (
+ <components.Group
+ {...props}
+ className={styles.select_group}
+ getStyles={clearStyles}
+ />
+ )
+}
+
+function Option(props: *) {
+ const { innerRef, innerProps, data } = props
+ const { channels, displayName, displayCategory } = data
+
+ const volumeClassMaybeMatch = displayName.match(/P\d+/)
+ const volumeClass = volumeClassMaybeMatch ? volumeClassMaybeMatch[0] : ''
+
+ let displayChannels = ''
+ switch (channels) {
+ case 1:
+ displayChannels = 'Single Channel'
+ case 8:
+ displayChannels = '8-Channel'
+ }
+
+ const cleanDisplayCategory = displayCategory === 'OG' ? '' : displayCategory
+
+ return (
+ <div ref={innerRef} className={styles.pipette_option} {...innerProps}>
+ <span>{volumeClass}</span>
+ <span>{displayChannels}</span>
+ <span>{cleanDisplayCategory}</span>
+ </div>
+ )
+}

components/src/instrument/PipetteSelect.md

@@ -0,0 +1,91 @@
+This component uses the `react-select` library. So the change/blur events are not
+normal DOM events, but special ones. To make the difference clear, `SelectField`
+doesn't have `onChange` and `onBlur` but instead `onValueChange` and `onLoseFocus`.
+
+To use `<SelectField>` with Formik, **do not** try to of pass `formikProps.handleChange` and `formikProps.handleBlur` to `onChange` and `onBlur`. Instead, pass `formikProps.setFieldValue` and `formikProps.setFieldTouched` to `onValueChange` and `onLoseFocus`.
+
+```js
+initialState = { selectedValue: null }
+;<div style={{ paddingBottom: '10rem' }}>
+ {/* Add some space because options menu does not behave well when overlapping with styleguidist's code blocks! */}
+ <SelectField
+ onValueChange={(name, value) => setState({ selectedValue: value })}
+ value={state.selectedValue}
+ caption={`Selected value: ${state.selectedValue}`}
+ error={state.selectedValue === 'dna' ? 'DNA IS NOT ALLOWED!' : null}
+ options={[
+ {
+ options: [
+ {
+ data: {
+ channels: 1,
+ displayName: 'P90 Single-Channel',
+ displayCategory: 'GEN2',
+ },
+ },
+ {
+ data: {
+ channels: 1,
+ displayName: 'P40 Single-Channel',
+ displayCategory: 'GEN2',
+ },
+ },
+ ],
+ },
+ {
+ options: [
+ {
+ data: {
+ channels: 1,
+ displayName: 'P30 Single-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ {
+ data: {
+ channels: 8,
+ displayName: 'P30 8-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ {
+ data: {
+ channels: 1,
+ displayName: 'P70 Single-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ {
+ data: {
+ channels: 8,
+ displayName: 'P70 8-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ {
+ data: {
+ channels: 1,
+ displayName: 'P150 Single-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ {
+ data: {
+ channels: 8,
+ displayName: 'P150 8-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ {
+ data: {
+ channels: 1,
+ displayName: 'P900 Single-Channel',
+ displayCategory: 'OG',
+ },
+ },
+ ],
+ },
+ ]}
+ />
+</div>
+```

components/styleguide.config.js

@@ -53,8 +53,8 @@ module.exports = {
  components: 'src/deck/[A-Z]*.js',
  },
  {
- name: 'Instrument Diagram',
- components: 'src/instrument-diagram/[A-Z]*.js',
+ name: 'Instrument',
+ components: 'src/instrument/[A-Z]*.js',
  },
  {
  name: 'Structure',

shared-data/js/types.js

@@ -233,3 +233,24 @@ export type ModuleDefinition = {|
  loadName: string,
  quirks: Array<string>,
 |}
+
+export type FlowRateSpec = {|
+ value: number,
+ min: number,
+ max: number,
+|}
+export type PipetteNameSpec = {|
+ displayName: string,
+ displayCategory?: string,
+ minVolume: number,
+ maxVolume: number,
+ channels: number,
+ defaultAspirateFlowRate: FlowRateSpec,
+ defaultDispenseFlowRate: FlowRateSpec,
+ defaultBlowOutFlowRate: FlowRateSpec,
+ smoothieConfigs?: {
+ stepsPerMM: number,
+ homePosition: number,
+ travelDistance: number,
+ },
+|}