mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

search page done

Browse source 
Co-authored-by: William Oldham <wegg7250@gmail.com>
This commit is contained in:
Jelle van Snik 2022-02-13 18:48:52 +01:00
parent 8db4fbee07
commit 01d18aa459
2 changed files with 76 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/index.css
View file

@ -4,5 +4,5 @@
html, html,
body { body {
@apply min-h-screen bg-dink-900 text-white font-open-sans; @apply min-h-screen bg-denim-100 text-white font-open-sans;
} }

71
src2/components/SelectBox.js
View file

@ -1,41 +1,38 @@
import { useRef, useState, useEffect } from "react" import { useRef, useState, useEffect } from "react";
import "./SelectBox.css" import "./SelectBox.css";
function Option({ option, ...props }) { function Option({ option, ...props }) {
return ( return (
<div className="option" {...props}> <div className="option" {...props}>
<input <input type="radio" className="radio" id={option.id} />
type="radio"
className="radio"
id={option.id} />
<label htmlFor={option.id}> <label htmlFor={option.id}>
<div className="item">{option.name}</div> <div className="item">{option.name}</div>
</label> </label>
</div> </div>
) );
} }
export function SelectBox({ options, selectedItem, setSelectedItem }) { export function SelectBox({ options, selectedItem, setSelectedItem }) {
if (!Array.isArray(options)) { if (!Array.isArray(options)) {
throw new Error("Items must be an array!") throw new Error("Items must be an array!");
} }
const [active, setActive] = useState(false) const [active, setActive] = useState(false);
const containerRef = useRef(); const containerRef = useRef();
const handleClick = e => { const handleClick = (e) => {
if (containerRef.current.contains(e.target)) { if (containerRef.current.contains(e.target)) {
// inside click // inside click
return; return;
} }
// outside click // outside click
closeDropdown() closeDropdown();
}; };
const closeDropdown = () => { const closeDropdown = () => {
setActive(false) setActive(false);
} };
useEffect(() => { useEffect(() => {
// add when mounted // add when mounted
@ -48,35 +45,47 @@ export function SelectBox({ options, selectedItem, setSelectedItem }) {
}, []); }, []);
const onOptionClick = (e, option, i) => { const onOptionClick = (e, option, i) => {
e.stopPropagation() e.stopPropagation();
setSelectedItem(i) setSelectedItem(i);
closeDropdown() closeDropdown();
} };
const handleSelectedKeyPress = event => { const handleSelectedKeyPress = (event) => {
if (event.code === 'Enter' || event.code === 'Space'){ if (event.code === "Enter" || event.code === "Space") {
setActive(a => !a); setActive((a) => !a);
}
} }
};
const handleOptionKeyPress = (option, i) => event => { const handleOptionKeyPress = (option, i) => (event) => {
if (event.code === 'Enter' || event.code === 'Space'){ if (event.code === "Enter" || event.code === "Space") {
onOptionClick(event, option, i); onOptionClick(event, option, i);
} }
} };
return ( return (
<div className="select-box" ref={containerRef} onClick={() => setActive(a => !a)} > <div
<div className="selected" tabIndex={0} onKeyPress={handleSelectedKeyPress}> className="select-box"
{options ? ( ref={containerRef}
<Option option={options[selectedItem]} /> onClick={() => setActive((a) => !a)}
) : null} >
<div
className="selected"
tabIndex={0}
onKeyPress={handleSelectedKeyPress}
>
{options ? <Option option={options[selectedItem]} /> : null}
</div> </div>
<div className={"options-container" + (active ? " active" : "")}> <div className={"options-container" + (active ? " active" : "")}>
{options.map((opt, i) => ( {options.map((opt, i) => (
<Option option={opt} key={i} onClick={(e) => onOptionClick(e, opt, i)} tabIndex={active ? 0 : undefined} onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined} /> <Option
option={opt}
key={i}
onClick={(e) => onOptionClick(e, opt, i)}
tabIndex={active ? 0 : undefined}
onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined}
/>
))} ))}
</div> </div>
</div> </div>
) );
} }