Skip to content
Snippets Groups Projects
Commit 775d986c authored by Thor-Herman Van Eggelen's avatar Thor-Herman Van Eggelen
Browse files

Merge branch 'dropdown-parent-options' into 'master'

Add context and background / font options to DropDown #5

See merge request it2810-h20/team-75/prosjekt-2!7
parents c823881d 89d096df
No related branches found
No related tags found
No related merge requests found
import React from 'react';
import React, {Context} from 'react';
import ExhibitionPiece from './ExhibitionPiece';
import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
......@@ -7,31 +7,52 @@ import '../Style/ArtPage.css';
type props = {
pageId: number; // The id of the page
changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
pageId: number; // The id of the page
changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
}
class ArtPage extends React.Component<props> {
constructor(props: props) {
super(props);
}
render() {
return (
<div className={'artpage'}>
<FavoriteButton/>
<DropDown/>
<ExhibitionPiece artId={this.props.pageId}/>
<div className={'navbutton left'}>
<NavButton changePage={this.props.changePage} direction={"left"}/>
</div>
<div className={'navbutton right'}>
<NavButton changePage={this.props.changePage} direction={"right"}/>
</div>
</div>
);
}
type options = { [key: string]: string };
type state = {
options: options;
updateOption: (arg0: string, arg1: string) => void;
};
export const OptionsContext = React.createContext({} as state);
class ArtPage extends React.Component<props, state> {
updateToggleChoice = (label: string, choice: string) => {
this.setState(current => ({
...current,
options: {...current.options, [label.toLowerCase()]: choice.toLowerCase()}
}));
};
state = {
options: {
"sound": "",
"background": "one",
"font": "calibri"
},
updateOption: this.updateToggleChoice
};
render() {
return (
<div className={`artpage background-${this.state.options.background} font-${this.state.options.font}`}>
<FavoriteButton/>
<OptionsContext.Provider value={this.state}>
<DropDown/>
</OptionsContext.Provider>
<ExhibitionPiece artId={this.props.pageId}/>
<div className={'navbutton left'}>
<NavButton changePage={this.props.changePage} direction={"left"}/>
</div>
<div className={'navbutton right'}>
<NavButton changePage={this.props.changePage} direction={"right"}/>
</div>
</div>
);
}
}
export default ArtPage;
\ No newline at end of file
import React, { useState } from 'react';
import '../Style/DropDown.css';
import DropDownToggle from './DropDownToggle';
import DropDownSelect from './DropDownSelect';
type props = {}
const DropDown = (props: props) => {
const DropDown = () => {
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 BackgroundOptions = ["One", "Two", "Three", "Four"];
const FontOptions = ['Calibri', 'Arial', 'Sans'];
const MusicOptions = ["Upbeat", "Downbeat"];
const determineRender = () => {
if (clicked) return (
<div className={'dropdown-menu'}>
<DropDownToggle
optionLabel={"Background "}
options={OneOptions}
parentFunction={option1Method}
<DropDownSelect
optionLabel={"Background"}
options={BackgroundOptions}
/>
<DropDownToggle
optionLabel={"Mood "}
options={TwoOptions}
parentFunction={option2Method}
<DropDownSelect
optionLabel={"Font"}
options={FontOptions}
/>
<DropDownToggle
optionLabel={"Music "}
options={ThreeOptions}
parentFunction={option3Method}
<DropDownSelect
optionLabel={"Sound"}
options={MusicOptions}
/>
</div>
);
......
import React, {useContext, useState} from 'react';
import {OptionsContext} from "./ArtPage";
type props = {
options: Array<string>; // Depends on if the user is choosing strings or numbers
optionLabel: "Background" | "Sound" | "Font";
};
const DropDownSelect = (props: props) => {
const context = useContext(OptionsContext); // Uses context defined in ArtPage
const [value, setValue] = useState(context.options[props.optionLabel.toLowerCase()]); // The currently submitted element
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
event.preventDefault(); // To prevent default HTML behavior
const val = event.currentTarget.value;
setValue(val); // Update the value with the newly selected one
context.updateOption(props.optionLabel, val); // 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>
<label>
{props.optionLabel}
<select value={value} onChange={handleChange}>
{renderOptions()}
</select>
</label>
</form>
</div>);
};
export default DropDownSelect;
\ 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
......@@ -17,8 +17,8 @@ const ExhibitionPiece = (props: props) => {
return (
<div className={'exhibition-piece'}>
<div className={"title"}>
{title}
<div className={"exhibition-piece-title"}>
<h1>{title}</h1>
</div>
<div className={"author"}>
{author}
......
......@@ -25,7 +25,7 @@ class MainPage extends React.Component<props, state> {
changePage = (increment: boolean) => {
const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
this.setState({ currentPage: newPage % this.state.totalPages }); // Go to the new page or loop around if you've hit last page
}
};
render() {
return (
......
......@@ -23,6 +23,34 @@
margin-top: 1rem;
}
.background-one {
background-color: red;
}
.background-two {
background-color: purple;
}
.background-three {
background-color: grey;
}
.background-four {
background-color: green;
}
.font-arial {
font-family: Arial, serif;
}
.font-calibri {
font-family: Calibri, serif;
}
.font-sans {
font-family: "Comic Sans MS", serif;
}
.navbutton {
grid-row: 3 / 4;
display: flex;
......
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