@re-flex/ui/DatePicker/Cells/DayCell.js

Re-Flex ui library

import { css, useTheme } from "@re-flex/styles";
import dayjs from "dayjs";
import isBetweenRule from "dayjs/plugin/isBetween";
import React, { useMemo } from "react";
import Button from "../../IconButton";
import { useDatePicker } from "../Context";
dayjs.extend(isBetweenRule);
const DayCell = ({ day, role }) => {
    const pickerState = useDatePicker();
    const { state: { selectedDate, mode }, onChangeSelectedDate, } = pickerState;
    const theme = useTheme();
    const isSelected = useMemo(() => {
        return selectedDate.some((d) => day.format("YYYY-MM-DD") === d.format("YYYY-MM-DD"));
    }, [selectedDate, day, role]);
    const isBetween = useMemo(() => {
        if (mode === "range" && selectedDate.length === 2) {
            const [start, end] = selectedDate;
            return day.isBetween(start, end);
        }
        return false;
    }, [pickerState, day, role]);
    const selectedBGColor = useMemo(() => {
        return isSelected
            ? theme.palette.success.main
            : isBetween
                ? theme.palette.success.main
                : "transparent";
    }, [pickerState, isSelected, day, role]);
    const onClick = () => onChangeSelectedDate(day);
    const cellVariant = useMemo(() => {
        return isSelected
            ? "contained"
            : dayjs().format("YYYYMMDD") === day.format("YYYYMMDD")
                ? "outlined"
                : "text";
    }, [pickerState, isSelected, day]);
    const selectedColor = useMemo(() => isSelected
        ? isBetween
            ? "text.primary"
            : selectedBGColor
        : cellVariant === "contained"
            ? "text.primary"
            : "text.primary", [pickerState, isSelected, day, role, isBetween, cellVariant]);
    const selectedRadius = useMemo(() => selectedDate.length === 2
        ? (role === "first" && isSelected) || day.date() === 1
            ? "30px 0 0 30px"
            : (role === "last" && isSelected) ||
                day.endOf("month").date() === day.date()
                ? "0 30px  30px 0"
                : "30px"
        : "30px", [pickerState, role, selectedDate, isSelected, isBetween, day]);
    return (React.createElement("div", { className: css({
            borderRadius: selectedRadius,
        }) },
        React.createElement(Button, { onClick: onClick, variant: cellVariant, size: "xs", sx: {
                margin: 0,
                padding: 0,
                bgColor: isSelected ? selectedBGColor : "background.level2",
            } }, day.format("DD"))));
};
export default DayCell;