Restructure project (#124)

2023-05-17 22:31:16 +02:00
parent baca6150f5
commit 434e020846
76 changed files with 295 additions and 304 deletions
--- a/front/src/components/editable-cell/EditableDate.tsx
+++ b/front/src/components/editable-cell/EditableDate.tsx
@ -0,0 +1,109 @@
+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;