gui-one-nutui-react-taro/dist/esm/overlay.taro-be45fed5.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "zIndex", "duration", "overlayClass", "closeOnClickOverlay", "visible", "lockScroll", "overlayStyle"];
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; }
import React__default, { useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import { c as cn } from './bem-893ad28d.js';
var defaultOverlayProps = {
  zIndex: 2000,
  duration: 0.3,
  overlayClass: '',
  closeOnClickOverlay: true,
  visible: false,
  lockScroll: true,
  overlayStyle: {}
};
var Overlay = function Overlay(props) {
  var _defaultOverlayProps$ = _objectSpread(_objectSpread({}, defaultOverlayProps), props),
    children = _defaultOverlayProps$.children,
    zIndex = _defaultOverlayProps$.zIndex,
    duration = _defaultOverlayProps$.duration,
    overlayClass = _defaultOverlayProps$.overlayClass,
    closeOnClickOverlay = _defaultOverlayProps$.closeOnClickOverlay,
    visible = _defaultOverlayProps$.visible,
    lockScroll = _defaultOverlayProps$.lockScroll,
    overlayStyle = _defaultOverlayProps$.overlayStyle,
    rest = _objectWithoutProperties(_defaultOverlayProps$, _excluded);
  var _useState = useState(visible),
    _useState2 = _slicedToArray(_useState, 2),
    show = _useState2[0],
    setShow = _useState2[1];
  var renderRef = useRef(true);
  var intervalRef = useRef(0);
  useEffect(function () {
    visible && setShow(visible);
    lock();
  }, [visible]);
  useEffect(function () {
    return function () {
      clearTimeout(intervalRef.current);
      document.body.classList.remove('nut-overflow-hidden');
    };
  }, []);
  var b = cn('overlay');
  var classes = classNames({
    'overlay-fade-leave-active': !renderRef.current && !visible,
    'overlay-fade-enter-active': visible,
    'first-render': renderRef.current && !visible,
    'hidden-render': !visible
  }, overlayClass, b(''));
  var styles = _objectSpread({
    zIndex: zIndex,
    animationDuration: "".concat(props.duration, "s")
  }, overlayStyle);
  var lock = function lock() {
    if (lockScroll && visible) {
      document.body.classList.add('nut-overflow-hidden');
    } else {
      document.body.classList.remove('nut-overflow-hidden');
    }
  };
  var handleClick = function handleClick(e) {
    if (closeOnClickOverlay) {
      props.onClick && props.onClick(e);
      renderRef.current = false;
      var id = setTimeout(function () {
        setShow(!visible);
      }, duration * 1000 * 0.8);
      intervalRef.current = id;
    }
  };
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _objectSpread(_objectSpread({
    className: classes,
    style: styles
  }, rest), {}, {
    onClick: handleClick
  }), children));
};
Overlay.defaultProps = defaultOverlayProps;
Overlay.displayName = 'NutOverlay';
export { Overlay as O, defaultOverlayProps as d };