UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

295 lines (230 loc) 10.3 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper")); var React = _interopRequireWildcard(require("react")); var _reactDom = _interopRequireDefault(require("react-dom")); var _classnames = _interopRequireDefault(require("classnames")); var _clamp = _interopRequireDefault(require("lodash/clamp")); var _debounce = _interopRequireDefault(require("lodash/debounce")); var _noop = _interopRequireDefault(require("lodash/noop")); var _domLib = require("dom-lib"); var _utils = require("./utils"); var _domFns = require("./utils/domFns"); var _TableContext = _interopRequireDefault(require("./TableContext")); var _constants = require("./constants"); var _excluded = ["columnLeft", "classPrefix", "height", "className", "style", "columnFixed"]; var propTypeKeys = ['height', 'defaultColumnWidth', 'columnLeft', 'columnFixed', 'className', 'classPrefix', 'minWidth', 'style', 'onColumnResizeStart', 'onColumnResizeEnd', 'onColumnResizeMove', 'onMouseEnterHandler', 'onMouseLeaveHandler']; var ColumnResizeHandler = /*#__PURE__*/function (_React$Component) { (0, _inherits2["default"])(ColumnResizeHandler, _React$Component); var _super = (0, _createSuper2["default"])(ColumnResizeHandler); function ColumnResizeHandler(props) { var _this; (0, _classCallCheck2["default"])(this, ColumnResizeHandler); _this = _super.call(this, props); _this.columnWidth = 0; _this.cursorDelta = 0; _this.mounted = false; _this.deltaX = 0; _this.touchX = 0; _this.handleDragStart = function (e) { if (e.touches) { _this.dragging = true; _this.cursorDelta = 0; var _e$touches$ = e.touches[0], clientX = _e$touches$.clientX, clientY = _e$touches$.clientY; var client = { clientX: clientX, clientY: clientY }; _this.touchX = clientX; var onColumnResizeStart = _this.props.onColumnResizeStart; if (onColumnResizeStart) { onColumnResizeStart(client); } } var thisNode = _this.findDOMNode(); var ownerDocument = thisNode.ownerDocument; if (e.type === 'touchstart') e.preventDefault(); if (!_this.mounted) return; (0, _domFns.addEvent)(ownerDocument, 'touchmove', _this.handleDrag); (0, _domFns.addEvent)(ownerDocument, 'touchend', _this.handleDragStop); }; _this.handleDrag = function (event) { if (event.touches) { var x = event.touches[0].clientX; _this.deltaX = x - _this.touchX; _this.touchX = x; _this.onMove(_this.deltaX); } }; _this.handleDragStop = function () { if (!_this.dragging) return; _this.dragging = false; var onColumnResizeEnd = _this.props.onColumnResizeEnd; if (onColumnResizeEnd) { onColumnResizeEnd(_this.columnWidth, _this.cursorDelta); } }; _this.onMove = function (deltaX) { if (!_this.isKeyDown && !_this.dragging) { return; } var _this$props = _this.props, onColumnResizeMove = _this$props.onColumnResizeMove, defaultColumnWidth = _this$props.defaultColumnWidth, columnLeft = _this$props.columnLeft, columnFixed = _this$props.columnFixed; var rtl = _this.context.rtl; _this.cursorDelta += deltaX; _this.columnWidth = (0, _clamp["default"])( // @ts-ignore defaultColumnWidth + (rtl ? -_this.cursorDelta : _this.cursorDelta), _this.props.minWidth ? Math.max(_this.props.minWidth, _constants.RESIZE_MIN_WIDTH) : _constants.RESIZE_MIN_WIDTH, 20000); if (onColumnResizeMove) { onColumnResizeMove(_this.columnWidth, columnLeft, columnFixed); } }; _this.onColumnResizeEnd = function () { _this.isKeyDown = false; var onColumnResizeEnd = _this.props.onColumnResizeEnd; if (onColumnResizeEnd) { onColumnResizeEnd(_this.columnWidth, _this.cursorDelta); } var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this), mouseMoveTracker = _assertThisInitialize.mouseMoveTracker; if (mouseMoveTracker) { if (mouseMoveTracker.releaseMouseMoves) { mouseMoveTracker.releaseMouseMoves(); } _this.mouseMoveTracker = null; } }; _this.onColumnResizeMouseDown = function (event) { _this.mouseMoveTracker = _this.getMouseMoveTracker(); _this.mouseMoveTracker.captureMouseMoves(event); _this.isKeyDown = true; _this.cursorDelta = 0; var client = { clientX: event.clientX, clientY: event.clientY, preventDefault: Function() }; var onColumnResizeStart = _this.props.onColumnResizeStart; if (onColumnResizeStart) { onColumnResizeStart(client); } }; _this.handleShowMouseArea = (0, _debounce["default"])(function () { var _this$props$onMouseEn = _this.props.onMouseEnterHandler, onMouseEnterHandler = _this$props$onMouseEn === void 0 ? _noop["default"] : _this$props$onMouseEn; onMouseEnterHandler(); }, 300); _this.handleHideMouseArea = function () { var _this$props$onMouseLe = _this.props.onMouseLeaveHandler, onMouseLeaveHandler = _this$props$onMouseLe === void 0 ? _noop["default"] : _this$props$onMouseLe; _this.handleShowMouseArea.cancel(); onMouseLeaveHandler(); }; _this.columnWidth = props.defaultColumnWidth || 0; _this.handleRef = /*#__PURE__*/React.createRef(); return _this; } (0, _createClass2["default"])(ColumnResizeHandler, [{ key: "componentDidMount", value: function componentDidMount() { this.mounted = true; // Touch handlers must be added with {passive: false} to be cancelable. var thisNode = this.findDOMNode(); if (thisNode) { (0, _domFns.addEvent)(thisNode, 'touchstart', this.handleDragStart, { passive: false }); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.mounted = false; if (this.mouseMoveTracker) { this.mouseMoveTracker.releaseMouseMoves(); this.mouseMoveTracker = null; } var thisNode = this.findDOMNode(); if (thisNode) { var ownerDocument = thisNode.ownerDocument; (0, _domFns.removeEvent)(ownerDocument, 'touchmove', this.handleDrag); (0, _domFns.removeEvent)(ownerDocument, 'touchend', this.handleDragStop); (0, _domFns.removeEvent)(thisNode, 'touchstart', this.handleDragStart, { passive: false }); } } // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find // the underlying DOM node ourselves. See the README for more information. }, { key: "findDOMNode", value: function findDOMNode() { var handleRef = this.handleRef; return handleRef && handleRef.current || _reactDom["default"].findDOMNode(this); } }, { key: "getMouseMoveTracker", value: function getMouseMoveTracker() { return this.mouseMoveTracker || new _domLib.DOMMouseMoveTracker(this.onMove, this.onColumnResizeEnd, document.body); } }, { key: "render", value: function render() { var _objectSpread2; var _this$props2 = this.props, _this$props2$columnLe = _this$props2.columnLeft, columnLeft = _this$props2$columnLe === void 0 ? 0 : _this$props2$columnLe, classPrefix = _this$props2.classPrefix, height = _this$props2.height, className = _this$props2.className, style = _this$props2.style, columnFixed = _this$props2.columnFixed, rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded); if (columnFixed === 'right') { return null; } var rtl = this.context.rtl; var styles = (0, _objectSpread3["default"])((_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, rtl ? 'right' : 'left', this.columnWidth + columnLeft - 2), (0, _defineProperty2["default"])(_objectSpread2, "height", height), _objectSpread2), style); var classes = (0, _classnames["default"])(classPrefix, className); var unhandled = (0, _utils.getUnhandledProps)(propTypeKeys, rest); return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, unhandled, { ref: this.handleRef, className: classes, style: styles, onMouseDown: this.onColumnResizeMouseDown, onTouchEnd: this.handleDragStop, onMouseEnter: this.handleShowMouseArea, onMouseLeave: this.handleHideMouseArea, role: "button", tabIndex: -1 })); } }], [{ key: "contextType", get: function get() { return _TableContext["default"]; } }]); return ColumnResizeHandler; }(React.Component); ColumnResizeHandler.defaultProps = { classPrefix: (0, _utils.defaultClassPrefix)('performance-table-column-resize-spanner') }; var _default = ColumnResizeHandler; exports["default"] = _default; //# sourceMappingURL=ColumnResizeHandler.js.map