Fix eslint errors
This commit is contained in:
Eric NGUYEN
parent
5b3ab651e6
commit
4e41fda93a
87 changed files with 1003 additions and 702 deletions
|
|
@ -192,13 +192,17 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={props.properties.minWidth}
|
||||
max={props.properties.maxWidth}
|
||||
value={(RemoveWidthMargin(props.properties.width,
|
||||
value={(RemoveWidthMargin(
|
||||
props.properties.width,
|
||||
props.properties.margin.left,
|
||||
props.properties.margin.right)).toString()}
|
||||
props.properties.margin.right
|
||||
)).toString()}
|
||||
onChange={(value) => {
|
||||
props.onChange('width', ApplyWidthMargin(Number(value),
|
||||
props.onChange('width', ApplyWidthMargin(
|
||||
Number(value),
|
||||
props.properties.margin.left,
|
||||
props.properties.margin.right));
|
||||
props.properties.margin.right
|
||||
));
|
||||
}}
|
||||
isDisabled={props.properties.isFlex}/>
|
||||
<TextInputGroup
|
||||
|
|
@ -231,13 +235,17 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={props.properties.minHeight}
|
||||
max={props.properties.maxHeight}
|
||||
value={(RemoveWidthMargin(props.properties.height,
|
||||
value={(RemoveWidthMargin(
|
||||
props.properties.height,
|
||||
props.properties.margin.top,
|
||||
props.properties.margin.bottom)).toString()}
|
||||
props.properties.margin.bottom
|
||||
)).toString()}
|
||||
onChange={(value) => {
|
||||
props.onChange('height', ApplyWidthMargin(Number(value),
|
||||
props.onChange('height', ApplyWidthMargin(
|
||||
Number(value),
|
||||
props.properties.margin.top,
|
||||
props.properties.margin.bottom));
|
||||
props.properties.margin.bottom
|
||||
));
|
||||
}}
|
||||
isDisabled={props.properties.isFlex}
|
||||
/>
|
||||
|
|
@ -270,7 +278,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.left ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('left', Number(value), PropertyType.Margin); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('left', Number(value), PropertyType.Margin);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-mb`}
|
||||
labelText={Text({ textId: '@ContainerMarginBottom' })}
|
||||
|
|
@ -280,7 +290,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.bottom ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('bottom', Number(value), PropertyType.Margin); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('bottom', Number(value), PropertyType.Margin);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-mt`}
|
||||
labelText={Text({ textId: '@ContainerMarginTop' })}
|
||||
|
|
@ -290,7 +302,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.top ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('top', Number(value), PropertyType.Margin); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('top', Number(value), PropertyType.Margin);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-mr`}
|
||||
labelText={Text({ textId: '@ContainerMarginRight' })}
|
||||
|
|
@ -300,7 +314,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.right ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('right', Number(value), PropertyType.Margin); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('right', Number(value), PropertyType.Margin);
|
||||
}}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
|
@ -377,7 +393,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowSelfDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
value={props.properties.dimensionOptions.selfDimensions.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfDimension); }}
|
||||
onChange={(key, value) => {
|
||||
props.onChange(key, value, PropertyType.SelfDimension);
|
||||
}}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
|
|
@ -386,7 +404,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.selfDimensions.color ?? '#000000'}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/>
|
||||
onChange={(e) => {
|
||||
props.onChange('color', e.target.value, PropertyType.SelfDimension);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfDimensions-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
|
|
@ -396,7 +416,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.selfDimensions.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfDimension); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('width', Number(value), PropertyType.SelfDimension);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfDimensions-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
|
|
@ -405,7 +427,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.selfDimensions.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfDimension); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('dashArray', value, PropertyType.SelfDimension);
|
||||
}}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
|
|
@ -417,7 +441,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowSelfMarginsDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfMarginDimension); }}
|
||||
onChange={(key, value) => {
|
||||
props.onChange(key, value, PropertyType.SelfMarginDimension);
|
||||
}}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
|
|
@ -426,7 +452,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.color ?? '#000000'}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/>
|
||||
onChange={(e) => {
|
||||
props.onChange('color', e.target.value, PropertyType.SelfMarginDimension);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfMarginsDimensions-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
|
|
@ -436,7 +464,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.selfMarginsDimensions.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfMarginDimension); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('width', Number(value), PropertyType.SelfMarginDimension);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfMarginsDimensions-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
|
|
@ -445,7 +475,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfMarginDimension); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('dashArray', value, PropertyType.SelfMarginDimension);
|
||||
}}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
|
|
@ -457,7 +489,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowChildrenDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
value={props.properties.dimensionOptions.childrenDimensions.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.ChildrenDimensions); }}
|
||||
onChange={(key, value) => {
|
||||
props.onChange(key, value, PropertyType.ChildrenDimensions);
|
||||
}}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
|
|
@ -466,7 +500,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.childrenDimensions.color ?? '#000000'}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/>
|
||||
onChange={(e) => {
|
||||
props.onChange('color', e.target.value, PropertyType.ChildrenDimensions);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-childrenDimensions-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
|
|
@ -476,7 +512,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.childrenDimensions.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.ChildrenDimensions); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('width', Number(value), PropertyType.ChildrenDimensions);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-childrenDimensions-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
|
|
@ -485,7 +523,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.childrenDimensions.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.ChildrenDimensions); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('dashArray', value, PropertyType.ChildrenDimensions);
|
||||
}}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
|
|
@ -497,7 +537,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='MarkPosition'
|
||||
value={props.properties.dimensionOptions.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionOptions); }}
|
||||
onChange={(key, value) => {
|
||||
props.onChange(key, value, PropertyType.DimensionOptions);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
|
|
@ -507,7 +549,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionWithMarks); }}
|
||||
onChange={(key, value) => {
|
||||
props.onChange(key, value, PropertyType.DimensionWithMarks);
|
||||
}}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
|
|
@ -516,7 +560,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.color ?? '#000000'}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
|
||||
onChange={(e) => {
|
||||
props.onChange('color', e.target.value, PropertyType.DimensionWithMarks);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-dimensionWithMarks-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
|
|
@ -526,7 +572,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.dimensionWithMarks.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.DimensionWithMarks); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('width', Number(value), PropertyType.DimensionWithMarks);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-dimensionWithMarks-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
|
|
@ -535,7 +583,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.DimensionWithMarks); }}/>
|
||||
onChange={(value) => {
|
||||
props.onChange('dashArray', value, PropertyType.DimensionWithMarks);
|
||||
}}/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
|
@ -557,7 +607,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='col-span-3'
|
||||
type='color'
|
||||
value={props.properties.style.stroke ?? '#000000'}
|
||||
onChange={(e) => { props.onChange('stroke', e.target.value, PropertyType.Style); }}/>
|
||||
onChange={(e) => {
|
||||
props.onChange('stroke', e.target.value, PropertyType.Style);
|
||||
}}/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-strokeOpacity`}
|
||||
labelText={Text({ textId: '@StyleStrokeOpacity' })}
|
||||
|
|
@ -569,7 +621,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.strokeOpacity ?? 1).toString()}
|
||||
onChange={(event) => { props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style); }}
|
||||
onChange={(event) => {
|
||||
props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style);
|
||||
}}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-strokeWidth`}
|
||||
|
|
@ -579,7 +633,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='col-span-3'
|
||||
type='number'
|
||||
value={(props.properties.style.strokeWidth ?? 1).toString()}
|
||||
onChange={(value) => { props.onChange('strokeWidth', Number(value), PropertyType.Style); }}
|
||||
onChange={(value) => {
|
||||
props.onChange('strokeWidth', Number(value), PropertyType.Style);
|
||||
}}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleFill' })}
|
||||
|
|
@ -588,7 +644,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='col-span-3'
|
||||
type='color'
|
||||
value={props.properties.style.fill ?? '#000000'}
|
||||
onChange={(e) => { props.onChange('fill', e.target.value, PropertyType.Style); }}/>
|
||||
onChange={(e) => {
|
||||
props.onChange('fill', e.target.value, PropertyType.Style);
|
||||
}}/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-fillOpacity`}
|
||||
labelText={Text({ textId: '@StyleFillOpacity' })}
|
||||
|
|
@ -600,7 +658,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.fillOpacity ?? 1).toString()}
|
||||
onChange={(event) => { props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style); }}
|
||||
onChange={(event) => {
|
||||
props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Category>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import { fireEvent, render, screen } from '@testing-library/react';
|
|||
import * as React from 'react';
|
||||
import { expect, describe, it, vi } from 'vitest';
|
||||
import { PositionReference } from '../../Enums/PositionReference';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { Orientation } from '../../Enums/Orientation';
|
||||
import { ContainerProperties } from './ContainerProperties';
|
||||
import { DEFAULT_DIMENSION_OPTION } from '../../utils/default';
|
||||
import { ContainerProperties } from './ContainerProperties';
|
||||
|
||||
describe.concurrent('Properties', () => {
|
||||
it('No properties', () => {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
|||
import { type PropertyType } from '../../Enums/PropertyType';
|
||||
import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ContainerForm } from './ContainerForm';
|
||||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { ContainerForm } from './ContainerForm';
|
||||
|
||||
interface IPropertiesProps {
|
||||
containers: Map<string, IContainerModel>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue