2023-07-06 15:12:46 +00:00
|
|
|
import React, { useState, useRef, useEffect } from "react";
|
2023-07-05 09:15:34 +00:00
|
|
|
import styled from "styled-components";
|
2023-06-13 13:28:02 +00:00
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
|
|
|
import TimePicker from "@docspace/components/time-picker";
|
2023-07-05 09:15:34 +00:00
|
|
|
import DatePicker from "@docspace/components/date-picker";
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
import ClockIcon from "PUBLIC_DIR/images/clock.react.svg";
|
2023-06-13 13:28:02 +00:00
|
|
|
|
|
|
|
const Selectors = styled.div`
|
|
|
|
position: relative;
|
|
|
|
margin-top: 8px;
|
|
|
|
margin-bottom: 16px;
|
2023-06-19 08:37:37 +00:00
|
|
|
height: 32px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-06-19 08:37:37 +00:00
|
|
|
.selectedItem {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
2023-06-13 13:28:02 +00:00
|
|
|
`;
|
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
const TimeCell = styled.span`
|
|
|
|
display: flex;
|
2023-06-13 13:28:02 +00:00
|
|
|
align-items: center;
|
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
box-sizing: border-box;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
width: 73px;
|
|
|
|
height: 32px;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
background-color: #eceef1;
|
|
|
|
border-radius: 3px;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
padding: 6px 8px;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
cursor: pointer;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
.clockIcon {
|
|
|
|
width: 12px;
|
|
|
|
height: 12px;
|
|
|
|
padding: 0 10px 0 2px;
|
|
|
|
}
|
|
|
|
`;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
const TimeSelector = styled.span`
|
|
|
|
margin-left: 4px;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
`;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
const DateTimePicker = (props) => {
|
2023-07-06 15:12:46 +00:00
|
|
|
const { date, selectDateText, onChange, setDate, className, id } = props;
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
const [isTimeFocused, setIsTimeFocused] = useState(false);
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-05 09:15:34 +00:00
|
|
|
const showTimePicker = () => setIsTimeFocused(true);
|
|
|
|
const hideTimePicker = () => setIsTimeFocused(false);
|
2023-06-13 13:28:02 +00:00
|
|
|
|
2023-07-06 15:12:46 +00:00
|
|
|
const handleChange = (date) => {
|
|
|
|
setDate(date);
|
|
|
|
onChange(date);
|
|
|
|
};
|
|
|
|
|
|
|
|
const timePickerRef = useRef(null);
|
|
|
|
|
|
|
|
const handleClick = (e) => {
|
|
|
|
!timePickerRef?.current?.contains(e.target) && setIsTimeFocused(false);
|
|
|
|
};
|
|
|
|
const handleKeyDown = (event) => {
|
|
|
|
if (event.key === "Enter" || event.key === "Tab") {
|
|
|
|
setIsTimeFocused(false);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
document.addEventListener("click", handleClick, { capture: true });
|
|
|
|
document.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener("click", handleClick, { capture: true });
|
|
|
|
document.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
2023-06-13 13:28:02 +00:00
|
|
|
return (
|
2023-07-05 09:15:34 +00:00
|
|
|
<Selectors className={className} id={id}>
|
|
|
|
<DatePicker
|
|
|
|
date={date}
|
2023-07-06 15:12:46 +00:00
|
|
|
onChange={handleChange}
|
2023-07-05 09:15:34 +00:00
|
|
|
selectDateText={selectDateText}
|
|
|
|
/>
|
|
|
|
<TimeSelector>
|
|
|
|
{date !== null &&
|
|
|
|
(isTimeFocused ? (
|
2023-06-13 13:28:02 +00:00
|
|
|
<TimePicker
|
2023-07-05 09:15:34 +00:00
|
|
|
date={date}
|
2023-07-06 15:12:46 +00:00
|
|
|
setDate={handleChange}
|
2023-07-05 09:15:34 +00:00
|
|
|
tabIndex={1}
|
|
|
|
onBlur={hideTimePicker}
|
|
|
|
focusOnRender
|
2023-07-06 15:12:46 +00:00
|
|
|
forwardedRef={timePickerRef}
|
2023-06-13 13:28:02 +00:00
|
|
|
/>
|
2023-07-05 09:15:34 +00:00
|
|
|
) : (
|
|
|
|
<TimeCell onClick={showTimePicker}>
|
|
|
|
<ClockIcon className="clockIcon" />
|
|
|
|
{date.format("HH:mm")}
|
|
|
|
</TimeCell>
|
|
|
|
))}
|
|
|
|
</TimeSelector>
|
2023-06-13 13:28:02 +00:00
|
|
|
</Selectors>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
DateTimePicker.propTypes = {
|
2023-07-05 09:15:34 +00:00
|
|
|
/** Date object */
|
|
|
|
date: PropTypes.object,
|
2023-06-13 13:28:02 +00:00
|
|
|
/** Select date text */
|
|
|
|
selectDateText: PropTypes.string,
|
|
|
|
/** Allows to set classname */
|
|
|
|
className: PropTypes.string,
|
|
|
|
/** Allows to set id */
|
|
|
|
id: PropTypes.string,
|
|
|
|
/** Allow you to handle changing events of component */
|
|
|
|
onChange: PropTypes.func,
|
2023-07-06 15:12:46 +00:00
|
|
|
/** Sets date */
|
|
|
|
setDate: PropTypes.func,
|
2023-06-13 13:28:02 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default DateTimePicker;
|