@activecollab/components/dist/esm/components/SelectDate/DatePickerForm.js

ActiveCollab Components

import React, { useCallback } from "react";
import { StyledButtonClose, StyledButtonCloseColored, StyledButtonSave, StyledSelectDateButtons, StyledSelectDateDatePicker, StyledSelectDateFooter } from "./Styles";
import { DatePicker } from "../DatePicker/DatePicker";
import { IconButton } from "../IconButton";
import CancelCrossIcon from "../Icons/collection/CancelCross";
import { Tooltip } from "../Tooltip/Tooltip";
export const DatePickerForm = _ref => {
  let {
    mode,
    saveButtonText = "Save",
    cancelButtonText = "Cancel",
    clearButtonText = "Clear",
    onSave,
    onCancel,
    onClear,
    dateRequired = false,
    firstDayOfWeek = 0,
    selectedDays,
    selectionMode = "custom",
    onChange,
    onDayClick,
    onMonthChange,
    month,
    disabledSaveButton = false,
    modifiers,
    renderDay
  } = _ref;
  const handleOnKeyDown = useCallback(e => {
    if (e.key === "Enter" && typeof onSave === "function") {
      onSave();
    } else if ((e.key === "Esc" || e.key === "Escape") && typeof onCancel === "function") {
      onCancel(e);
    }
  }, [onSave, onCancel]);
  return /*#__PURE__*/React.createElement("div", {
    onKeyDown: handleOnKeyDown,
    tabIndex: -1,
    className: "date-picker-form"
  }, /*#__PURE__*/React.createElement(StyledSelectDateDatePicker, null, /*#__PURE__*/React.createElement(DatePicker, {
    month: month,
    onMonthChange: onMonthChange,
    onChange: onChange,
    onDayClick: onDayClick,
    selectedDays: selectedDays,
    selectionMode: selectionMode,
    dateRequired: dateRequired,
    firstDayOfWeek: firstDayOfWeek,
    modifiers: modifiers,
    renderDay: renderDay
  })), mode === "atomic" || !dateRequired ? /*#__PURE__*/React.createElement(StyledSelectDateFooter, {
    className: "date-picker-footer",
    $mode: mode
  }, mode === "atomic" ? /*#__PURE__*/React.createElement(StyledSelectDateButtons, {
    className: "date-picker-buttons"
  }, /*#__PURE__*/React.createElement(StyledButtonSave, {
    size: "small",
    variant: "primary",
    onClick: onSave,
    disabled: disabledSaveButton
  }, saveButtonText), /*#__PURE__*/React.createElement(Tooltip, {
    title: cancelButtonText,
    popperTooltipStyle: {
      zIndex: 1301
    }
  }, /*#__PURE__*/React.createElement(IconButton, {
    size: "small",
    variant: "text gray",
    onClick: onCancel
  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null))), !dateRequired ? /*#__PURE__*/React.createElement(StyledButtonClose, {
    size: "small",
    onClick: onClear,
    variant: "text gray"
  }, clearButtonText) : null) : !dateRequired && /*#__PURE__*/React.createElement(StyledButtonCloseColored, {
    size: "small",
    onClick: onClear,
    variant: "text colored"
  }, clearButtonText)) : null);
};
DatePickerForm.displayName = "DatePickerForm";
//# sourceMappingURL=DatePickerForm.js.map