@parkassist/pa-ui-library/dist/components/DateRangePicker2/DaysPicker.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import 'rc-slider/assets/index.css';
import Palette from "../../constants/Palette";
import { Row } from "../Layout/Flex";
import Button from "../Button";
import Helmet from "react-helmet";
import { StyledEngineProvider } from "@mui/material/styles";
const DaysPicker = props => {
  const dayButtons = props.days || ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  const getDaysAbbr = str => str.slice(0, 3);
  const [selectedDays, setSelectedDays] = React.useState({
    monday: true,
    tuesday: true,
    wednesday: true,
    thursday: true,
    friday: true,
    saturday: true,
    sunday: true
  });
  const handleDayClick = day => {
    const newDays = Object.assign(Object.assign({}, selectedDays), {
      [day]: !selectedDays[day]
    });
    setSelectedDays(newDays);
    props.selectedWeekDays(newDays);
  };
  return _jsx(StyledEngineProvider, {
    injectFirst: true,
    children: _jsxs(Row, {
      children: [dayButtons.map((buttonLabel, i) => _jsx(Button, {
        className: "dayButton",
        inline: true,
        name: buttonLabel,
        dark: selectedDays[buttonLabel.toLowerCase()],
        value: i,
        onClick: () => handleDayClick(buttonLabel.toLowerCase()),
        children: getDaysAbbr(buttonLabel)
      }, i)), _jsx(Helmet, {
        children: _jsx("style", {
          children: `.dayButton {
                            margin: 0 4px 0 0;
                            border: 1px solid ${Palette.WHITE_SMOKE};
                            border-radius: 4px;
                        }`
        })
      })]
    })
  });
};
export default DaysPicker;