/// import CSS from "csstype"; import DataStoreProps from "./DataStoreProps"; import BeforeComplete from "./events/BeforeComplete"; import BeforeEdit from "./events/BeforeEdit"; import BeforeGroupCollapse from "./events/BeforeGroupCollapse"; import BeforeGroupExpand from "./events/BeforeGroupExpand"; import BeforeStartEdit from "./events/BeforeStartEdit"; import CancelEdit from "./events/CancelEdit"; import CellSelection from "./events/CellSelection"; import ColumnAdd from "./events/ColumnAdd"; import ColumnHide from "./events/ColumnHide"; import ColumnMenuCreated from "./events/ColumnMenuCreated"; import ColumnMove from "./events/ColumnMove"; import ColumnResize from "./events/ColumnResize"; import ColumnSelection from "./events/ColumnSelection"; import ColumnSort from "./events/ColumnSort"; import CompleteEdit from "./events/CompleteEdit"; import DeSelect from "./events/DeSelect"; import Edit from "./events/Edit"; import Select from "./events/OnSelect"; import StartEdit from "./events/StartEdit"; import UpdateData from "./events/UpdateData"; import ValidateEdit from "./events/ValidateEdit"; import Painted from "./events/Painted"; import ChildDoubleTap from "./events/ChildDoubleTap"; import FeatureProps from "./FeatureProps"; import GroupFooterProps from "./GroupFooterProps"; import ItemConfigProps from "./ItemConfigProps"; import ItemRippleProps from "./ItemRippleProps"; import { PagingToolbarProps } from "./components/PagingToolbar"; import PluginProps from "./PluginProps"; import ScrollableProps from "./ScrollableProps"; import SelectableProps from "./SelectableProps"; import SorterProps from "./SorterProps"; import FilterProps from "./FilterProps"; import RowClick from "./events/RowClick"; import ColumnShow from "./events/ColumnShow"; /** * The arguments or properties. */ export interface BestReactGridProps { /** * Set the position of the summary row for the entire grid: * 'hidden': Hide the summary row * 'top': Show the summary row as the first row in the grid * 'bottom': Show the summary row as the last row in the grid * 'docked': Show the summary row docked at the bottom of the grid */ summaryPosition?: any; /** * BestReactGrid Children Components. */ children: any | any[]; /** * This config specifies the config properties that will be persisted using the state Provider. If this config is set to true, * the configs specified by statefulDefaults will be assumed. */ stateful?: boolean; /** * A string Template snippet, an array of strings to be used to construct a Template, or a Template instance. */ groupHeaderTpl?: string; /** * Display column lines */ columnLines?: boolean; /** * Display row lines */ hideRowLines?: boolean; /** * Set a simple array of data models which will be added to the Grids data store. */ data?: any[] | any; /** * The TreeGrid provides a tree-structured UI representation of tree-structured data. * TreeGrids must be bound to a TreeStore. */ treeData?: any[] | any; /** * TODO add description ? * TODO can we do this differently??? * TODO: maybe turn on features via non-nested props */ features?: FeatureProps[]; /** * Array of Ext.util.Filter for this store. * * TODO do not add the filterFn type to this property. */ filters?: FilterProps[]; /** * Turn on grouping data features. */ grouped?: boolean; /** * Display a group footer. */ groupFooter?: boolean | GroupFooterProps; /** * Display a group header. */ groupHeader?: any; /** * Hide the column headers. */ hideHeaders?: boolean; /** * The object is used to configure the grid row. * TODO possibly rename to rowConfig? */ itemConfig?: ItemConfigProps; /** * Gives a ripple effect whenever any element is pressed. */ itemRipple?: boolean | ItemRippleProps; /** * enable dark theme for grids */ enableDarkTheme?: boolean; /** * @cfg {Boolean} [markDirty=false] * `true` to mark items as dirty when the underlying record has been modified. */ markDirty?: boolean; /** * Fired after a selection change has occurred. */ onSelect?: (onSelect: Select) => void; /** * Fires Before editing the particular cells. */ onBeforeEdit?: (onParam: BeforeEdit) => void; /** * Fires after a change has been made to the field, but before the change is reflected in the underlying field. */ onBeforeComplete?: (onBeforeComplete: BeforeComplete) => void; /** * Fires before a group collapse starts. Return false to cancel the collapse. */ onBeforeGroupCollapse?: (onBeforeGroupCollapse: BeforeGroupCollapse) => void; /** * Fires before a group expand starts. Return false to cancel the expand. */ onBeforeGroupExpand?: (onBeforeGroupExpand: BeforeGroupExpand) => void; /** * Fires when cell selection is being used and cells are selected or deselected. */ onCellSelection?: (onCellSelection: CellSelection) => void; /** * Fires whenever a column is hidden in the Grid. */ onColumnHide?: (onColumnHide: ColumnHide) => void; /** * Fired when a column first creates its column menu. */ onColumnMove?: (onColumnMove: ColumnMove) => void; /** * Fired when a column a column is resized. */ onColumnResize?: (onColumnResize: ColumnResize) => void; /** * Fired when a item is deselected */ onDeSelect?: (onDeselect: DeSelect) => void; /** * Fired when a Column is added dynamically. */ onColumnAdd?: (onColumnAdd: ColumnAdd) => void; /** * Fires when editing is initiated, but before the value changes */ onBeforeStartEdit?: (onBeforeStartEdit: BeforeStartEdit) => void; /** * Fires whenever a column is sorted in the Grid. */ onColumnSort?: (onColumnsort: ColumnSort) => void; /** * Fires whenever a column is sorted in the Grid. */ onStartEdit?: (onStartedit: StartEdit) => void; /** * Fires whenever a column is sorted in the Grid. */ onUpdateData?: (onUpdatedata: UpdateData) => void; /** * Fires after editing is complete and any changed value has been written to the underlying field. */ onComplete?: (onComplete: CompleteEdit) => void; /** * Fires when column selection is being used and columns are selected or deselected. */ onColumnSelection?: (onColumnselection: ColumnSelection) => void; /** * Fires whenever grid Receives a focus. */ onGridFocus?: () => void; /** * Fires whenever grid loose the focus. */ onGridBlur?: () => void; /** * Fired when a column first creates its column menu. This is to allow plugins to access and manipulate the column menu. */ onColumnMenuCreated?: (onColumnMenuCreated: ColumnMenuCreated) => void; /** * Fires after editing. * This event is only fired if the grid.rowedit.Plugin plugin is configured on the grid. */ onEdit?: (onEdit: Edit) => void; /** * Fires after editing has been canceled and the editor's value has been reset. * This event is only fired if the grid.rowedit.Plugin plugin is configured on the grid. */ onCancelEdit?: (onCancelEdit: CancelEdit) => void; /** * Fires after editing, but before the value is set in the record. * Return false from the event handler to prevent the change. */ onValidateEdit?: (onValidateEdit: ValidateEdit) => boolean | void; /** * Fires whenever this Element actually becomes visible (painted) on the screen * This is useful when you need to perform 'read' operations on the DOM */ onPainted?: (painted: Painted) => void; /** * Fires when the component has been initialized */ onInitialize?: () => void; /** * Fires when a child is double tapped. */ onChildDoubleTap?: (onChilddoubletap: ChildDoubleTap) => void; /** * Fires when row is clicked */ onRowClick?: (onRowClick: RowClick) => void; /** * Fires when column is showed on grid. */ onColumnShow?: (onColumnShow: ColumnShow) => void; /** * Add a paging tool bar component to the bottom of the grid which usinges the PagingProps. */ pagingToolbar?: React.ReactElement; /** * Define grid plugins. */ plugins?: PluginProps; /** * Display row numbers on the left side of the grid. */ rowNumbers?: boolean; /** * Display a shadow around the grid. */ shadow?: boolean; /** * Define the grid data store. */ store?: DataStoreProps; /** * Define the grid selectable configuration. */ selectable?: SelectableProps; /** * Define the grid scrollable configuration. */ scrollable?: true | false | "x" | "y" | "horizontal" | "vertical" | "both" | ScrollableProps; /** * Display sortable options. */ sortable?: boolean; /** * Define the grid style options which affects the outer div only. */ style?: CSS.Properties; /** * Display variable row heights in the grid. */ variableHeights?: boolean; /** * Set to true to if this list should anticipate too many rows to render to the DOM at one time. When set to true, only a fixed number of rows is rendered at once, depending on the height or maxHeight of the list. * When using this mode in an auto-height situation (where the list should be the height of its items), a maxHeight setting is required. This is due to the fact that the rendered items are absolutely positioned. As such they do not directly contribute to the list's height. * When maxHeight is set, however, an infinite list uses that setting to decide how many items to render and will set an appropriate height on its innermost element, thereby allowing the list to achieve the proper height. * Note that this configuration can not be dynamically changed after the list has instantiated. */ infinite?: boolean; /** * A sorter config object to apply when the standard sort user interface is * is invoked. This is usually clicking this column header, but there are also * menu options to sort ascending or descending. * Note that a sorter may also be specified as a function which accepts two * records to compare. */ sorter?: boolean | string | SorterProps | (string | SorterProps)[]; /** * Only render the cells when visible in the view. */ virtualColumRender?: boolean; cls?: string; class?: string; /** * Define the grid text selectable configuration. */ userSelectable?: object | boolean | string; /** * Define the grid row strips. */ striped?: boolean; /** * Display type for respective grids */ display?: "list" | "tree" | "locked" | "treeGroupedGrid"; multiColumnSort?: boolean; columnMenu?: object; /** * Enable or disable the column reorder * Set to false to disable column reorder. */ enableColumnMove?: boolean; } export default BestReactGridProps;