@eureca/eureca-ui/src/components/Pickers/time-picker.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { ThemeProvider } from '@material-ui/styles';
import { TimePicker as MaterialTimePicker } from '@material-ui/pickers';
import { InputAdornment } from '@material-ui/core';

import { FaSortDown } from 'react-icons/fa';

import { themePicker } from './theme';

function TimePicker({
  inputVariant = 'outlined',
  autoOk = true,
  format = 'HH:mm',
  okLabel = 'Ok',
  cancelLabel = 'Cancelar',
  clearLabel = 'Limpar',
  todayLabel = 'Hoje',
  invalidDateMessage = 'Horário inválido',
  ampm = false,
  ...props
}) {
  return (
    <ThemeProvider theme={themePicker}>
      <MaterialTimePicker
        inputVariant={inputVariant}
        autoOk={autoOk}
        format={format}
        okLabel={okLabel}
        cancelLabel={cancelLabel}
        clearLabel={clearLabel}
        todayLabel={todayLabel}
        invalidDateMessage={invalidDateMessage}
        ampm={ampm}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <FaSortDown />
            </InputAdornment>
          ),
        }}
        {...props}
      />
    </ThemeProvider>
  );
}

TimePicker.propTypes = {
  inputVariant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
  format: PropTypes.string,
  autoOk: PropTypes.bool,
  okLabel: PropTypes.string,
  cancelLabel: PropTypes.string,
  clearLabel: PropTypes.string,
  todayLabel: PropTypes.string,
  invalidDateMessage: PropTypes.string,
};

export { TimePicker };