text: import {useObserverListener} from "react-hook-useobserver/lib/useObserverListener";
  import Box from "../../layout/Box";
  import DefaultCellRenderer from "./DefaultCellRenderer";
  import {useState,useRef} from "react";
  export default function DefaultRowRenderer({
                                                 setFocusedRow,
                                                 $focusedRow,
                                                 rowIndex,
                                                 gridData,
                                                 rowData,
                                                 columns,
                                                 rowKeySelector
                                             }) {
      const [selected, setSelected] = useState(false);
      const domRef = useRef();
      useObserverListener($focusedRow, selectedRow => {
          setSelected(rowKeySelector(selectedRow) === rowKeySelector(rowData));
      });
      return <Box domRef={domRef} type={'tr'} bg={selected ? -0.1 : rowIndex % 2 === 0 ? 0 : -0.03}
                  display={'table-row'}
                  tabIndex={0}
                  height={20}
                  bB={0.1}
                  onFocus={() => setFocusedRow(rowData)}>
          {Object.keys(columns).map((columnName, colIndex) => {
              const column = columns[columnName];
              const cellData = rowData[columnName];
              const CellRenderer = column['cellRenderer'] || DefaultCellRenderer;
              return <CellRenderer key={columnName} gridData={gridData} rowData={rowData} cellData={cellData}
                                   setFocusedRow={setFocusedRow}
                                   $focusedRow={$focusedRow} columns={columns}
                                   column={column} columnName={columnName} colIndex={colIndex} rowIndex={rowIndex}/>
          })}
      </Box>
  }