ekko/ekko.js.flow

Excel like Grid in React

/* @flow */
import * as React from 'react';

export type EditorRender = (props: {
  value: mixed,
  onUpdate: (newValue: mixed) => mixed,
  onCancel: () => mixed,
}) => React.Element<any>;

export type CellUpdater = (value: mixed, rowDate: mixed) => mixed;

export type EditorDisplay = 'popover' | 'dialog';

export type Column = {
  +name: string,
  +label?: string,
  +getter: (rowData: mixed) => mixed,

  +render?: (value: mixed) => React$Node,
  +updater?: CellUpdater,
  +editor?: EditorRender | 'inline',
  +editorDisplay?: EditorDisplay,

  +sortable?: boolean | ((value: mixed) => boolean),
};

export type CellProps = {
  +value: mixed,

  +render: $PropertyType<Column, 'render'>,
  +updater: $PropertyType<Column, 'updater'>,
  +editor: $PropertyType<Column, 'editor'>,
  +editorDisplay: $PropertyType<Column, 'editorDisplay'>,

  +onCellUpdate: (value: mixed, updater: CellUpdater) => mixed,
};

export type CellState = {|
  isEditing: boolean,
  menuPostion: { x: number, y: number } | null,
  previousValue: mixed,
|};

export type RowChangeHandler = (id: string, newData: mixed) => mixed;

export type RowProps = {|
  +id: string,
  +onRowChange?: RowChangeHandler,
  +data: mixed,
  +columns: Column[],
|};

export type SortOrder = 'asc' | 'desc' | 'none';

export type GridData = { [string]: mixed };

export type GridProps = {
  +data: GridData,
  +onRowChange?: RowChangeHandler,
  +columns: Column[],
};

export type GridState = {|
  sortIndex: number,
  sortOrder: SortOrder,
|};

declare module 'ekko' {
  declare export class Grid extends React.Component<GridProps> {}
}