Feat/generic editable cell all types (#987)

* Added generic relation cell * Deactivated debug * Added default warning * Put back display component * Removed unused types * wip * Renamed to view field * Use new view field structure to have chip working * Finished * Added a temp feature flag * Added double text chip cell * Ok * Finished tables * Fixed icon size * Fixed bug on date field * Use icon index * Fix * Fixed naming * Fix * removed file from merge * Fixed tests * Coverage
2023-07-29 23:48:43 +02:00
parent dc18bc40b0
commit d9f6ae8663
77 changed files with 1730 additions and 326 deletions
@@ -0,0 +1,79 @@
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { textInputStyle } from '@/ui/themes/effects';
+
+import { useRegisterCloseCellHandlers } from '../../table/editable-cell/hooks/useRegisterCloseCellHandlers';
+
+import { StyledDoubleTextContainer } from './InplaceInputDoubleText';
+
+export const StyledInput = styled.input`
+  margin: 0;
+  width: 100%;
+  ${textInputStyle}
+`;
+
+type OwnProps = {
+  firstValuePlaceholder?: string;
+  secondValuePlaceholder?: string;
+  firstValue: string;
+  secondValue: string;
+  onSubmit: (newFirstValue: string, newSecondValue: string) => void;
+};
+
+export function InplaceInputDoubleTextCellEditMode({
+  firstValue,
+  secondValue,
+  firstValuePlaceholder,
+  secondValuePlaceholder,
+  onSubmit,
+}: OwnProps) {
+  const [internalFirstValue, setInternalFirstValue] = useState(firstValue);
+  const [internalSecondValue, setInternalSecondValue] = useState(secondValue);
+
+  const wrapperRef = useRef(null);
+
+  function handleSubmit() {
+    onSubmit(internalFirstValue, internalSecondValue);
+  }
+
+  function handleCancel() {
+    setInternalFirstValue(firstValue);
+    setInternalSecondValue(secondValue);
+  }
+
+  function handleFirstValueChange(event: ChangeEvent<HTMLInputElement>) {
+    setInternalFirstValue(event.target.value);
+  }
+
+  function handleSecondValueChange(event: ChangeEvent<HTMLInputElement>) {
+    setInternalSecondValue(event.target.value);
+  }
+
+  useEffect(() => {
+    setInternalFirstValue(firstValue);
+  }, [firstValue]);
+
+  useEffect(() => {
+    setInternalSecondValue(secondValue);
+  }, [secondValue]);
+
+  useRegisterCloseCellHandlers(wrapperRef, handleSubmit, handleCancel);
+
+  return (
+    <StyledDoubleTextContainer ref={wrapperRef}>
+      <StyledInput
+        autoFocus
+        placeholder={firstValuePlaceholder}
+        value={internalFirstValue}
+        onChange={handleFirstValueChange}
+      />
+      <StyledInput
+        autoComplete="off"
+        placeholder={secondValuePlaceholder}
+        value={internalSecondValue}
+        onChange={handleSecondValueChange}
+      />
+    </StyledDoubleTextContainer>
+  );
+}