@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
113 lines (111 loc) • 5.28 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _createClass from "@babel/runtime/helpers/createClass";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @file Data table table subcomponent.
* @copyright IBM Security 2019 - 2021
*/
import { Table as CarbonTable } from 'carbon-components-react';
import React, { Component } from 'react';
import { debounce } from 'throttle-debounce';
import { tableWrapperNamespace, overflowCellNamespace } from './constants';
import { carbonPrefix } from '../../globals/namespace';
import theme from '../../globals/theme';
import ScrollGradient from '../ScrollGradient/ScrollGradient';
/**
* Proxies Carbon Table component wrapped in a div with a class to set overflow
* scroll on the table.
*/
var Table = /*#__PURE__*/function (_Component) {
function Table() {
var _this;
_classCallCheck(this, Table);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Table, [].concat(args));
_defineProperty(_this, "componentDidMount", function () {
if (_this.hasOverflowMenus(_this.scrollContainer)) {
window.addEventListener('resize', _this.debouncedPositionOverflowMenus);
_this.positionOverflowMenus(_this.scrollContainer);
}
});
_defineProperty(_this, "componentDidUpdate", function () {
_this.positionOverflowMenus(_this.scrollContainer);
});
_defineProperty(_this, "componentWillUnmount", function () {
return window.removeEventListener('resize', _this.handleWindowResize);
});
/**
* Positions overflow menus based on the scroll position of the table container.
*/
_defineProperty(_this, "positionOverflowMenus", function (tableWrapper) {
if (_this.hasOverflowMenus(tableWrapper)) {
var scrollLeft = tableWrapper.scrollLeft,
clientWidth = tableWrapper.clientWidth,
scrollWidth = tableWrapper.scrollWidth;
_toConsumableArray(tableWrapper.querySelectorAll(".".concat(overflowCellNamespace, " .").concat(carbonPrefix, "--overflow-menu"))).forEach(function (overflow) {
// eslint-disable-next-line no-param-reassign
overflow.style.transform = "translateX(".concat(scrollLeft + clientWidth - scrollWidth, "px)");
});
}
});
/**
* Debounced version of function to position overflow menus. This one is used to debounce the
* execution of this function.
* @param {HTMLElement} target Element that would contain overflow menus to position.
* @returns {Function} Debounced overflow positioning function.
*/
_defineProperty(_this, "debouncedPositionOverflowMenus", debounce(250, function () {
return _this.positionOverflowMenus(_this.scrollContainer);
}));
/**
* Handles window resize and positions overflow menus so it is always visible.
*/
_defineProperty(_this, "handleWindowResize", function () {
return _this.debouncedPositionOverflowMenus(_this.container.current);
});
/**
* Handles the scroll event of the table event.
* @param {{ target: HTMLElement }} event Event generated by scroll event.
*/
_defineProperty(_this, "handleScroll", function (_ref) {
var target = _ref.target;
return _this.positionOverflowMenus(target);
});
/**
* Checks that table contains any overflow menus.
* @returns {boolean} Whether or not table conatins any overflow menus.
*/
_defineProperty(_this, "hasOverflowMenus", function (tableWrapper) {
return tableWrapper.querySelectorAll("td.".concat(overflowCellNamespace)).length > 0;
});
/**
* @type {HTMLElement} DOM reference to table container.
*/
_defineProperty(_this, "scrollContainer", null);
_defineProperty(_this, "render", function () {
return /*#__PURE__*/React.createElement(ScrollGradient, {
className: tableWrapperNamespace,
color: theme.ui01,
getScrollElementRef: function getScrollElementRef(element) {
_this.scrollContainer = element;
},
direction: ScrollGradient.ScrollDirection.X,
onScroll: _this.handleScroll
}, /*#__PURE__*/React.createElement(CarbonTable, _this.props));
});
return _this;
}
_inherits(Table, _Component);
return _createClass(Table);
}(Component);
Table.propTypes = CarbonTable.propTypes;
Table.defaultProps = CarbonTable.defaultProps;
export default Table;