fix: rename some booleans to use 'is' prefix, added new logo

README.md

@@ -26,6 +26,8 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 <br />
 <br />
 
+![React Table Logo](https://github.com/tannerlinsley/react-table/tree/master/media/logo.png)
+
 ## Features
 
 - Lightweight (4kb - 10kb depending on features and tree-shaking)

docs/api.md

@@ -198,7 +198,7 @@ The following properties are available on every `Column` object returned by the
 
 - `id: String`
   - The resolved column ID from either the column's `accessor` or the column's hard-coded `id` property
-- `visible: Boolean`
+- `isVisible: Boolean`
   - The resolved visible state for the column, derived from the column's `show` property
 - `render: Function(type: String | Function | Component, ?props)`
   - This function is used to render content with the added context of a column.
@@ -1357,7 +1357,7 @@ The following values are provided to the table `instance`:
     - `style.cursor: 'pointer'`
     - `checked: Bool`
     - `title: 'Toggle All Rows Selected'`
-- `allRowsSelected: Bool`
+- `isAllRowsSelected: Bool`
   - Will be `true` if all rows are selected.
   - If at least one row is not selected, will be `false`
 

src/hooks/useTable.js

@@ -211,7 +211,7 @@ export const useTable = (props, ...plugins) => {
 
   // Determine column visibility
   instanceRef.current.columns.forEach(column => {
-    column.visible =
+    column.isVisible =
       typeof column.show === 'function'
         ? column.show(instanceRef.current)
         : !!column.show
@@ -248,7 +248,7 @@ export const useTable = (props, ...plugins) => {
           {
             key: ['header', column.id].join('_'),
             colSpan: column.columns
-              ? column.columns.filter(column => column.visible).length
+              ? column.columns.filter(column => column.isVisible).length
               : 1,
           },
           applyPropHooks(
@@ -269,12 +269,12 @@ export const useTable = (props, ...plugins) => {
           if (column.columns) {
             return recurse(column.columns)
           }
-          return column.visible
+          return column.isVisible
         }).length
       if (header.columns) {
         return recurse(header.columns)
       }
-      return header.visible
+      return header.isVisible
     })
 
     // Give headerGroups getRowProps
@@ -324,7 +324,7 @@ export const useTable = (props, ...plugins) => {
       )
 
     const visibleColumns = instanceRef.current.columns.filter(
-      column => column.visible
+      column => column.isVisible
     )
 
     // Build the cells for each row

src/plugin-hooks/useFlexLayout.js

@@ -1,144 +0,0 @@
-import PropTypes from 'prop-types'
-
-import { getFirstDefined, sum } from '../utils'
-
-export const actions = {}
-
-const propTypes = {
-  defaultFlex: PropTypes.number,
-}
-
-export const useFlexLayout = hooks => {
-  hooks.useMain.push(useMain)
-}
-
-function useMain(instance) {
-  PropTypes.checkPropTypes(propTypes, instance, 'property', 'useFlexLayout')
-
-  const {
-    defaultFlex = 1,
-    hooks: {
-      columns: columnsHooks,
-      getRowProps,
-      getHeaderGroupProps,
-      getHeaderProps,
-      getCellProps,
-    },
-  } = instance
-
-  columnsHooks.push((columns, api) => {
-    const visibleColumns = columns.filter(column => column.visible)
-    const columnMeasurements = {}
-
-    let sumWidth = 0
-    visibleColumns.forEach(column => {
-      const { width, minWidth } = getSizesForColumn(
-        column,
-        defaultFlex,
-        undefined,
-        undefined,
-        api
-      )
-      if (width) {
-        sumWidth += width
-      } else if (minWidth) {
-        sumWidth += minWidth
-      } else {
-        sumWidth += defaultFlex
-      }
-    })
-
-    const rowStyles = {
-      style: {
-        display: 'flex',
-        minWidth: `${sumWidth}px`,
-      },
-    }
-
-    api.rowStyles = rowStyles
-
-    getRowProps.push(() => rowStyles)
-    getHeaderGroupProps.push(() => rowStyles)
-
-    getHeaderProps.push(column => ({
-      style: {
-        boxSizing: 'border-box',
-        ...getStylesForColumn(column, columnMeasurements, defaultFlex, api),
-      },
-    }))
-
-    getCellProps.push(cell => {
-      return {
-        style: {
-          ...getStylesForColumn(
-            cell.column,
-            columnMeasurements,
-            defaultFlex,
-            undefined,
-            api
-          ),
-        },
-      }
-    })
-
-    return columns
-  })
-
-  return instance
-}
-
-// Utils
-
-function getStylesForColumn(column, columnMeasurements, defaultFlex, api) {
-  const { flex, width, maxWidth } = getSizesForColumn(
-    column,
-    columnMeasurements,
-    defaultFlex,
-    api
-  )
-
-  return {
-    flex: `${flex} 0 auto`,
-    width: `${width}px`,
-    maxWidth: `${maxWidth}px`,
-  }
-}
-
-function getSizesForColumn(
-  { columns, id, width, minWidth, maxWidth },
-  columnMeasurements,
-  defaultFlex,
-  api
-) {
-  if (columns) {
-    columns = columns
-      .filter(col => col.show || col.visible)
-      .map(column =>
-        getSizesForColumn(column, columnMeasurements, defaultFlex, api)
-      )
-      .filter(Boolean)
-
-    if (!columns.length) {
-      return false
-    }
-
-    const flex = sum(columns.map(col => col.flex))
-    const width = sum(columns.map(col => col.width))
-    const maxWidth = sum(columns.map(col => col.maxWidth))
-
-    return {
-      flex,
-      width,
-      maxWidth,
-    }
-  }
-
-  return {
-    flex: width ? 0 : defaultFlex,
-    width:
-      width === 'auto'
-        ? columnMeasurements[id] || defaultFlex
-        : getFirstDefined(width, minWidth, defaultFlex),
-    maxWidth,
-  }
-}

src/plugin-hooks/useRowSelect.js

@@ -38,11 +38,11 @@ function useMain(instance) {
     []
   )
 
-  const allRowsSelected = rowPaths.length === selectedRows.length
+  const isAllRowsSelected = rowPaths.length === selectedRows.length
 
   const toggleRowSelectedAll = set => {
     setState(old => {
-      const selectAll = typeof set !== 'undefined' ? set : !allRowsSelected
+      const selectAll = typeof set !== 'undefined' ? set : !isAllRowsSelected
       return {
         ...old,
         selectedRows: selectAll ? [...rowPaths] : [],
@@ -52,10 +52,14 @@ function useMain(instance) {
 
   const updateParentRow = (selectedRows, path) => {
     const parentPath = path.slice(0, path.length - 1)
-    const parentKey = parentPath.join(".")
-    const selected = rowPaths.filter(path =>
-      path !== parentKey && path.startsWith(parentKey) && !selectedRows.has(path)
-    ).length === 0
+    const parentKey = parentPath.join('.')
+    const selected =
+      rowPaths.filter(
+        path =>
+          path !== parentKey &&
+          path.startsWith(parentKey) &&
+          !selectedRows.has(path)
+      ).length === 0
     if (selected) {
       selectedRows.add(parentKey)
     } else {
@@ -76,11 +80,11 @@ function useMain(instance) {
       let newSelectedRows = new Set(old.selectedRows)
 
       if (!exists && shouldExist) {
-        rowPaths.forEach((rowPath) => {
+        rowPaths.forEach(rowPath => {
           if (rowPath.startsWith(key)) newSelectedRows.add(rowPath)
         })
       } else if (exists && !shouldExist) {
-        rowPaths.forEach((rowPath) => {
+        rowPaths.forEach(rowPath => {
           if (rowPath.startsWith(key)) newSelectedRows.delete(rowPath)
         })
       } else {
@@ -107,7 +111,7 @@ function useMain(instance) {
         style: {
           cursor: 'pointer',
         },
-        checked: allRowsSelected,
+        checked: isAllRowsSelected,
         title: 'Toggle All Rows Selected',
       },
       applyPropHooks(instance.hooks.getToggleAllRowsSelectedProps, instance),
@@ -198,6 +202,6 @@ function useMain(instance) {
     toggleRowSelected,
     toggleRowSelectedAll,
     getToggleAllRowsSelectedProps,
-    allRowsSelected,
+    isAllRowsSelected,
   }
 }