vantui-edit/lib/popup/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Popup = Popup;
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _components = require("@tarojs/components");

var _react = require("react");

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _icon = _interopRequireDefault(require("./../icon"));

var computed = _interopRequireWildcard(require("./wxs"));

var _transition = require("./../mixins/transition");

var _overlay = _interopRequireDefault(require("./../overlay"));

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["show", "duration", "round", "closeable", "transition", "zIndex", "closeIcon", "closeIconPosition", "position", "safeAreaInsetBottom", "safeAreaInsetTop", "children", "onBeforeEnter", "onBeforeLeave", "onAfterEnter", "onAfterLeave", "onEnter", "onLeave", "onClose", "setOuterShow", "style", "className"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function PopupInner(props) {
  var show = props.show,
      _props$duration = props.duration,
      duration = _props$duration === void 0 ? 300 : _props$duration,
      round = props.round,
      closeable = props.closeable,
      transition = props.transition,
      zIndex = props.zIndex,
      _props$closeIcon = props.closeIcon,
      closeIcon = _props$closeIcon === void 0 ? 'cross' : _props$closeIcon,
      _props$closeIconPosit = props.closeIconPosition,
      closeIconPosition = _props$closeIconPosit === void 0 ? 'top-right' : _props$closeIconPosit,
      _props$position = props.position,
      position = _props$position === void 0 ? 'center' : _props$position,
      _props$safeAreaInsetB = props.safeAreaInsetBottom,
      safeAreaInsetBottom = _props$safeAreaInsetB === void 0 ? true : _props$safeAreaInsetB,
      _props$safeAreaInsetT = props.safeAreaInsetTop,
      safeAreaInsetTop = _props$safeAreaInsetT === void 0 ? false : _props$safeAreaInsetT,
      children = props.children,
      onBeforeEnter = props.onBeforeEnter,
      onBeforeLeave = props.onBeforeLeave,
      onAfterEnter = props.onAfterEnter,
      onAfterLeave = props.onAfterLeave,
      onEnter = props.onEnter,
      onLeave = props.onLeave,
      onClose = props.onClose,
      setOuterShow = props.setOuterShow,
      style = props.style,
      className = props.className,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);

  var _onAfterLeave = (0, _react.useCallback)(function () {
    onAfterLeave === null || onAfterLeave === void 0 ? void 0 : onAfterLeave();
    setTimeout(function () {
      setOuterShow === null || setOuterShow === void 0 ? void 0 : setOuterShow(false);
    }, 0);
  }, [onAfterLeave, setOuterShow]);

  var _onClickCloseIcon = (0, _react.useCallback)(function () {
    onClose === null || onClose === void 0 ? void 0 : onClose();
  }, [onClose]);

  var _useTransition = (0, _transition.useTransition)({
    show: show,
    duration: transition === 'none' ? 0 : duration,
    name: transition || position,
    onBeforeEnter: onBeforeEnter,
    onBeforeLeave: onBeforeLeave,
    onAfterEnter: onAfterEnter,
    onAfterLeave: _onAfterLeave,
    onEnter: onEnter,
    onLeave: onLeave
  }),
      inited = _useTransition.inited,
      currentDuration = _useTransition.currentDuration,
      classes = _useTransition.classes,
      display = _useTransition.display,
      onTransitionEnd = _useTransition.onTransitionEnd;

  var getClassName = (0, _react.useCallback)(function (name) {
    return name.replace(/([A-Z])/g, function (_, $1) {
      return '-' + ($1 === null || $1 === void 0 ? void 0 : $1.toLowerCase());
    });
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: inited && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
      className: classes + ' ' + utils.bem('popup', [position, {
        round: round,
        safe: safeAreaInsetBottom,
        safeTop: safeAreaInsetTop
      }]) + "  ".concat(className || ''),
      style: utils.style([computed.popupStyle({
        zIndex: zIndex,
        currentDuration: currentDuration,
        display: display
      }), style]),
      onTransitionEnd: onTransitionEnd
    }, others), {}, {
      children: [children, closeable &&
      /*#__PURE__*/
      // @ts-check
      (0, _jsxRuntime.jsx)(_icon.default, {
        name: closeIcon,
        className: 'close-icon-class van-popup__close-icon van-popup__close-icon--' + getClassName(closeIconPosition),
        onClick: _onClickCloseIcon
      })]
    }))
  });
}

function Popup(props) {
  var show = props.show,
      _props$duration2 = props.duration,
      duration = _props$duration2 === void 0 ? 300 : _props$duration2,
      zIndex = props.zIndex,
      _props$overlay = props.overlay,
      overlay = _props$overlay === void 0 ? true : _props$overlay,
      _props$lockScroll = props.lockScroll,
      lockScroll = _props$lockScroll === void 0 ? true : _props$lockScroll,
      overlayStyle = props.overlayStyle,
      _props$closeOnClickOv = props.closeOnClickOverlay,
      closeOnClickOverlay = _props$closeOnClickOv === void 0 ? true : _props$closeOnClickOv,
      onClickOverlay = props.onClickOverlay,
      onClose = props.onClose;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      innerShow = _useState2[0],
      setInnerShow = _useState2[1];

  (0, _react.useEffect)(function () {
    if (show) {
      setInnerShow(true);
    }
  }, [show]);

  var _onClickOverlay = (0, _react.useCallback)(function () {
    onClickOverlay === null || onClickOverlay === void 0 ? void 0 : onClickOverlay();

    if (closeOnClickOverlay) {
      onClose === null || onClose === void 0 ? void 0 : onClose();
    }
  }, [closeOnClickOverlay, onClickOverlay, onClose]);

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      children: overlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlay.default, {
        show: show,
        zIndex: zIndex,
        style: overlayStyle,
        duration: duration,
        onClick: _onClickOverlay,
        lockScroll: lockScroll
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      children: innerShow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupInner, _objectSpread({
        setOuterShow: setInnerShow
      }, props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})
    })]
  });
}

var _default = Popup;
exports.default = _default;