granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update SearchModal to use new scroll tech

Browse source
This commit is contained in:
Justin Edmund 2023-01-21 07:09:41 -08:00
parent 7ad9032e86
commit 66df6f9f74
3 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/DialogContent/index.tsx
View file

@ -1,10 +1,10 @@
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog' import * as DialogPrimitive from '@radix-ui/react-dialog'
import classNames from 'classnames' import classNames from 'classnames'
import debounce from 'lodash.debounce'
import Overlay from '~components/Overlay' import Overlay from '~components/Overlay'
import './index.scss' import './index.scss'
import debounce from 'lodash.debounce'
interface Props interface Props
extends React.DetailedHTMLProps< extends React.DetailedHTMLProps<

18
components/SearchModal/index.scss
View file

@ -3,8 +3,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 430px; min-height: 430px;
height: 480px;
gap: 0;
padding: 0; padding: 0;
@include breakpoint(phone) { @include breakpoint(phone) {
@ -14,17 +12,16 @@
min-height: 100vh; min-height: 100vh;
} }
#Header { .DialogHeader.Search {
border-bottom: 1px solid transparent; align-items: inherit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit; gap: $unit;
padding-bottom: $unit * 2; padding: 0;
padding-bottom: $unit-2x;
&.scrolled { position: sticky;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); top: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); left: 0;
}
#Bar { #Bar {
align-items: center; align-items: center;
@ -63,7 +60,6 @@
#Results { #Results {
margin: 0; margin: 0;
max-height: 356px;
padding: 0 ($unit * 1.5); padding: 0 ($unit * 1.5);
overflow-y: scroll; overflow-y: scroll;

9
components/SearchModal/index.tsx
View file

@ -42,8 +42,10 @@ const SearchModal = (props: Props) => {
// Set up translation // Set up translation
const { t } = useTranslation('common') const { t } = useTranslation('common')
let searchInput = React.createRef<HTMLInputElement>() // Refs
let scrollContainer = React.createRef<HTMLDivElement>() const headerRef = React.createRef<HTMLDivElement>()
const searchInput = React.createRef<HTMLInputElement>()
const scrollContainer = React.createRef<HTMLDivElement>()
const [firstLoad, setFirstLoad] = useState(true) const [firstLoad, setFirstLoad] = useState(true)
const [filters, setFilters] = useState<{ [key: string]: any }>() const [filters, setFilters] = useState<{ [key: string]: any }>()
@ -356,10 +358,11 @@ const SearchModal = (props: Props) => {
<DialogTrigger asChild>{props.children}</DialogTrigger> <DialogTrigger asChild>{props.children}</DialogTrigger>
<DialogContent <DialogContent
className="Search" className="Search"
headerref={headerRef}
onEscapeKeyDown={onEscapeKeyDown} onEscapeKeyDown={onEscapeKeyDown}
onOpenAutoFocus={onOpenAutoFocus} onOpenAutoFocus={onOpenAutoFocus}
> >
<div id="Header"> <div className="Search DialogHeader" ref={headerRef}>
<div id="Bar"> <div id="Bar">
<Input <Input
autoComplete="off" autoComplete="off"