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

88.89% Statements 8/9
25% Branches 1/4
66.67% Functions 2/3
88.89% Lines 8/9
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87                    1x         1x                 1x         1x                   1x   1x                                               1x                 1x                        
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import styled, { css } from 'styled-components';
 
import Button from './Button';
import Dropdown from './Dropdown';
import Form from './Form';
 
const Container = styled.div`
  position: relative;
  width: 16rem;
`;
 
const ClickCatcher = styled.div`
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
 
  ${props => props.isOpen && css`
    display: block;
  `}
`;
 
const DatePicker = (props) => {
  const {
    isOpen,
    loading,
    startDate,
    endDate,
    presets,
    // Actions
    open,
    close,
  } = props;
 
  return (
    <Container>
      <Button
        isOpen={isOpen}
        loading={loading}
        startDate={startDate}
        endDate={endDate}
        presets={presets}
        handleClick={() => (isOpen ? close() : open())}
      />
      <Dropdown isOpen={isOpen}>
        <Form {...props} />
      </Dropdown>
 
      <ClickCatcher
        isOpen={isOpen}
        tabIndex="0"
        role="button"
        onClick={close}
      />
    </Container>
  );
};
 
DatePicker.defaultProps = {
  customStartDate: -1,
  customEndDate: -1,
  customMonth: moment().startOf('month').unix(),
  startDate: null,
  endDate: null,
  loading: false,
};
 
DatePicker.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  loading: PropTypes.bool,
  startDate: PropTypes.number,
  endDate: PropTypes.number,
 
  // Actions
  open: PropTypes.func.isRequired,
  close: PropTypes.func.isRequired,
};
 
export default DatePicker;