TimeWidget editor

src/components/TimeWidget/editor.tsx

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { TextField, Button, Typography } from '@material-ui/core';
+import { FirebaseDatabaseMutation } from '@react-firebase/database'
+import type { TimeWidgetProps } from './types';
+
+type Props = {
+  id: string;
+  props: TimeWidgetProps;
+};
+
+const FormGroup = styled.div`
+  display: flex;
+  margin-bottom: 1rem;
+  width: 480px;
+  & > label {
+    width: 20%;
+  }
+  & > input {
+    flex-grow: 1;
+  }
+`;
+
+class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
+  constructor(props) {
+    super(props);
+    this.state = this.props.props;
+  }
+
+  render() {
+    return (
+      <div>
+        <Typography variant="h6">
+          TimeWidget : {this.props.id}
+        </Typography>
+        <FormGroup>
+          <TextField
+            type="number"
+            label="size"
+            fullWidth
+            variant="outlined"
+            onChange={(e) => {
+              this.setState({ ...this.state, size: parseFloat(e.target.value) });
+            }}
+            value={this.state.size}
+          />
+        </FormGroup>
+
+        <FirebaseDatabaseMutation
+          type="set"
+          path={`/widgets/${this.props.id}/props`}
+        >
+          {({ runMutation }) => {
+            return (
+              <FormGroup>
+                <Button
+                  type="button"
+                  color="primary"
+                  variant="contained"
+                  onClick={async (e: any) => {
+                    e.preventDefault();
+                    await runMutation(this.state);
+                  }}
+                >
+                  Save
+                </Button>
+              </FormGroup>
+            );
+          }}
+        </FirebaseDatabaseMutation>
+      </div>
+    );
+  }
+}
+
+export { TimeWidgetEditor };

src/components/TimeWidget/index.tsx

@@ -1,85 +1,2 @@
-import React, { CSSProperties } from 'react';
-
-interface TimeWidgetProps {
-  size: number;
-};
-
-interface TimeWidgetState {
-  time: Date;
-};
-
-class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
-  interval: NodeJS.Timer | null;
-
-  constructor(props: TimeWidgetProps) {
-    super(props)
-    this.state = {
-      time: new Date()
-    };
-  }
-
-  render() {
-    const { size } = this.props
-
-    const style: CSSProperties = {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      textAlign: 'center',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      width: `${size*9.5}px`,
-      height: `${size*9.5}px`,
-      borderRadius: '50%',
-      color: 'white',
-      background: 'rgba(0, 128, 128, 0.75)',
-      transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
-      fontSize: `${size}px`,
-      fontWeight: 'bold'
-    }
-
-    return (
-      <div style={style}>
-        {this.formattedTime(this.state.time)}
-      </div>
-    )
-  }
-
-  formattedTime(time) {
-    return `
-      ${time.getFullYear()}/${this.zero_fill(time.getMonth() + 1)}/${this.zero_fill(time.getDate())}(${this.day2str(time.getDay())})\n
-      ${this.zero_fill(time.getHours())}:${this.zero_fill(time.getMinutes())}:${this.zero_fill(time.getSeconds())}
-    `
-  }
-
-  zero_fill(str) {
-    return `0${str}`.slice(-2)
-  }
-
-  day2str(n) {
-    return [
-      '日',
-      '月',
-      '火',
-      '水',
-      '木',
-      '金',
-      '土'
-    ][n]
-  }
-
-  tick() {
-    this.setState({ time: new Date() })
-  }
-
-  componentDidMount() {
-    this.interval = setInterval(this.tick.bind(this), 500)
-  }
-
-  componentWillUnmpount() {
-    clearInterval(this.interval)
-  }
-}
-
-export { TimeWidget }
+export { TimeWidget } from './widget';
+export { TimeWidgetEditor } from './editor';

src/components/TimeWidget/types.ts

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

src/components/TimeWidget/widget.tsx

@@ -0,0 +1,82 @@
+import React, { CSSProperties } from 'react';
+import type { TimeWidgetProps } from './types';
+
+interface TimeWidgetState {
+  time: Date;
+};
+
+class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
+  interval: NodeJS.Timer | null;
+
+  constructor(props: TimeWidgetProps) {
+    super(props)
+    this.state = {
+      time: new Date()
+    };
+  }
+
+  render() {
+    const { size } = this.props
+
+    const style: CSSProperties = {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      textAlign: 'center',
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      width: `${size*9.5}px`,
+      height: `${size*9.5}px`,
+      borderRadius: '50%',
+      color: 'white',
+      background: 'rgba(0, 128, 128, 0.75)',
+      transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
+      fontSize: `${size}px`,
+      fontWeight: 'bold'
+    }
+
+    return (
+      <div style={style}>
+        {this.formattedTime(this.state.time)}
+      </div>
+    )
+  }
+
+  formattedTime(time) {
+    return `
+      ${time.getFullYear()}/${this.zero_fill(time.getMonth() + 1)}/${this.zero_fill(time.getDate())}(${this.day2str(time.getDay())})\n
+      ${this.zero_fill(time.getHours())}:${this.zero_fill(time.getMinutes())}:${this.zero_fill(time.getSeconds())}
+    `
+  }
+
+  zero_fill(str) {
+    return `0${str}`.slice(-2)
+  }
+
+  day2str(n) {
+    return [
+      '日',
+      '月',
+      '火',
+      '水',
+      '木',
+      '金',
+      '土'
+    ][n]
+  }
+
+  tick() {
+    this.setState({ time: new Date() })
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(this.tick.bind(this), 500)
+  }
+
+  componentWillUnmpount() {
+    clearInterval(this.interval)
+  }
+}
+
+export { TimeWidget }

src/components/admin/index.tsx

@@ -15,9 +15,11 @@ import { AuthProvider } from '@/lib/AuthProvider';
 import { auth } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
 import { TextWidgetEditor } from '@/components/TextWidget';
+import { TimeWidgetEditor } from '@/components/TimeWidget';
 
 const Editors = {
-  'text': TextWidgetEditor,
+  text: TextWidgetEditor,
+  time: TimeWidgetEditor,
 };
 
 const useStyles = makeStyles((theme) => ({