feat: hidden checkbox

.gitignore

@@ -4,3 +4,4 @@ node_modules
 dist
 dist-ssr
 *.local
+.env

src/components/TextWidget/editor.tsx

@@ -1,7 +1,13 @@
 import React, { Component } from 'react';
 import { Property } from 'csstype';
 import styled from 'styled-components';
-import { TextField, Button, Typography } from '@material-ui/core';
+import {
+  TextField,
+  Button,
+  Typography,
+  FormControlLabel,
+  Checkbox,
+} from '@material-ui/core';
 import { FirebaseDatabaseMutation } from '@react-firebase/database'
 import type { TextWidgetProps } from '@/components/TextWidget/types';
 
@@ -285,6 +291,21 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
             value={this.state.position?.left}
           />
         </FormGroup>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={this.state.hidden}
+                onChange={(e) => {
+                  this.setState({ ...this.state, hidden: e.target.checked });
+                }}
+                name="hidden"
+                color="primary"
+              />
+            }
+            label="非表示"
+          />
+        </FormGroup>
 
         <FirebaseDatabaseMutation
           type="set"

src/components/TextWidget/types.ts

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

src/components/TextWidget/widget.tsx

@@ -41,6 +41,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
   height,
   padding,
   position,
+  hidden,
 }) => {
   const edge = calcTextShadow(edgeWeight || 1, edgeColor || '#000000');
 
@@ -54,15 +55,14 @@ const TextWidget: VFC<TextWidgetProps> = ({
     textShadow: edge,
     textAlign: textAlign || 'left',
     backgroundColor: backgroundColor || 'rgba(0,0,0,0.1)',
+    display: hidden ? 'none' : 'block',
   };
 
   if (position?.top !== undefined) style.top = position.top;
   if (position?.right !== undefined) style.right = position.right;
   if (position?.bottom !== undefined) style.bottom = position.bottom;
   if (position?.left !== undefined) style.left = position.left;
 
-  console.log(style);
-
   return <div style={style}>{text}</div>;
 };
 

src/components/TimeWidget/editor.tsx

@@ -1,6 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import { TextField, Button, Typography } from '@material-ui/core';
+import {
+  TextField,
+  Button,
+  Typography,
+  FormControlLabel,
+  Checkbox,
+} from '@material-ui/core';
 import { FirebaseDatabaseMutation } from '@react-firebase/database'
 import type { TimeWidgetProps } from './types';
 
@@ -45,6 +51,21 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
             value={this.state.size}
           />
         </FormGroup>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={this.state.hidden}
+                onChange={(e) => {
+                  this.setState({ ...this.state, hidden: e.target.checked });
+                }}
+                name="hidden"
+                color="primary"
+              />
+            }
+            label="非表示"
+          />
+        </FormGroup>
 
         <FirebaseDatabaseMutation
           type="set"

src/components/TimeWidget/types.ts

@@ -1,5 +1,6 @@
 type TimeWidgetProps = {
   size: number;
+  hidden: boolean;
 };
 
 export type { TimeWidgetProps };

src/components/TimeWidget/widget.tsx

@@ -11,15 +11,15 @@ class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
   constructor(props: TimeWidgetProps) {
     super(props)
     this.state = {
-      time: new Date()
+      time: new Date(),
     };
   }
 
   render() {
     const { size } = this.props
 
     const style: CSSProperties = {
-      display: 'flex',
+      display: this.props.hidden ? 'none' : 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       textAlign: 'center',
@@ -33,7 +33,7 @@ class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
       background: 'rgba(0, 128, 128, 0.75)',
       transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
       fontSize: `${size}px`,
-      fontWeight: 'bold'
+      fontWeight: 'bold',
     }
 
     return (