@eureca/eureca-ui/src/components/Inputs/select-datepicker.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Box, Menu, MenuItem, RadioGroup, Typography } from '@material-ui/core';
import { format } from 'date-fns';

import { colors } from '../../theme/colors';

import { Radio } from '../Radio';
import { DatePicker } from '../Pickers';
import { Flex } from '../Flex';

const SelectFlex = styled(Flex)`
  ${({ error }) => css`
    border: 1px solid rgba(0, 0, 0, 0.23);
    &:hover {
      border: 1px solid rgba(0, 0, 0, 0.87);
    }

    ${error &&
      css`
        border: 1px solid ${colors.error1};
        &:hover {
          border: 1px solid ${colors.error1};
        }
      `}
  `}
`;

function SelectDatePicker({ initialDate = new Date(), onChange, helperText, error }) {
  const [expires, setExpires] = useState(null);
  const [date, setDate] = useState(initialDate);
  const [anchorEl, setAnchorEl] = useState(null);

  const translator = {
    true: date ? format(date, 'dd/MM/yyyy') : 'Data não selecionada',
    false: 'Nunca expira',
  };

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  function handleChange(e) {
    setExpires(e.target.value);
    if (e.target.value === 'true') {
      onChange(date);
    } else {
      onChange(e.target.value);
    }
  }

  function handleDate(value) {
    setDate(value);
    onChange(value);
  }

  return (
    <Box position="relative">
      <SelectFlex
        px={1.5}
        height={56}
        borderRadius={4}
        cursorPointer
        directionRow
        alignCenter
        justifySpaceBetween
        onClick={handleClick}
        error={error}
        data-testid="select-timepicker"
      >
        <Typography style={{ color: error ? colors.error1 : colors.gray2 }}>
          {translator[expires] || 'Expira em'}
        </Typography>
        <Box
          width={0}
          height={0}
          borderLeft="5px solid transparent"
          borderRight="5px solid transparent"
          borderTop={`5px solid ${error ? colors.error1 : 'rgba(0, 0, 0, 0.54)'}`}
        />
      </SelectFlex>
      <Box mt="3px" ml="14px">
        <Typography
          variant="body2"
          style={{
            color: error ? colors.error1 : colors.gray3,
            lineHeight: 1.66,
          }}
        >
          {helperText}
        </Typography>
      </Box>
      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
        <RadioGroup value={expires} onChange={handleChange}>
          <MenuItem
            onClick={e => {
              e.stopPropagation();
            }}
          >
            <Radio
              label="Nunca expira"
              name="nunca-expira"
              value="false"
              onClick={() => setExpires(false)}
            />
          </MenuItem>
          <MenuItem onClick={e => e.stopPropagation()}>
            <Flex>
              <Radio
                label="Selecionar prazo"
                name="selecionar-prazo"
                value="true"
                onClick={() => setExpires(true)}
              />
            </Flex>
          </MenuItem>
        </RadioGroup>

        {expires && (
          <Box p={2}>
            <DatePicker
              name="expiration-date"
              autoOk
              inputVariant="outlined"
              format="dd/MM/yyyy"
              label="Data de expiração"
              value={date}
              onChange={value => handleDate(value)}
              invalidDateMessage="Data inválida!"
            />
          </Box>
        )}
      </Menu>
    </Box>
  );
}

SelectDatePicker.propTypes = {
  initialDate: PropTypes.instanceOf(Date),
  onChange: PropTypes.func,
  helperText: PropTypes.string,
  error: PropTypes.bool,
};

export { SelectDatePicker };