@codacy/ui-components 0.66.24 → 0.66.26

package/lib/Table/SelectableTable.js

@@ -1,36 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSelectableTableContext = exports.SelectableTable = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _Table = require("./Table.styles");
-var _2 = require("../");
-var _lodash = require("lodash");
-var _Table2 = require("./Table");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "items", "totalLength", "onSelectionChange", "initialValue"],
-  _excluded2 = ["children", "sticky", "stickyOffset"],
-  _excluded3 = ["children", "index", "disabled"];
-var INITIAL_TABLE_STATE = {
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { TableWrapper, StyledTableHeader, StyledTableHeaderCell, StyledTableBodyCell, StyledTableRow, StyledTable } from './Table.styles';
+import { Checkbox, Caption, Link } from '../';
+import { uniq } from 'lodash';
+import { ColumnsGroup } from './Table';
+const INITIAL_TABLE_STATE = {
   indexes: [],
   multiple: 'none'
 };
-var SelectableTableContext = /*#__PURE__*/_react["default"].createContext(null);
-var sequentialArray = function sequentialArray(from, to) {
-  return new Array(to - from + 1).fill(0).map(function (_, idx) {
-    return idx + from;
-  });
-};
-var useSelectableTableContext = exports.useSelectableTableContext = function useSelectableTableContext() {
-  var context = (0, _react.useContext)(SelectableTableContext);
+const SelectableTableContext = /*#__PURE__*/React.createContext(null);
+const sequentialArray = (from, to) => new Array(to - from + 1).fill(0).map((_, idx) => idx + from);
+export const useSelectableTableContext = () => {
+  const context = useContext(SelectableTableContext);
   if (context === null) {
     throw new Error("You are using SelectableTableContext outside it's provider.");
   }
@@ -40,229 +21,201 @@ var useSelectableTableContext = exports.useSelectableTableContext = function use
 /**
  * Base selectable table component
  */
-function SelectableTableComponent(_ref) {
+function SelectableTableComponent({
+  children,
+  items,
+  totalLength,
+  onSelectionChange,
+  initialValue,
+  ...props
+}) {
   var _initialValue$selecte, _initialValue$selecte2;
-  var children = _ref.children,
-    items = _ref.items,
-    totalLength = _ref.totalLength,
-    onSelectionChange = _ref.onSelectionChange,
-    initialValue = _ref.initialValue,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _useState = (0, _react.useState)(initialValue ? {
-      indexes: initialValue.selected ? initialValue.selected.map(function (v) {
-        return items.indexOf(v);
-      }) : [],
-      totalLength: totalLength,
-      multiple: initialValue.allSelected ? 'all' : items.length > 0 && ((_initialValue$selecte = initialValue.selected) === null || _initialValue$selecte === void 0 ? void 0 : _initialValue$selecte.length) === items.length ? 'visible' : items.length > 0 && !!((_initialValue$selecte2 = initialValue.selected) !== null && _initialValue$selecte2 !== void 0 && _initialValue$selecte2.length) ? 'partial' : 'none'
-    } : INITIAL_TABLE_STATE),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var add = (0, _react.useCallback)(function (idxFrom, idxTo) {
+  const [selected, setSelected] = useState(initialValue ? {
+    indexes: initialValue.selected ? initialValue.selected.map(v => items.indexOf(v)) : [],
+    totalLength: totalLength,
+    multiple: initialValue.allSelected ? 'all' : items.length > 0 && ((_initialValue$selecte = initialValue.selected) === null || _initialValue$selecte === void 0 ? void 0 : _initialValue$selecte.length) === items.length ? 'visible' : items.length > 0 && !!((_initialValue$selecte2 = initialValue.selected) !== null && _initialValue$selecte2 !== void 0 && _initialValue$selecte2.length) ? 'partial' : 'none'
+  } : INITIAL_TABLE_STATE);
+  const add = useCallback((idxFrom, idxTo) => {
     if (idxTo !== undefined && idxTo !== idxFrom) {
-      var from = Math.min(idxFrom, idxTo);
-      var to = Math.max(idxFrom, idxTo);
-      var rangeToAdd = sequentialArray(from, to);
-      setSelected(function (_ref2) {
-        var indexes = _ref2.indexes;
-        var newIndexes = (0, _lodash.uniq)([].concat((0, _toConsumableArray2["default"])(indexes), (0, _toConsumableArray2["default"])(rangeToAdd))).sort();
+      const from = Math.min(idxFrom, idxTo);
+      const to = Math.max(idxFrom, idxTo);
+      const rangeToAdd = sequentialArray(from, to);
+      setSelected(({
+        indexes
+      }) => {
+        const newIndexes = uniq([...indexes, ...rangeToAdd]).sort();
         return {
           indexes: newIndexes,
           multiple: newIndexes.length === totalLength ? 'all' : newIndexes.length === items.length ? 'visible' : 'partial',
           lastAction: 'add',
           lastIndex: idxFrom,
-          totalLength: totalLength
+          totalLength
         };
       });
     } else {
-      setSelected(function (_ref3) {
-        var indexes = _ref3.indexes;
-        var newIndexes = !indexes.includes(idxFrom) ? [].concat((0, _toConsumableArray2["default"])(indexes), [idxFrom]).sort() : indexes;
+      setSelected(({
+        indexes
+      }) => {
+        const newIndexes = !indexes.includes(idxFrom) ? [...indexes, idxFrom].sort() : indexes;
         return {
           indexes: newIndexes,
           multiple: newIndexes.length === totalLength ? 'all' : newIndexes.length === items.length ? 'visible' : 'partial',
           lastAction: 'add',
           lastIndex: idxFrom,
-          totalLength: totalLength
+          totalLength
         };
       });
     }
   }, [items.length, totalLength]);
-  var remove = (0, _react.useCallback)(function (idxFrom, idxTo) {
-    var response = {
+  const remove = useCallback((idxFrom, idxTo) => {
+    const response = {
       indexes: [],
       lastAction: 'remove',
       lastIndex: idxFrom,
-      totalLength: totalLength
+      totalLength
     };
     if (idxTo !== undefined && idxTo !== idxFrom) {
-      var from = Math.min(idxFrom, idxTo);
-      var to = Math.max(idxFrom, idxTo);
-      var rangeToRemove = sequentialArray(from, to);
-      setSelected(function (_ref4) {
-        var indexes = _ref4.indexes;
-        var newIndexes = indexes.filter(function (i) {
-          return !rangeToRemove.includes(i);
-        });
-        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, response), {}, {
+      const from = Math.min(idxFrom, idxTo);
+      const to = Math.max(idxFrom, idxTo);
+      const rangeToRemove = sequentialArray(from, to);
+      setSelected(({
+        indexes
+      }) => {
+        const newIndexes = indexes.filter(i => !rangeToRemove.includes(i));
+        return {
+          ...response,
           indexes: newIndexes,
           multiple: newIndexes.length ? 'partial' : 'none'
-        });
+        };
       });
     } else {
-      setSelected(function (_ref5) {
-        var indexes = _ref5.indexes,
-          multiple = _ref5.multiple;
-        var realIndexes = multiple === 'visible' || multiple === 'all' ? sequentialArray(0, items.length - 1) : indexes;
-        var newIndexes = realIndexes.includes(idxFrom) ? realIndexes.filter(function (i) {
-          return i !== idxFrom;
-        }) : realIndexes;
-        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, response), {}, {
+      setSelected(({
+        indexes,
+        multiple
+      }) => {
+        const realIndexes = multiple === 'visible' || multiple === 'all' ? sequentialArray(0, items.length - 1) : indexes;
+        const newIndexes = realIndexes.includes(idxFrom) ? realIndexes.filter(i => i !== idxFrom) : realIndexes;
+        return {
+          ...response,
           indexes: newIndexes,
           multiple: newIndexes.length ? 'partial' : 'none'
-        });
+        };
       });
     }
   }, [items.length, totalLength]);
-  var selectAllVisible = (0, _react.useCallback)(function () {
+  const selectAllVisible = useCallback(() => {
     setSelected({
       indexes: [],
       multiple: 'visible',
-      totalLength: totalLength
+      totalLength
     });
   }, [totalLength]);
-  var selectAll = (0, _react.useCallback)(function () {
+  const selectAll = useCallback(() => {
     setSelected({
       indexes: [],
       multiple: 'all',
-      totalLength: totalLength
+      totalLength
     });
   }, [totalLength]);
-  var clearSelection = (0, _react.useCallback)(function () {
+  const clearSelection = useCallback(() => {
     setSelected({
       indexes: [],
       multiple: 'none'
     });
   }, []);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (onSelectionChange) {
-      onSelectionChange(selected.multiple === 'visible' ? (0, _toConsumableArray2["default"])(items) : selected.indexes.map(function (idx) {
-        return items[idx];
-      }), selected.multiple === 'all');
+      onSelectionChange(selected.multiple === 'visible' ? [...items] : selected.indexes.map(idx => items[idx]), selected.multiple === 'all');
     }
   }, [selected, items, onSelectionChange]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.TableWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectableTableContext.Provider, {
-      value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, selected), {}, {
-        itemsLength: items.length,
-        add: add,
-        remove: remove,
-        selectAllVisible: selectAllVisible,
-        selectAll: selectAll,
-        clearSelection: clearSelection
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTable, {
-        children: children
-      })
-    })
-  }));
+  return /*#__PURE__*/React.createElement(TableWrapper, props, /*#__PURE__*/React.createElement(SelectableTableContext.Provider, {
+    value: {
+      ...selected,
+      itemsLength: items.length,
+      add,
+      remove,
+      selectAllVisible,
+      selectAll,
+      clearSelection
+    }
+  }, /*#__PURE__*/React.createElement(StyledTable, null, children)));
 }
-var Header = function Header(_ref6) {
-  var children = _ref6.children,
-    _ref6$sticky = _ref6.sticky,
-    sticky = _ref6$sticky === void 0 ? false : _ref6$sticky,
-    _ref6$stickyOffset = _ref6.stickyOffset,
-    stickyOffset = _ref6$stickyOffset === void 0 ? '0' : _ref6$stickyOffset,
-    props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
-  var selection = useSelectableTableContext();
-  var selectStatus = selection.multiple === 'none' ? false : selection.multiple === 'partial' ? 'indeterminate' : true;
-  var handleSelectChange = (0, _react.useCallback)(function (checked) {
+const Header = ({
+  children,
+  sticky = false,
+  stickyOffset = '0',
+  ...props
+}) => {
+  const selection = useSelectableTableContext();
+  const selectStatus = selection.multiple === 'none' ? false : selection.multiple === 'partial' ? 'indeterminate' : true;
+  const handleSelectChange = useCallback(checked => {
     if (checked) selection.selectAllVisible();else selection.clearSelection();
   }, [selection]);
-  var hasMoreRows = !!selection.totalLength && selection.totalLength > selection.itemsLength;
-  var selectedVisibleWithMoreRows = selection.multiple === 'visible' && hasMoreRows;
-  var selectedAllWithMoreRows = selection.multiple === 'all' && hasMoreRows;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table2.ColumnsGroup, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableHeaderCell, {
-        width: "3.25rem"
-      }), children]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableHeader, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      sticky: sticky,
-      stickyOffset: stickyOffset
-    }, props), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.StyledTableRow, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableHeaderCell, {
-          totalizer: selectedVisibleWithMoreRows || selectedAllWithMoreRows,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Checkbox, {
-            size: "sm",
-            onChange: handleSelectChange,
-            checked: selectStatus,
-            className: "th-checkbox"
-          })
-        }), selectedVisibleWithMoreRows ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.StyledTableHeaderCell, {
-          align: "left",
-          totalizer: true,
-          colSpan: _react["default"].Children.count(children),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Caption, {
-            mr: 4,
-            as: "span",
-            size: "md",
-            children: [selection.itemsLength, " selected"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Link, {
-            onClick: selection.selectAll,
-            children: ["Select all ", selection.totalLength, " instead"]
-          })]
-        }) : selectedAllWithMoreRows ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.StyledTableHeaderCell, {
-          align: "left",
-          totalizer: true,
-          colSpan: _react["default"].Children.count(children),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Caption, {
-            mr: 4,
-            as: "span",
-            size: "md",
-            children: ["All ", selection.totalLength, " selected"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Link, {
-            onClick: selection.clearSelection,
-            children: "Clear selection"
-          })]
-        }) : children]
-      })
-    }))]
-  });
+  const hasMoreRows = !!selection.totalLength && selection.totalLength > selection.itemsLength;
+  const selectedVisibleWithMoreRows = selection.multiple === 'visible' && hasMoreRows;
+  const selectedAllWithMoreRows = selection.multiple === 'all' && hasMoreRows;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColumnsGroup, null, /*#__PURE__*/React.createElement(StyledTableHeaderCell, {
+    width: "3.25rem"
+  }), children), /*#__PURE__*/React.createElement(StyledTableHeader, _extends({
+    sticky: sticky,
+    stickyOffset: stickyOffset
+  }, props), /*#__PURE__*/React.createElement(StyledTableRow, null, /*#__PURE__*/React.createElement(StyledTableHeaderCell, {
+    totalizer: selectedVisibleWithMoreRows || selectedAllWithMoreRows
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    size: "sm",
+    onChange: handleSelectChange,
+    checked: selectStatus,
+    className: "th-checkbox"
+  })), selectedVisibleWithMoreRows ? /*#__PURE__*/React.createElement(StyledTableHeaderCell, {
+    align: "left",
+    totalizer: true,
+    colSpan: React.Children.count(children)
+  }, /*#__PURE__*/React.createElement(Caption, {
+    mr: 4,
+    as: "span",
+    size: "md"
+  }, selection.itemsLength, " selected"), /*#__PURE__*/React.createElement(Link, {
+    onClick: selection.selectAll
+  }, "Select all ", selection.totalLength, " instead")) : selectedAllWithMoreRows ? /*#__PURE__*/React.createElement(StyledTableHeaderCell, {
+    align: "left",
+    totalizer: true,
+    colSpan: React.Children.count(children)
+  }, /*#__PURE__*/React.createElement(Caption, {
+    mr: 4,
+    as: "span",
+    size: "md"
+  }, "All ", selection.totalLength, " selected"), /*#__PURE__*/React.createElement(Link, {
+    onClick: selection.clearSelection
+  }, "Clear selection")) : children)));
 };
