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

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _qtPublicHooks = require("qt-public-hooks");
var _utils = require("./utils");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
require("./style");
var _excluded = ["className", "width", "height", "initialHeight", "initialWidth", "dragable", "footer"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var size = placement === 'left' || placement === 'right' ? initialWidth : initialHeight;
  var _useState = (0, _react.useState)(0),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    dragOffset = _useState2[0],
    setOffset = _useState2[1];
  var _useState3 = (0, _react.useState)(size || BASE_SIZE),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    prevSize = _useState4[0],
    setPrevSize = _useState4[1];
  var _useDrag = (0, _qtPublicHooks.useDrag)(),
    _useDrag2 = (0, _slicedToArray2["default"])(_useDrag, 3),
    dragStatus = _useDrag2[0],
    dragPos = _useDrag2[1],
    dragRef = _useDrag2[2];
  (0, _react.useLayoutEffect)(function () {
    var offset = (0, _utils.clacOffset)(dragPos.start, dragPos.end, placement);
    setOffset(offset);
    if (dragStatus === 'dragend') {
      var validSize = (0, _utils.getValidSize)(prevSize + dragOffset, placement, props.dragRange);
      setPrevSize(validSize);
      setOffset(0);
    }
  }, [dragPos, dragStatus]);
  return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, (0, _extends2["default"])({
    className: (0, _classnames["default"])('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 ? (0, _utils.getValidSize)(prevSize + dragOffset, placement, props.dragRange) : width,
    height: dragable ? (0, _utils.getValidSize)(prevSize + dragOffset, placement, props.dragRange) : height
  }, resetProps), /*#__PURE__*/_react["default"].createElement("img", {
    src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
    style: {
      display: 'none'
    }
  }), props.children, props.visible && dragable && /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-drawer-drager umui-".concat(placement),
    draggable: "true",
    ref: dragRef,
    onDragStart: function onDragStart(event) {
      return event.dataTransfer.setData('text/plain', '');
    }
  }), footer && /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-drawer-footer"
  }, footer));
};
DragDrawer.displayName = 'DragDrawer';
var _default = exports["default"] = DragDrawer;