Add support for React Hooks

[avalanche1]

How can I use this awesome lib with react hooks?
I'm stuck with onFieldChange:

  function onFieldChange(rowId, field, value) {
    // Find a row that is being changed
    const row = rows.find((id) => id === rowId);
    // Change a value of a field
    row[field] = value;
    setRows([].concat(rows));
    // Blurring focus from the current cell is necessary for a correct behavior of the Grid.
    setBlur(true);
    return null;
  }
            <Input
              value={make_date_string(row.date)}
              onChange={onFieldChange(row.id, "date")}
              focus={focus}
            />

[avalanche1]

The answer is:

  function onFieldChange(rowId, field, value) {
    // Find a row that is being changed
    const row = rows.find(({id}) => id === rowId);
    // Change a value of a field
    row[field] = value;
    setRows([].concat(rows));
    // Blurring focus from the current cell is necessary for a correct behavior of the Grid.
    setBlur(true);
    return null;
  }
            <Input
              value={make_date_string(row.date)}
              onChange={onFieldChange.bind(this, row.id, "date")}
              focus={focus}
            />

[avalanche1]

No, there are still problems... Namely in the Input implementation.
If I add new rows programmatically - onFieldChange doesn't see that and acts as if rows are in initial state, acts like there are no new rows.

[denisraslov]

Hi @avalanche1
Thank you for the issue.
Could you show your code of adding new rows programmatically?

[avalanche1]

hi!

import {produce} from "immer";

export function CrusherEntryTable({data}) {
  const [rows, setRows] = useState(data);
  const [blurState, setBlur] = useState(false);
  const [columns] = useState([
    {
      id: "date",
      title: "Date",
      value: (row, {focus}) => {
        return (
          <Input
            value={row.date}
            // value={handle_date_string(row.date)}
            /*Binding is nec. for onFieldChange to be able to see the 3rd arg
               - 'value'*/
            onChange={onFieldChange.bind(this, row.id, "date")}
            focus={focus}
          />
        );
      },
    },
  ]);
  const result = (
    <>
      <button onClick={add_row}>Add row</button>
      <input onChange={onFieldChange} />
      <Grid
        rows={rows}
        columns={columns}
        focusOnSingleClick
        // columnWidthValues={{date: 70}}
        getRowKey={(row) => row.id}
        blurCurrentFocus={blurState}
        isColumnsResizable={true}
      />
    </>
  );
  function onFieldChange(rowId, field, value) {
    // Change a value of a field
    debugger;
    rows[rowId][field] = value;
    setRows([].concat(rows));
    // Blurring focus from the current cell is necessary for a correct behavior of the Grid.
    setBlur(true);
    return null;
  }
  function add_row() {
    const newRowState = produce(rows, (draft) => {
      draft.push({
        id: "11",
        date: "",
        group: "",
        advent: "",
        equipment: "",
        downtimeInfo: "",
        timeOffOn: "",
        minutesOff: "",
      });
      return draft;
    });
    setRows(newRowState);
    return null;
  }

  return result;
}

Also note, that I've created a special debugging input above the Grid component - and it's detecting new rows as expected when the code stops on debugger statement inside onFieldChange.

[denisraslov]

Hey @avalanche1
Sorry for the late answer. Seems I still didn't get what the problem is 😅
You said that rows contain new rows inside of onFieldChange. So, what is the problem then? What doesn't work correctly?

Although, I suggest to use this implementation instead of binding onFieldChange to this when using hooks (because this doesn't really make sense in this case):

const onFieldChange = (rowId, field) => (value) => {
   rows[rowId][field] = value;
   setRows([].concat(rows))
   // ...
}

 const getColumns = () => {
   return [
      {
         value: (row, { focus }) => {
            return (
               <Input
                   // we're not using bind here
                   onChange={onFieldChange(row.id, 'firstName')}
               />
           );
       },
   ]
}

[avalanche1]

That project was eventually abandoned, so cannot comment on the specific problem now.
But react hooks version would still be very welcome, since it's standard React api now.

[denisraslov]

Hi @avalanche1
Absolutely agree. Now the library is fully compatible with React hooks. All the examples in the Readme were rewritten with hooks, so you can check them.