@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 _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,
    onResizeStart,
    onResizeEnd,
    columnId,
    currentWidth,
    dataHook,
    disabled = false,
    skin = 'standard'
  } = _ref;
  var [isDragging, setIsDragging] = (0, _react.useState)(false);
  var [dragStartX, setDragStartX] = (0, _react.useState)(0);
  var [dragStartWidth, setDragStartWidth] = (0, _react.useState)(0);
  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: 129,
      columnNumber: 5
    }
  });
};
var _default = exports.default = TableResizeHandle;
//# sourceMappingURL=TableResizeHandle.js.map