Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- *
- * LoadingProvider
- *
- */
- import React from 'react';
- import { withRouter } from 'react-router-dom';
- import PropTypes from 'prop-types';
- import { connect } from 'react-redux';
- import { compose } from 'redux';
- import { CSSTransitionGroup } from 'react-transition-group';
- import LoadingScreen from '../../components/LoadingScreen';
- import Navbar from '../../components/Navbar';
- import Footer from '../../components/Footer';
- import BidsCart from '../../components/BidsCart';
- import MazalModal from '../../components/MazalModal';
- import { selectMainDomain } from './selectors';
- export class LoadingProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
- constructor(props) {
- super(props);
- this.state = {
- darkThemed: ['/about'],
- };
- }
- render() {
- const { isLoading, isMazalShown, newBid, location } = this.props;
- const { darkThemed } = this.state;
- const { pathname } = location;
- return (
- <div>
- <CSSTransitionGroup
- transitionName="example"
- transitionEnterTimeout={500}
- transitionLeaveTimeout={300}
- >
- <div key={0} className="page-wrapper">
- <Navbar
- path={pathname}
- dark={darkThemed.includes(pathname)}
- />
- <MazalModal />
- {isMazalShown ?
- <MazalModal
- isMazalShown={isMazalShown}
- newBid={newBid}
- />
- : null}
- {isLoading ? <LoadingScreen /> : null}
- {this.props.children}
- <BidsCart />
- <Footer />
- </div>
- </CSSTransitionGroup>
- </div>
- );
- }
- }
- LoadingProvider.propTypes = {
- location: PropTypes.object,
- isLoading: PropTypes.bool,
- isMazalShown: PropTypes.bool,
- newBid: PropTypes.object,
- children: PropTypes.object.isRequired,
- };
- const mapStateToProps = selectMainDomain;
- const withConnect = connect(mapStateToProps, null);
- export default compose(
- withConnect,
- withRouter,
- )(LoadingProvider);
- import { injectGlobal } from 'styled-components';
- /* eslint no-unused-expressions: 0 */
- injectGlobal`
- @import url('https://fonts.googleapis.com/css?family=Assistant:400,600,700,800');
- html {
- height: 100%;
- width: 100%;
- }
- body {
- min-height: 100%;
- position: relative;
- padding-bottom: 130px;
- overflow-x: hidden;
- font-family: 'Assistant', sans-serif;
- user-select: none;
- letter-spacing: -0.6px;
- }
- body form input {
- font-family: 'Assistant', sans-serif;
- }
- body.fontLoaded {
- font-family: Assistant;
- }
- #app {
- background-color: #ffffff;
- min-height: 100%;
- min-width: 100%;
- }
- body::-webkit-scrollbar {
- width: 0.6em;
- }
- body::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- }
- body::-webkit-scrollbar-thumb {
- background-color: darkgrey;
- outline: 1px solid slategrey;
- }
- .example-enter {
- opacity: 0.01;
- }
- .example-enter.example-enter-active {
- opacity: 1;
- transition: opacity 500ms ease-in;
- }
- .example-leave {
- opacity: 1;
- }
- .example-leave.example-leave-active {
- opacity: 0.01;
- transition: opacity 300ms ease-in;
- }
- @keyframes fadeanimation {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- .overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- transition: 300ms all;
- }
- .modal {
- position: absolute;
- width: 586px;
- height: 477px;
- top: 14%;
- left: 0;
- right: 0;
- margin: 0 auto;
- bottom: 40px;
- border-radius: 6px;
- background-color: #f3f8fb;
- border: solid 1px rgba(0, 0, 0, 0.1);
- outline: none;
- }
- .modal .close-modal {
- position: absolute;
- right: 0;
- top: 0;
- outline: none;
- cursor: pointer;
- margin: 5px 6px;
- }
- .modal .close-modal svg {
- width: 11px;
- fill: #1b2e44;
- fill-opacity: 0.5;
- }
- .ReactModal__Content {
- opacity: 0;
- }
- .ReactModal__Content--after-open {
- opacity: 1;
- transition: 300ms;
- }
- .ReactModal__Content--before-close {
- opacity: 0;
- }
- .ReactModal__Overlay.ReactModal__Overlay--after-open.overlay {
- opacity: 1;
- }
- .ReactModal__Overlay.ReactModal__Overlay--before-close.overlay {
- opacity: 0;
- }
- @keyframes fadein {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes fadeout {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- `;
Add Comment
Please, Sign In to add comment