Reafactor/UI input and displays (#1544)

* WIP * Text field * URL * Finished PhoneInput * Refactored input sub-folders * Boolean * Fix lint * Fix lint * Fix useOutsideClick --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2023-09-12 02:11:20 +02:00
parent 509ffddc57
commit a766c60aa5
90 changed files with 618 additions and 461 deletions
@@ -0,0 +1,60 @@
+import { Ref } from 'react';
+import styled from '@emotion/styled';
+
+export type EditableCellDisplayContainerProps = {
+  softFocus?: boolean;
+  onClick?: () => void;
+  scrollRef?: Ref<HTMLDivElement>;
+};
+
+const StyledEditableCellDisplayModeOuterContainer = styled.div<
+  Pick<EditableCellDisplayContainerProps, 'softFocus'>
+>`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+
+  ${(props) =>
+    props.softFocus
+      ? `background: ${props.theme.background.transparent.secondary};
+        border-radius: ${props.theme.border.radius.sm};
+        box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
+      : ''}
+`;
+
+const StyledEditableCellDisplayModeInnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export function EditableCellDisplayContainer({
+  children,
+  softFocus,
+  onClick,
+  scrollRef,
+}: React.PropsWithChildren<EditableCellDisplayContainerProps>) {
+  return (
+    <StyledEditableCellDisplayModeOuterContainer
+      data-testid={
+        softFocus
+          ? 'editable-cell-soft-focus-mode'
+          : 'editable-cell-display-mode'
+      }
+      onClick={onClick}
+      softFocus={softFocus}
+      ref={scrollRef}
+    >
+      <StyledEditableCellDisplayModeInnerContainer>
+        {children}
+      </StyledEditableCellDisplayModeInnerContainer>
+    </StyledEditableCellDisplayModeOuterContainer>
+  );
+}