Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- *
- * HeaderThemesInner
- *
- */
- import React, { PropTypes } from 'react';
- import styled from 'styled-components';
- import ThemesItem from './ThemesItem';
- export default class HeaderThemes extends React.Component { // eslint-disable-line react/prefer-stateless-function
- componentDidMount() {
- const Overlay = `
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 10;
- background: rgba(0, 51, 51, 0.8);
- animation-duration: .3s;
- animation-fill-mode: both;
- display: flex;
- margin: 0;
- padding: 100px 0 0 0;
- flex-direction: column;
- color: white;
- font-family: 'Mosk';
- justify-content: space-around;
- `;
- const OverlayIn = styled.ul`
- ${Overlay}
- animation-name: fadeInDown;
- `;
- const OverlayOut = styled.ul`
- ${Overlay}
- animation-name: fadeOutUp;
- `;
- }
- render() {
- const { active, themes, themesList } = this.props;
- if (active) {
- return (
- <OverlayIn>{themesList}</OverlayIn>
- );
- } else if (active === false) {
- return (
- <OverlayOut>{themesList}</OverlayOut>
- );
- }
- return null;
- }
- }
- HeaderThemes.propTypes = {
- active: PropTypes.bool,
- themesList: PropTypes.any,
- themes: PropTypes.any,
- };
Add Comment
Please, Sign In to add comment