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 styled, { createGlobalStyle } from "styled-components";
+import Tippy from "@tippyjs/react";
+import { roundArrow } from "tippy.js";
+import "tippy.js/dist/svg-arrow.css";
+import { updateUserGuide } from "../../../app/slices/ui";
+import steps from "./steps";
+import { useAppDispatch, useAppSelector } from "../../../app/store";
+
+const Styled = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: #06aed4;
+  border-radius: var(--br);
+  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  color: #ffffff;
+  min-width: 362px;
+  .title {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    margin-bottom: 4px;
+  }
+  .desc {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 24px;
+  }
+  .btns {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    button {
+      cursor: pointer;
+      color: inherit;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      border: none;
+      background: none;
+      &.skip {
+        font-weight: 400;
+      }
+      &.next {
+        background: rgba(0, 0, 0, 0.16);
+        padding: 8px 14px;
+        border-radius: var(--br);
+      }
+    }
+  }
+`;
+const OverrideTippyArrowColor = createGlobalStyle`
+.user-guide-tippy .tippy-svg-arrow svg path{
+    fill:#06aed4 ;
+}
+`;
+
+export default function UserGuide({ step = 1, placement = "right-start", delay = null, children }) {
+  const dispatch = useAppDispatch();
+  const { visible, step: reduxStep } = useAppSelector((store) => store.ui.userGuide);
+  const currStep = steps[step - 1];
+  const isLastStep = steps.length == step;
+  //   if (!visible) return children;
+  if (!currStep) return null;
+  const { title, description } = currStep;
+  const defaultDuration = [300, 250];
+  const handleSkip = () => {
+    // to do
+    dispatch(updateUserGuide({ visible: false }));
+  };
+  const handleNext = () => {
+    dispatch(updateUserGuide({ step: step + 1 }));
+  };
+  return (
+    <>
+      <OverrideTippyArrowColor />
+      <Tippy
+        interactive
+        className="user-guide-tippy"
+        arrow={roundArrow}
+        visible={true}
+        offset={[0, 18]}
+        duration={delay ? defaultDuration : 0}
+        delay={delay ?? [150, 0]}
+        placement={placement}
+        content={
+          <Styled>
+            <h4 className="title">{title}</h4>
+            <p className="desc">{description}</p>
+            <div className="btns">
+              <button className="skip" onClick={handleSkip}>
+                Skip
+              </button>
+              <button className="next" onClick={handleNext}>
+                {isLastStep ? `Done` : `Next Step`}
+              </button>
+            </div>
+          </Styled>
+        }
+      >
+        {children}
+      </Tippy>
+    </>
+  );
+}