feat(table): allow custom action definition

Author: assisrafael

demo/TableExamples.jsx

@@ -207,6 +207,16 @@ export function TableExamples() {
               ],
               sortState
             )}
+            actions={(doc, docIndex) => [
+              {
+                title: 'Add',
+                content: <span>{doc.b + docIndex}?</span>,
+              },
+              {
+                title: 'Subtract',
+                content: <span>{doc.b - docIndex}?</span>,
+              },
+            ]}
           />
         </div>
       </div>

demo/demo.jsx

@@ -18,7 +18,7 @@ ReactDOM.render(
         <StatefulTabs
           vertical={true}
           onlyRenderActiveTab={true}
-          initialTab={1}
+          initialTab={5}
           tabs={[
             {
               title: 'Dialog',

src/table/Table.jsx

@@ -34,7 +34,7 @@ export function Table({
     <div className="table-responsive">
       <table className={tableClasses}>
         {caption && <caption>{caption}</caption>}
-        <TableHead {...{ actions, actionLabel, columnHeaderFormat }} columns={normalizedColumns} />
+        <TableHead {...{ actionLabel, columnHeaderFormat, hasActions: Boolean(actions) }} columns={normalizedColumns} />
         <TableBody {...{ docs, rowClass, actions, onRowClick }} columns={normalizedColumns} />
       </table>
     </div>
@@ -55,7 +55,7 @@ Table.defaultProps = {
 
 Table.propTypes = {
   actionLabel: PropTypes.string,
-  actions: PropTypes.arrayOf(PropTypes.object),
+  actions: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.object)]),
   bordered: PropTypes.bool,
   caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   columnHeaderFormat: PropTypes.func,

src/table/TableActions.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { safeClick, stopPropagation } from '../utils/event-handlers';
+import { isFunction } from '../utils/types';
+
+export function TableActions({ doc, docIndex, actions }) {
+  if (!actions) {
+    return null;
+  }
+
+  const normalizedActions = normalizeAction(actions, doc, docIndex);
+
+  return (
+    <td className="text-center">
+      {normalizedActions.map((action, actionIndex) => (
+        <span key={actionIndex} className={actionIndex > 0 ? 'ml-2' : ''}>
+          <TableAction doc={doc} docIndex={docIndex} action={action} />
+        </span>
+      ))}
+    </td>
+  );
+}
+
+TableActions.propTypes = {
+  doc: PropTypes.object.isRequired,
+  docIndex: PropTypes.number.isRequired,
+  actions: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.object)]),
+};
+
+function TableAction({ doc, docIndex, action }) {
+  if (isFunction(action)) {
+    return action(doc, docIndex) || null;
+  }
+
+  if (action.onClick || action.link) {
+    return (
+      <a title={action.title} {...getActionProps(action, doc, docIndex)}>
+        {action.content}
+      </a>
+    );
+  }
+
+  return action.content;
+}
+
+TableAction.propTypes = {
+  doc: PropTypes.object.isRequired,
+  docIndex: PropTypes.number.isRequired,
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+};
+
+function getActionProps(action, doc, docIndex) {
+  const props = {};
+
+  if (action.onClick) {
+    props.href = '';
+    props.onClick = safeClick(action.onClick, doc, docIndex);
+  } else if (action.link) {
+    props.onClick = stopPropagation;
+    props.href = action.link(doc, docIndex);
+  }
+
+  return props;
+}
+
+function normalizeAction(actions, doc, docIndex) {
+  if (isFunction(actions)) {
+    return actions(doc, docIndex);
+  }
+
+  return actions;
+}

src/table/TableBody.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getColumnClass } from './table-helpers';
-import { safeClick, stopPropagation } from '../utils/event-handlers';
+import { safeClick } from '../utils/event-handlers';
 import { getValueByPath } from '../utils/getters-setters';
+import { TableActions } from './TableActions';
 
 export function TableBody({ columns, docs, rowClass, actions, onRowClick }) {
   return (
@@ -15,28 +16,15 @@ export function TableBody({ columns, docs, rowClass, actions, onRowClick }) {
             </td>
           ))}
 
-          {actions && (
-            <td className="text-center">
-              {actions.map((action, actionIndex) => (
-                <a
-                  key={actionIndex}
-                  title={action.title}
-                  {...getActionProps(action, doc, docIndex)}
-                  className={actionIndex > 0 ? 'ml-2' : ''}
-                >
-                  {action.content}
-                </a>
-              ))}
-            </td>
-          )}
+          <TableActions doc={doc} docIndex={docIndex} actions={actions} />
         </tr>
       ))}
     </tbody>
   );
 }
 
 TableBody.propTypes = {
-  actions: PropTypes.arrayOf(PropTypes.object),
+  actions: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.object)]),
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   docs: PropTypes.arrayOf(PropTypes.object),
   rowClass: PropTypes.func,
@@ -52,17 +40,3 @@ function getColumnValue(doc, column, docIndex) {
 
   return column.format(rawValue, doc, docIndex);
 }
-
-function getActionProps(action, doc, docIndex) {
-  const props = {};
-
-  if (action.onClick) {
-    props.href = '';
-    props.onClick = safeClick(action.onClick, doc, docIndex);
-  } else if (action.link) {
-    props.onClick = stopPropagation;
-    props.href = action.link(doc, docIndex);
-  }
-
-  return props;
-}

src/table/TableHead.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getColumnClass } from './table-helpers';
 
-export function TableHead({ columns, actions, actionLabel, columnHeaderFormat }) {
+export function TableHead({ columns, hasActions, actionLabel, columnHeaderFormat }) {
   return (
     <thead>
       <tr>
@@ -11,15 +11,15 @@ export function TableHead({ columns, actions, actionLabel, columnHeaderFormat })
             {columnHeaderFormat(column.label, column.attribute)}
           </th>
         ))}
-        {actions && <th className="text-center">{actionLabel}</th>}
+        {hasActions && <th className="text-center">{actionLabel}</th>}
       </tr>
     </thead>
   );
 }
 
 TableHead.propTypes = {
   actionLabel: PropTypes.string,
-  actions: PropTypes.arrayOf(PropTypes.object),
+  hasActions: PropTypes.bool,
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   columnHeaderFormat: PropTypes.func.isRequired,
 };