Set default box-sizing to border-box in the component css

energydrink9 · Dec 6, 2018 · a435a94 · a435a94
1 parent 981d8d8
commit a435a94
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/ColumnsMenu.js b/src/ColumnsMenu.js
@@ -123,7 +123,7 @@ export default class ColumnsMenu extends React.PureComponent<ColumnsMenuPropsTyp
 
     return <div ref={ref => this.ref = ref} className={`functional-data-grid__columns-menu ${columnsMenuStyle}`}>
             <div className={`functional-data-grid__columns-menu__search ${searchStyle}`}>
-              <input onChange={(e: Object) => this.filterColumns(e.target.value)} placeholder={'Search...'} autoFocus="true" />
+              <input onChange={(e: Object) => this.filterColumns(e.target.value)} placeholder={'Search...'} autoFocus />
             </div>
             <div className={`functional-data-grid__columns-menu__columns ${columnsStyle}`}>
               { leftLockedColumns.size > 0 && this.renderColumnEntries(leftLockedColumns) }
@@ -133,11 +133,11 @@ export default class ColumnsMenu extends React.PureComponent<ColumnsMenuPropsTyp
           </div>
   }
 
-  renderColumnEntries = (columns: List<Column>) => <div>{ getComputedColumnGroups(columns).map(g => this.renderColumnGroup(g)) }</div>
+  renderColumnEntries = (columns: List<Column>) => <div>{ getComputedColumnGroups(columns).map((g, i) => this.renderColumnGroup(g, i)) }</div>
 
-  renderColumnGroup = (g: ComputedColumnGroup) => {
+  renderColumnGroup = (g: ComputedColumnGroup, key: number) => {
     let columnGroup = g.columnGroup
-    return <div>
+    return <div key={key}>
       { columnGroup != null
         ? <div className={`functional-data-grid__columns-menu__column-group ${columnGroupStyle}`}>
             <div className={`functional-data-grid__columns-menu__column-group__header ${columnGroupHeaderStyle}`}>

diff --git a/src/FunctionalDataGrid.js b/src/FunctionalDataGrid.js
@@ -52,7 +52,7 @@ type FunctionalDataGridState<T> = {
 
 export default class FunctionalDataGrid<T, A: void> extends React.PureComponent<FunctionalDataGridProps<T, A>, FunctionalDataGridState<T>> {
 
-  grid: PresentationalFunctionalDataGrid
+  grid: ?PresentationalFunctionalDataGrid<T, A>
 
   debouncedUpdateElements = debounce((data : List<T>, groups : List<Group<any, T>>, sort : List<Sort>, filter : List<Filter>, keysMap: Map<Object, string>) => this.updateElements(data, groups, sort, filter, keysMap), debounceTimeout);
 
@@ -146,7 +146,7 @@ export default class FunctionalDataGrid<T, A: void> extends React.PureComponent<
     })
   }
 
-  computeKeysMap = (elements: List<DataRow>) => Map(elements.filter(e => e.type === 'element').map(e => [e.content, e.key]))
+  computeKeysMap = (elements: List<DataRow<T>>) => Map(elements.filter(e => e.type === 'element').map(e => [e.content, e.key]))
 
   computeElements = (data : List<T>, groups : List<Group<any, T>>, sort : List<Sort>, filter : List<Filter>, keysMap: Map<Object, string>) =>
     Engine.computeElements(data, groups, sort, filter, this.getColumns(), this.props.showGroupHeaders, this.props.includeFilteredElementsInAggregates, this.props.aggregatesCalculator, keysMap)

diff --git a/src/PresentationalFunctionalDataGrid.js b/src/PresentationalFunctionalDataGrid.js
@@ -23,6 +23,9 @@ const gridClassName = css`
   flex-grow: 1;
   flex-direction: column;
   box-sizing: border-box;
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
   border: solid 1px #ccc;
 `