From 294b3b241c2f28b1bbbe4ccb760981bcee8fab5b Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 26 Jun 2018 22:31:27 +0200 Subject: HelpBox: Split presentational and container --- src/client/react/components/container/HelpBox.js | 29 +------------ src/client/react/components/container/HelpBox.scss | 23 ---------- .../react/components/presentational/HelpBox.js | 49 ++++++++++++++++++++++ .../react/components/presentational/HelpBox.scss | 23 ++++++++++ 4 files changed, 73 insertions(+), 51 deletions(-) delete mode 100644 src/client/react/components/container/HelpBox.scss create mode 100644 src/client/react/components/presentational/HelpBox.js create mode 100644 src/client/react/components/presentational/HelpBox.scss (limited to 'src/client') diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js index 3358a76..30b2942 100644 --- a/src/client/react/components/container/HelpBox.js +++ b/src/client/react/components/container/HelpBox.js @@ -18,35 +18,8 @@ * */ -import React from 'react'; -import PropTypes from 'prop-types'; import { connect } from 'react-redux'; - -import './HelpBox.scss'; - -class HelpBox extends React.Component { - static propTypes = { - // redux - isVisible: PropTypes.bool.isRequired, - } - - render() { - const { isVisible } = this.props; - - if (!isVisible) { - return
; - } - - return ( -
-
-
- Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in. -
-
- ); - } -} +import HelpBox from '../presentational/HelpBox'; const mapStateToProps = state => ({ isVisible: state.search.results.length === 0 && state.search.text === '', diff --git a/src/client/react/components/container/HelpBox.scss b/src/client/react/components/container/HelpBox.scss deleted file mode 100644 index f91eb77..0000000 --- a/src/client/react/components/container/HelpBox.scss +++ /dev/null @@ -1,23 +0,0 @@ -.HelpBox { - position: relative; - margin-top: 32px; - - .arrow { - position: absolute; - background-color: white; - width: 32px; - height: 32px; - top: -16px; - left: 48px; - transform: rotate(45deg); - } - - .bubble { - position: relative; - background-color: white; - font-weight: bold; - margin: 16px; - padding: 16px; - border-radius: 4px; - } -} diff --git a/src/client/react/components/presentational/HelpBox.js b/src/client/react/components/presentational/HelpBox.js new file mode 100644 index 0000000..b32cd0a --- /dev/null +++ b/src/client/react/components/presentational/HelpBox.js @@ -0,0 +1,49 @@ +/** + * Copyright (C) 2018 Noah Loomans + * + * This file is part of rooster.hetmml.nl. + * + * rooster.hetmml.nl is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * rooster.hetmml.nl is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with rooster.hetmml.nl. If not, see . + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import './HelpBox.scss'; + +class HelpBox extends React.Component { + static propTypes = { + isVisible: PropTypes.bool.isRequired, + } + + render() { + const { isVisible } = this.props; + + if (!isVisible) { + return
; + } + + return ( +
+
+
+ Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in. +
+
+ ); + } +} + +export default HelpBox; diff --git a/src/client/react/components/presentational/HelpBox.scss b/src/client/react/components/presentational/HelpBox.scss new file mode 100644 index 0000000..f91eb77 --- /dev/null +++ b/src/client/react/components/presentational/HelpBox.scss @@ -0,0 +1,23 @@ +.HelpBox { + position: relative; + margin-top: 32px; + + .arrow { + position: absolute; + background-color: white; + width: 32px; + height: 32px; + top: -16px; + left: 48px; + transform: rotate(45deg); + } + + .bubble { + position: relative; + background-color: white; + font-weight: bold; + margin: 16px; + padding: 16px; + border-radius: 4px; + } +} -- cgit v1.1