@wix/design-system/dist/cjs/Table/components/TableResizeHandle/TableResizeHandle.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _TableResizeHandleSt = require("./TableResizeHandle.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/components/TableResizeHandle/TableResizeHandle.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var TableResizeHandle = _ref => {
  var onResize = _ref.onResize,
    onResizeStart = _ref.onResizeStart,
    onResizeEnd = _ref.onResizeEnd,
    columnId = _ref.columnId,
    currentWidth = _ref.currentWidth,
    dataHook = _ref.dataHook,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$skin = _ref.skin,
    skin = _ref$skin === void 0 ? 'standard' : _ref$skin;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isDragging = _useState2[0],
    setIsDragging = _useState2[1];
  var _useState3 = (0, _react.useState)(0),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    dragStartX = _useState4[0],
    setDragStartX = _useState4[1];
  var _useState5 = (0, _react.useState)(0),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    dragStartWidth = _useState6[0],
    setDragStartWidth = _useState6[1];
  var throttledOnResize = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    throttledOnResize.current = (0, _throttle.default)((columnId, desiredNewWidth) => {
      onResize(columnId, desiredNewWidth);
    }, 20);
    return () => {
      var _throttledOnResize$cu;
      (_throttledOnResize$cu = throttledOnResize.current) == null || _throttledOnResize$cu.cancel();
    };
  }, [onResize]);
  (0, _react.useEffect)(() => {
    if (isDragging) {
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
    } else {
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    }
    return () => {
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
  }, [isDragging]);
  (0, _react.useEffect)(() => {
    var handleMouseMove = e => {
      if (!isDragging) return;

      // Calculate how far the mouse has moved from the initial drag position
      var mouseDeltaX = e.clientX - dragStartX;

      // Calculate the desired new width based on original width + mouse movement
      var desiredNewWidth = dragStartWidth + mouseDeltaX;
      throttledOnResize.current(columnId, desiredNewWidth);
    };
    var handleMouseUp = e => {
      if (isDragging) {
        setIsDragging(false);

        // Flush any pending throttled calls to ensure final state is accurate
        throttledOnResize.current.flush();
        if (onResizeEnd) {
          onResizeEnd(columnId, e);
        }
      }
    };
    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }
    return () => {
      var _throttledOnResize$cu2;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      // Cancel any pending throttled calls on cleanup
      (_throttledOnResize$cu2 = throttledOnResize.current) == null || _throttledOnResize$cu2.cancel();
    };
  }, [isDragging, dragStartX, dragStartWidth, columnId, onResizeEnd]);
  var handleMouseDown = e => {
    if (disabled) return;
    e.preventDefault();
    e.stopPropagation();
    setDragStartX(e.clientX);
    setDragStartWidth(currentWidth);
    setIsDragging(true);
    if (onResizeStart) {
      onResizeStart(columnId, e.nativeEvent);
    }
  };
  var blockClickEvents = e => {
    e.preventDefault();
    e.stopPropagation();
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)({
      [_TableResizeHandleSt.classes.dragging]: isDragging,
      [_TableResizeHandleSt.classes.disabled]: disabled,
      [_TableResizeHandleSt.classes.resizeHandle]: !disabled,
      [_TableResizeHandleSt.classes.skinStandard]: !skin || skin === 'standard',
      [_TableResizeHandleSt.classes.skinNeutral]: skin === 'neutral'
    }),
    onMouseDown: handleMouseDown,
    onClick: blockClickEvents,
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 123,
      columnNumber: 5
    }
  });
};
var _default = exports.default = TableResizeHandle;
//# sourceMappingURL=TableResizeHandle.js.map