Create consistent ui/input and ui/display for Cell and Fields type : … (#1658)

* Create consistent ui/input and ui/display for Cell and Fields type : Probability, DoubleText, DoubleTextChip Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Move components to `ui/input` Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Update imports in ProbabilityEditableFieldEditMode Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Refactor according to review Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Create consistent ui/input and ui/display for Cell and Fields type : Probability, DoubleText, DoubleTextChip Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Merge main Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add more refactors Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Refactor according to review Co-authored-by: v1b3m <vibenjamin6@gmail.com> --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com>
2023-09-25 10:10:14 +01:00
parent 1c3897848f
commit f777fa22e9
8 changed files with 242 additions and 159 deletions
--- a/front/src/modules/ui/input/components/DoubleTextInput.tsx
+++ b/front/src/modules/ui/input/components/DoubleTextInput.tsx
@ -0,0 +1,65 @@
+import { ChangeEvent, Ref } from 'react';
+import styled from '@emotion/styled';
+
+import { StyledInput } from './TextInput';
+
+type OwnProps = {
+  firstValue: string;
+  secondValue: string;
+  firstValuePlaceholder: string;
+  secondValuePlaceholder: string;
+  onChange: (firstValue: string, secondValue: string) => void;
+  firstValueInputRef?: Ref<HTMLInputElement>;
+  secondValueInputRef?: Ref<HTMLInputElement>;
+  containerRef?: Ref<HTMLDivElement>;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  input {
+    width: ${({ theme }) => theme.spacing(24)};
+  }
+
+  & > input:last-child {
+    border-left: 1px solid ${({ theme }) => theme.border.color.medium};
+    padding-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+export const DoubleTextInput = ({
+  firstValue,
+  secondValue,
+  firstValuePlaceholder,
+  secondValuePlaceholder,
+  firstValueInputRef,
+  secondValueInputRef,
+  onChange,
+  containerRef,
+}: OwnProps) => {
+  return (
+    <StyledContainer ref={containerRef}>
+      <StyledInput
+        autoComplete="off"
+        autoFocus
+        placeholder={firstValuePlaceholder}
+        ref={firstValueInputRef}
+        value={firstValue}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          onChange(event.target.value, secondValue);
+        }}
+      />
+      <StyledInput
+        autoComplete="off"
+        placeholder={secondValuePlaceholder}
+        ref={secondValueInputRef}
+        value={secondValue}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          onChange(firstValue, event.target.value);
+        }}
+      />
+    </StyledContainer>
+  );
+};