Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 198: Change MarkPosition for multiple orientation

Browse source 
Implement EnumCheckboxGroupInput
This commit is contained in:
Eric Nguyen 2022-09-29 14:07:30 +00:00
parent 417829945f
commit 7836d27d5f
12 changed files with 164 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/Components/ContainerProperties/ContainerForm.tsx
View file

@ -1,4 +1,5 @@
import { Bars3BottomLeftIcon, Bars3CenterLeftIcon, Bars3Icon, Bars3BottomRightIcon, Bars2Icon, ViewColumnsIcon } from '@heroicons/react/24/outline';
import { Bars3BottomLeftIcon, Bars3CenterLeftIcon, Bars3Icon, Bars3BottomRightIcon, Bars2Icon } from '@heroicons/react/24/outline';
import { FlagIcon, ViewColumnsIcon } from '@heroicons/react/20/solid';
import * as React from 'react';
import { PropertyType } from '../../Enums/PropertyType';
import { PositionReference } from '../../Enums/PositionReference';
@ -12,11 +13,12 @@ import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
import { Select } from '../Select/Select';
import { ToggleButton, ToggleType } from '../ToggleButton/ToggleButton';
import { Orientation } from '../../Enums/Orientation';
import { EnumCheckboxGroupButtons } from '../EnumCheckboxGroupButtons/EnumCheckboxGroupButtons';
interface IContainerFormProps {
properties: IContainerProperties
symbols: Map<string, ISymbolModel>
onChange: (key: string, value: string | number | boolean, type?: PropertyType) => void
onChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
}
function GetCSSInputs(properties: IContainerProperties,
@ -284,14 +286,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
{
SHOW_BORROWER_DIMENSIONS &&
<>
<ToggleButton
labelText='Mark the position'
inputKey='markPositionToDimensionBorrower'
labelClassName=''
inputClassName=''
type={ToggleType.Full}
checked={props.properties.markPositionToDimensionBorrower}
onChange={(event) => props.onChange('markPositionToDimensionBorrower', event.target.checked)} />
<MarkPositionOptions {...props} />
<ToggleButton
labelText='Show dimension with marked children'
inputKey='isDimensionBorrower'
@ -308,6 +303,40 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
// TODO: Implement categories in the form
function MarkPositionOptions(props: IContainerFormProps): JSX.Element {
return <EnumCheckboxGroupButtons
key='markPosition'
name='MarkPosition'
selectedValues={props.properties.markPositionToDimensionBorrower}
inputClassName='hidden'
labelText='Mark the position'
colQty={2}
inputGroups={[
{
key: 'mark-position-horizontal',
text: (
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
<FlagIcon className='heroicon p-1' />
</div>
),
value: Orientation.Horizontal
},
{
key: 'mark-position-vertical',
text: (
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
<FlagIcon className='heroicon rotate-90 p-1' />
</div>
),
value: Orientation.Vertical
}
]}
onChange={(newSelectedValues) => {
props.onChange('markPositionToDimensionBorrower', newSelectedValues);
}}
/>;
}
function OrientationSelector(props: IContainerFormProps): JSX.Element {
return <RadioGroupButtons
key='orientation'
@ -321,7 +350,7 @@ function OrientationSelector(props: IContainerFormProps): JSX.Element {
key: 'orientation-horizontal',
text: (
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
<ViewColumnsIcon className='heroicon' />
<ViewColumnsIcon className='heroicon p-1' />
</div>
),
value: Orientation.Horizontal.toString()
@ -330,7 +359,7 @@ function OrientationSelector(props: IContainerFormProps): JSX.Element {
key: 'orientation-vertical',
text: (
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
<ViewColumnsIcon className='heroicon rotate-90' />
<ViewColumnsIcon className='heroicon rotate-90 p-1' />
</div>
),
value: Orientation.Vertical.toString()