refactor: add typescript support to project

2022-06-21 15:08:35 +08:00
parent 88ec2b742a
commit bd799ebea8
259 changed files with 1042 additions and 458 deletions
@@ -0,0 +1,107 @@
+import { useState, useId } from "react";
+import styled from "styled-components";
+
+const StyledForm = styled.form`
+  > .option {
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    > input[type="radio"] {
+      display: none;
+
+      & + .box {
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        transition: all ease-in-out 250ms;
+
+        & > label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: #667085;
+          cursor: pointer;
+          user-select: none;
+          transition: all ease-in-out 250ms;
+
+          &:before {
+            content: "";
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border-radius: 8px;
+            background: #ffffff;
+            box-shadow: inset 0 0 0 4px #ffffff;
+            border: 1px solid #d0d5dd;
+            margin: 14px 8px 14px 14px;
+            transition: all ease-in-out 500ms;
+          }
+        }
+      }
+
+      &:checked + .box {
+        background: #22ccee;
+        border: 1px solid #d0d5dd;
+
+        & > label {
+          color: #ffffff;
+
+          &:before {
+            background: #ffffff;
+            box-shadow: inset 0 0 0 4px #22ccee;
+            border: 1px solid #ffffff;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const VALUE_NOT_SET = {};
+const VALUES_NOT_SET = {};
+
+export default function Radio({
+  options,
+  values = VALUES_NOT_SET,
+  value = VALUE_NOT_SET,
+  defaultValue = undefined,
+  onChange = undefined
+}) {
+  const id = useId();
+
+  const [fallbackValue, setFallbackValue] = useState(defaultValue);
+  const _value = value !== VALUE_NOT_SET ? value : fallbackValue;
+
+  return (
+    <StyledForm>
+      {options.map((item, index) => (
+        <div className="option" key={index}>
+          <input
+            type="radio"
+            checked={(values !== VALUES_NOT_SET ? values.indexOf(_value) : _value) === index}
+            onChange={() => {
+              const valueToSet = values === VALUES_NOT_SET ? index : values[index];
+              // Set fallback value if not in controlled mode
+              if (value === VALUE_NOT_SET) {
+                setFallbackValue(valueToSet);
+              }
+              // Invoke `onChange` handler if defined
+              if (onChange) {
+                onChange(valueToSet);
+              }
+            }}
+            id={`${id}-${index}`}
+          />
+          <div className="box">
+            <label htmlFor={`${id}-${index}`}>{item}</label>
+          </div>
+        </div>
+      ))}
+    </StyledForm>
+  );
+}