@parkassist/pa-ui-library/dist/components/DateRangePicker2/TimeRangePicker.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 { Column, Row } from "../Layout/Flex";
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeField } from '@mui/x-date-pickers/TimeField';
const TimeRangePicker = ({
  labelFrom = "From",
  labelTo = "To",
  selectedHours,
  timeRange
}) => {
  const handleFrom = time => {
    const newRange = Object.assign(Object.assign({}, timeRange), {
      hourFrom: time
    });
    selectedHours(newRange);
  };
  const handleTo = time => {
    const newRange = Object.assign(Object.assign({}, timeRange), {
      hourTo: time
    });
    selectedHours(newRange);
  };
  return _jsx(LocalizationProvider, {
    dateAdapter: AdapterDayjs,
    children: _jsxs(Row, {
      className: "time-selector",
      children: [_jsx(Column, {
        style: {
          marginRight: 10
        },
        children: _jsx(TimeField, {
          size: "small",
          variant: "outlined",
          label: labelFrom,
          value: timeRange.hourFrom,
          onChange: rangeFrom => handleFrom(rangeFrom)
        })
      }), _jsx(Column, {
        children: _jsx(TimeField, {
          size: "small",
          variant: "outlined",
          label: labelTo,
          value: timeRange.hourTo,
          onChange: rangeTo => handleTo(rangeTo)
        })
      })]
    })
  });
};
export default TimeRangePicker;