qt-public-ui/es/DragDrawer/index.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["className", "width", "height", "initialHeight", "initialWidth", "dragable", "footer"];
import React, { useState, useLayoutEffect } from 'react';
import { useDrag } from 'qt-public-hooks';
import { getValidSize, clacOffset } from './utils';
import { Drawer } from 'antd';
import classnames from 'classnames';
import './style';
var BASE_SIZE = 256;
var DragDrawer = function DragDrawer(props) {
  var placement = props.placement || 'right';
  var className = props.className,
    width = props.width,
    height = props.height,
    initialHeight = props.initialHeight,
    initialWidth = props.initialWidth,
    dragable = props.dragable,
    footer = props.footer,
    resetProps = _objectWithoutPropertiesLoose(props, _excluded);
  var size = placement === 'left' || placement === 'right' ? initialWidth : initialHeight;
  var _useState = useState(0),
    dragOffset = _useState[0],
    setOffset = _useState[1];
  var _useState2 = useState(size || BASE_SIZE),
    prevSize = _useState2[0],
    setPrevSize = _useState2[1];
  var _useDrag = useDrag(),
    dragStatus = _useDrag[0],
    dragPos = _useDrag[1],
    dragRef = _useDrag[2];
  useLayoutEffect(function () {
    var offset = clacOffset(dragPos.start, dragPos.end, placement);
    setOffset(offset);
    if (dragStatus === 'dragend') {
      var validSize = getValidSize(prevSize + dragOffset, placement, props.dragRange);
      setPrevSize(validSize);
      setOffset(0);
    }
  }, [dragPos, dragStatus]);
  return /*#__PURE__*/React.createElement(Drawer, _extends({
    className: classnames('umui-drawer', className, {
      'umui-draggable-drawer': dragable,
      'umui-has-footer': !!footer && !resetProps.title,
      'umui-has-title': !!resetProps.title && !footer,
      'umui-has-title-footer': !!footer && !!resetProps.title
    }),
    placement: placement,
    width: dragable ? getValidSize(prevSize + dragOffset, placement, props.dragRange) : width,
    height: dragable ? getValidSize(prevSize + dragOffset, placement, props.dragRange) : height
  }, resetProps), /*#__PURE__*/React.createElement("img", {
    src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
    style: {
      display: 'none'
    }
  }), props.children, props.visible && dragable && /*#__PURE__*/React.createElement("div", {
    className: "umui-drawer-drager umui-" + placement,
    draggable: "true",
    ref: dragRef,
    onDragStart: function onDragStart(event) {
      return event.dataTransfer.setData('text/plain', '');
    }
  }), footer && /*#__PURE__*/React.createElement("div", {
    className: "umui-drawer-footer"
  }, footer));
};
DragDrawer.displayName = 'DragDrawer';
export default DragDrawer;