vantui-edit/es/popup/index.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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 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) { _defineProperty(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; }

/* eslint-disable react/prop-types */
import { View } from '@tarojs/components';
import { useState, useEffect, useCallback } from 'react';
import * as utils from '../wxs/utils';
import VanIcon from './../icon';
import * as computed from './wxs';
import { useTransition } from './../mixins/transition';
import VanOverlay from './../overlay';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";

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 = _objectWithoutProperties(props, _excluded);

  var _onAfterLeave = 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 = useCallback(function () {
    onClose === null || onClose === void 0 ? void 0 : onClose();
  }, [onClose]);

  var _useTransition = 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 = useCallback(function (name) {
    return name.replace(/([A-Z])/g, function (_, $1) {
      return '-' + ($1 === null || $1 === void 0 ? void 0 : $1.toLowerCase());
    });
  }, []);
  return /*#__PURE__*/_jsx(_Fragment, {
    children: inited && /*#__PURE__*/_jsxs(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
      _jsx(VanIcon, {
        name: closeIcon,
        className: 'close-icon-class van-popup__close-icon van-popup__close-icon--' + getClassName(closeIconPosition),
        onClick: _onClickCloseIcon
      })]
    }))
  });
}

export 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 = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      innerShow = _useState2[0],
      setInnerShow = _useState2[1];

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

  var _onClickOverlay = 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__*/_jsxs(View, {
    children: [/*#__PURE__*/_jsx(View, {
      children: overlay && /*#__PURE__*/_jsx(VanOverlay, {
        show: show,
        zIndex: zIndex,
        style: overlayStyle,
        duration: duration,
        onClick: _onClickOverlay,
        lockScroll: lockScroll
      })
    }), /*#__PURE__*/_jsx(View, {
      children: innerShow ? /*#__PURE__*/_jsx(PopupInner, _objectSpread({
        setOuterShow: setInnerShow
      }, props)) : /*#__PURE__*/_jsx(_Fragment, {})
    })]
  });
}
export default Popup;