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

100% Statements 7/7
50% Branches 3/6
100% Functions 2/2
100% Lines 7/7
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                1x                                                       1x         1x       1x 1x                             1x           1x                  
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import ArrowDownIcon from '@bufferapp/components/Icon/Icons/ArrowDownIcon';
import ArrowUpIcon from '@bufferapp/components/Icon/Icons/ArrowUpIcon';
import Title from './Title';
import { gray } from '@bufferapp/ui/style/colors';
 
const Button = styled.button`
  cursor: pointer;
  display: flex;
  padding: 0.75rem 1rem;
  color: #333333;
  text-decoration: none;
  text-shadow: none;
  text-align: left;
  border: 1px solid ${gray};
  border-radius: 3px;
  background: #fff;
  width: 100%;
  height:42px;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
 
  outline: none !important;
  outline-color: transparent !important;
  outline-style: none !important;
 
  transition: all 0.2s ease-out;
  &:hover { 
    border: 1px solid #168eea;
  }
  &:active {
    border: 1px solid #0e5c98;
  }
 
  ${props => props.loading && css`
    pointer-events: none;
  `}
`;
 
const Arrow = styled.span`
  margin-left: auto;
`;
 
const DatePickerButton = ({ presets, isOpen, loading, startDate, endDate, handleClick }) => (
  <Button
    loading={loading}
    disabled={loading}
    onClick={handleClick}
  >
    <Title presets={presets} loading={loading} startDate={startDate} endDate={endDate} />
    { !loading ?
      <Arrow>
        { isOpen ?
          <ArrowUpIcon size="small" /> :
          <ArrowDownIcon size="small" /> }
      </Arrow> : null}
  </Button>
);
 
DatePickerButton.defaultProps = {
  startDate: 0,
  endDate: 0,
  loading: false,
};
 
DatePickerButton.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  handleClick: PropTypes.func.isRequired,
  loading: PropTypes.bool,
  startDate: PropTypes.number,
  endDate: PropTypes.number,
};
 
export default DatePickerButton;