Merge pull request #3 from ninetynine/canary

v1.0.0-canary.2

Author: dextermb

dist/table.js

@@ -35,6 +35,6 @@ Props
   * Checkboxes
     * [`rowIsChecked`](./table/row-is-checked.md): Define a callback to determine if a row checkbox is checked
     * [`masterIsChecked`](./table/master-is-checked.md): Define a callback to determine if the master checkbox is checked
-    * [`onRowCheckboxChange`](./table/on-row-checkbox-change.md): Define a row checkbox change callback
-    * [`onMasterCheckboxChange`](./table/on-master-checkbox-change.md):
+    * [`onRowToggle`](./table/on-row-toggle.md): Define a row checkbox change callback
+    * [`onMasterToggle`](./table/on-master-toggle.md):
     Define a master checkbox change callback

docs/table.md

@@ -5,13 +5,17 @@
 <br />
 <br />
 
-The `actions` prop is used to be appended on the end of each row when using the default implementation of the [`rowRenderer`](./row-renderer.md). This expects a valid React element.
+The `actions` prop is used to be appended on the end of each row when using the default implementation of the [`rowRenderer`](./row-renderer.md). This expects a function which gets a single argument being the row object and should return a valid React element.
 
 ```jsx
+import { useSet } from 'react-use'
+
+const [checked, { has, toggle }] = useSet()
+
 <Table
-  actions={(
-    <a>
-      Click Here
+  actions={id => (
+    <a onClick={() => toggle(id)}>
+      {has(id) ? 'Unflag' : 'Flag'}
     </a>
   )}
 />

docs/table/actions.md

@@ -5,14 +5,21 @@
 <br />
 <br />
 
-The `dataManipulator` prop is used to manipulate field values before they are displayed. This expects a function.
+The `dataManipulator` prop is used to manipulate field values before they are displayed. This expects a function that should return a valid React element.
 
 _Default implementation:_
 ```jsx
 <Table
-  dataManipulator={({ value }) => (
-    value !== null && value !== undefined
-      ? value : '-'
-  )}
+  dataManipulator={({ value }) => {
+    if (value === null || value === undefined) {
+      return '-'
+    }
+
+    if (!React.isValidElement(value) && typeof value === 'object') {
+      return <i>Hidden</i>
+    }
+
+    return value
+  }}
 />
 ```

docs/table/data-manipulator.md

@@ -1,13 +1,13 @@
 <div align="center">
-  <pre>onMasterCheckboxChange</pre>
+  <pre>onMasterToggle</pre>
 </div>
 
 <br />
 <br />
 
-When wanting to use a master checkboxe this is one of two requirements. The other is the [`masterIsChecked`](./master-is-checked.md) prop.
+When wanting to use a master checkbox this is one of two requirements. The other is the [`masterIsChecked`](./master-is-checked.md) prop.
 
-The `onMasterCheckboxChange` prop should be a function. That controls a _master_ checkbox that is displayed in the table header.
+The `onMasterToggle` prop should be a function. That controls a _master_ checkbox that is displayed in the table header.
 
 This should be used to toggle multiple row checkboxes. To determine if this checkbox is checked or not use [`masterIsChecked`](./master-is-checked.md).
 
@@ -18,7 +18,7 @@ const [state, setState] = useSetState({ rows: [] })
 const [checked, { has, add }] = useSet()
 
 <Table
-  onMasterCheckboxChange={() => {
+  onMasterToggle={() => {
     state.rows.forEach(row => {
       if (!has(row.id)) {
         add(row.id)

docs/table/on-master-checkbox-change.md renamed to docs/table/on-master-toggle.md

@@ -1,13 +1,13 @@
 <div align="center">
-  <pre>onRowCheckboxChange</pre>
+  <pre>onRowToggle</pre>
 </div>
 
 <br />
 <br />
 
 When wanting to use checkboxes this is one of two requirements. The other is the [`rowIsChecked`](./row-is-checked.md) prop.
 
-The `onRowCheckboxChange` prop should be a function that accepts a single argument, which is the [row identifier](./row-identifier.md).
+The `onRowToggle` prop should be a function that accepts a single argument, which is the [row identifier](./row-identifier.md).
 
 This should be used to toggle if a row's checkbox is checked or not by using the [`rowIsChecked`](./row-is-checked.md) prop.
 
@@ -17,6 +17,6 @@ import { useSet } from 'react-use'
 const [checked, { toggle }] = useSet()
 
 <Table
-  onRowCheckedChange={id => toggle(id)}
+  onRowToggle={id => toggle(id)}
 />
 ```

