Refactor Editable Cell (#191)

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

@@ -1,16 +1,35 @@
 import { ReactElement, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { debounce } from '@/utils/debounce';
 
 import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
+import { overlayBackground } from '../../layout/styles/themes';
 import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
 
-import { CellEditModeContainer } from './CellEditModeContainer';
+export const EditableCellEditModeContainer = styled.div<OwnProps>`
+  display: flex;
+  align-items: center;
+  min-width: calc(100% + 20px);
+  min-height: 100%;
+  margin-left: -2px;
+  position: absolute;
+  left: ${(props) =>
+    props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
+  right: ${(props) =>
+    props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
+  top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
+
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  z-index: 1;
+  border-radius: 4px;
+  ${overlayBackground}
+`;
 
 type OwnProps = {
-  editModeContent: ReactElement;
+  children: ReactElement;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   isEditMode?: boolean;
@@ -21,7 +40,7 @@ type OwnProps = {
 export function EditableCellEditMode({
   editModeHorizontalAlign,
   editModeVerticalPosition,
-  editModeContent,
+  children,
   isEditMode,
   onOutsideClick,
 }: OwnProps) {
@@ -77,13 +96,13 @@ export function EditableCellEditMode({
   );
 
   return (
-    <CellEditModeContainer
+    <EditableCellEditModeContainer
       data-testid="editable-cell-edit-mode-container"
       ref={wrapperRef}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeVerticalPosition={editModeVerticalPosition}
     >
-      {editModeContent}
-    </CellEditModeContainer>
+      {children}
+    </EditableCellEditModeContainer>
   );
 }