Component which can be used to edit cells inline

[stropitek]

Integrate a simple input / text area within cells of a table which looks and behaves like inline editable cell.

• Should be styled in a way that we don't really identify it's a textarea when it is not focused.
• Should grow as the user types in characters, and stop growing once the size of the cell is reached.

Tab should focus the next editable cell.

Let's start by creating a story for this and later see if it would be worth making a component out of this.

[Sebastien-Ahkrin]

I started thinking about this. I think, we can create a styled input like that :

const Input = styled.input`
  width: 100%;
  background-color: inherit;

  :hover,
  :focus {
    border: solid black 1px;
  }
`;

The input will take 100% width. Bad things, he will not grow with the text but, cannot take a larger width than parent div.
With this stories it can look like that :

export function Test() {
  const [state, setState] = useState('');

  return (
    <div>
      <div style={{ backgroundColor: 'red', maxWidth: 200 }}>
        <Input onBlur={(event) => setState(event.currentTarget.value)} />
      </div>

      <div>{state}</div>
    </div>
  );
}

Do we need something like that ? If yes, we do not have to create a new Input it looks ok !

[Sebastien-Ahkrin]

With our latest meeting we said that :

Ajouter une story avec un tableau qui contient des cellule éditable et le maximum de fonctionnalité pour ce tableau.
L'input pour l'édition doit avoir une width à 100%, et comme max-width la taille maximale de la cellule. Comme ça elle prend toute la taille disponible.

On doit ajouter une action afin de supprimer une ligne (icon sur la droite)
Permettre l'ajout de ligne rapide dans un tfooter (regarder pour le colSpan)

Pour l'édition inline :

• hover & focus ajout de l'outline (icon d'édition en petit à droite ? - idée non validé)
• input prend 100% taille de la cellule
• onFocus (ou onClick) doit transformer la cellule du tableau en input ou en select
• Attention de mettre tabIndex à zéro sur l'élément (tester tout ça avec plusieurs tableau dans une story et essayer de se déplacer avec tabulation)
• input en autoFocus

Créer un composant utilisable n'importe ou qui peux faire un rendu conditionnelle.

• Mode focus (affiche l'input ou le select)
• Mode non-focus qui affiche la cellule (juste la valeur)
• Par défaut le mode de base doit être "non-focus"

On admet que pour sélectionner une ligne on doit avoir un radio ou une checkbox

Voici la liste des composants possible pour faire le rendu :

• input
• input & datalist
• select

Petit plus :

• Ajouter un petit oeil pour cacher / rendre visible l'élément dans la column tout à gauche (possiblement à la place de l'id, ou à côté)