add text-align property

Author: raduwen

src/components/TextWidget/editor.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Property } from 'csstype';
 import styled from 'styled-components';
 import { TextField, Button, Typography } from '@material-ui/core';
 import { FirebaseDatabaseMutation } from '@react-firebase/database'
@@ -140,6 +141,18 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
             }}
             value={this.state.edgeColor}
           />
+          <TextField
+            type="text"
+            label="text align"
+            fullWidth
+            variant="outlined"
+            onChange={(e) => {
+              this.setState({ ...this.state, textAlign: e.target.value as Property.TextAlign });
+            }}
+            value={this.state.textAlign}
+          />
+        </FormGroup>
+        <FormGroup>
           <TextField
             type="color"
             label="background color"
@@ -165,8 +178,6 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
             }}
             value={Color.fromRGBA(this.state.backgroundColor).a}
           />
-        </FormGroup>
-        <FormGroup>
           <TextField
             type="number"
             label="width"
@@ -187,7 +198,8 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
             }}
             value={this.state.height}
           />
-
+        </FormGroup>
+        <FormGroup>
           <TextField
             type="number"
             label="position top"

src/components/TextWidget/types.ts

@@ -1,3 +1,5 @@
+import { Property } from 'csstype';
+
 type Position = {
   top?: number;    // px
   right?: number;  // px
@@ -9,6 +11,7 @@ type TextWidgetProps = {
   text: string;
   textColor?: string;
   fontSize?: string;
+  textAlign?: Property.TextAlign;
   backgroundColor?: string;
   edgeWeight?: number; // px
   edgeColor?: string;

src/components/TextWidget/widget.tsx

@@ -22,6 +22,7 @@ const defaultStyle: CSSProperties = {
   color: '#ffffff',
   backgroundColor: 'rgba(0,0,0,0.1)',
   textShadow: calcTextShadow(1, '#000000'),
+  textAlign: 'left',
   width: 320,
   height: 540,
   padding: '0.25rem 0.5rem',
@@ -32,6 +33,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
   text,
   textColor,
   fontSize,
+  textAlign,
   backgroundColor,
   edgeWeight,
   edgeColor,
@@ -50,6 +52,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
     color: textColor || '#ffffff',
     fontSize: fontSize || '1rem',
     textShadow: edge,
+    textAlign: textAlign || 'left',
     backgroundColor: backgroundColor || 'rgba(0,0,0,0.1)',
   };