@parkassist/pa-ui-library/dist/components/DatePicker/index.js

INX Platform elements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import dayjs from "dayjs";
import { Column } from "../Layout/Flex";
import { Calendar } from "react-date-range";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import * as Icons from "../Icons";
import { MaterialInput, MaterialModal } from "../..";
const StyledCalendar = styled(Calendar)`
  & .rdrMonthAndYearWrapper {
    padding-top: 0;
    height: auto;
  }
  ,
  & .rdrCalendarWrapper {
    font-size: 12px;
  }
  ,
  & .rdrDayToday .rdrDayNumber span:after {
    bottom: 0.2em;
  }
  & .rdrMonthAndYearPickers select {
    font-size: 12px;
    padding: 10px 25px 10px 10px;
  }
`;
const DatePicker = ({
  onChange,
  value,
  label = "",
  width = 200,
  dateFormat = "MMMM Do, YYYY",
  minDate,
  maxDate,
  locale,
  title = "Select a date",
  saveText = "Save",
  cancelText = "Cancel"
}) => {
  const [date, setDate] = useState(value);
  const [tempDate, setTempDate] = useState(date);
  const [modalOpen, setModalOpen] = useState(false);
  const format = dateToFormat => dayjs(dateToFormat).format(dateFormat);
  let textToShow = value ? `${format(date)}` : null;
  return _jsxs(_Fragment, {
    children: [_jsx(MaterialModal, {
      hideButtons: false,
      visible: modalOpen,
      modalTitle: title,
      onClose: () => {
        setModalOpen(false);
      },
      onConfirm: () => {
        setModalOpen(false);
        setDate(tempDate);
        onChange(tempDate);
      },
      style: {
        zIndex: modalOpen ? 99999 : 1
      },
      okButton: saveText,
      cancelButton: cancelText,
      height: 460,
      width: 400,
      children: _jsx(Column, {
        style: {
          width: "100%",
          height: "100%"
        },
        children: _jsx(StyledCalendar, {
          color: Palette.PRIMARY,
          date: tempDate,
          maxDate: maxDate,
          minDate: minDate,
          onChange: setTempDate,
          locale: locale
        })
      })
    }), _jsx(MaterialInput, {
      label: label,
      iconEnd: _jsx(Icons.CalendarIcon, {
        size: 24
      }),
      value: value && textToShow,
      onClick: () => setModalOpen(!modalOpen),
      style: {
        width: width,
        pointer: 'cursor'
      }
    })]
  });
};
export default DatePicker;