@nutui/nutui-react 2.3.12-beta.0 → 2.3.12

package/dist/esm/Toast.js

@@ -1,186 +1,117 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
-function _isNativeReflectConstruct() {
-  try {
-    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
-    }));
-  } catch (t2) {
-  }
-  return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
-    return !!t;
-  })();
-}
 import * as React from "react";
 import classNames from "classnames";
 import { Tips, Failure, Loading, Check } from "@nutui/icons-react";
 import { r as render, u as unmount } from "./render.js";
 import { O as Overlay } from "./overlay2.js";
 import { C as ComponentDefaults } from "./typings.js";
-var classPrefix = "nut-toast";
-var Notification = /* @__PURE__ */ function(_React$PureComponent) {
-  _inherits(Notification2, _React$PureComponent);
-  function Notification2(props) {
-    var _this;
-    _classCallCheck(this, Notification2);
-    _this = _callSuper(this, Notification2, [props]);
-    _defineProperty(_assertThisInitialized(_this), "closeTimer", void 0);
-    _this.close = _this.close.bind(_assertThisInitialized(_this));
-    _this.startCloseTimer = _this.startCloseTimer.bind(_assertThisInitialized(_this));
-    _this.clearCloseTimer = _this.clearCloseTimer.bind(_assertThisInitialized(_this));
-    _this.clickCover = _this.clickCover.bind(_assertThisInitialized(_this));
-    _this.state = {
+const classPrefix = "nut-toast";
+class Notification extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.close = this.close.bind(this);
+    this.startCloseTimer = this.startCloseTimer.bind(this);
+    this.clearCloseTimer = this.clearCloseTimer.bind(this);
+    this.clickCover = this.clickCover.bind(this);
+    this.state = {
       show: true
     };
-    return _this;
   }
-  _createClass(Notification2, [{
-    key: "close",
-    value: function close() {
-      this.setState({
-        show: false
-      });
-      this.clearCloseTimer();
-      if (this.props.id) {
-        var element = document.getElementById(this.props.id);
-        element && element.parentNode && element.parentNode.removeChild(element);
-      }
-      this.props.onClose();
-    }
-  }, {
-    key: "startCloseTimer",
-    value: function startCloseTimer() {
-      var _this2 = this;
-      var duration = this.props.duration;
-      if (duration) {
-        this.closeTimer = window.setTimeout(function() {
-          _this2.close();
-        }, duration * 1e3);
-      }
-    }
-  }, {
-    key: "clearCloseTimer",
-    value: function clearCloseTimer() {
-      if (this.closeTimer) {
-        clearTimeout(this.closeTimer);
-        this.closeTimer = -1;
-      }
+  close() {
+    this.setState({
+      show: false
+    });
+    this.clearCloseTimer();
+    if (this.props.id) {
+      const element = document.getElementById(this.props.id);
+      element && element.parentNode && element.parentNode.removeChild(element);
     }
-  }, {
-    key: "clickCover",
-    value: function clickCover() {
-      var closeOnOverlayClick = this.props.closeOnOverlayClick;
-      if (closeOnOverlayClick) {
+    this.props.onClose();
+  }
+  startCloseTimer() {
+    const { duration } = this.props;
+    if (duration) {
+      this.closeTimer = window.setTimeout(() => {
         this.close();
-      }
-    }
-  }, {
-    key: "renderIcon",
-    value: function renderIcon() {
-      var icon = this.props.icon;
-      if (typeof icon === "string") {
-        var iconNode = null;
-        switch (icon) {
-          case "success":
-            iconNode = React.createElement(Check, null);
-            break;
-          case "loading":
-            iconNode = React.createElement(Loading, {
-              className: "nut-icon-loading"
-            });
-            break;
-          case "fail":
-            iconNode = React.createElement(Failure, null);
-            break;
-          case "warn":
-            iconNode = React.createElement(Tips, null);
-            break;
-        }
-        return React.createElement("p", {
-          className: "".concat(classPrefix, "-icon-wrapper")
-        }, iconNode);
-      }
-      return icon;
+      }, duration * 1e3);
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.startCloseTimer();
+  }
+  clearCloseTimer() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = -1;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearCloseTimer();
+  }
+  clickCover() {
+    const { closeOnOverlayClick } = this.props;
+    if (closeOnOverlayClick) {
+      this.close();
     }
-  }, {
-    key: "render",
-    value: function render2() {
-      var _this3 = this;
-      var _this$props = this.props, id = _this$props.id, icon = _this$props.icon, title = _this$props.title, content = _this$props.content, position = _this$props.position, size = _this$props.size, closeOnOverlayClick = _this$props.closeOnOverlayClick, lockScroll = _this$props.lockScroll, style = _this$props.style, className = _this$props.className, contentClassName = _this$props.contentClassName, contentStyle = _this$props.contentStyle, wordBreak = _this$props.wordBreak;
-      var show2 = this.state.show;
-      var classes = classNames(_defineProperty({
-        "nut-toast-has-icon": icon
-      }, "nut-toast-".concat(size), true));
-      return React.createElement(React.Fragment, null, React.createElement(Overlay, {
-        visible: show2,
-        style,
-        className: "".concat(classPrefix, "-overlay-default ").concat(className),
-        onClick: function onClick() {
-          _this3.clickCover();
-        },
-        closeOnOverlayClick,
-        lockScroll
-      }, React.createElement("div", {
-        className: "".concat(classPrefix, " ").concat(classes),
-        id: "toast-".concat(id)
-      }, React.createElement("div", {
-        className: "".concat(classPrefix, "-inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName, " ").concat(wordBreak),
-        style: contentStyle
-      }, this.renderIcon(), title ? React.createElement("div", {
-        className: "".concat(classPrefix, "-title")
-      }, title) : null, React.createElement("span", {
-        className: "".concat(classPrefix, "-text")
-      }, content)))));
+  }
+  renderIcon() {
+    const { icon } = this.props;
+    if (typeof icon === "string") {
+      let iconNode = null;
+      switch (icon) {
+        case "success":
+          iconNode = React.createElement(Check, null);
+          break;
+        case "loading":
+          iconNode = React.createElement(Loading, { className: "nut-icon-loading" });
+          break;
+        case "fail":
+          iconNode = React.createElement(Failure, null);
+          break;
+        case "warn":
+          iconNode = React.createElement(Tips, null);
+          break;
+      }
+      return React.createElement("p", { className: `${classPrefix}-icon-wrapper` }, iconNode);
     }
-  }]);
-  return Notification2;
-}(React.PureComponent);
-_defineProperty(Notification, "newInstance", void 0);
-Notification.newInstance = function(properties, callback) {
-  var element = document.createElement("div");
-  var id = properties.id ? properties.id : "".concat((/* @__PURE__ */ new Date()).getTime());
+    return icon;
+  }
+  componentDidMount() {
+    this.startCloseTimer();
+  }
+  componentWillUnmount() {
+    this.clearCloseTimer();
+  }
+  render() {
+    const { id, icon, title, content, position, size, closeOnOverlayClick, lockScroll, style, className, contentClassName, contentStyle, wordBreak } = this.props;
+    const { show: show2 } = this.state;
+    const classes = classNames({
+      "nut-toast-has-icon": icon,
+      [`nut-toast-${size}`]: true
+    });
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        Overlay,
+        { visible: show2, style, className: `${classPrefix}-overlay-default ${className}`, onClick: () => {
+          this.clickCover();
+        }, closeOnOverlayClick, lockScroll },
+        React.createElement(
+          "div",
+          { className: `${classPrefix} ${classes}`, id: `toast-${id}` },
+          React.createElement(
+            "div",
+            { className: `${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`, style: contentStyle },
+            this.renderIcon(),
+            title ? React.createElement("div", { className: `${classPrefix}-title` }, title) : null,
+            React.createElement("span", { className: `${classPrefix}-text` }, content)
+          )
+        )
+      )
+    );
+  }
+}
+Notification.newInstance = (properties, callback) => {
+  const element = document.createElement("div");
+  const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
   element.id = id;
   properties.id = id;
   document.body.appendChild(element);
-  var called = false;
+  let called = false;
   function ref(instance) {
     if (called) {
       return;
@@ -188,37 +119,23 @@ Notification.newInstance = function(properties, callback) {
     called = true;
     callback({
       component: instance,
-      destroy: function destroy() {
+      destroy() {
         unmount(element);
         element && element.parentNode && element.parentNode.removeChild(element);
       }
     });
   }
-  render(React.createElement(Notification, _objectSpread(_objectSpread({}, properties), {}, {
-    ref
-  })), element);
+  render(React.createElement(Notification, Object.assign({}, properties, { ref })), element);
 };
-var messageInstance = null;
-var options = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  id: "",
-  duration: 2,
-  position: "center",
-  title: "",
-  size: "base",
-  icon: null,
-  onClose: function onClose() {
-  },
-  closeOnOverlayClick: false,
-  lockScroll: false,
-  contentClassName: "",
-  wordBreak: "break-all"
-});
+let messageInstance = null;
+let options = Object.assign(Object.assign({}, ComponentDefaults), { id: "", duration: 2, position: "center", title: "", size: "base", icon: null, onClose: () => {
+}, closeOnOverlayClick: false, lockScroll: false, contentClassName: "", wordBreak: "break-all" });
 function getInstance(props, callback) {
   if (messageInstance) {
     messageInstance.destroy();
     messageInstance = null;
   }
-  Notification.newInstance(props, function(notification) {
+  Notification.newInstance(props, (notification) => {
     return callback && callback(notification);
   });
 }
@@ -230,14 +147,12 @@ function notice(opts) {
       opts.onClose && opts.onClose();
     }
   }
-  var opts2 = _objectSpread(_objectSpread(_objectSpread({}, options), opts), {}, {
-    onClose: close
-  });
-  getInstance(opts2, function(notification) {
+  const opts2 = Object.assign(Object.assign(Object.assign({}, options), opts), { onClose: close });
+  getInstance(opts2, (notification) => {
     messageInstance = notification;
   });
 }
-var errorMsg = function errorMsg2(msg) {
+const errorMsg = (msg) => {
   if (!msg) {
     console.warn("[NutUI Toast]: msg cannot be null");
   }
@@ -245,20 +160,18 @@ var errorMsg = function errorMsg2(msg) {
 function show(option) {
   if (typeof option === "string") {
     errorMsg(option);
-    return notice({
-      content: option
-    });
+    return notice({ content: option });
   }
   errorMsg(option.content);
-  return notice(_objectSpread({}, option));
+  return notice(Object.assign({}, option));
 }
 function config(config2) {
-  options = _objectSpread(_objectSpread({}, options), config2);
+  options = Object.assign(Object.assign({}, options), config2);
 }
-var Toast = {
+const Toast = {
   show,
   config,
-  clear: function clear() {
+  clear() {
     if (messageInstance) {
       messageInstance.destroy();
       messageInstance = null;

package/dist/esm/Tour.js

@@ -1,28 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "title", "closeOnOverlayClick", "showPrev", "list", "type", "location", "visible", "mask", "maskWidth", "maskHeight", "offset", "next", "prev", "complete", "onClose", "onChange"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { useState, useEffect } from "react";
 import { Close } from "@nutui/icons-react";
 import classNames from "classnames";
@@ -30,38 +6,24 @@ import Popover from "./Popover.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { useConfig } from "./ConfigProvider.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  visible: false,
-  type: "step",
-  location: "bottom",
-  mask: true,
-  maskWidth: "",
-  maskHeight: "",
-  offset: [8, 10],
-  title: "",
-  next: "",
-  prev: "",
-  complete: "",
-  showPrev: true,
-  closeOnOverlayClick: true
-});
-var classPrefix = "nut-tour";
-var Tour = function Tour2(props) {
-  var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, title = _defaultProps$props.title, closeOnOverlayClick = _defaultProps$props.closeOnOverlayClick, showPrev = _defaultProps$props.showPrev, list = _defaultProps$props.list, type = _defaultProps$props.type, location = _defaultProps$props.location, visible = _defaultProps$props.visible, mask = _defaultProps$props.mask, maskWidth = _defaultProps$props.maskWidth, maskHeight = _defaultProps$props.maskHeight, offset = _defaultProps$props.offset, next = _defaultProps$props.next, prev = _defaultProps$props.prev, complete = _defaultProps$props.complete, onClose = _defaultProps$props.onClose, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), showTour = _useState2[0], setShowTour = _useState2[1];
-  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), showPopup = _useState4[0], setShowPopup = _useState4[1];
-  var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), active = _useState6[0], setActive = _useState6[1];
-  var _useState7 = useState({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, type: "step", location: "bottom", mask: true, maskWidth: "", maskHeight: "", offset: [8, 10], title: "", next: "", prev: "", complete: "", showPrev: true, closeOnOverlayClick: true });
+const classPrefix = "nut-tour";
+const Tour = (props) => {
+  const { locale } = useConfig();
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, title, closeOnOverlayClick, showPrev, list, type, location, visible, mask, maskWidth, maskHeight, offset, next, prev, complete, onClose, onChange } = _a, rest = __rest(_a, ["children", "className", "title", "closeOnOverlayClick", "showPrev", "list", "type", "location", "visible", "mask", "maskWidth", "maskHeight", "offset", "next", "prev", "complete", "onClose", "onChange"]);
+  const [showTour, setShowTour] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [active, setActive] = useState(0);
+  const [maskRect, setMaskRect] = useState({
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
     width: 0,
     height: 0
-  }), _useState8 = _slicedToArray(_useState7, 2), maskRect = _useState8[0], setMaskRect = _useState8[1];
-  var classes = classNames(classPrefix, className);
-  useEffect(function() {
+  });
+  const classes = classNames(classPrefix, className);
+  useEffect(() => {
     if (visible) {
       getRootPosition();
     }
@@ -69,39 +31,39 @@ var Tour = function Tour2(props) {
     setShowTour(visible);
     setShowPopup(visible);
   }, [visible]);
-  useEffect(function() {
+  useEffect(() => {
     if (visible) {
       setShowPopup(true);
       getRootPosition();
     }
   }, [active]);
-  var getRootPosition = function getRootPosition2() {
-    var el = document.querySelector("#".concat(list[active].target));
-    var rect = getRect(el);
+  const getRootPosition = () => {
+    const el = document.querySelector(`#${list[active].target}`);
+    const rect = getRect(el);
     setMaskRect(rect);
   };
-  var maskStyle = function maskStyle2() {
-    var width = maskRect.width, height = maskRect.height, left = maskRect.left, top = maskRect.top;
-    var center = [left + width / 2, top + height / 2];
-    var w = Number(maskWidth || width);
-    var h = Number(maskHeight || height);
-    var styles = {
-      width: "".concat(w + +offset[1] * 2, "px"),
-      height: "".concat(h + +offset[0] * 2, "px"),
-      top: "".concat(center[1] - h / 2 - +offset[0], "px"),
-      left: "".concat(center[0] - w / 2 - +offset[1], "px")
+  const maskStyle = () => {
+    const { width, height, left, top } = maskRect;
+    const center = [left + width / 2, top + height / 2];
+    const w = Number(maskWidth || width);
+    const h = Number(maskHeight || height);
+    const styles = {
+      width: `${w + +offset[1] * 2}px`,
+      height: `${h + +offset[0] * 2}px`,
+      top: `${center[1] - h / 2 - +offset[0]}px`,
+      left: `${center[0] - w / 2 - +offset[1]}px`
     };
     return styles;
   };
-  var maskClose = function maskClose2(e) {
+  const maskClose = (e) => {
     setShowTour(false);
     setShowPopup(false);
     onClose && onClose(e);
   };
-  var handleClickMask = function handleClickMask2(e) {
+  const handleClickMask = (e) => {
     closeOnOverlayClick && maskClose(e);
   };
-  var changeStep = function changeStep2(type2) {
+  const changeStep = (type2) => {
     if (type2 === "next") {
       setActive(active + 1);
       onChange && onChange(active + 1);
@@ -111,70 +73,64 @@ var Tour = function Tour2(props) {
     }
     setShowPopup(false);
   };
-  return React__default.createElement("div", _objectSpread({
-    className: classes
-  }, rest), React__default.createElement("div", {
-    className: "nut-tour-masked",
-    style: {
-      display: showTour ? "block" : "none"
-    },
-    onClick: handleClickMask
-  }), list.map(function(item, index) {
-    return React__default.createElement("div", {
-      key: index,
-      style: {
-        height: 0
-      }
-    }, index === active && React__default.createElement(React__default.Fragment, null, showTour && React__default.createElement("div", {
-      className: "".concat(mask ? "nut-tour-mask" : "nut-tour-mask nut-tour-mask-none"),
-      id: "nut-tour-popid",
-      style: maskStyle()
-    }), React__default.createElement(Popover, {
-      visible: showPopup,
-      location: item.location || location,
-      targetId: "nut-tour-popid",
-      closeOnOutsideClick: false,
-      offset: item.popoverOffset || [0, 12],
-      arrowOffset: item.arrowOffset || 0
-    }, React__default.createElement(React__default.Fragment, null), React__default.createElement(React__default.Fragment, null, children || React__default.createElement(React__default.Fragment, null, type === "step" && React__default.createElement("div", {
-      className: "nut-tour-content"
-    }, title && React__default.createElement("div", {
-      className: "nut-tour-content-top"
-    }, React__default.createElement("div", {
-      onClick: function onClick(e) {
-        return maskClose(e);
-      }
-    }, React__default.createElement(Close, {
-      className: "nut-tour-content-top-close"
-    }))), React__default.createElement("div", {
-      className: "nut-tour-content-inner"
-    }, item.content), React__default.createElement("div", {
-      className: "nut-tour-content-bottom"
-    }, React__default.createElement("div", {
-      className: "nut-tour-content-bottom-init"
-    }, active + 1, "/", list.length), React__default.createElement("div", {
-      className: "nut-tour-content-bottom-operate"
-    }, active !== 0 && showPrev && React__default.createElement("div", {
-      className: "nut-tour-content-bottom-operate-btn",
-      onClick: function onClick() {
-        return changeStep("prev");
-      }
-    }, prev || locale.tour.prevStepText), list.length - 1 === active && React__default.createElement("div", {
-      className: "nut-tour-content-bottom-operate-btn active",
-      onClick: function onClick(e) {
-        return maskClose(e);
-      }
-    }, complete || locale.tour.completeText), list.length - 1 !== active && React__default.createElement("div", {
-      className: "nut-tour-content-bottom-operate-btn active",
-      onClick: function onClick() {
-        return changeStep("next");
-      }
-    }, next || locale.tour.nextStepText)))), type === "tile" && React__default.createElement("div", {
-      className: "nut-tour-content nut-tour-content-tile"
-    }, React__default.createElement("div", {
-      className: "nut-tour-content-inner"
-    }, item.content)))))));
-  }));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: classes }, rest),
+    React__default.createElement("div", { className: "nut-tour-masked", style: { display: showTour ? "block" : "none" }, onClick: handleClickMask }),
+    list.map((item, index) => {
+      return React__default.createElement("div", { key: index, style: { height: 0 } }, index === active && React__default.createElement(
+        React__default.Fragment,
+        null,
+        showTour && React__default.createElement("div", { className: `${mask ? "nut-tour-mask" : "nut-tour-mask nut-tour-mask-none"}`, id: "nut-tour-popid", style: maskStyle() }),
+        React__default.createElement(
+          Popover,
+          { visible: showPopup, location: item.location || location, targetId: "nut-tour-popid", closeOnOutsideClick: false, offset: item.popoverOffset || [0, 12], arrowOffset: item.arrowOffset || 0 },
+          React__default.createElement(React__default.Fragment, null),
+          React__default.createElement(React__default.Fragment, null, children || React__default.createElement(
+            React__default.Fragment,
+            null,
+            type === "step" && React__default.createElement(
+              "div",
+              { className: "nut-tour-content" },
+              title && React__default.createElement(
+                "div",
+                { className: "nut-tour-content-top" },
+                React__default.createElement(
+                  "div",
+                  { onClick: (e) => maskClose(e) },
+                  React__default.createElement(Close, { className: "nut-tour-content-top-close" })
+                )
+              ),
+              React__default.createElement("div", { className: "nut-tour-content-inner" }, item.content),
+              React__default.createElement(
+                "div",
+                { className: "nut-tour-content-bottom" },
+                React__default.createElement(
+                  "div",
+                  { className: "nut-tour-content-bottom-init" },
+                  active + 1,
+                  "/",
+                  list.length
+                ),
+                React__default.createElement(
+                  "div",
+                  { className: "nut-tour-content-bottom-operate" },
+                  active !== 0 && showPrev && React__default.createElement("div", { className: "nut-tour-content-bottom-operate-btn", onClick: () => changeStep("prev") }, prev || locale.tour.prevStepText),
+                  list.length - 1 === active && React__default.createElement("div", { className: "nut-tour-content-bottom-operate-btn active", onClick: (e) => maskClose(e) }, complete || locale.tour.completeText),
+                  list.length - 1 !== active && React__default.createElement("div", { className: "nut-tour-content-bottom-operate-btn active", onClick: () => changeStep("next") }, next || locale.tour.nextStepText)
+                )
+              )
+            ),
+            type === "tile" && React__default.createElement(
+              "div",
+              { className: "nut-tour-content nut-tour-content-tile" },
+              React__default.createElement("div", { className: "nut-tour-content-inner" }, item.content)
+            )
+          ))
+        )
+      ));
+    })
+  );
 };
 Tour.defaultProps = defaultProps;
 Tour.displayName = "NutTour";