-var Row = function Row(_ref7) {
-  var children = _ref7.children,
-    index = _ref7.index,
-    _ref7$disabled = _ref7.disabled,
-    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
-    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
-  var selection = useSelectableTableContext();
-  var handleSelectChange = (0, _react.useCallback)(function (checked, event) {
+const Row = ({
+  children,
+  index,
+  disabled = false,
+  ...props
+}) => {
+  const selection = useSelectableTableContext();
+  const handleSelectChange = useCallback((checked, event) => {
     if (event !== null && event !== void 0 && event.shiftKey && selection.lastAction) {
       if (selection.lastAction === 'add') selection.add(index, selection.lastIndex);else selection.remove(index, selection.lastIndex);
     } else {
       if (checked) selection.add(index);else selection.remove(index);
     }
   }, [selection, index]);
-  var isSelected = selection.multiple === 'all' || selection.multiple === 'visible' || selection.indexes.includes(index);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.StyledTableRow, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableBodyCell, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Checkbox, {
-        size: "sm",
-        onChange: handleSelectChange,
-        checked: !disabled && isSelected,
-        disabled: disabled,
-        className: "tr-checkbox"
-      })
-    }), children]
-  }));
+  const isSelected = selection.multiple === 'all' || selection.multiple === 'visible' || selection.indexes.includes(index);
+  return /*#__PURE__*/React.createElement(StyledTableRow, props, /*#__PURE__*/React.createElement(StyledTableBodyCell, null, /*#__PURE__*/React.createElement(Checkbox, {
+    size: "sm",
+    onChange: handleSelectChange,
+    checked: !disabled && isSelected,
+    disabled: disabled,
+    className: "tr-checkbox"
+  })), children);
 };
 
 /**
  * @deprecated Use the NewSelectableTable instead.
  */
-var SelectableTable = exports.SelectableTable = Object.assign(SelectableTableComponent, {
-  Header: Header,
-  Row: Row
+export const SelectableTable = Object.assign(SelectableTableComponent, {
+  Header,
+  Row
 });