documentation/src/components/layout.tsx at 88f0abf91692d996e4e3d98d1782dc785758b6e4 · react-hook-form/documentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import * as React from "react"
import { Animate } from "react-simple-animate"
import { getEditLink } from "./logic/getEditLink"
import { useStateMachine } from "little-state-machine"
import Nav from "./Nav"
import { updateSetting } from "../actions/settingActions"
import "./layout.css"

const Layout = (props: {
  children: any
  location?: {
    search: string
    pathname: string
  }
  defaultLang: string
}) => {
  const {
    actions,
    state,
    state: { language },
  } = useStateMachine({ updateSetting })
  const { currentLanguage } =
    language && language.currentLanguage ? language : { currentLanguage: "en" }
  const lightMode = state?.setting?.lightMode
  const currentVersion = state?.setting?.version
  const [show, setShow] = React.useState(false)
  const scrollHandler = () => {
    if (window.scrollY > 75) {
      setShow(true)
    } else {
      setShow(false)
    }
  }
  const editLink = getEditLink(
    currentVersion,
    currentLanguage,
    props.location?.pathname
  )

  React.useEffect(() => {
    window.addEventListener("scroll", scrollHandler)

    if (lightMode === null && window.matchMedia) {
      actions.updateSetting({
        lightMode: window.matchMedia("(prefers-color-scheme: light)").matches,
      })
    }

    return () => window.removeEventListener("scroll", scrollHandler)
  }, [])

  React.useEffect(() => {
    if (lightMode) {
      document.querySelector("body").classList.add("light")
    } else {
      document.querySelector("body").classList.remove("light")
    }
  }, [lightMode])

  return (
    <>
      <a className="skip-main" href="#main">
        Skip to content
      </a>
      <Nav defaultLang={props.defaultLang} />
      {props.children}
      <Animate
        play={show}
        start={{ opacity: 0, visibility: "hidden" }}
        end={{ opacity: 1, visibility: "visible" }}
      >
        {editLink && (
          <a
            target="_blank"
            rel="noopener noreferrer"
            className="editPage"
            aria-label="Edit Page"
            href={editLink}
          >
            Edit
          </a>
        )}
        <button
          className="scrollToTop"
          aria-label="Scroll back to top"
          onClick={() =>
            window.scrollTo({
              top: 0,
              left: 0,
              behavior: "smooth",
            })
          }
        >
          ▲
        </button>
      </Animate>
    </>
  )
}

export default Layout