Merged PR 170: Add new eslint rules
- naming-convention - prefer-arrow-callback - func-style - import/no-default-export
This commit is contained in:
Eric Nguyen
parent
3f58c5ba5e
commit
ad126c6c28
65 changed files with 781 additions and 784 deletions
|
|
@ -2,9 +2,9 @@ import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
|
|||
import * as React from 'react';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { XPositionReference } from '../../Enums/XPositionReference';
|
||||
import IContainerProperties from '../../Interfaces/IContainerProperties';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, restoreX, transformX } from '../../utils/svg';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, TransformX } from '../../utils/svg';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
|
||||
import { Select } from '../Select/Select';
|
||||
|
|
@ -15,10 +15,8 @@ interface IContainerFormProps {
|
|||
onChange: (key: string, value: string | number | boolean, type?: PropertyType) => void
|
||||
}
|
||||
|
||||
const getCSSInputs = (
|
||||
properties: IContainerProperties,
|
||||
onChange: (key: string, value: string | number | boolean, type: PropertyType) => void
|
||||
): JSX.Element[] => {
|
||||
function GetCSSInputs(properties: IContainerProperties,
|
||||
onChange: (key: string, value: string | number | boolean, type: PropertyType) => void): JSX.Element[] {
|
||||
const groupInput: JSX.Element[] = [];
|
||||
for (const key in properties.style) {
|
||||
groupInput.push(<InputGroup
|
||||
|
|
@ -29,13 +27,12 @@ const getCSSInputs = (
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={(properties.style as any)[key]}
|
||||
onChange={(event) => onChange(key, event.target.value, PropertyType.STYLE)}
|
||||
/>);
|
||||
onChange={(event) => onChange(key, event.target.value, PropertyType.Style)} />);
|
||||
}
|
||||
return groupInput;
|
||||
};
|
||||
}
|
||||
|
||||
const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
||||
export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
||||
return (
|
||||
<div className='grid grid-cols-2 gap-y-4'>
|
||||
<InputGroup
|
||||
|
|
@ -45,8 +42,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.id.toString()}
|
||||
isDisabled={true}
|
||||
/>
|
||||
isDisabled={true} />
|
||||
<InputGroup
|
||||
labelText='Parent name'
|
||||
inputKey='parentId'
|
||||
|
|
@ -54,8 +50,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.parentId}
|
||||
isDisabled={true}
|
||||
/>
|
||||
isDisabled={true} />
|
||||
<InputGroup
|
||||
labelText='Type'
|
||||
inputKey='type'
|
||||
|
|
@ -63,8 +58,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.type}
|
||||
isDisabled={true}
|
||||
/>
|
||||
isDisabled={true} />
|
||||
<InputGroup
|
||||
labelText='Displayed text'
|
||||
inputKey='displayedText'
|
||||
|
|
@ -72,8 +66,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.displayedText?.toString()}
|
||||
onChange={(event) => props.onChange('displayedText', event.target.value)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('displayedText', event.target.value)} />
|
||||
<InputGroup
|
||||
labelText='x'
|
||||
inputKey='x'
|
||||
|
|
@ -81,19 +74,18 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='number'
|
||||
isDisabled={props.properties.linkedSymbolId !== ''}
|
||||
value={transformX(RemoveXMargin(props.properties.x, props.properties.margin.left), props.properties.width, props.properties.XPositionReference).toString()}
|
||||
value={TransformX(RemoveXMargin(props.properties.x, props.properties.margin.left), props.properties.width, props.properties.xPositionReference).toString()}
|
||||
onChange={(event) => props.onChange(
|
||||
'x',
|
||||
ApplyXMargin(
|
||||
restoreX(
|
||||
RestoreX(
|
||||
Number(event.target.value),
|
||||
props.properties.width,
|
||||
props.properties.XPositionReference
|
||||
props.properties.xPositionReference
|
||||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
)}
|
||||
/>
|
||||
)} />
|
||||
<InputGroup
|
||||
labelText='y'
|
||||
inputKey='y'
|
||||
|
|
@ -101,8 +93,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='number'
|
||||
value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
|
||||
onChange={(event) => props.onChange('y', Number(event.target.value) + (props.properties.margin?.top ?? 0))}
|
||||
/>
|
||||
onChange={(event) => props.onChange('y', Number(event.target.value) + (props.properties.margin?.top ?? 0))} />
|
||||
<InputGroup
|
||||
labelText='Minimum width'
|
||||
inputKey='minWidth'
|
||||
|
|
@ -111,8 +102,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.minWidth.toString()}
|
||||
onChange={(event) => props.onChange('minWidth', Number(event.target.value))}
|
||||
/>
|
||||
onChange={(event) => props.onChange('minWidth', Number(event.target.value))} />
|
||||
<InputGroup
|
||||
labelText='Maximum width'
|
||||
inputKey='maxWidth'
|
||||
|
|
@ -121,8 +111,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.maxWidth.toString()}
|
||||
onChange={(event) => props.onChange('maxWidth', Number(event.target.value))}
|
||||
/>
|
||||
onChange={(event) => props.onChange('maxWidth', Number(event.target.value))} />
|
||||
<InputGroup
|
||||
labelText='Width'
|
||||
inputKey='width'
|
||||
|
|
@ -132,8 +121,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
min={props.properties.minWidth}
|
||||
value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
|
||||
onChange={(event) => props.onChange('width', ApplyWidthMargin(Number(event.target.value), props.properties.margin.left, props.properties.margin.right))}
|
||||
isDisabled={props.properties.isFlex}
|
||||
/>
|
||||
isDisabled={props.properties.isFlex} />
|
||||
<InputGroup
|
||||
labelText='Height'
|
||||
inputKey='height'
|
||||
|
|
@ -142,8 +130,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
|
||||
onChange={(event) => props.onChange('height', Number(event.target.value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))}
|
||||
/>
|
||||
onChange={(event) => props.onChange('height', Number(event.target.value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
|
||||
<InputGroup
|
||||
labelText='Margin left'
|
||||
inputKey='left'
|
||||
|
|
@ -152,8 +139,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.left ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('left', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('left', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
labelText='Margin bottom'
|
||||
inputKey='bottom'
|
||||
|
|
@ -162,8 +148,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.bottom ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('bottom', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('bottom', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
labelText='Margin top'
|
||||
inputKey='top'
|
||||
|
|
@ -172,8 +157,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.top ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('top', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('top', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
labelText='Margin right'
|
||||
inputKey='right'
|
||||
|
|
@ -182,8 +166,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.right ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('right', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('right', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
labelText='Flex'
|
||||
inputKey='isFlex'
|
||||
|
|
@ -191,8 +174,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='checkbox'
|
||||
checked={props.properties.isFlex}
|
||||
onChange={(event) => props.onChange('isFlex', event.target.checked)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('isFlex', event.target.checked)} />
|
||||
<InputGroup
|
||||
labelText='Anchor'
|
||||
inputKey='isAnchor'
|
||||
|
|
@ -200,11 +182,10 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='checkbox'
|
||||
checked={props.properties.isAnchor}
|
||||
onChange={(event) => props.onChange('isAnchor', event.target.checked)}
|
||||
/>
|
||||
onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
|
||||
<RadioGroupButtons
|
||||
name='XPositionReference'
|
||||
value={props.properties.XPositionReference.toString()}
|
||||
value={props.properties.xPositionReference.toString()}
|
||||
inputClassName='hidden'
|
||||
labelText='Horizontal alignment'
|
||||
inputGroups={[
|
||||
|
|
@ -233,8 +214,7 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
value: XPositionReference.Right.toString()
|
||||
}
|
||||
]}
|
||||
onChange={(event) => props.onChange('XPositionReference', Number(event.target.value))}
|
||||
/>
|
||||
onChange={(event) => props.onChange('xPositionReference', Number(event.target.value))} />
|
||||
<Select
|
||||
inputKey='linkedSymbolId'
|
||||
labelText='Align with symbol'
|
||||
|
|
@ -245,11 +225,8 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
value: symbol.id
|
||||
}))}
|
||||
value={props.properties.linkedSymbolId ?? ''}
|
||||
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}
|
||||
/>
|
||||
{ getCSSInputs(props.properties, props.onChange) }
|
||||
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
|
||||
{GetCSSInputs(props.properties, props.onChange)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContainerForm;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue