{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/grid/Header.tsx","sourceRoot":"","sources":["Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import WidgetBase from '@dojo/framework/core/WidgetBase';\nimport { v, w } from '@dojo/framework/core/vdom';\nimport Drag from '@dojo/framework/core/meta/Drag';\nimport I18nMixin from '@dojo/framework/core/mixins/I18n';\nimport ThemedMixin, { theme } from '@dojo/framework/core/mixins/Themed';\nimport { ColumnConfig, SortOptions } from './interfaces';\nimport { DNode } from '@dojo/framework/core/interfaces';\nimport TextInput from '../text-input/index';\nimport Icon from '../icon/index';\n\nimport bundle from './nls/Grid';\nimport * as css from '../theme/default/grid-header.m.css';\nimport * as fixedCss from './styles/header.m.css';\n\nexport interface SortRenderer {\n\t(column: ColumnConfig, direction: undefined | 'asc' | 'desc', sorter: () => void): DNode;\n}\n\nexport interface FilterRenderer {\n\t(\n\t\tcolumn: ColumnConfig,\n\t\tfilterValue: string,\n\t\tdoFilter: (value: string) => void,\n\t\ttitle?: string | DNode\n\t): DNode;\n}\n\nexport interface HeaderProperties {\n\t/** Configuration for grid columns (id, title, properties, and custom renderer) */\n\tcolumnConfig: ColumnConfig[];\n\t/** Handles changing the sort order of a column */\n\tsorter: (columnId: string, direction: 'asc' | 'desc') => void;\n\t/** Handles filtering rows based on a given column */\n\tfilterer: (columnId: string, value: any) => void;\n\t/** Applied filters */\n\tfilter?: {\n\t\t[index: string]: string;\n\t};\n\t/** Applied sort options */\n\tsort?: SortOptions;\n\t/** Custom column renderer for displaying sort options */\n\tsortRenderer?: SortRenderer;\n\t/** Custom renderer displaying applied filters */\n\tfilterRenderer?: FilterRenderer;\n\t/** Callback on column resize */\n\tonColumnResize?: (index: number, value: number) => void;\n\t/** Calculated column widths */\n\tcolumnWidths?: { [index: string]: number };\n}\n\n@theme(css)\nexport default class Header extends I18nMixin(ThemedMixin(WidgetBase))<HeaderProperties> {\n\tprivate _getColumnTitle(column: ColumnConfig): string | DNode {\n\t\tif (typeof column.title === 'function') {\n\t\t\treturn column.title();\n\t\t}\n\t\treturn column.title;\n\t}\n\n\tprivate _sortColumn(id: string) {\n\t\tconst { sort, sorter } = this.properties;\n\t\tconst direction = sort\n\t\t\t? sort.columnId !== id\n\t\t\t\t? 'desc'\n\t\t\t\t: sort.direction === 'desc'\n\t\t\t\t? 'asc'\n\t\t\t\t: 'desc'\n\t\t\t: 'desc';\n\t\tsorter(id, direction);\n\t}\n\n\tprivate _sortRenderer = (\n\t\tcolumn: ColumnConfig,\n\t\tdirection: undefined | 'asc' | 'desc',\n\t\tsorter: () => void\n\t) => {\n\t\tconst { theme, classes } = this.properties;\n\t\tconst { format } = this.localizeBundle(bundle);\n\t\treturn v('button', { classes: this.theme(css.sort), onclick: sorter }, [\n\t\t\tw(Icon, {\n\t\t\t\ttheme,\n\t\t\t\tclasses,\n\t\t\t\ttype: direction === 'asc' ? 'upIcon' : 'downIcon',\n\t\t\t\taltText: format('sortBy', {\n\t\t\t\t\tname: this._getColumnTitle(column)\n\t\t\t\t})\n\t\t\t})\n\t\t]);\n\t};\n\n\tprivate _filterRenderer = (\n\t\tcolumnConfig: ColumnConfig,\n\t\tfilterValue: string,\n\t\tdoFilter: (value: string) => void,\n\t\ttitle?: string | DNode\n\t) => {\n\t\tconst { theme, classes = {} } = this.properties;\n\t\tconst { format } = this.localizeBundle(bundle);\n\t\treturn w(\n\t\t\tTextInput,\n\t\t\t{\n\t\t\t\tkey: 'filter',\n\t\t\t\ttheme,\n\t\t\t\tclasses: {\n\t\t\t\t\t...classes,\n\t\t\t\t\t'@dojo/widgets/text-input': {\n\t\t\t\t\t\troot: [this.theme(css.filter)],\n\t\t\t\t\t\tinput: [this.theme(css.filterInput)],\n\t\t\t\t\t\tnoLabel: [this.theme(css.filterNoLabel)],\n\t\t\t\t\t\t...classes['@dojo/widgets/text-input']\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tlabelHidden: true,\n\t\t\t\ttype: 'search',\n\t\t\t\tinitialValue: filterValue || undefined,\n\t\t\t\tonValue: doFilter\n\t\t\t},\n\t\t\t[{ label: format('filterBy', { name: title }) }]\n\t\t);\n\t};\n\n\tprotected render(): DNode {\n\t\tconst {\n\t\t\tcolumnConfig,\n\t\t\tsort,\n\t\t\tfilterer,\n\t\t\tfilter = {},\n\t\t\tsortRenderer = this._sortRenderer,\n\t\t\tfilterRenderer = this._filterRenderer,\n\t\t\tcolumnWidths,\n\t\t\tonColumnResize\n\t\t} = 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\tstyles: rowWidth ? { width: `${rowWidth}px` } : {},\n\t\t\t\tclasses: [this.theme(css.root), fixedCss.rootFixed],\n\t\t\t\trole: 'row'\n\t\t\t},\n\t\t\tcolumnConfig.map((column, index) => {\n\t\t\t\tconst title = this._getColumnTitle(column);\n\t\t\t\tlet headerProperties = {};\n\t\t\t\tconst isSorted = sort && sort.columnId === column.id;\n\t\t\t\tconst isSortedAsc = Boolean(\n\t\t\t\t\tsort && sort.columnId === column.id && sort.direction === 'asc'\n\t\t\t\t);\n\t\t\t\tif (column.sortable) {\n\t\t\t\t\theaderProperties = {\n\t\t\t\t\t\tclasses: [\n\t\t\t\t\t\t\tfixedCss.column,\n\t\t\t\t\t\t\tthis.theme(css.sortable),\n\t\t\t\t\t\t\tisSorted ? this.theme(css.sorted) : null,\n\t\t\t\t\t\t\tisSorted && !isSortedAsc ? this.theme(css.desc) : null,\n\t\t\t\t\t\t\tisSortedAsc ? this.theme(css.asc) : null\n\t\t\t\t\t\t],\n\t\t\t\t\t\tonclick: () => {\n\t\t\t\t\t\t\tthis._sortColumn(column.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tconst filterKeys = Object.keys(filter);\n\t\t\t\tconst direction = !isSorted ? undefined : isSortedAsc ? 'asc' : 'desc';\n\t\t\t\tconst filterValue = filterKeys.indexOf(column.id) > -1 ? filter[column.id] : '';\n\t\t\t\tconst doFilter = (value: string) => {\n\t\t\t\t\tfilterer(column.id, value);\n\t\t\t\t};\n\n\t\t\t\tif (column.resizable) {\n\t\t\t\t\tconst dragResults = this.meta(Drag).get(`${column.id}-resize`);\n\n\t\t\t\t\tif (dragResults.isDragging) {\n\t\t\t\t\t\tdragResults.delta.x !== 0 &&\n\t\t\t\t\t\t\tonColumnResize &&\n\t\t\t\t\t\t\tonColumnResize(index, dragResults.delta.x);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn v(\n\t\t\t\t\t'div',\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-sort': isSorted\n\t\t\t\t\t\t\t? isSortedAsc\n\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t: 'descending'\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\tclasses: [this.theme(css.cell), fixedCss.cellFixed],\n\t\t\t\t\t\trole: 'columnheader',\n\t\t\t\t\t\tstyles: columnWidths\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tflex: `0 1 ${columnWidths[column.id]}px`\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t},\n\t\t\t\t\t[\n\t\t\t\t\t\tv('div', headerProperties, [\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tcolumn.sortable\n\t\t\t\t\t\t\t\t? sortRenderer(column, direction, () => {\n\t\t\t\t\t\t\t\t\t\tthis._sortColumn(column.id);\n\t\t\t\t\t\t\t\t  })\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t]),\n\n\t\t\t\t\t\tcolumn.filterable\n\t\t\t\t\t\t\t? filterRenderer(column, filterValue, doFilter, title)\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\tcolumn.resizable &&\n\t\t\t\t\t\t\tv('span', {\n\t\t\t\t\t\t\t\tkey: `${column.id}-resize`,\n\t\t\t\t\t\t\t\tclasses: [fixedCss.resize]\n\t\t\t\t\t\t\t})\n\t\t\t\t\t]\n\t\t\t\t);\n\t\t\t})\n\t\t);\n\t}\n}\n"]}