[WIP] 🧪 Experimental Table

CHANGELOG.md

@@ -7,7 +7,27 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [8.67.0] - 2019-07-22
+### Changed
+
+- Turn `Toolbar` into a compound component.
+
+## [9.67.0] - 2019-07-22
+
+### Changed
+
+- Get changes made at version `v8.67.0` & fix version.
+
+## [9.63.1] - 2019-07-22
+
+### Changed
+
+- Get changes made at version `v8.66.1`.
+
+## [9.63.0] - 2019-07-16
+
+### Changed
+
+- Get changes made at version `v8.63.0`.
 
 ### Added
 
@@ -73,6 +93,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Security vulnerabilities
 
+### Changed
+
+- Get changes made at version 'v8.60.3'
+
 ## [8.60.3] - 2019-07-08
 
 ### Fixed

react/components/Table/BulkActions.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -7,105 +7,92 @@ import ButtonWithIcon from '../ButtonWithIcon'
 import ActionMenu from '../ActionMenu'
 import Close from '../icon/Close'
 
-import BulkActionsSelectedRows from './BulkActionsSelectedRows'
-
 const close = <Close />
 
-class BulkActions extends PureComponent {
-  render() {
-    const {
-      hasPrimaryBulkAction,
-      hasSecondaryBulkActions,
-      selectedRows,
-      bulkActions,
-      allLinesSelected,
-      onSelectAllLines,
-      onDeselectAllLines,
-    } = this.props
-
-    const hasBulkActions = hasPrimaryBulkAction || hasSecondaryBulkActions
-    const selectedRowsLength = selectedRows.length
-    const hasRowsSelected = selectedRowsLength > 0
+const BulkActions = ({
+  hasPrimaryBulkAction,
+  hasSecondaryBulkActions,
+  selectedRows,
+  bulkActions,
+  allLinesSelected,
+  onSelectAllLines,
+  onDeselectAllLines,
+}) => {
+  const hasBulkActions = hasPrimaryBulkAction || hasSecondaryBulkActions
+  const selectedRowsLength = selectedRows.length
+  const hasRowsSelected = selectedRowsLength > 0
 
-    const bulkActionsReturnedParameters = allLinesSelected
-      ? { allLinesSelected: true }
-      : { selectedRows }
+  const bulkActionsReturnedParameters = allLinesSelected
+    ? { allLinesSelected: true }
+    : { selectedRows }
 
-    return (
-      <div
-        className={classNames(
-          'flex flex-row justify-between bg-action-primary c-on-action-primary br3 br--top ph4',
-          {
-            pv4: hasRowsSelected,
-          }
-        )}
-        style={{
-          height: hasRowsSelected ? '56px' : 0,
-          overflow: hasRowsSelected ? 'auto' : 'hidden',
-          transition: 'height 0.2s ease-in-out, padding 0.2s ease-in-out',
-        }}>
-        {hasBulkActions && (
-          <div className="flex flex-row">
-            {hasPrimaryBulkAction && (
-              <div className="mr4">
-                <Button
-                  variation="secondary"
-                  size="small"
-                  onClick={() =>
-                    bulkActions.main.handleCallback(
-                      bulkActionsReturnedParameters
-                    )
-                  }>
-                  {bulkActions.main.label}
-                </Button>
-              </div>
-            )}
-            {hasSecondaryBulkActions && (
-              <ActionMenu
-                label={bulkActions.texts.secondaryActionsLabel}
-                buttonProps={{ variation: 'secondary', size: 'small' }}
-                options={bulkActions.others.map(el => ({
-                  label: el.label,
-                  onClick: () =>
-                    el.handleCallback(bulkActionsReturnedParameters),
-                }))}
-              />
-            )}
-          </div>
-        )}
-        <div className="tr flex flex-row items-center">
-          {!allLinesSelected && bulkActions && bulkActions.texts && (
-            <span className="mr4 c-muted-4">
-              {bulkActions.texts.rowsSelected(
-                <BulkActionsSelectedRows
-                  selectedRowsLength={selectedRowsLength}
-                />
-              )}
-            </span>
-          )}
-          <span className="mr2">
-            {allLinesSelected ? (
-              bulkActions &&
-              bulkActions.texts &&
-              bulkActions.texts.allRowsSelected(
-                <span className="b">{bulkActions.totalItems}</span>
-              )
-            ) : (
-              <Button onClick={() => onSelectAllLines()}>
-                <span className="ttu">
-                  {bulkActions &&
-                    `${bulkActions.texts && bulkActions.texts.selectAll} ${
-                      bulkActions.totalItems
-                    }`}
-                </span>
+  return (
+    <div
+      className={classNames(
+        'flex flex-row justify-between bg-action-primary c-on-action-primary br3 br--top ph4',
+        {
+          pv4: hasRowsSelected,
+        }
+      )}
+      style={{
+        height: hasRowsSelected ? '56px' : 0,
+        overflow: hasRowsSelected ? 'auto' : 'hidden',
+        transition: 'height 0.2s ease-in-out, padding 0.2s ease-in-out',
+      }}>
+      {hasBulkActions && (
+        <div className="flex flex-row">
+          {hasPrimaryBulkAction && (
+            <div className="mr4">
+              <Button
+                variation="secondary"
+                size="small"
+                onClick={() =>
+                  bulkActions.main.handleCallback(bulkActionsReturnedParameters)
+                }>
+                {bulkActions.main.label}
               </Button>
-            )}
-          </span>
-          <ButtonWithIcon icon={close} onClick={() => onDeselectAllLines()} />
+            </div>
+          )}
+          {hasSecondaryBulkActions && (
+            <ActionMenu
+              label={bulkActions.texts.secondaryActionsLabel}
+              buttonProps={{ variation: 'secondary', size: 'small' }}
+              options={bulkActions.others.map(el => ({
+                label: el.label,
+                onClick: () => el.handleCallback(bulkActionsReturnedParameters),
+              }))}
+            />
+          )}
         </div>
+      )}
+      <div className="tr flex flex-row items-center">
+        {!allLinesSelected && bulkActions && bulkActions.texts && (
+          <span className="mr4 c-muted-4">
+            {bulkActions.texts.rowsSelected(selectedRowsLength)}
+          </span>
+        )}
+        <span className="mr2">
+          {allLinesSelected ? (
+            bulkActions &&
+            bulkActions.texts &&
+            bulkActions.texts.allRowsSelected(
+              <span className="b">{bulkActions.totalItems}</span>
+            )
+          ) : (
+            <Button onClick={() => onSelectAllLines()}>
+              <span className="ttu">
+                {bulkActions &&
+                  `${bulkActions.texts && bulkActions.texts.selectAll} ${
+                    bulkActions.totalItems
+                  }`}
+              </span>
+            </Button>
+          )}
+        </span>
+        <ButtonWithIcon icon={close} onClick={() => onDeselectAllLines()} />
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 BulkActions.defaultProps = {

react/components/Table/CheckboxContainer.js

@@ -1,43 +1,39 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import Checkbox from '../Checkbox'
 
-class CheckboxContainer extends Component {
-  static defaultProps = {
-    partial: false,
-    disabled: false,
-  }
-
-  static propTypes = {
-    checked: PropTypes.bool.isRequired,
-    partial: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  }
+const CheckboxContainer = ({ checked, partial, id, onClick, disabled }) => {
+  return (
+    <div
+      onClick={e => {
+        e.stopPropagation()
+        // prevents the onRowClick event from happening
+      }}>
+      <Checkbox
+        checked={checked}
+        partial={partial}
+        value={`${id}`}
+        id={`${id}`}
+        name={`row_${id}`}
+        onChange={() => onClick(id)}
+        disabled={disabled}
+      />
+    </div>
+  )
+}
 
-  render() {
-    const { checked, partial, id, onClick, disabled } = this.props
+CheckboxContainer.defaultProps = {
+  partial: false,
+  disabled: false,
+}
 
-    return (
-      <div
-        onClick={e => {
-          e.stopPropagation()
-          // prevents the onRowClick event from happening
-        }}>
-        <Checkbox
-          checked={checked}
-          partial={partial}
-          value={`${id}`}
-          id={`${id}`}
-          name={`row_${id}`}
-          onChange={() => onClick(id)}
-          disabled={disabled}
-        />
-      </div>
-    )
-  }
+CheckboxContainer.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  partial: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
 export default CheckboxContainer