b88539e34d
Add more Position for the dimensions Rename isDimensionBorrower and MarkPosition... Refactor components in ContainerForm with Checkboxes and Selector Add more docs
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
|
|
import { CheckboxGroupButtons } from './CheckboxGroupButtons';
|
|
import { Orientation } from '../../Enums/Orientation';
|
|
|
|
interface IOrientationCheckboxesProps {
|
|
id: string
|
|
name: string
|
|
labelText: string
|
|
value: Orientation[]
|
|
onChange: (key: string, value: number[]) => void
|
|
}
|
|
|
|
export function OrientationCheckboxes({
|
|
id,
|
|
name,
|
|
labelText,
|
|
value,
|
|
onChange
|
|
}: IOrientationCheckboxesProps): JSX.Element {
|
|
return <CheckboxGroupButtons
|
|
key={id}
|
|
name={name}
|
|
selectedValues={value}
|
|
inputClassName='hidden'
|
|
labelText={labelText}
|
|
colQty={2}
|
|
inputGroups={[
|
|
{
|
|
key: `${id}-horizontal`,
|
|
text: (
|
|
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
|
|
<ChevronUpDownIcon className='heroicon p-1' />
|
|
</div>
|
|
),
|
|
value: Orientation.Horizontal
|
|
},
|
|
{
|
|
key: `${id}-vertical`,
|
|
text: (
|
|
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
|
|
<ChevronUpDownIcon className='heroicon rotate-90 p-1' />
|
|
</div>
|
|
),
|
|
value: Orientation.Vertical
|
|
}
|
|
]}
|
|
onChange={(newSelectedValues) => {
|
|
onChange(id, newSelectedValues);
|
|
}}
|
|
/>;
|
|
}
|