Add generalized button class

This commit is contained in:
André Wahlberg 2020-11-27 17:05:55 +01:00
parent 7e841cfaeb
commit c59f331965
4 changed files with 75 additions and 31 deletions

View File

@ -1,14 +1,31 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
class Button extends Component { class Button extends Component {
render() { // Multiple onClick functions
onClick = () => {
console.log(this.props.onClick);
if (this.props.onClick !== null
&& this.props.onClick !== undefined) {
if (Array.isArray(this.props.onClick)) {
this.props.onClick.forEach(func => {
func();
});
} else {
console.log("Error when parsing Button onClick functions.");
}
} else {
console.log("Error when parsing Button onClick functions.");
}
}
render() {
return ( return (
<a href={this.props.destination}> <button onClick={this.onClick}>
{this.props.title} {this.props.children}
</a> </button>
); );
} }
} }
// TODO Add css
export default Button export default Button;

View File

@ -1,24 +1,29 @@
import addNotification from "react-push-notification"; import addNotification from "react-push-notification";
import Button from './Button.js';
import disruptIcon from '../img/flash.svg'; import disruptIcon from '../img/flash.svg';
const DisruptionButton = () => {
const genDisrupt = () => {
addNotification({
title: "Warning",
subtitle: "This is a subtitle",
message: "This is a very long message",
theme: "blue",
native: true, // when using native, your OS will handle theming.
});
};
return ( class DisruptionButton extends Button {
<button onClick={genDisrupt} className="disruptBtn"> genDisrupt = () => {
<img src={disruptIcon} alt="" /> addNotification({
Generera Störning title: "Warning",
</button> subtitle: "This is a subtitle",
); message: "This is a very long message",
}; theme: "blue",
native: true, // when using native, your OS will handle theming.
});
}
render() {
return (
<Button onClick={this.props.onClick.concat([this.genDisrupt])} className="disruptBtn">
<img src={disruptIcon} alt="" />
<span>Generera Störning</span>
</Button>
);
}
}
export default DisruptionButton; export default DisruptionButton;

View File

@ -1,20 +1,21 @@
import React, { Component } from 'react'; import Button from './Button.js';
class MenuButton extends Component {
class MenuButton extends Button {
render() { render() {
if (this.props.childOrderReverse) { if (this.props.childOrderReverse) {
return ( return (
<button> <Button>
<span>{this.props.label}</span> <span>{this.props.label}</span>
<img src={this.props.icon} alt="" /> <img src={this.props.icon} alt="" />
</button> </Button>
); );
} else { } else {
return ( return (
<button> <Button>
<img src={this.props.icon} alt="" /> <img src={this.props.icon} alt="" />
<span>{this.props.label}</span> <span>{this.props.label}</span>
</button> </Button>
); );
} }
} }

View File

@ -3,11 +3,18 @@ import './css/NavigationDrawer.css';
import globalData from '../GlobalData.js'; import globalData from '../GlobalData.js';
import DisruptionButton from "./DisruptionButton.js"; import DisruptionButton from "./DisruptionButton.js";
import Popup from './Popup.js';
import Button from './Button.js';
import userIcon from '../img/user.svg'; import userIcon from '../img/user.svg';
class NavigationDrawer extends Component { class NavigationDrawer extends Component {
constructor(props) {
super(props);
this.popupElem = React.createRef();
}
state = { state = {
open: false open: false
}; };
@ -31,9 +38,23 @@ class NavigationDrawer extends Component {
}); });
}; };
showPopup = () => {
this.popupElem.current.show();
};
render() { render() {
return ( return (
<> <>
<Popup ref={this.popupElem}>
<h3>Välj hållplats:</h3>
<ul>
<li><Button>Hållplats 1</Button></li>
<li><Button>Hållplats 2</Button></li>
<li><Button>Hållplats 3</Button></li>
<li><Button>Hållplats 4</Button></li>
</ul>
</Popup>
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}> <div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
<header> <header>
<img src={userIcon} alt="" /> <img src={userIcon} alt="" />
@ -41,7 +62,7 @@ class NavigationDrawer extends Component {
<span>example@gmail.com</span> <span>example@gmail.com</span>
</header> </header>
<div id="navList"> <div id="navList">
<DisruptionButton /> <DisruptionButton onClick={[this.showPopup, this.close]} />
</div> </div>
<hr /> <hr />
<span id="version">Projektgrupp 3 - Utmaning 7</span> <span id="version">Projektgrupp 3 - Utmaning 7</span>