-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add dtekv-upload and dtekv-download tools to navigation * feat: dialog instead of dropdown * feat: remove old code * chore: package version * feat: remove unused imports * feat: add soft load --------- Co-authored-by: Alvinn8 <42838560+Alvinn8@users.noreply.github.com>
- Loading branch information
1 parent
7218e17
commit d3c865c
Showing
18 changed files
with
618 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { useSetAtom } from 'jotai'; | ||
| import { dialogElementAtom } from '../atoms'; | ||
|
|
||
| function useDialog() { | ||
| const setDialogElement = useSetAtom(dialogElementAtom) | ||
|
|
||
| return { | ||
| open: (node: React.ReactNode) => setDialogElement(node), | ||
| close: () => setDialogElement(null) | ||
| } | ||
| } | ||
|
|
||
| export default useDialog; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { useEffect } from "react"; | ||
|
|
||
| /** | ||
| * A hook that provides a callback called when the user clicks outside the | ||
| * provided elements. | ||
| * | ||
| * @param elements A list of refs to elements that are concidered "inside". | ||
| * @param onClickOutside A callback when the user clicks "outside". | ||
| */ | ||
| function useOnClickOutside( | ||
| elements: React.RefObject<HTMLElement>[], | ||
| onClickOutside: () => void, | ||
| ) { | ||
| useEffect(() => { | ||
| function handleClickOutside(event: MouseEvent) { | ||
| const target = event.target as Node; | ||
| if ( | ||
| elements.every( | ||
| (element) => element.current && !element.current.contains(target) | ||
| ) | ||
| ) { | ||
| onClickOutside(); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return () => { | ||
| document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [elements, onClickOutside]); | ||
| } | ||
|
|
||
| export default useOnClickOutside; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
src/pages/Emulator/views/Nav/helpers/NavDropDownButton/NavDropDownButton.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| .navButton { | ||
| all: unset; | ||
| cursor: pointer; | ||
| padding: 0 12px; | ||
| height: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: var(--color-background); | ||
| border-right: 1px solid var(--color-border); | ||
| position: relative; | ||
|
|
||
| user-select: none; | ||
| } | ||
|
|
||
| .navButton:hover { | ||
| background-color: var(--color-background-hover); | ||
| } | ||
|
|
||
| .wrapper { | ||
| position: relative; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .dropDown { | ||
| display: none; | ||
| position: absolute; | ||
| flex-direction: column; | ||
| transform: translateY(100%); | ||
| bottom: -1px; | ||
| left: -1px; | ||
| width: calc(100% + 1px); | ||
| z-index: 10; | ||
| } | ||
|
|
||
| .dropDown.open { | ||
| display: flex; | ||
| } | ||
|
|
||
| .dropDown button { | ||
| all: unset; | ||
| display: flex; | ||
| align-items: center; | ||
| box-sizing: border-box; | ||
| padding-left: 12px; | ||
| justify-content: flex-start; | ||
| background-color: var(--color-background); | ||
| border: 1px solid var(--color-border); | ||
| border-top: unset; | ||
| height: 30px; | ||
| width: 100%; | ||
| user-select: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .dropDown button:hover { | ||
| background-color: var(--color-background-hover); | ||
| } | ||
|
|
||
|
|
||
| .dropDown button[disabled] { | ||
| cursor: not-allowed; | ||
| color: var(--color-text-disabled); | ||
| background-color: var(--color-background); | ||
| } |
57 changes: 57 additions & 0 deletions
57
src/pages/Emulator/views/Nav/helpers/NavDropDownButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { useRef, useState } from "react"; | ||
|
|
||
| import styles from "./NavDropDownButton.module.css"; | ||
| import useOnClickOutside from "../../../../../../hooks/useOnClickOutside"; | ||
| import cx from "../../../../../../utils/cx"; | ||
|
|
||
| type NavDropDownButtonProps = { | ||
| title: string; | ||
| buttons: { | ||
| title: string; | ||
| disabled?: boolean; | ||
| onClick: () => void; | ||
| }[]; | ||
| }; | ||
|
|
||
| function NavDropDownButton(props: NavDropDownButtonProps) { | ||
| const [open, setOpen] = useState(false); | ||
| const dropDownRef = useRef<HTMLDivElement>(null); | ||
| const buttonRef = useRef<HTMLButtonElement>(null); | ||
|
|
||
| useOnClickOutside([dropDownRef, buttonRef], () => setOpen(false)); | ||
|
|
||
| return ( | ||
| <div className={styles.wrapper}> | ||
| <button | ||
| ref={buttonRef} | ||
| onClick={() => { | ||
| setOpen(!open); | ||
| }} | ||
| className={styles.navButton} | ||
| > | ||
| {props.title} | ||
| </button> | ||
| <div | ||
| ref={dropDownRef} | ||
| className={cx(styles.dropDown, open && styles.open)} | ||
| > | ||
| {props.buttons.map(({ title, disabled, onClick }) => { | ||
| return ( | ||
| <button | ||
| disabled={disabled} | ||
| key={title} | ||
| onClick={() => { | ||
| setOpen(false); | ||
| onClick(); | ||
| }} | ||
| > | ||
| {title} | ||
| </button> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default React.memo(NavDropDownButton); |
Oops, something went wrong.