@blocklet/payment-react/es/components/date-range-picker.js

Reusable react components for payment kit v2

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState, useRef } from "react";
import {
  TextField,
  Stack,
  Typography,
  useMediaQuery,
  useTheme,
  Popover,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  IconButton
} from "@mui/material";
import { DateRange, Close, Clear } from "@mui/icons-material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import FormLabel from "./label.js";
import { formatToDate } from "../libs/util.js";
function DatePickerContent({
  tempValue,
  setTempValue,
  handleCancel,
  handleApply,
  handleClear
}) {
  const { t } = useLocaleContext();
  return /* @__PURE__ */ jsx(Box, { sx: { p: 2, minWidth: 320 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
    /* @__PURE__ */ jsxs(Box, { children: [
      /* @__PURE__ */ jsx(FormLabel, { children: t("common.startDate") }),
      /* @__PURE__ */ jsx(
        TextField,
        {
          type: "date",
          value: tempValue.startDate,
          onChange: (e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value })),
          size: "small",
          fullWidth: true,
          slotProps: {
            inputLabel: { shrink: true }
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsxs(Box, { children: [
      /* @__PURE__ */ jsx(FormLabel, { children: t("common.endDate") }),
      /* @__PURE__ */ jsx(
        TextField,
        {
          type: "date",
          value: tempValue.endDate,
          onChange: (e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value })),
          size: "small",
          fullWidth: true,
          slotProps: {
            inputLabel: { shrink: true }
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsxs(
      Stack,
      {
        direction: "row",
        spacing: 1,
        sx: {
          justifyContent: "space-between"
        },
        children: [
          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleClear, size: "small", color: "secondary", sx: { px: 0.5, minWidth: 0 }, children: t("common.clear") }),
          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
            /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, size: "small", children: t("common.cancel") }),
            /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApply, size: "small", children: t("common.confirm") })
          ] })
        ]
      }
    )
  ] }) });
}
const DateFormat = "YYYY-MM-DD";
export default function DateRangePicker({
  value,
  onChange,
  label = "",
  size = "small",
  fullWidth = false,
  disabled = false
}) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const [open, setOpen] = useState(false);
  const { t, locale } = useLocaleContext();
  const [tempValue, setTempValue] = useState({
    startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
    endDate: value.end ? formatToDate(value.end * 1e3, locale, DateFormat) : ""
  });
  const anchorRef = useRef(null);
  const formatDisplayValue = (startUnix, endUnix) => {
    if (!startUnix || !endUnix) return t("common.selectTimeRange");
    const start = formatToDate(startUnix * 1e3, locale, DateFormat);
    const end = formatToDate(endUnix * 1e3, locale, DateFormat);
    return `${start} ~ ${end}`;
  };
  const handleOpen = () => {
    if (disabled) return;
    setTempValue({
      startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
      endDate: value.end ? formatToDate(value.end * 1e3, locale, DateFormat) : ""
    });
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  const handleApply = () => {
    const unixValue = {
      start: tempValue.startDate ? Math.floor((/* @__PURE__ */ new Date(`${tempValue.startDate}T00:00:00`)).getTime() / 1e3) : 0,
      end: tempValue.endDate ? Math.floor((/* @__PURE__ */ new Date(`${tempValue.endDate}T23:59:59`)).getTime() / 1e3) : 0
    };
    onChange(unixValue);
    setOpen(false);
  };
  const handleCancel = () => {
    setTempValue({
      startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
      endDate: value.end ? formatToDate(value.end * 1e3, locale, DateFormat) : ""
    });
    setOpen(false);
  };
  const handleClear = () => {
    const emptyValue = { start: void 0, end: void 0 };
    onChange(emptyValue);
    setTempValue({ startDate: "", endDate: "" });
    setOpen(false);
  };
  const hasValue = !!value.start && !!value.end;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      TextField,
      {
        ref: anchorRef,
        label,
        value: formatDisplayValue(value.start, value.end),
        size,
        fullWidth,
        disabled,
        sx: {
          "& .MuiInputBase-input": {
            cursor: disabled ? "default" : "pointer"
          }
        },
        onClick: handleOpen,
        placeholder: t("common.selectTimeRange"),
        slotProps: {
          input: {
            readOnly: true,
            startAdornment: /* @__PURE__ */ jsx(DateRange, { fontSize: "small", sx: { mr: 1, color: "text.secondary" } }),
            endAdornment: hasValue && !disabled && /* @__PURE__ */ jsx(
              IconButton,
              {
                size: "small",
                onClick: (e) => {
                  e.stopPropagation();
                  handleClear();
                },
                sx: {
                  color: "text.secondary",
                  "&:hover": { color: "text.primary" }
                },
                children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" })
              }
            )
          },
          inputLabel: { shrink: true }
        }
      }
    ),
    !isMobile && /* @__PURE__ */ jsx(
      Popover,
      {
        open,
        anchorEl: anchorRef.current,
        onClose: handleClose,
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "left"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "left"
        },
        sx: {
          "& .MuiPaper-root": {
            boxShadow: theme.shadows[8],
            border: `1px solid ${theme.palette.divider}`
          }
        },
        children: /* @__PURE__ */ jsx(
          DatePickerContent,
          {
            tempValue,
            setTempValue,
            handleCancel,
            handleApply,
            handleClear
          }
        )
      }
    ),
    isMobile && /* @__PURE__ */ jsxs(
      Dialog,
      {
        open,
        onClose: handleClose,
        fullWidth: true,
        maxWidth: "sm",
        PaperProps: {
          sx: {
            m: 1,
            maxHeight: "calc(100% - 64px)"
          }
        },
        children: [
          /* @__PURE__ */ jsxs(
            DialogTitle,
            {
              sx: {
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                pb: 1
              },
              children: [
                /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("common.selectTimeRange") }),
                /* @__PURE__ */ jsx(IconButton, { edge: "end", color: "inherit", onClick: handleClose, "aria-label": "close", size: "small", children: /* @__PURE__ */ jsx(Close, {}) })
              ]
            }
          ),
          /* @__PURE__ */ jsx(DialogContent, { sx: { pb: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [
            /* @__PURE__ */ jsx(FormLabel, { children: t("common.startDate") }),
            /* @__PURE__ */ jsx(
              TextField,
              {
                type: "date",
                value: tempValue.startDate,
                onChange: (e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value })),
                size: "small",
                fullWidth: true,
                slotProps: {
                  inputLabel: { shrink: true }
                }
              }
            ),
            /* @__PURE__ */ jsx(FormLabel, { children: t("common.endDate") }),
            /* @__PURE__ */ jsx(
              TextField,
              {
                type: "date",
                value: tempValue.endDate,
                onChange: (e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value })),
                size: "small",
                fullWidth: true,
                slotProps: {
                  inputLabel: { shrink: true }
                }
              }
            )
          ] }) }),
          /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
            /* @__PURE__ */ jsx(Button, { onClick: handleCancel, color: "inherit", children: t("common.cancel") }),
            /* @__PURE__ */ jsx(Button, { onClick: handleApply, variant: "contained", children: t("common.confirm") })
          ] })
        ]
      }
    )
  ] });
}