@talend/react-components/lib/VirtualizedList/HeaderResizable/HeaderResizable.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.HeaderResizable = void 0;
var _react = require("react");
var _reactDraggable = _interopRequireDefault(require("react-draggable"));
var _reactVirtualized = require("react-virtualized");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _theme = require("../../theme");
var _translate = _interopRequireDefault(require("../../translate"));
var _virtualizedListContext = require("../virtualizedListContext");
var _HeaderResizableModule = _interopRequireDefault(require("./HeaderResizable.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/display-name */
const theme = (0, _theme.getTheme)(_HeaderResizableModule.default);

// eslint-disable-next-line react/prop-types
const HeaderResizableContent = ({
  customRender,
  ...rest
}) => {
  if (customRender) {
    return customRender;
  } else if (rest.label) {
    return (0, _reactVirtualized.defaultTableHeaderRenderer)(rest);
  }
  return null;
};
class HeaderResizable extends _react.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      resizing: false
    });
    _defineProperty(this, "onKeyDownResizeColumn", (event, resizeFn) => {
      resizeFn(this.props.dataKey, this.getDeltaFromKey(event));
    });
    _defineProperty(this, "setResizing", resizing => () => {
      this.setState(state => ({
        ...state,
        resizing
      }));
    });
    _defineProperty(this, "getDeltaFromKey", event => {
      switch (event.key) {
        case 'Left':
        case 'ArrowLeft':
          return -10;
        case 'Right':
        case 'ArrowRight':
          return 10;
        default:
          return 0;
      }
    });
  }
  render() {
    const {
      children,
      dataKey,
      label,
      sortBy,
      sortDirection,
      t = (0, _translate.default)()
    } = this.props;
    const {
      resizing
    } = this.state;
    const tooltipLabel = t('RESIZE_COLUMN', {
      defaultValue: 'Resize column'
    });

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualizedListContext.ConsumerVirtualizedList, {
      children: ({
        resizeColumn
      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: (0, _classnames.default)(theme('tc-header-cell-resizable'), theme({
          'tc-header-cell-resizable-resizing': resizing
        })),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: (0, _classnames.default)(theme('tc-header-cell-resizable-truncated-text')),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderResizableContent, {
            customRender: children,
            label: label,
            dataKey: dataKey,
            sortBy: sortBy,
            sortDirection: sortDirection
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
          onClick: event => {
            event.stopPropagation();
          },
          onKeyDown: event => {
            event.stopPropagation();
          },
          className: (0, _classnames.default)(theme('tc-header-cell-resizable-drag-button')),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
            "data-testid": "resize-input-button-ally",
            className: (0, _classnames.default)(theme('tc-header-cell-resizable-drag-accessibility'), 'sr-only'),
            title: tooltipLabel,
            type: "button",
            value: tooltipLabel,
            onKeyDown: event => this.onKeyDownResizeColumn(event, resizeColumn),
            onClick: event => this.onKeyDownResizeColumn(event, resizeColumn)
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
            axis: "x",
            onStart: this.setResizing(true),
            onDrag: (_, data) => {
              resizeColumn(dataKey, data.deltaX);
            },
            onStop: this.setResizing(false),
            position: {
              x: 0
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              "data-testid": "draggable",
              className: (0, _classnames.default)(theme('tc-header-cell-resizable-drag-button-handle-icon')),
              title: tooltipLabel
            })
          })]
        })]
      }, dataKey)
    });
    /* eslint-enable jsx-a11y/no-static-element-interactions */
  }
}
exports.HeaderResizable = HeaderResizable;
HeaderResizable.propTypes = {
  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]),
  dataKey: _propTypes.default.string,
  label: _propTypes.default.string,
  sortBy: _propTypes.default.string,
  sortDirection: _propTypes.default.string,
  t: _propTypes.default.func
};
var _default = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderResizable, {
  ...props
});
exports.default = _default;
//# sourceMappingURL=HeaderResizable.component.js.map