From 0da55725f33931aa0388e7c8a352fd05d1eb7b34 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 19 Feb 2021 18:55:51 -0500
Subject: [PATCH] feat(striker-ui): add atom ToggleSwitch

---
 striker-ui/components/atoms/ToggleSwitch.tsx | 81 ++++++++++++++++++++
 striker-ui/types/ToggleSwitchProps.d.ts      |  6 ++
 2 files changed, 87 insertions(+)
 create mode 100644 striker-ui/components/atoms/ToggleSwitch.tsx
 create mode 100644 striker-ui/types/ToggleSwitchProps.d.ts

diff --git a/striker-ui/components/atoms/ToggleSwitch.tsx b/striker-ui/components/atoms/ToggleSwitch.tsx
new file mode 100644
index 00000000..03cc1cdc
--- /dev/null
+++ b/striker-ui/components/atoms/ToggleSwitch.tsx
@@ -0,0 +1,81 @@
+import { FunctionComponent, useState } from 'react';
+import styled from 'styled-components';
+
+import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
+
+import { ToggleSwitchProps } from '../../types/ToggleSwitchProps';
+
+const StyledCheckbox = styled.input`
+  display: none;
+`;
+
+const StyledToggleSwitchBase = styled.div<ToggleSwitchProps>`
+  display: flex;
+
+  align-items: center;
+
+  width: 3em;
+  height: 1.5em;
+
+  transition-property: background-color, border-color;
+  transition-duration: 1s;
+
+  background-color: ${(props) =>
+    props.checked ? '#d02724' : props.theme.colors.tertiary};
+
+  border-style: solid;
+  border-width: 0.2em;
+
+  border-color: ${(props) =>
+    props.checked ? '#d02724' : props.theme.colors.tertiary};
+
+  > * {
+    flex-basis: 45%;
+    height: 100%;
+  }
+`;
+
+const StyledToggleSwitchLever = styled.div<ToggleSwitchProps>`
+  background-color: #ffffff;
+
+  transition: margin-left 1s;
+
+  margin-left: ${(props) => (props.checked ? '55%' : '0')};
+`;
+
+StyledCheckbox.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
+StyledToggleSwitchBase.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
+StyledToggleSwitchLever.defaultProps = {
+  theme: DEFAULT_THEME,
+};
+
+const ToggleSwitch: FunctionComponent<ToggleSwitchProps> = ({
+  checked = false,
+  disabled,
+}) => {
+  const [on, setOn] = useState<boolean>(checked);
+
+  return (
+    <StyledToggleSwitchBase
+      {...{
+        onClick: () => {
+          setOn(!on);
+        },
+        checked: on,
+      }}
+    >
+      <StyledToggleSwitchLever {...{ checked: on }} />
+      <StyledCheckbox
+        {...{ checked: on, disabled, readOnly: true, type: 'checkbox' }}
+      />
+    </StyledToggleSwitchBase>
+  );
+};
+
+export default ToggleSwitch;
diff --git a/striker-ui/types/ToggleSwitchProps.d.ts b/striker-ui/types/ToggleSwitchProps.d.ts
new file mode 100644
index 00000000..ea08a9b5
--- /dev/null
+++ b/striker-ui/types/ToggleSwitchProps.d.ts
@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+
+type ToggleSwitchProps = Pick<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'disabled'
+>;