docs/table/on-row-checkbox-change.md renamed to docs/table/on-row-toggle.md

@@ -1,6 +1,6 @@
 {
   "name": "@ninetynine/react-table",
-  "version": "1.0.0-canary.1",
+  "version": "1.0.0-canary.2",
   "description": "A package that provides a managed React table for both static and dynamic data",
   "author": "Dexter Marks-Barber <[email protected]>",
   "license": "LGPL-3.0-only",

package.json

@@ -28,10 +28,10 @@ const Table = (
     masterIsChecked,
     //
     onRowClick,
-    onRowCheckboxChange,
+    onRowToggle,
     onPageLimitChange,
     onPageChange,
-    onMasterCheckboxChange,
+    onMasterToggle,
     //
     className,
     ...rest
@@ -174,13 +174,13 @@ const Table = (
         {header && (
           <thead>
             <tr>
-              {onRowCheckboxChange !== NOOP && (
+              {onRowToggle !== NOOP && (
                 <th>
-                  {onMasterCheckboxChange !== NOOP && (
+                  {onMasterToggle !== NOOP && (
                     <input
                       type='checkbox'
                       checked={masterIsChecked()}
-                      onChange={onMasterCheckboxChange}
+                      onChange={onMasterToggle}
                     />
                   )}
                 </th>
@@ -190,7 +190,7 @@ const Table = (
                   {header}
                 </th>
               ))}
-              {actions !== null && <th />}
+              {actions !== NOOP && <th />}
             </tr>
           </thead>
         )}
@@ -205,15 +205,18 @@ const Table = (
                 row,
                 fields: state.fields,
                 dataManipulator,
-                actions,
                 isChecked: rowIsChecked(id),
+                actions: (
+                  actions !== NOOP
+                    ? actions(row) : undefined
+                ),
                 onClick: (
                   onRowClick !== NOOP
-                    ? onRowClick : undefined
+                    ? event => onRowClick(id, event) : undefined
                 ),
                 onToggle: (
-                  onRowCheckboxChange !== NOOP
-                    ? () => onRowCheckboxChange(id) : undefined
+                  onRowToggle !== NOOP
+                    ? () => onRowToggle(id) : undefined
                 )
               })
             )
@@ -226,8 +229,8 @@ const Table = (
                 rows,
                 width: (
                   state.fields.length +
-                  parseInt(actions !== null) +
-                  parseInt(onRowCheckboxChange !== NOOP)
+                  parseInt(actions !== NOOP) +
+                  parseInt(onRowToggle !== NOOP)
                 )
               })
             )}
@@ -286,18 +289,27 @@ Table.defaultProps = {
           })}
         </td>
       ))}
-      {actions}
+      {!!actions && (
+        <td>{actions}</td>
+      )}
     </tr>
   ),
   emptyRow: (
     <tr>
       <td>There's nothing here.</td>
     </tr>
   ),
-  dataManipulator: ({ value }) => (
-    value !== null && value !== undefined
-      ? value : '-'
-  ),
+  dataManipulator: ({ value }) => {
+    if (value === null || value === undefined) {
+      return '-'
+    }
+
+    if (!React.isValidElement(value) && typeof value === 'object') {
+      return <i>Hidden</i>
+    }
+
+    return value
+  },
   //
   fieldMap: {},
   fieldOrder: [],
@@ -308,16 +320,16 @@ Table.defaultProps = {
   footer: NOOP,
   pageLimit: NOOP,
   pages: NOOP,
-  actions: null,
+  actions: NOOP,
   //
   rowIsChecked: NOOP,
   masterIsChecked: NOOP,
   //
   onRowClick: NOOP,
-  onRowCheckboxChange: NOOP,
+  onRowToggle: NOOP,
   onPageLimitChange: NOOP,
   onPageChange: NOOP,
-  onMasterCheckboxChange: NOOP
+  onMasterToggle: NOOP
 }
 
 Table.propTypes = {
@@ -357,14 +369,16 @@ Table.propTypes = {
   pages: PropTypes.oneOfType([
     PropTypes.node, PropTypes.func
   ]),
-  actions: PropTypes.node,
+  actions: PropTypes.func,
   //
   rowIsChecked: PropTypes.func,
   masterIsChecked: PropTypes.func,
   //
   onRowClick: PropTypes.func,
-  onRowCheckboxChange: PropTypes.func,
+  onRowToggle: PropTypes.func,
   onPageLimitChange: PropTypes.func,
   onPageChange: PropTypes.func,
-  onMasterCheckboxChange: PropTypes.func
+  onMasterToggle: PropTypes.func
 }
+
+export default Table