Merged PR 227: Refactor Properties in ContainerProperties

Commit 927934a5: Refactor Style inputs to replace React.CSSProperties by IStyle

src/Components/CheckboxGroupButtons/CheckboxGroupButtons.tsx

@@ -63,9 +63,7 @@ export function CheckboxGroupButtons(props: ICheckboxGroupButtonsProps): JSX.Ele
       <label className='text-xs font-medium text-gray-800'>
         {props.labelText}
       </label>
-      <div id='XPositionReference'
-        className={`grid ${gridColsClass}`}
-      >
+      <div className={`grid ${gridColsClass}`}>
         {inputGroups}
       </div>
     </>

src/Components/ContainerProperties/ContainerForm.tsx

@@ -21,24 +21,6 @@ interface IContainerFormProps {
   onChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
 }
 
-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(<TextInputGroup
-      key={key}
-      id={key}
-      labelText={key}
-      inputKey={key}
-      labelClassName='col-span-2'
-      inputClassName='col-span-3'
-      type='string'
-      value={(properties.style as any)[key]}
-      onChange={(value) => onChange(key, value, PropertyType.Style)} />);
-  }
-  return groupInput;
-}
-
 export function ContainerForm(props: IContainerFormProps): JSX.Element {
   const categoryHeight = 'h-11';
   return (
@@ -400,16 +382,73 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         </div>
       </Category>
 
-      <Category category={{
-        Type: 'Style',
-        DisplayedText: Text({ textId: '@ContainerStyle' })
-      }}
-      heightClass={`${categoryHeight}`}
-      >
-        <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
-          {GetCSSInputs(props.properties, props.onChange)}
-        </div>
-      </Category>
+      { props.properties.style !== undefined &&
+        <Category category={{
+          Type: 'Style',
+          DisplayedText: Text({ textId: '@ContainerStyle' })
+        }}
+        heightClass={`${categoryHeight}`}
+        >
+          <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
+            <TextInputGroup
+              id={`${props.properties.id}-stroke`}
+              labelText={Text({ textId: '@StyleStroke' })}
+              inputKey='stroke'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='string'
+              value={props.properties.style.stroke ?? 'black'}
+              onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
+            />
+            <InputGroup
+              labelKey={`${props.properties.id}-strokeOpacity`}
+              labelText={Text({ textId: '@StyleStrokeOpacity' })}
+              inputKey='strokeOpacity'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='range'
+              min={0}
+              max={1}
+              step={0.01}
+              value={(props.properties.style.strokeOpacity ?? 1).toString()}
+              onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
+            />
+            <TextInputGroup
+              id={`${props.properties.id}-strokeWidth`}
+              labelText={Text({ textId: '@StyleStrokeWidth' })}
+              inputKey='strokeWidth'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='number'
+              value={(props.properties.style.strokeWidth ?? 1).toString()}
+              onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
+            />
+            <TextInputGroup
+              id={`${props.properties.id}-fill`}
+              labelText={Text({ textId: '@StyleFill' })}
+              inputKey='fill'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='string'
+              value={props.properties.style.fill ?? 'black'}
+              onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
+            />
+            <InputGroup
+              labelKey={`${props.properties.id}-fillOpacity`}
+              labelText={Text({ textId: '@StyleFillOpacity' })}
+              inputKey='fillOpacity'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='range'
+              min={0}
+              max={1}
+              step={0.01}
+              value={(props.properties.style.fillOpacity ?? 1).toString()}
+              onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
+            />
+          </div>
+        </Category>
+      }
     </div>
   );
 }

src/Components/InputGroup/InputGroup.tsx

@@ -13,6 +13,7 @@ interface IInputGroupProps {
   defaultChecked?: boolean
   min?: number
   max?: number
+  step?: number
   isDisabled?: boolean
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
@@ -39,6 +40,7 @@ export function InputGroup(props: IInputGroupProps): JSX.Element {
       onChange={props.onChange}
       min={props.min}
       max={props.max}
+      step={props.step}
       disabled={props.isDisabled} />
   </>;
 }