import { ToggleGroup } from '@h5web/lib' ; import { isNumber } from 'lodash' ; import styles from './DimensionMapper.module.css' ; import type { Axis , DimensionMapping } from './models' ; interface Props { axis : Axis ; rawDims : number [ ] ; mapperState : DimensionMapping ; onChange : ( mapperState : DimensionMapping ) => void ; } function AxisMapper ( props ) { const { axis , rawDims , mapperState , onChange } = props ; const selectedDim = mapperState . indexOf ( axis ) ; if ( selectedDim === - 1 ) { return null ; } return ( < div className = { styles . axisMapper } > < span className = { styles . axisLabel } > { axis } < /span> < ToggleGroup role = "radiogroup" ariaLabel = { `Dimension as ${ axis } axis` } value = { selectedDim . toString ( ) } onChange = { ( val ) => { const newDim = Number ( val ) ; if ( selectedDim !== newDim ) { const newMapperState = [ ... mapperState ] ; newMapperState [ selectedDim ] = isNumber ( mapperState [ newDim ] ) ? 0 : mapperState [ newDim ] ; newMapperState [ newDim ] = axis ; onChange ( newMapperState ) ; } } } > { Object . keys ( rawDims ) . map ( ( dimKey ) => ( < ToggleGroup . Btn key = { dimKey } label = { `D${ dimKey }` } value = { dimKey } / > ) ) } < /ToggleGroup> < /div>); } export default AxisMapper ;