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é)

[Sebastien-Ahkrin]

With theotime, we've been thinking about a proposal for input (and only input for the moment)
It may look like this:

import type { ReactNode } from 'react';

export interface InlineRendererEditableProps<T extends HTMLElement> {
  isRendered: boolean;
  ref: (node: T | null) => void;
  onChange: (value: string) => void;
}

export interface InlineEditableRendererProps<T extends HTMLElement> {
  renderEditable: (props: InlineRendererEditableProps<T>) => ReactNode;
  children: ReactNode;
}

export function InlineEditableRenderer<T extends HTMLElement>(
  props: InlineEditableRendererProps<T>,
) {
  return null;
}

export function InputTest() {
  return (
    <InlineEditableRenderer
      renderEditable={({ onChange, ...props }) => (
        <input
          {...props}
          onBlur={(event) => {
            onChange(event.currentTarget.value);
          }}
        />
      )}
    >
      Input
    </InlineEditableRenderer>
  );
}

InputTest shows how it would be used!
Does that sound complete, or have we missed something?

[tpoisseau]

export interface InlineRendererEditableProps<Element extends HTMLElement, Value> {
  // ...
  onChange: (value: Value, preventSwitch?: boolean) => void;
}

[targos]

Can you add state management to the example usage (with a simple useState)?

[Sebastien-Ahkrin]

Can you add state management to the example usage (with a simple useState)?

Sure @targos !
With useState the code can look like that :

import { useState } from 'react';
import type { ReactNode } from 'react';

export interface InlineRendererEditableProps<T extends HTMLElement> {
  isRendered: boolean;
  ref: (node: T | null) => void;
  onChange: (value: string, preventSwitch?: boolean) => string;
}

export interface InlineEditableRendererProps<T extends HTMLElement> {
  renderEditable: (props: InlineRendererEditableProps<T>) => ReactNode;
  children: ReactNode;
}

export function InlineEditableRenderer<T extends HTMLElement>(
  props: InlineEditableRendererProps<T>,
) {
  return null;
}

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

  return (
    <InlineEditableRenderer
      renderEditable={({ onChange, ...props }) => (
        <input
          {...props}
          defaultValue={state}
          onBlur={(event) => {
            const value = onChange(event.currentTarget.value);
            setState(value);
          }}
        />
      )}
    >
      {state}
    </InlineEditableRenderer>
  );
}

I changed the code to add preventSwitch, and now "onChange" return the value as string. this can help the developer to set the state. but if wanted, he can use event.currentTarget.value too. onChange will return this value too.

Is that ok ?

[tpoisseau]

In fact, InlineEditableRenderer don't need to obtain new value with onChange from renderEditable props.

renderProps props type could be:

export interface InlineRendererEditableProps<Element extends HTMLElement, Value> {
  isRendered: boolean;
  ref: (node: T | null) => void;
  toggle: () => void;
}

[targos]

The example looks wrong. You spread InlineRendererEditableProps inside the <input> but it contains invalid props.

[tpoisseau]

I agree props should not be spread inside input.

[Sebastien-Ahkrin]

yes my bad !
I think we will have to export some custom component for input, select etc to handle the isRendered props correctly. With that the user will not have to think about the style of the input

it can looks like that then :

import type { ReactNode } from 'react';
import { useState } from 'react';

export interface InlineRendererEditableProps<T extends HTMLElement> {
  isRendered: boolean;
  ref: (node: T | null) => void;
  toggle: () => string;
}

export interface InlineEditableRendererProps<T extends HTMLElement> {
  renderEditable: (props: InlineRendererEditableProps<T>) => ReactNode;
  children: ReactNode;
}

export function InlineEditableRenderer<T extends HTMLElement>(
  props: InlineEditableRendererProps<T>,
) {
  return null;
}

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

  return (
    <InlineEditableRenderer
      renderEditable={({ toggle, isRendered, ref }) => (
        <input
          ref={ref}
          defaultValue={state}
          onBlur={(event) => {
            toggle();
            setState(event.currentTarget.value);
          }}
        />
      )}
    >
      {state}
    </InlineEditableRenderer>
  );
}

[targos]

In what case can renderEditable be called with isRendered:false ?

[Sebastien-Ahkrin]

In what case can renderEditable be called with isRendered:false ?

This props is used to add "visibility" to input. isRendered is false, when the value (children) is rendered. true, when the input (in this example) will be rendered.

MB the example is not good enough, i will add the style inside too, to make this more readable :
This is what i mean by "I think we will have to export some custom component for input, select etc to handle the isRendered props correctly. With that the user will not have to think about the style of the input" the input should be an exported component.

<InlineEditableRenderer
      renderEditable={({ toggle, isRendered, ref }) => (
        <input
          ref={ref}
          defaultValue={state}
          style={{
            visibility: isRendered ? 'visible' : 'hidden',
          }}
          onBlur={(event) => {
            toggle();
            setState(event.currentTarget.value);
          }}
        />
      )}
    >
      {state}
    </InlineEditableRenderer>

[targos]

But you should not render the input when the component is not in edit mode. You should render the children, no?