FieldDisplay & FieldInput (#1708)

* Removed view field duplicate types * wip * wip 2 * wip 3 * Unified state for fields * Renaming * Wip * Post merge * Post post merge * wip * Delete unused file * Boolean and Probability * Finished InlineCell * Renamed EditableCell to TableCell * Finished double texts * Finished MoneyField * Fixed bug inline cell click outside * Fixed hotkey scope * Final fixes * Phone * Fix url and number input validation * Fix * Fix position * wip refactor activity editor * Fixed activity editor --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2023-09-27 18:18:02 +02:00
parent d9feabbc63
commit cbadcba188
290 changed files with 3152 additions and 4481 deletions
--- a/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
+++ b/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
@ -0,0 +1,69 @@
+import { ChangeEvent } from 'react';
+import styled from '@emotion/styled';
+
+import { StyledInput } from '@/ui/input/components/TextInput';
+import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
+
+export type DoubleTextInputEditProps = {
+  firstValue: string;
+  secondValue: string;
+  firstValuePlaceholder: string;
+  secondValuePlaceholder: string;
+  onChange: (firstValue: string, secondValue: string) => void;
+};
+
+const StyledDoubleTextContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+`;
+
+const StyledTextInput = styled(StyledInput)`
+  margin: 0 ${({ theme }) => theme.spacing(0.5)};
+  padding: 0;
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+
+  &:hover:not(:focus) {
+    background-color: ${({ theme }) => theme.background.transparent.light};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    cursor: pointer;
+    padding: 0 ${({ theme }) => theme.spacing(1)};
+  }
+`;
+
+export const EntityTitleDoubleTextInput = ({
+  firstValue,
+  secondValue,
+  firstValuePlaceholder,
+  secondValuePlaceholder,
+  onChange,
+}: DoubleTextInputEditProps) => (
+  <StyledDoubleTextContainer>
+    <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
+      {(nodeDimensions) => (
+        <StyledTextInput
+          width={nodeDimensions?.width}
+          placeholder={firstValuePlaceholder}
+          value={firstValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            onChange(event.target.value, secondValue);
+          }}
+        />
+      )}
+    </ComputeNodeDimensions>
+    <ComputeNodeDimensions node={secondValue || secondValuePlaceholder}>
+      {(nodeDimensions) => (
+        <StyledTextInput
+          width={nodeDimensions?.width}
+          autoComplete="off"
+          placeholder={secondValuePlaceholder}
+          value={secondValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            onChange(firstValue, event.target.value);
+          }}
+        />
+      )}
+    </ComputeNodeDimensions>
+  </StyledDoubleTextContainer>
+);