110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { forwardRef, useState } from 'react';
|
|
import EditableCellWrapper from './EditableCellWrapper';
|
|
import DatePicker from '../form/DatePicker';
|
|
import { CalendarContainer } from 'react-datepicker';
|
|
import { modalBackground } from '../../layout/styles/themes';
|
|
|
|
export type EditableDateProps = {
|
|
value: Date;
|
|
changeHandler: (date: Date) => void;
|
|
editModeHorizontalAlign?: 'left' | 'right';
|
|
};
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
|
|
export type StyledCalendarContainerProps = {
|
|
editModeHorizontalAlign?: 'left' | 'right';
|
|
};
|
|
|
|
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
|
|
position: absolute;
|
|
border: 1px solid ${(props) => props.theme.primaryBorder};
|
|
border-radius: 8px;
|
|
width: 280px;
|
|
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
|
|
z-index: 1;
|
|
left: -10px;
|
|
${modalBackground};
|
|
`;
|
|
function EditableDate({
|
|
value,
|
|
changeHandler,
|
|
editModeHorizontalAlign,
|
|
}: EditableDateProps) {
|
|
const [inputValue, setInputValue] = useState(value);
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
|
|
type DivProps = React.HTMLProps<HTMLDivElement>;
|
|
|
|
const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
|
|
({ value, onClick }, ref) => (
|
|
<div onClick={onClick} ref={ref}>
|
|
{value &&
|
|
new Intl.DateTimeFormat(undefined, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
}).format(new Date(value as string))}
|
|
</div>
|
|
),
|
|
);
|
|
|
|
interface DatePickerContainerProps {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const DatePickerContainer = ({
|
|
className,
|
|
children,
|
|
}: DatePickerContainerProps) => {
|
|
return (
|
|
<StyledCalendarContainer>
|
|
<CalendarContainer className={className}>
|
|
<div style={{ position: 'relative' }}>{children}</div>
|
|
</CalendarContainer>
|
|
</StyledCalendarContainer>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<EditableCellWrapper
|
|
isEditMode={isEditMode}
|
|
onOutsideClick={() => setIsEditMode(false)}
|
|
onInsideClick={() => setIsEditMode(true)}
|
|
editModeHorizontalAlign={editModeHorizontalAlign}
|
|
editModeContent={
|
|
<StyledContainer>
|
|
<DatePicker
|
|
date={inputValue}
|
|
onChangeHandler={(date: Date) => {
|
|
changeHandler(date);
|
|
setInputValue(date);
|
|
}}
|
|
customInput={<DateDisplay />}
|
|
customContainer={DatePickerContainer}
|
|
/>
|
|
</StyledContainer>
|
|
}
|
|
nonEditModeContent={
|
|
<StyledContainer>
|
|
<div>
|
|
{inputValue &&
|
|
new Intl.DateTimeFormat(undefined, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
}).format(inputValue)}
|
|
</div>
|
|
</StyledContainer>
|
|
}
|
|
></EditableCellWrapper>
|
|
);
|
|
}
|
|
|
|
export default EditableDate;
|