Merge pull request #35 from raduwen/feature/auto-hidden-text-widget

feat: auto hide text widget when text is empty

Author: raduwen

src/components/TextWidget/editor.tsx

@@ -305,6 +305,19 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
             }
             label="非表示"
           />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={this.state.autoHidden}
+                onChange={(e) => {
+                  this.setState({ ...this.state, autoHidden: e.target.checked });
+                }}
+                name="auto-hidden"
+                color="primary"
+              />
+            }
+            label="自動非表示"
+          />
         </FormGroup>
 
         <FirebaseDatabaseMutation

src/components/TextWidget/types.ts

@@ -20,6 +20,7 @@ type TextWidgetProps = {
   padding?: string;    // px
   position?: Position;
   hidden: boolean;
+  autoHidden: boolean;
 };
 
 export type { Position, TextWidgetProps };

src/components/TextWidget/widget.tsx

@@ -42,6 +42,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
   padding,
   position,
   hidden,
+  autoHidden,
 }) => {
   const edge = calcTextShadow(edgeWeight || 1, edgeColor || '#000000');
 
@@ -55,7 +56,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
     textShadow: edge,
     textAlign: textAlign || 'left',
     backgroundColor: backgroundColor || 'rgba(0,0,0,0.1)',
-    display: hidden ? 'none' : 'block',
+    display: hidden || autoHidden && text.length === 0 ? 'none' : 'block',
   };
 
   if (position?.top !== undefined) style.top = position.top;