Revert "Refacto/remaining inplace input cells" (#534)

Revert "Refacto/remaining inplace input cells (#531)"

This reverts commit 6446692f25.

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -1,6 +1,6 @@
 import { CellCommentChip } from '@/comments/components/CellCommentChip';
 import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
-import { EditableChipCell } from '@/ui/components/editable-cell/types/EditableChipCell';
+import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 import {
   CommentableType,
@@ -34,7 +34,7 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
   }
 
   return (
-    <EditableChipCell
+    <EditableChip
       value={company.name || ''}
       placeholder="Name"
       picture={getLogoUrlFromDomainName(company.domainName)}

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { CellCommentChip } from '@/comments/components/CellCommentChip';
 import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
-import { EditableDoubleTextCell } from '@/ui/components/editable-cell/types/EditableDoubleTextCell';
+import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
 import { CommentableType, Person } from '~/generated/graphql';
 
 import { PersonChip } from './PersonChip';
@@ -52,7 +52,7 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
   }
 
   return (
-    <EditableDoubleTextCell
+    <EditableDoubleText
       firstValue={firstNameValue}
       secondValue={lastNameValue}
       firstValuePlaceholder="First name"

front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx

@@ -3,8 +3,10 @@ import styled from '@emotion/styled';
 import { IconCurrencyDollar } from '@tabler/icons-react';
 
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
-import { InplaceDateInput } from '@/ui/components/inplace-input/types/InplaceDateInput';
+import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { InplaceTextInput } from '@/ui/components/inplace-input/types/InplaceTextInput';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { RowContext } from '@/ui/tables/states/RowContext';
 
 import { Company, PipelineProgress } from '../../../generated/graphql';
 import { Checkbox } from '../../ui/components/form/Checkbox';
@@ -70,6 +72,17 @@ type PipelineProgressProp = Pick<
   'id' | 'amount' | 'closeDate'
 >;
 
+// TODO: Remove when refactoring EditableCell into EditableField
+function HackScope({ children }: { children: React.ReactNode }) {
+  return (
+    <RecoilScope>
+      <RecoilScope SpecificContext={RowContext}>
+        <RecoilScope SpecificContext={CellContext}>{children}</RecoilScope>
+      </RecoilScope>
+    </RecoilScope>
+  );
+}
+
 export function CompanyBoardCard({
   company,
   pipelineProgress,
@@ -99,7 +112,7 @@ export function CompanyBoardCard({
         <StyledBoardCardBody>
           <span>
             <IconCurrencyDollar size={theme.icon.size.md} />
-            <RecoilScope>
+            <HackScope>
               <InplaceTextInput
                 content={pipelineProgress.amount?.toString() || ''}
                 placeholder="Opportunity amount"
@@ -110,12 +123,12 @@ export function CompanyBoardCard({
                   })
                 }
               />
-            </RecoilScope>
+            </HackScope>
           </span>
           <span>
             <IconCalendarEvent size={theme.icon.size.md} />
-            <RecoilScope>
+            <HackScope>
-              <InplaceDateInput
+              <EditableDate
                 value={new Date(pipelineProgress.closeDate || Date.now())}
                 changeHandler={(value) => {
                   onCardUpdate({
@@ -124,7 +137,7 @@ export function CompanyBoardCard({
                   });
                 }}
               />
-            </RecoilScope>
+            </HackScope>
           </span>
         </StyledBoardCardBody>
       </StyledBoardCard>

front/src/modules/ui/components/editable-cell/EditableCell.tsx

@@ -12,12 +12,20 @@ type OwnProps = {
   editModeVerticalPosition?: 'over' | 'below';
 };
 
-export function EditableCell(props: OwnProps) {
+export function EditableCell({
+  editModeHorizontalAlign = 'left',
+  editModeVerticalPosition = 'over',
+  editModeContent,
+  nonEditModeContent,
+}: OwnProps) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
   return (
     <InplaceInput
-      {...props}
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeVerticalPosition={editModeVerticalPosition}
+      editModeContent={editModeContent}
+      nonEditModeContent={nonEditModeContent}
       setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
       hasSoftFocus={!!hasSoftFocus}
     />

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
 
-import { InplaceInput } from '../InplaceInput';
+import { EditableCell } from '../EditableCell';
 
-export type OwnProps = {
+export type EditableChipProps = {
   placeholder?: string;
   value: string;
   picture: string;
@@ -19,8 +19,6 @@ export type OwnProps = {
   commentCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   rightEndContents?: ReactNode[];
-  setSoftFocusOnCurrentInplaceInput?: () => void;
-  hasSoftFocus?: boolean;
 };
 
 // TODO: refactor
@@ -41,7 +39,7 @@ const RightContainer = styled.div`
   margin-left: ${(props) => props.theme.spacing(1)};
 `;
 
-export function InplaceChipInput({
+function EditableChip({
   value,
   placeholder,
   changeHandler,
@@ -49,9 +47,7 @@ export function InplaceChipInput({
   editModeHorizontalAlign,
   ChipComponent,
   rightEndContents,
-  setSoftFocusOnCurrentInplaceInput,
+}: EditableChipProps) {
-  hasSoftFocus,
-}: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
@@ -62,7 +58,7 @@ export function InplaceChipInput({
   };
 
   return (
-    <InplaceInput
+    <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledInplaceInput
@@ -90,8 +86,8 @@ export function InplaceChipInput({
           </RightContainer>
         </NoEditModeContainer>
       }
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
-      hasSoftFocus={hasSoftFocus}
     />
   );
 }
+
+export default EditableChip;

front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx

@@ -1,33 +0,0 @@
-import { ComponentType, ReactNode } from 'react';
-
-import { InplaceChipInput } from '../../inplace-input/types/InplaceChipInput';
-import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
-import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
-
-export type OwnProps = {
-  placeholder?: string;
-  value: string;
-  picture: string;
-  changeHandler: (upChipd: string) => void;
-  editModeHorizontalAlign?: 'left' | 'right';
-  ChipComponent: ComponentType<{
-    name: string;
-    picture: string;
-    isOverlapped?: boolean;
-  }>;
-  commentCount?: number;
-  onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  rightEndContents?: ReactNode[];
-};
-
-export function EditableChipCell(props: OwnProps) {
-  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
-  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
-  return (
-    <InplaceChipInput
-      {...props}
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
-      hasSoftFocus={hasSoftFocus}
-    />
-  );
-}

front/src/modules/ui/components/editable-cell/types/EditableDate.tsx

@@ -4,14 +4,12 @@ import styled from '@emotion/styled';
 import { humanReadableDate } from '@/utils/utils';
 
 import DatePicker from '../../form/DatePicker';
-import { InplaceInput } from '../InplaceInput';
+import { EditableCell } from '../EditableCell';
 
-export type OwnProps = {
+export type EditableDateProps = {
   value: Date;
   changeHandler: (date: Date) => void;
   editModeHorizontalAlign?: 'left' | 'right';
-  setSoftFocusOnCurrentInplaceInput?: () => void;
-  hasSoftFocus?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -34,13 +32,11 @@ const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
   top: 10px;
   z-index: 1;
 `;
-export function InplaceDateInput({
+export function EditableDate({
   value,
   changeHandler,
   editModeHorizontalAlign,
-  setSoftFocusOnCurrentInplaceInput,
+}: EditableDateProps) {
-  hasSoftFocus,
-}: OwnProps) {
   const [inputValue, setInputValue] = useState(value);
 
   type DivProps = React.HTMLProps<HTMLDivElement>;
@@ -62,7 +58,7 @@ export function InplaceDateInput({
   };
 
   return (
-    <InplaceInput
+    <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledContainer>
@@ -77,11 +73,9 @@ export function InplaceDateInput({
           />
         </StyledContainer>
       }
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
-      hasSoftFocus={hasSoftFocus}
       nonEditModeContent={
         <div>{inputValue && humanReadableDate(inputValue)}</div>
       }
-    ></InplaceInput>
+    ></EditableCell>
   );
 }

front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx

@@ -1,22 +0,0 @@
-import { InplaceDateInput } from '../../inplace-input/types/InplaceDateInput';
-import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
-import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
-
-type OwnProps = {
-  placeholder?: string;
-  value: Date;
-  changeHandler: (date: Date) => void;
-  editModeHorizontalAlign?: 'left' | 'right';
-};
-
-export function EditableDateCell(props: OwnProps) {
-  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
-  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
-  return (
-    <InplaceDateInput
-      {...props}
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
-      hasSoftFocus={hasSoftFocus}
-    />
-  );
-}

front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
 
-import { InplaceInput } from '../InplaceInput';
+import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
   firstValue: string;
@@ -12,8 +12,6 @@ type OwnProps = {
   secondValuePlaceholder: string;
   nonEditModeContent: ReactElement;
   onChange: (firstValue: string, secondValue: string) => void;
-  setSoftFocusOnCurrentInplaceInput?: () => void;
-  hasSoftFocus?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -35,20 +33,18 @@ const StyledEditInplaceInput = styled.input`
   ${textInputStyle}
 `;
 
-export function InplaceDoubleTextInput({
+export function EditableDoubleText({
   firstValue,
   secondValue,
   firstValuePlaceholder,
   secondValuePlaceholder,
   nonEditModeContent,
   onChange,
-  setSoftFocusOnCurrentInplaceInput,
-  hasSoftFocus,
 }: OwnProps) {
   const firstValueInputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <InplaceInput
+    <EditableCell
       editModeContent={
         <StyledContainer>
           <StyledEditInplaceInput
@@ -71,8 +67,6 @@ export function InplaceDoubleTextInput({
         </StyledContainer>
       }
       nonEditModeContent={nonEditModeContent}
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
+    ></EditableCell>
-      hasSoftFocus={hasSoftFocus}
-    ></InplaceInput>
   );
 }

front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx

@@ -1,26 +0,0 @@
-import { ReactElement } from 'react';
-
-import { InplaceDoubleTextInput } from '../../inplace-input/types/InplaceDoubleTextInput';
-import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
-import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
-
-type OwnProps = {
-  firstValue: string;
-  secondValue: string;
-  firstValuePlaceholder: string;
-  secondValuePlaceholder: string;
-  nonEditModeContent: ReactElement;
-  onChange: (firstValue: string, secondValue: string) => void;
-};
-
-export function EditableDoubleTextCell(props: OwnProps) {
-  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
-  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
-  return (
-    <InplaceDoubleTextInput
-      {...props}
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
-      hasSoftFocus={hasSoftFocus}
-    />
-  );
-}

front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx

@@ -5,14 +5,12 @@ import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
 import { textInputStyle } from '@/ui/themes/effects';
 
 import { RawLink } from '../../links/RawLink';
-import { InplaceInput } from '../InplaceInput';
+import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
   placeholder?: string;
   value: string;
   changeHandler: (updated: string) => void;
-  setSoftFocusOnCurrentInplaceInput?: () => void;
-  hasSoftFocus?: boolean;
 };
 
 const StyledRawLink = styled(RawLink)`
@@ -32,18 +30,12 @@ const StyledEditInplaceInput = styled.input`
   ${textInputStyle}
 `;
 
-export function InplacePhoneInput({
+export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
-  value,
-  placeholder,
-  changeHandler,
-  setSoftFocusOnCurrentInplaceInput,
-  hasSoftFocus,
-}: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
   return (
-    <InplaceInput
+    <EditableCell
       editModeContent={
         <StyledEditInplaceInput
           autoFocus
@@ -73,8 +65,6 @@ export function InplacePhoneInput({
           )}
         </>
       }
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
-      hasSoftFocus={hasSoftFocus}
     />
   );
 }

front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx

@@ -1,21 +0,0 @@
-import { InplacePhoneInput } from '../../inplace-input/types/InplacePhoneInput';
-import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
-import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
-
-type OwnProps = {
-  placeholder?: string;
-  value: string;
-  changeHandler: (Phone: string) => void;
-};
-
-export function EditablePhoneCell(props: OwnProps) {
-  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
-  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
-  return (
-    <InplacePhoneInput
-      {...props}
-      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
-      hasSoftFocus={hasSoftFocus}
-    />
-  );
-}

front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+export const EditableRelationCreateButton = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 31px;
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  user-select: none;
+  width: 100%;
+`;

front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx

@@ -9,12 +9,20 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
-export function EditableTextCell(props: OwnProps) {
+export function EditableTextCell({
+  editModeHorizontalAlign = 'left',
+  content,
+  changeHandler,
+  placeholder,
+}: OwnProps) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
   return (
     <InplaceTextInput
-      {...props}
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      content={content}
+      changeHandler={changeHandler}
+      placeholder={placeholder}
       setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
       hasSoftFocus={hasSoftFocus}
     />

front/src/pages/companies/companies-columns.tsx

@@ -3,7 +3,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 
 import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
-import { EditableDateCell } from '@/ui/components/editable-cell/types/EditableDateCell';
+import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import {
@@ -114,7 +114,7 @@ export const useCompaniesColumns = () => {
           />
         ),
         cell: (props) => (
-          <EditableDateCell
+          <EditableDate
             value={
               props.row.original.createdAt
                 ? new Date(props.row.original.createdAt)

front/src/pages/people/people-columns.tsx

@@ -3,8 +3,8 @@ import { createColumnHelper } from '@tanstack/react-table';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
 import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
-import { EditableDateCell } from '@/ui/components/editable-cell/types/EditableDateCell';
+import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
-import { EditablePhoneCell } from '@/ui/components/editable-cell/types/EditablePhoneCell';
+import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
 import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import {
@@ -87,7 +87,7 @@ export const usePeopleColumns = () => {
           <ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
         ),
         cell: (props) => (
-          <EditablePhoneCell
+          <EditablePhone
             placeholder="Phone"
             value={props.row.original.phone || ''}
             changeHandler={async (value: string) => {
@@ -112,7 +112,7 @@ export const usePeopleColumns = () => {
           />
         ),
         cell: (props) => (
-          <EditableDateCell
+          <EditableDate
             value={
               props.row.original.createdAt
                 ? new Date(props.row.original.createdAt)