daily pastebin goal
69%
SHARE
TWEET

Untitled

a guest Apr 17th, 2018 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  *
  3.  * LoadingProvider
  4.  *
  5.  */
  6.  
  7. import React from 'react';
  8. import { withRouter } from 'react-router-dom';
  9. import PropTypes from 'prop-types';
  10. import { connect } from 'react-redux';
  11. import { compose } from 'redux';
  12. import { CSSTransitionGroup } from 'react-transition-group';
  13. import LoadingScreen from '../../components/LoadingScreen';
  14. import Navbar from '../../components/Navbar';
  15. import Footer from '../../components/Footer';
  16. import BidsCart from '../../components/BidsCart';
  17. import MazalModal from '../../components/MazalModal';
  18. import { selectMainDomain } from './selectors';
  19.  
  20. export class LoadingProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
  21.   constructor(props) {
  22.     super(props);
  23.  
  24.     this.state = {
  25.       darkThemed: ['/about'],
  26.     };
  27.   }
  28.  
  29.   render() {
  30.     const { isLoading, isMazalShown, newBid, location } = this.props;
  31.     const { darkThemed } = this.state;
  32.     const { pathname } = location;
  33.     return (
  34.       <div>
  35.         <CSSTransitionGroup
  36.           transitionName="example"
  37.           transitionEnterTimeout={500}
  38.           transitionLeaveTimeout={300}
  39.         >
  40.           <div key={0} className="page-wrapper">
  41.             <Navbar
  42.               path={pathname}
  43.               dark={darkThemed.includes(pathname)}
  44.             />
  45.             <MazalModal />
  46.             {isMazalShown ?
  47.               <MazalModal
  48.                 isMazalShown={isMazalShown}
  49.                 newBid={newBid}
  50.               />
  51.             : null}
  52.             {isLoading ? <LoadingScreen /> : null}
  53.             {this.props.children}
  54.  
  55.             <BidsCart />
  56.             <Footer />
  57.           </div>
  58.         </CSSTransitionGroup>
  59.       </div>
  60.     );
  61.   }
  62. }
  63.  
  64. LoadingProvider.propTypes = {
  65.   location: PropTypes.object,
  66.   isLoading: PropTypes.bool,
  67.   isMazalShown: PropTypes.bool,
  68.   newBid: PropTypes.object,
  69.   children: PropTypes.object.isRequired,
  70. };
  71.  
  72.  
  73. const mapStateToProps = selectMainDomain;
  74. const withConnect = connect(mapStateToProps, null);
  75.  
  76. export default compose(
  77.   withConnect,
  78.   withRouter,
  79. )(LoadingProvider);
  80.    
  81. import { injectGlobal } from 'styled-components';
  82.  
  83. /* eslint no-unused-expressions: 0 */
  84. injectGlobal`
  85.   @import url('https://fonts.googleapis.com/css?family=Assistant:400,600,700,800');
  86.  
  87.   html {
  88.     height: 100%;
  89.     width: 100%;
  90.   }
  91.  
  92.   body {
  93.     min-height: 100%;
  94.     position: relative;
  95.     padding-bottom: 130px;
  96.     overflow-x: hidden;
  97.     font-family: 'Assistant', sans-serif;
  98.     user-select: none;
  99.     letter-spacing: -0.6px;
  100.   }
  101.  
  102.   body form input {
  103.     font-family: 'Assistant', sans-serif;    
  104.   }
  105.  
  106.   body.fontLoaded {
  107.     font-family: Assistant;
  108.   }
  109.  
  110.   #app {
  111.     background-color: #ffffff;
  112.     min-height: 100%;
  113.     min-width: 100%;
  114.   }
  115.  
  116.   body::-webkit-scrollbar {
  117.     width: 0.6em;
  118. }
  119.  
  120. body::-webkit-scrollbar-track {
  121.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  122. }
  123.  
  124. body::-webkit-scrollbar-thumb {
  125.   background-color: darkgrey;
  126.   outline: 1px solid slategrey;
  127. }
  128.  
  129. .example-enter {
  130.   opacity: 0.01;
  131. }
  132.  
  133. .example-enter.example-enter-active {
  134.   opacity: 1;
  135.   transition: opacity 500ms ease-in;
  136. }
  137.  
  138. .example-leave {
  139.   opacity: 1;
  140. }
  141.  
  142. .example-leave.example-leave-active {
  143.   opacity: 0.01;
  144.   transition: opacity 300ms ease-in;
  145. }
  146.  
  147. @keyframes fadeanimation {
  148.   from {
  149.       opacity: 0;
  150.   }
  151.   to {
  152.       opacity: 1;
  153.   }
  154. }
  155.  
  156. .overlay {
  157.   position: fixed;
  158.   top: 0;
  159.   left: 0;
  160.   right: 0;
  161.   bottom: 0;
  162.   background-color: rgba(0, 0, 0, 0.5);
  163.   transition: 300ms all;
  164. }
  165.  
  166. .modal {
  167.   position: absolute;
  168.   width: 586px;
  169.   height: 477px;
  170.   top: 14%;
  171.   left: 0;
  172.   right: 0;
  173.   margin: 0 auto;
  174.   bottom: 40px;
  175.   border-radius: 6px;
  176.   background-color: #f3f8fb;
  177.   border: solid 1px rgba(0, 0, 0, 0.1);
  178.   outline: none;
  179. }
  180.  
  181. .modal .close-modal {
  182.   position: absolute;
  183.   right: 0;
  184.   top: 0;
  185.   outline: none;
  186.   cursor: pointer;
  187.   margin: 5px 6px;
  188. }
  189.  
  190. .modal .close-modal svg {
  191.   width: 11px;
  192.   fill: #1b2e44;
  193.   fill-opacity: 0.5;
  194. }
  195.  
  196. .ReactModal__Content {
  197.   opacity: 0;
  198. }
  199.  
  200. .ReactModal__Content--after-open {
  201.   opacity: 1;
  202.   transition: 300ms;
  203. }
  204.  
  205. .ReactModal__Content--before-close {
  206.   opacity: 0;
  207. }
  208.  
  209. .ReactModal__Overlay.ReactModal__Overlay--after-open.overlay {
  210.   opacity: 1;
  211. }
  212.  
  213. .ReactModal__Overlay.ReactModal__Overlay--before-close.overlay {
  214.   opacity: 0;
  215. }
  216.  
  217. @keyframes fadein {
  218.   from {
  219.     opacity: 0;
  220.   }
  221.   to {
  222.     opacity: 1;
  223.   }
  224. }
  225.  
  226. @keyframes fadeout {
  227.   from {
  228.     opacity: 1;
  229.   }
  230.   to {
  231.     opacity: 0;
  232.   }
  233. }
  234. `;
RAW Paste Data
Top