From 92387a2779c2798f922540aefb1f2c7d954ecef9 Mon Sep 17 00:00:00 2001
From: raduwen <raduwen@gmail.com>
Date: Wed, 18 Aug 2021 20:29:18 +0900
Subject: [PATCH] feat: hidden checkbox

---
 .gitignore                           |  1 +
 src/components/TextWidget/editor.tsx | 23 ++++++++++++++++++++++-
 src/components/TextWidget/types.ts   |  1 +
 src/components/TextWidget/widget.tsx |  4 ++--
 src/components/TimeWidget/editor.tsx | 23 ++++++++++++++++++++++-
 src/components/TimeWidget/types.ts   |  1 +
 src/components/TimeWidget/widget.tsx |  6 +++---
 7 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index fff2bb14..dddbe73a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
diff --git a/src/components/TextWidget/editor.tsx b/src/components/TextWidget/editor.tsx
index e1a7639a..cbbad6d3 100644
--- a/src/components/TextWidget/editor.tsx
+++ b/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"
diff --git a/src/components/TextWidget/types.ts b/src/components/TextWidget/types.ts
index 4dd84c2e..23d127bd 100644
--- a/src/components/TextWidget/types.ts
+++ b/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 };
diff --git a/src/components/TextWidget/widget.tsx b/src/components/TextWidget/widget.tsx
index 67bbdc9c..e40bfabf 100644
--- a/src/components/TextWidget/widget.tsx
+++ b/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,6 +55,7 @@ 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;
@@ -61,8 +63,6 @@ const TextWidget: VFC<TextWidgetProps> = ({
   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>;
 };
 
diff --git a/src/components/TimeWidget/editor.tsx b/src/components/TimeWidget/editor.tsx
index 8b219d74..686fddac 100644
--- a/src/components/TimeWidget/editor.tsx
+++ b/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"
diff --git a/src/components/TimeWidget/types.ts b/src/components/TimeWidget/types.ts
index a73ce2d4..573e98f9 100644
--- a/src/components/TimeWidget/types.ts
+++ b/src/components/TimeWidget/types.ts
@@ -1,5 +1,6 @@
 type TimeWidgetProps = {
   size: number;
+  hidden: boolean;
 };
 
 export type { TimeWidgetProps };
diff --git a/src/components/TimeWidget/widget.tsx b/src/components/TimeWidget/widget.tsx
index 601e5442..0b3929ba 100644
--- a/src/components/TimeWidget/widget.tsx
+++ b/src/components/TimeWidget/widget.tsx
@@ -11,7 +11,7 @@ class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
   constructor(props: TimeWidgetProps) {
     super(props)
     this.state = {
-      time: new Date()
+      time: new Date(),
     };
   }
 
@@ -19,7 +19,7 @@ class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
     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 (