All files / date-picker/components/DatePicker Dropdown.jsx

100% Statements 5/5
50% Branches 1/2
100% Functions 2/2
100% Lines 5/5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37          1x                           1x         1x 1x         1x            
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { white, gray } from '@bufferapp/ui/style/colors';
 
const Container = styled.div`
  z-index: 2;
  display: none;
  position: absolute;
  width: 100%;
  top: 2.25rem;
  background: ${white};
  border: 1px solid ${gray};
  border-width: 0 1px 1px;
  border-radius: 3;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
 
  ${props => props.isOpen && css`
    display: block;
  `}
`;
 
const Dropdown = ({ isOpen, children }) => (
  <Container isOpen={isOpen}>
    {children}
  </Container>
);
 
Dropdown.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
};
 
export default Dropdown;