inovua / reactdatagrid

Empower Your Data with the best React Data Grid there is
https://reactdatagrid.io
Other
3.44k stars 57 forks source link

Cannot abstract ReactDataGrid component out to a custom wrapper when using typescript.. type errors #299

Closed colemars closed 2 years ago

colemars commented 2 years ago

https://stackblitz.com/edit/react-yqo1bd?file=src%2FApp.tsx

import * as React from 'react';

import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
import '@inovua/reactdatagrid-enterprise/index.css';

const gridStyle = { minHeight: 550 };

const columns = [
  { name: 'id', header: 'Id', defaultWidth: 80, defaultVisible: false },
  {
    name: 'name',
    sortable: false,
    header: 'Name (column not sortable)',
    defaultFlex: 1,
  },
  { name: 'age', header: 'Age', type: 'number', defaultFlex: 1 },
];

const dataSource = [
  { name: 'Little Johny', age: 8, id: 0 },
  { name: 'John Grayner', age: 35, id: 1 },
  { name: 'Mary Stones', age: 35, id: 2 },
  { name: 'Robert Fil', age: 17, id: 3 },
  { name: 'Bob Margin', age: 17, id: 4 },
  { name: 'Hillary Wilson', age: 53, id: 5 },
  { name: 'Franklin Richardson', age: 37, id: 6 },
];

const Test = (props: React.ComponentProps<typeof ReactDataGrid>) => (
  <ReactDataGrid {...props} />
);

const App2 = () => {
  return (
// ERROR : Type '{ idProperty: string; style: { minHeight: number; }; columns: ({ name: string; header: string; defaultWidth: number; defaultVisible: boolean; sortable?: undefined; defaultFlex?: undefined; type?: undefined; } | { ...; } | { ...; })[]; dataSource: { ...; }[]; }' is missing the following properties from type 'TypeDataGridPropsNoI18n': isBinaryOperator, sortFunctions, editStartEvent, clearNodeCacheOnDataSourceChange, and 57 more.
    <Test
      idProperty="id"
      style={gridStyle}
      columns={columns}
      dataSource={dataSource}
    />
  );
};

const App = () => {
  return (
    <ReactDataGrid
      idProperty="id"
      style={gridStyle}
      columns={columns}
      dataSource={dataSource}
    />
  );
};

export default () => <App />;

Any ideas how to get around this? It seems some types are optional for some reason directly on the component, but when abstracted out become required. Looking at the type themselves.. it seems they are defined as required.. e.g. sortFunctions. So it's somewhat of a mystery to me as why they're optional on the ReactDataGrid component.

Is the optionality intended behavior or a useful bug?

colemars commented 2 years ago

Ah.. I see. DefaultProps.

Defining defaultProps for required types isn't really the best practice (as demonstrated here..) https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md