react-base-guide/lib/components/datepicker/days.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const dateformat_1 = __importDefault(require("dateformat"));
const DaysWrapper = styled_components_1.default.div `
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  user-select: none;
`;
const Day = styled_components_1.default.div `
  box-sizing: border-box;
  width: 14%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: ${p => p.theme.radius.element};
  color: ${p => p.$active ? p.theme.palette.text.contrast : p.theme.palette.text.primary};
  background: ${p => p.$active ? p.theme.palette.element.primary : "none"};
  transition: background 0.3s, box-shadow 0.3s;
  pointer-events: ${p => (p.$active || p.disabled) ? "none" : "all"};

  &:hover {
    background: ${p => p.theme.palette.background.active};
    box-shadow: 0 0 0 1px ${p => p.theme.palette.element.primary};
  }

  &:nth-child(7n + 7), &:nth-child(7n + 6) {
    color: ${p => p.$active ? p.theme.palette.text.contrast : p.theme.palette.element.error};
    &:hover {
      background: ${p => p.theme.palette.background.error};
      box-shadow: 0 0 0 1px ${p => p.theme.palette.element.error};
    }
  }
`;
const getOffset = (startOfMonth) => {
    let weekNumber = startOfMonth.getDay();
    weekNumber = weekNumber - 1;
    weekNumber = weekNumber < 0 ? 6 : weekNumber;
    return weekNumber;
};
const getDays = ({ date }) => {
    const month = +(0, dateformat_1.default)(date, "m");
    const year = +(0, dateformat_1.default)(date, "yyyy");
    let result = [];
    let endOfMonth = +(0, dateformat_1.default)(new Date(year, month, 0), "dd");
    let startOfMonth = new Date(year, month - 1);
    let weekOffset = getOffset(startOfMonth);
    for (let offset = 0; offset < weekOffset; offset++) {
        result.push(null);
    }
    for (let day = 1; day <= endOfMonth; day++) {
        result.push(day);
    }
    return result;
};
const Days = (props) => {
    const days = getDays(props);
    const currentDay = props.value ? +(0, dateformat_1.default)(props.value, "dd") : null;
    const activeMonth = (+(0, dateformat_1.default)(props.value, "m") === +(0, dateformat_1.default)(props.date, "m")) && (+(0, dateformat_1.default)(props.value, "yyyy") === +(0, dateformat_1.default)(props.date, "yyyy"));
    return ((0, jsx_runtime_1.jsx)(DaysWrapper, { children: days.map((day, key) => ((0, jsx_runtime_1.jsx)(Day, Object.assign({ disabled: !day, "$active": currentDay ? (activeMonth && (currentDay === day)) : false, onClick: () => props.setDay(day) }, { children: day }), key))) }));
};
exports.default = Days;
//# sourceMappingURL=days.js.map