Create Editable chip to edit cells containing chips (#102)

* Create Editable chip to edit cells containing chips * Fix icons vertical alignment * Fix linter * Fix coverage
2023-05-05 12:15:41 +02:00
parent 9cd57083f1
commit 55eff2b7a2
9 changed files with 168 additions and 30 deletions
@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+import { ChangeEvent, ComponentType, useRef, useState } from 'react';
+import EditableCellWrapper from './EditableCellWrapper';
+
+export type EditableChipProps = {
+  placeholder?: string;
+  value: string;
+  picture: string;
+  changeHandler: (updated: string) => void;
+  shouldAlignRight?: boolean;
+  ChipComponent: ComponentType<{ name: string; picture: string }>;
+};
+
+type StyledEditModeProps = {
+  isEditMode: boolean;
+};
+
+const StyledInplaceInput = styled.input<StyledEditModeProps>`
+  width: 100%;
+  border: none;
+  outline: none;
+
+  &::placeholder {
+    font-weight: ${(props) => (props.isEditMode ? 'bold' : 'normal')};
+    color: ${(props) =>
+      props.isEditMode ? props.theme.text20 : 'transparent'};
+  }
+`;
+function EditableChip({
+  value,
+  placeholder,
+  changeHandler,
+  picture,
+  shouldAlignRight,
+  ChipComponent,
+}: EditableChipProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState(value);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const onEditModeChange = (isEditMode: boolean) => {
+    setIsEditMode(isEditMode);
+  };
+
+  return (
+    <EditableCellWrapper
+      onEditModeChange={onEditModeChange}
+      shouldAlignRight={shouldAlignRight}
+    >
+      {isEditMode ? (
+        <StyledInplaceInput
+          isEditMode={isEditMode}
+          placeholder={placeholder || ''}
+          autoFocus
+          ref={inputRef}
+          value={inputValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            setInputValue(event.target.value);
+            changeHandler(event.target.value);
+          }}
+        />
+      ) : (
+        <ChipComponent name={value} picture={picture} />
+      )}
+    </EditableCellWrapper>
+  );
+}
+
+export default EditableChip;