Refactor/inplace input (#541)

* wip

* Changed all other components

* Removed console log

* Console.log

* lint

* Removed internal state

* Fix

* Lint

front/src/modules/ui/inplace-inputs/components/InplaceInputDateDisplayMode.tsx

@@ -0,0 +1,9 @@
+import { humanReadableDate } from '@/utils/utils';
+
+type OwnProps = {
+  value: Date;
+};
+
+export function InplaceInputDateDisplayMode({ value }: OwnProps) {
+  return <div>{value && humanReadableDate(value)}</div>;
+}

front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+
+import DatePicker from '@/ui/components/form/DatePicker';
+import { humanReadableDate } from '@/utils/utils';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  margin: 0px ${({ theme }) => theme.spacing(2)};
+`;
+
+export type StyledCalendarContainerProps = {
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  left: -10px;
+  position: absolute;
+  top: 10px;
+  z-index: 1;
+`;
+
+type DivProps = React.HTMLProps<HTMLDivElement>;
+
+const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
+  ({ value, onClick }, ref) => (
+    <div onClick={onClick} ref={ref}>
+      {value && humanReadableDate(new Date(value as string))}
+    </div>
+  ),
+);
+
+type DatePickerContainerProps = {
+  children: React.ReactNode;
+};
+
+const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
+  return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
+};
+
+type OwnProps = {
+  value: Date;
+  onChange: (newDate: Date) => void;
+};
+
+export function InplaceInputDateEditMode({ onChange, value }: OwnProps) {
+  return (
+    <StyledContainer>
+      <DatePicker
+        date={value}
+        onChangeHandler={onChange}
+        customInput={<DateDisplay />}
+        customCalendarContainer={DatePickerContainer}
+      />
+    </StyledContainer>
+  );
+}

front/src/modules/ui/inplace-inputs/components/InplaceInputPhoneDisplayMode.tsx

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import styled from '@emotion/styled';
+import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
+
+import { RawLink } from '@/ui/components/links/RawLink';
+
+const StyledRawLink = styled(RawLink)`
+  overflow: hidden;
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+type OwnProps = {
+  value: string;
+};
+
+export function InplaceInputPhoneDisplayMode({ value }: OwnProps) {
+  return isValidPhoneNumber(value) ? (
+    <StyledRawLink
+      href={parsePhoneNumber(value, 'FR')?.getURI()}
+      onClick={(event: MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+      }}
+    >
+      {parsePhoneNumber(value, 'FR')?.formatInternational() || value}
+    </StyledRawLink>
+  ) : (
+    <StyledRawLink href="#">{value}</StyledRawLink>
+  );
+}

front/src/modules/ui/inplace-inputs/components/InplaceInputTextDisplayMode.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const InplaceInputTextDisplayMode = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;

front/src/modules/ui/inplace-inputs/components/InplaceInputTextEditMode.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+import { textInputStyle } from '@/ui/themes/effects';
+
+export const InplaceInputTextEditMode = styled.input`
+  margin: 0;
+  width: 100%;
+  ${textInputStyle}
+`;