@douyinfe/semi-ui/lib/es/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.

import DragMoveFoundation from '@douyinfe/semi-foundation/lib/es/dragMove/foundation';
import BaseComponent from '../_base/baseComponent';
import PropTypes from 'prop-types';
import React from 'react';
import { isHTMLElement } from '../_base/reactUtils';
import { resolveDOM, getRef } from '../_utils/reactRender';
export default class DragMove extends BaseComponent {
  constructor(props) {
    super(props);
    this.elementRef = /*#__PURE__*/React.createRef();
    this.foundation = new DragMoveFoundation(this.adapter);
  }
  get adapter() {
    return Object.assign(Object.assign({}, super.adapter), {
      getDragElement: () => {
        let elementDom = this.elementRef.current;
        if (!isHTMLElement(elementDom)) {
          elementDom = resolveDOM(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.cloneElement(children, {
      ref: node => {
        this.elementRef.current = node;
        const ref = getRef(children);
        if (typeof ref === 'function') {
          ref(node);
        } else if (ref && typeof ref === 'object') {
          ref.current = node;
        }
      }
    });
    return newChildren;
  }
}
DragMove.propTypes = {
  children: PropTypes.node,
  handler: PropTypes.func,
  allowInputDrag: PropTypes.bool,
  constrainNode: PropTypes.func,
  constrainer: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['parent'])]),
  allowMove: PropTypes.func,
  customMove: PropTypes.func,
  onMouseDown: PropTypes.func,
  onMouseMove: PropTypes.func,
  onMouseUp: PropTypes.func,
  onTouchStart: PropTypes.func,
  onTouchMove: PropTypes.func,
  onTouchEnd: PropTypes.func,
  onTouchCancel: PropTypes.func
};
DragMove.__SemiComponentName__ = "DragMove";
DragMove.defaultProps = {
  allowInputDrag: false
};