Skip to content
Snippets Groups Projects
Commit 2018848a authored by Edvard Dønvold Sjøborg's avatar Edvard Dønvold Sjøborg
Browse files
parents 28000171 5d22eda6
No related branches found
No related tags found
No related merge requests found
import React from 'react';
import React, { useState } from 'react';
import '../Style/DropDown.css';
import DropDownToggle from './DropDownToggle';
const DropDown = () => {
return <div className={"dropdown"}>DropDown</div>
type props = {}
const DropDown = (props: props) => {
const [clicked, setClicked] = useState(false);
const OneOptions = [1, 2, 3, 4];
const TwoOptions = ['Happy', 'Sombre', 'Peaceful'];
const ThreeOptions = ["Upbeat", "Downbeat"];
const option1Method = (value: string) => {
console.log(value); // Temporary. Should alter something later
};
const option2Method = (value: string) => {
console.log(value);
};
const option3Method = (value: string) => {
console.log(value);
};
const determineRender = () => {
if (clicked) return (
<div className={'dropdown-menu'}>
<DropDownToggle
optionLabel={"Background "}
options={OneOptions}
parentFunction={option1Method}
/>
<DropDownToggle
optionLabel={"Mood "}
options={TwoOptions}
parentFunction={option2Method}
/>
<DropDownToggle
optionLabel={"Music "}
options={ThreeOptions}
parentFunction={option3Method}
/>
</div>
);
};
return (<div className={'dropdown'}>
<span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
{determineRender()}
</div>);
};
export default DropDown;
\ No newline at end of file
import React, { FormEvent, useState } from 'react';
type props = {
parentFunction: (arg0: string) => void;
options: Array<string | number>; // Depends on if the user is choosing strings or numbers
optionLabel: string;
}
const DropDownToggle = (props: props) => {
const [value, setValue] = useState(''); // The currently submitted element
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
event.preventDefault(); // To prevent default HTML behavior
setValue(event.currentTarget.value); // Update the value with the newly selected one
};
const handleSubmit = (event: FormEvent) => { // Called once the form is submitted using the button
event.preventDefault(); // To prevent default HTML behavior
props.parentFunction(value); // Calls the function of the parent with the submitted value
};
const renderOptions = () => { // To render a varying amount of options
return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
};
return (<div className={'drop-down-toggle'}>
<form onSubmit={handleSubmit}>
<label>
{props.optionLabel}
<select value={value} onChange={handleChange}>
{renderOptions()}
</select>
</label>
<input type={'submit'} value={'Submit'}/>
</form>
</div>);
};
export default DropDownToggle;
\ No newline at end of file
frontend/src/Media/settings.png

323 KiB

.settings-icon {
background-image: url("../Media/settings.png");
background-position: center;
background-size: contain;
width: 3rem;
height: 3rem;
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment