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

Set of react components.

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 */
import { Component } from 'react';
import Draggable from 'react-draggable';
import { defaultTableHeaderRenderer } from 'react-virtualized';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { getTheme } from '../../theme';
import getDefaultT from '../../translate';
import { ConsumerVirtualizedList } from '../virtualizedListContext';
import headerResizableCssModule from './HeaderResizable.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const theme = getTheme(headerResizableCssModule);

// eslint-disable-next-line react/prop-types
const HeaderResizableContent = ({
  customRender,
  ...rest
}) => {
  if (customRender) {
    return customRender;
  } else if (rest.label) {
    return defaultTableHeaderRenderer(rest);
  }
  return null;
};
export class HeaderResizable extends 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 = getDefaultT()
    } = this.props;
    const {
      resizing
    } = this.state;
    const tooltipLabel = t('RESIZE_COLUMN', {
      defaultValue: 'Resize column'
    });

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    return /*#__PURE__*/_jsx(ConsumerVirtualizedList, {
      children: ({
        resizeColumn
      }) => /*#__PURE__*/_jsxs("div", {
        className: classNames(theme('tc-header-cell-resizable'), theme({
          'tc-header-cell-resizable-resizing': resizing
        })),
        children: [/*#__PURE__*/_jsx("div", {
          className: classNames(theme('tc-header-cell-resizable-truncated-text')),
          children: /*#__PURE__*/_jsx(HeaderResizableContent, {
            customRender: children,
            label: label,
            dataKey: dataKey,
            sortBy: sortBy,
            sortDirection: sortDirection
          })
        }), /*#__PURE__*/_jsxs("span", {
          onClick: event => {
            event.stopPropagation();
          },
          onKeyDown: event => {
            event.stopPropagation();
          },
          className: classNames(theme('tc-header-cell-resizable-drag-button')),
          children: [/*#__PURE__*/_jsx("input", {
            "data-testid": "resize-input-button-ally",
            className: classNames(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__*/_jsx(Draggable, {
            axis: "x",
            onStart: this.setResizing(true),
            onDrag: (_, data) => {
              resizeColumn(dataKey, data.deltaX);
            },
            onStop: this.setResizing(false),
            position: {
              x: 0
            },
            children: /*#__PURE__*/_jsx("div", {
              "data-testid": "draggable",
              className: classNames(theme('tc-header-cell-resizable-drag-button-handle-icon')),
              title: tooltipLabel
            })
          })]
        })]
      }, dataKey)
    });
    /* eslint-enable jsx-a11y/no-static-element-interactions */
  }
}
HeaderResizable.propTypes = {
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
  dataKey: PropTypes.string,
  label: PropTypes.string,
  sortBy: PropTypes.string,
  sortDirection: PropTypes.string,
  t: PropTypes.func
};
export default props => /*#__PURE__*/_jsx(HeaderResizable, {
  ...props
});
//# sourceMappingURL=HeaderResizable.component.js.map