{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/grid/PaginatedBody.tsx","sourceRoot":"","sources":["PaginatedBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import WidgetBase from '@dojo/framework/core/WidgetBase';\nimport { v, w } from '@dojo/framework/core/vdom';\nimport I18nMixin from '@dojo/framework/core/mixins/I18n';\nimport ThemedMixin, { theme } from '@dojo/framework/core/mixins/Themed';\nimport { DNode } from '@dojo/framework/core/interfaces';\n\nimport { GridPages, ColumnConfig, SelectionType } from './interfaces';\nimport PlaceholderRow from './PlaceholderRow';\nimport Row from './Row';\n\nimport * as fixedCss from './styles/body.m.css';\nimport * as css from '../theme/default/grid-body.m.css';\nimport { diffProperty } from '@dojo/framework/core/decorators/diffProperty';\nimport { reference } from '@dojo/framework/core/diff';\n\nexport interface PaginatedBodyProperties<S> {\n\t/** The current page number */\n\tpageNumber: number;\n\t/** A list of paginated grids */\n\tpages: GridPages<S>;\n\t/** The height (in pixels) */\n\theight: number;\n\t/** The width (in pixels) */\n\twidth?: number;\n\t/** The number of elements to a page */\n\tpageSize: number;\n\t/** Configuration for grid columns (id, title, properties, and custom renderer) */\n\tcolumnConfig: ColumnConfig[];\n\t/** Custom renderer for the placeholder row used while data is loaded */\n\tplaceholderRowRenderer?: (index: number) => DNode;\n\t/** Used to fetch additional pages of information */\n\tfetcher: (page: number, pageSize: number) => void;\n\t/** Called when a cell is updated */\n\tupdater: (page: number, rowNumber: number, columnId: string, value: string) => void;\n\t/** Handler for scroll events */\n\tonScroll: (value: number) => void;\n\t/** Calculated column widths */\n\tcolumnWidths?: { [index: string]: number };\n\t/** handler for row selection */\n\tonRowSelect?: (index: number, type: SelectionType) => void;\n\t/** array of selected rows */\n\tselectedRows?: number[];\n}\n\n@theme(css)\n@diffProperty('pages', reference)\nexport default class PaginatedBody<S> extends I18nMixin(ThemedMixin(WidgetBase))<\n\tPaginatedBodyProperties<S>\n> {\n\tprivate _defaultPlaceholderRow(key: number) {\n\t\tconst { classes, theme } = this.properties;\n\t\treturn w(PlaceholderRow, { key, theme, classes });\n\t}\n\n\tprivate _updater(rowNumber: number, columnId: string, value: any) {\n\t\tconst page = Math.max(Math.ceil(rowNumber / this.properties.pageSize), 1);\n\t\tconst pageItemNumber = rowNumber - (page - 1) * this.properties.pageSize;\n\t\tthis.properties.updater(page, pageItemNumber, columnId, value);\n\t}\n\n\tprivate _onScroll(event: UIEvent) {\n\t\tconst scrollLeft = (event.target as HTMLElement).scrollLeft;\n\t\tthis.properties.onScroll(scrollLeft);\n\t}\n\n\tprivate _renderRows() {\n\t\tconst {\n\t\t\ti18nBundle,\n\t\t\tpageSize,\n\t\t\tfetcher,\n\t\t\tpages,\n\t\t\tcolumnConfig,\n\t\t\tplaceholderRowRenderer = this._defaultPlaceholderRow,\n\t\t\tpageNumber,\n\t\t\ttheme,\n\t\t\tclasses,\n\t\t\tcolumnWidths,\n\t\t\tonRowSelect,\n\t\t\tselectedRows = []\n\t\t} = this.properties;\n\t\tlet data = pages[`page-${pageNumber}`];\n\t\tif (!data) {\n\t\t\tfetcher(pageNumber, pageSize);\n\t\t}\n\t\tlet rows: DNode[] = [];\n\t\tconst rowCount = data ? data.length : pageSize;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tif (!data) {\n\t\t\t\trows.push(placeholderRowRenderer(i));\n\t\t\t} else {\n\t\t\t\trows.push(\n\t\t\t\t\tw(Row, {\n\t\t\t\t\t\tid: i,\n\t\t\t\t\t\tkey: i,\n\t\t\t\t\t\ti18nBundle,\n\t\t\t\t\t\ttheme,\n\t\t\t\t\t\tclasses,\n\t\t\t\t\t\titem: data[i],\n\t\t\t\t\t\tcolumnConfig,\n\t\t\t\t\t\tcolumnWidths,\n\t\t\t\t\t\tupdater: this._updater,\n\t\t\t\t\t\tonRowSelect: onRowSelect\n\t\t\t\t\t\t\t? (type: SelectionType) => {\n\t\t\t\t\t\t\t\t\tonRowSelect && onRowSelect(i, type);\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\tselected: selectedRows.indexOf(i) !== -1\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\treturn rows;\n\t}\n\n\tprotected render(): DNode {\n\t\tconst { height, width, columnWidths } = this.properties;\n\n\t\tconst rowWidth =\n\t\t\tcolumnWidths &&\n\t\t\tObject.keys(columnWidths).reduce((rowWidth, key) => {\n\t\t\t\treturn rowWidth + columnWidths[key];\n\t\t\t}, 0);\n\n\t\treturn v(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\tkey: 'root',\n\t\t\t\tclasses: [this.theme(css.root), fixedCss.rootFixed],\n\t\t\t\trole: 'rowgroup',\n\t\t\t\tonscroll: this._onScroll,\n\t\t\t\tstyles: width\n\t\t\t\t\t? { height: `${height}px`, width: `${width}px` }\n\t\t\t\t\t: { height: `${height}px` }\n\t\t\t},\n\t\t\t[\n\t\t\t\tv('div', { styles: rowWidth ? { width: `${rowWidth}px` } : {} }, [\n\t\t\t\t\tv('div'),\n\t\t\t\t\t...this._renderRows()\n\t\t\t\t])\n\t\t\t]\n\t\t);\n\t}\n}\n"]}