@douyinfe/semi-ui/lib/cjs/dragMove/index.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/dragMove/foundation"));
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _reactUtils = require("../_base/reactUtils");
var _reactDom = _interopRequireDefault(require("react-dom"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class DragMove extends _baseComponent.default {
  constructor(props) {
    super(props);
    this.elementRef = /*#__PURE__*/_react.default.createRef();
    this.foundation = new _foundation.default(this.adapter);
  }
  get adapter() {
    return Object.assign(Object.assign({}, super.adapter), {
      getDragElement: () => {
        let elementDom = this.elementRef.current;
        if (!(0, _reactUtils.isHTMLElement)(elementDom)) {
          elementDom = _reactDom.default.findDOMNode(elementDom);
        }
        return elementDom;
      },
      getConstrainer: () => {
        var _a;
        const {
          constrainer
        } = this.props;
        if (typeof constrainer === 'string' && constrainer === 'parent') {
          return (_a = this.elementRef.current) === null || _a === void 0 ? void 0 : _a.parentNode;
        } else if (typeof constrainer === 'function') {
          return constrainer();
        } else {
          return null;
        }
      },
      getHandler: () => {
        const {
          handler
        } = this.props;
        if (typeof handler === 'function') {
          return handler();
        } else {
          return this.adapter.getDragElement();
        }
      },
      notifyMouseDown: e => {
        this.props.onMouseDown && this.props.onMouseDown(e);
      },
      notifyMouseMove: e => {
        this.props.onMouseMove && this.props.onMouseMove(e);
      },
      notifyMouseUp: e => {
        this.props.onMouseUp && this.props.onMouseUp(e);
      },
      notifyTouchStart: e => {
        this.props.onTouchStart && this.props.onTouchStart(e);
      },
      notifyTouchMove: e => {
        this.props.onTouchMove && this.props.onTouchMove(e);
      },
      notifyTouchEnd: e => {
        this.props.onTouchEnd && this.props.onTouchEnd(e);
      },
      notifyTouchCancel: e => {
        this.props.onTouchCancel && this.props.onTouchCancel(e);
      }
    });
  }
  componentDidMount() {
    this.foundation.init();
  }
  componentWillUnmount() {
    this.foundation.destroy();
  }
  render() {
    const {
      children
    } = this.props;
    const newChildren = /*#__PURE__*/_react.default.cloneElement(children, {
      ref: node => {
        this.elementRef.current = node;
        // Call the original ref, if any
        const {
          ref
        } = children;
        if (typeof ref === 'function') {
          ref(node);
        } else if (ref && typeof ref === 'object') {
          ref.current = node;
        }
      }
    });
    return newChildren;
  }
}
exports.default = DragMove;
DragMove.propTypes = {
  children: _propTypes.default.node,
  handler: _propTypes.default.func,
  allowInputDrag: _propTypes.default.bool,
  constrainNode: _propTypes.default.func,
  onMouseDown: _propTypes.default.func,
  onMouseMove: _propTypes.default.func,
  onMouseUp: _propTypes.default.func,
  onTouchStart: _propTypes.default.func,
  onTouchMove: _propTypes.default.func,
  onTouchEnd: _propTypes.default.func,
  onTouchCancel: _propTypes.default.func
};
DragMove.__SemiComponentName__ = "DragMove";
DragMove.defaultProps = {
  allowInputDrag: false
};