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

package/dist/esm/table.taro-0BcEBB0F.js

@@ -1,173 +0,0 @@
-import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
-import React__default, { useState, useEffect, useCallback, useRef } from "react";
-import classNames from "classnames";
-import { ArrowDown } from "@nutui/icons-react-taro";
-import { u as useConfig } from "./configprovider.taro-CyU_tvNJ.js";
-import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
-import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
-function useTableSticky(columns) {
-  const [isSticky, setIsSticky] = useState(false);
-  const [stickyColumnStyleMap, setStickyColumnStyleMap] = useState({});
-  const [stickyColumnClassMap, setStickyColumnClassMap] = useState({});
-  const [stickyLeftWidth, setStickyLeftWidth] = useState(0);
-  const [stickyRightWidth, setStickyRightWidth] = useState(0);
-  useEffect(() => {
-    const leftColumns = columns.filter((item) => item.fixed === "left") || [];
-    const rightColumns = columns.filter((item) => item.fixed === "right") || [];
-    const middleColumns = columns.filter((item) => !item.fixed) || [];
-    const _columnStyleMap = {};
-    const _columnClassMap = {};
-    let _stickyLeftWidth = 0;
-    let _stickyRightWidth = 0;
-    leftColumns.forEach((curr, index) => {
-      leftColumns[index - 1] || {};
-      _columnStyleMap[curr.key] = {
-        left: _stickyLeftWidth || 0,
-        width: curr.width || "auto"
-      };
-      _columnClassMap[curr.key] = {
-        "nut-table-fixed-left": true,
-        "nut-table-fixed-left-last": index === leftColumns.length - 1
-      };
-      _stickyLeftWidth += curr.width || 0;
-    });
-    middleColumns.forEach((curr) => {
-      _columnStyleMap[curr.key] = {
-        width: curr.width || "auto"
-      };
-    });
-    for (let i = rightColumns.length - 1; i >= 0; i--) {
-      const curr = rightColumns[i];
-      rightColumns[i + 1] || {};
-      _columnStyleMap[curr.key] = {
-        right: _stickyRightWidth || 0,
-        width: curr.width || "auto"
-      };
-      _columnClassMap[curr.key] = {
-        "nut-table-fixed-right": true,
-        "nut-table-fixed-right-first": i === 0
-      };
-      _stickyRightWidth += curr.width || 0;
-    }
-    setIsSticky(leftColumns.length > 0 || rightColumns.length > 0);
-    setStickyColumnStyleMap(_columnStyleMap);
-    setStickyColumnClassMap(_columnClassMap);
-    setStickyLeftWidth(_stickyLeftWidth);
-    setStickyRightWidth(_stickyRightWidth);
-  }, [columns]);
-  const getStickyStyle = useCallback((key) => {
-    return stickyColumnStyleMap[key];
-  }, [stickyColumnStyleMap]);
-  const getStickyClass = useCallback((key) => {
-    return stickyColumnClassMap[key];
-  }, [stickyColumnClassMap]);
-  return {
-    isSticky,
-    stickyLeftWidth,
-    stickyRightWidth,
-    getStickyClass,
-    getStickyStyle
-  };
-}
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { columns: [], data: [], bordered: true, striped: false, noData: "", sorterIcon: null, showHeader: true });
-const Table = (props) => {
-  const { locale } = useConfig();
-  defaultProps.noData = locale.noData;
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, style, columns, data, bordered, summary, striped, noData, sorterIcon, showHeader, onSort } = _a, rest = __rest(_a, ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "sorterIcon", "showHeader", "onSort"]);
-  const sortedMapping = useRef({});
-  const [innerValue, setValue] = usePropsValue({
-    defaultValue: data,
-    finalValue: []
-  });
-  const { isSticky, stickyLeftWidth, stickyRightWidth, getStickyClass, getStickyStyle } = useTableSticky(columns);
-  useEffect(() => {
-    setValue(data);
-  }, [data]);
-  const classPrefix = "nut-table";
-  const headerClassPrefix = `${classPrefix}-main-head-tr`;
-  const bodyClassPrefix = `${classPrefix}-main-body-tr`;
-  const cls = classNames(classPrefix, className);
-  const handleSorterClick = (item) => {
-    if (item.sorter && !sortedMapping.current[item.key]) {
-      const copied = [...innerValue];
-      if (typeof item.sorter === "function") {
-        copied.sort(item.sorter);
-      } else if (item.sorter === "default") {
-        copied.sort();
-      }
-      sortedMapping.current[item.key] = true;
-      setValue(copied, true);
-      onSort && onSort(item, copied);
-    } else {
-      sortedMapping.current[item.key] = false;
-      setValue(data);
-    }
-  };
-  const cellClasses = (item) => {
-    return {
-      [`${headerClassPrefix}-border`]: props.bordered,
-      [`${headerClassPrefix}-align${item.align ? item.align : ""}`]: true
-    };
-  };
-  const getColumnItem = (value) => {
-    return columns.filter((item) => item.key === value)[0];
-  };
-  const renderHeadCells = () => {
-    return columns.map((item, index) => {
-      return React__default.createElement(
-        "div",
-        { className: classNames(`${headerClassPrefix}-th`, cellClasses(item), getStickyClass(item.key)), key: item.key, onClick: () => handleSorterClick(item), style: getStickyStyle(item.key) },
-        item.title,
-        " ",
-        item.sorter && (sorterIcon || React__default.createElement(ArrowDown, { width: "12px", height: "12px" }))
-      );
-    });
-  };
-  const sortDataItem = () => {
-    return columns.map((columns2) => {
-      return [columns2.key, columns2.render];
-    });
-  };
-  const renderBodyTds = (item, rowIndex) => {
-    return sortDataItem().map(([value, render]) => {
-      return React__default.createElement("div", { className: classNames(`${bodyClassPrefix}-td`, cellClasses(getColumnItem(value)), getStickyClass(value)), key: value, style: getStickyStyle(value) }, typeof item[value] === "function" || typeof render === "function" ? React__default.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
-    });
-  };
-  const renderBodyTrs = () => {
-    return innerValue.map((item, index) => {
-      return React__default.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
-    });
-  };
-  return React__default.createElement(
-    "div",
-    Object.assign({ className: cls }, rest),
-    React__default.createElement(
-      "div",
-      { className: classNames(`${classPrefix}-wrapper ${isSticky ? `${classPrefix}-wrapper-sticky` : ""}`), style },
-      React__default.createElement(
-        "div",
-        { className: classNames(`${classPrefix}-main`, {
-          [`${classPrefix}-main-striped`]: striped
-        }) },
-        showHeader && React__default.createElement(
-          "div",
-          { className: `${classPrefix}-main-head` },
-          React__default.createElement("div", { className: headerClassPrefix }, renderHeadCells())
-        ),
-        React__default.createElement("div", { className: `${classPrefix}-main-body` }, renderBodyTrs())
-      )
-    ),
-    isSticky ? React__default.createElement(
-      React__default.Fragment,
-      null,
-      React__default.createElement("div", { className: `${classPrefix}-sticky-left`, style: { width: stickyLeftWidth } }),
-      React__default.createElement("div", { className: `${classPrefix}-sticky-right`, style: { width: stickyRightWidth } })
-    ) : null,
-    (summary || innerValue.length === 0) && React__default.createElement("div", { className: `${classPrefix}-summary` }, summary || noData)
-  );
-};
-Table.defaultProps = defaultProps;
-Table.displayName = "NutTable";
-export {
-  Table as T
-};

package/dist/esm/tabs.taro-HgAoKBAc.js

@@ -1,209 +0,0 @@
-import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
-import React__default, { useRef, useState, useEffect } from "react";
-import { View, ScrollView } from "@tarojs/components";
-import classNames from "classnames";
-import { JoySmile } from "@nutui/icons-react-taro";
-import { nextTick, createSelectorQuery } from "@tarojs/taro";
-import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
-import { T as TabPane } from "./tabpane.taro-BAe86j3t.js";
-import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
-import { u as useForceUpdate } from "./use-force-update-CudFjCsy.js";
-import { r as requestAniFrame } from "./raf-zwv-SBjP.js";
-const idCounter = {};
-function uniqueId(prefix = "$nut$") {
-  if (!idCounter[prefix]) {
-    idCounter[prefix] = 0;
-  }
-  const id = ++idCounter[prefix];
-  if (prefix === "$nut$") {
-    return `${id}`;
-  }
-  return `${prefix}${id}`;
-}
-function useUuid() {
-  const idRef = useRef(uniqueId());
-  return idRef.current;
-}
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { tabStyle: {}, activeColor: "", direction: "horizontal", activeType: "line", duration: 300, autoHeight: false });
-const classPrefix = "nut-tabs";
-const Tabs = (props) => {
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { activeColor, tabStyle, direction, activeType, duration, align, title, name, children, onClick, onChange, className, autoHeight } = _a, rest = __rest(_a, ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "name", "children", "onClick", "onChange", "className", "autoHeight"]);
-  const uuid = useUuid();
-  const [value, setValue] = usePropsValue({
-    value: props.value,
-    defaultValue: props.defaultValue,
-    finalValue: 0,
-    onChange
-  });
-  const [contentStyle, setContentStyle] = useState({});
-  const titleItemsRef = useRef([]);
-  const navRef = useRef(null);
-  const getTitles = () => {
-    const titles2 = [];
-    React__default.Children.forEach(children, (child, idx) => {
-      if (React__default.isValidElement(child)) {
-        const props2 = child === null || child === void 0 ? void 0 : child.props;
-        if ((props2 === null || props2 === void 0 ? void 0 : props2.title) || (props2 === null || props2 === void 0 ? void 0 : props2.value)) {
-          titles2.push({
-            title: props2.title,
-            value: props2.value || idx,
-            disabled: props2.disabled
-          });
-        }
-      }
-    });
-    return titles2;
-  };
-  const titles = useRef(getTitles());
-  const forceUpdate = useForceUpdate();
-  useEffect(() => {
-    titles.current = getTitles();
-    let current = "";
-    titles.current.forEach((title2) => {
-      if (title2.value === value) {
-        current = value;
-      }
-    });
-    if (current !== "" && current !== value) {
-      setValue(current);
-    } else {
-      forceUpdate();
-    }
-  }, [children]);
-  const classes = classNames(classPrefix, `${classPrefix}-${direction}`, className);
-  const classesTitle = classNames(`${classPrefix}-titles`, {
-    [`${classPrefix}-titles-${activeType}`]: activeType,
-    [`${classPrefix}-titles-scrollable`]: true,
-    [`${classPrefix}-titles-${align}`]: align
-  });
-  const tabsActiveStyle = {
-    color: activeType === "smile" ? activeColor : "",
-    background: activeType === "line" ? activeColor : ""
-  };
-  const getRect = (selector) => {
-    return new Promise((resolve) => {
-      createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
-        resolve(rect[0]);
-      });
-    });
-  };
-  const getAllRect = (selector) => {
-    return new Promise((resolve) => {
-      createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
-        resolve(rect[0]);
-      });
-    });
-  };
-  const scrollWithAnimation = useRef(false);
-  const navRectRef = useRef();
-  const titleRectRef = useRef([]);
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const [scrollTop, setScrollTop] = useState(0);
-  const scrollDirection = (to, direction2) => {
-    let count = 0;
-    const frames = 1;
-    function animate() {
-      if (direction2 === "horizontal") {
-        setScrollLeft(to);
-      } else {
-        setScrollTop(to);
-      }
-      if (++count < frames) {
-        requestAniFrame(animate);
-      }
-    }
-    animate();
-  };
-  const scrollIntoView = () => {
-    requestAniFrame(() => {
-      Promise.all([
-        getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
-        getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`)
-      ]).then(([navRect, titleRects]) => {
-        navRectRef.current = navRect;
-        titleRectRef.current = titleRects;
-        const titleRect = titleRectRef.current[value];
-        if (!titleRect)
-          return;
-        let to = 0;
-        if (props.direction === "vertical") {
-          const DEFAULT_PADDING = 11;
-          const top = titleRects.slice(0, value).reduce((prev, curr) => prev + curr.height, DEFAULT_PADDING);
-          to = top - (navRectRef.current.height - titleRect.height) / 2;
-        } else {
-          const DEFAULT_PADDING = 20;
-          const left = titleRects.slice(0, value).reduce((prev, curr) => prev + curr.width, DEFAULT_PADDING);
-          to = left - (navRectRef.current.width - titleRect.width) / 2;
-        }
-        nextTick(() => {
-          scrollWithAnimation.current = true;
-        });
-        scrollDirection(to, direction);
-      });
-    });
-  };
-  useEffect(() => {
-    const index = titles.current.findIndex((t) => t.value === value);
-    setContentStyle({
-      transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
-      transitionDuration: `${duration}ms`
-    });
-    scrollIntoView();
-  }, [value]);
-  const tabChange = (item, index) => {
-    onClick && onClick(item.value);
-    if (item.disabled) {
-      return;
-    }
-    setValue(item.value);
-  };
-  return React__default.createElement(
-    View,
-    Object.assign({ className: classes }, rest),
-    React__default.createElement(
-      ScrollView,
-      { enableFlex: true, scrollX: direction === "horizontal", scrollY: direction === "vertical", scrollLeft, scrollTop, showScrollbar: false, scrollWithAnimation: scrollWithAnimation.current, id: `nut-tabs-titles-${name || uuid}`, className: classesTitle, style: Object.assign({}, tabStyle) },
-      React__default.createElement(View, { className: "nut-tabs-list", ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
-        return React__default.createElement(
-          View,
-          { ref: (ref) => titleItemsRef.current.push(ref), id: `scrollIntoView${index}`, onClick: (e) => {
-            tabChange(item);
-          }, className: classNames(`${classPrefix}-titles-item`, {
-            [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
-            [`nut-tabs-titles-item-disabled`]: item.disabled,
-            [`nut-tabs-titles-item-${align}`]: align
-          }), key: item.value },
-          activeType === "line" && React__default.createElement(View, { className: classNames(`${classPrefix}-titles-item-line`, {
-            [`${classPrefix}-titles-item-line-${direction}`]: true
-          }), style: tabsActiveStyle }),
-          activeType === "smile" && React__default.createElement(
-            View,
-            { className: `${classPrefix}-titles-item-smile`, style: tabsActiveStyle },
-            React__default.createElement(JoySmile, { color: activeColor })
-          ),
-          React__default.createElement(View, { className: classNames(`${classPrefix}-ellipsis`, `${classPrefix}-titles-item-text`) }, item.title)
-        );
-      }))
-    ),
-    React__default.createElement(
-      View,
-      { className: `${classPrefix}-content-wrap` },
-      React__default.createElement(View, { className: `${classPrefix}-content`, style: contentStyle }, React__default.Children.map(children, (child, idx) => {
-        if (!React__default.isValidElement(child)) {
-          return null;
-        }
-        let childProps = Object.assign(Object.assign({}, child.props), { active: value === child.props.value });
-        if (String(value) !== String(child.props.value || idx) && autoHeight) {
-          childProps = Object.assign(Object.assign({}, childProps), { autoHeightClassName: "inactive" });
-        }
-        return React__default.cloneElement(child, childProps);
-      }))
-    )
-  );
-};
-Tabs.defaultProps = defaultProps;
-Tabs.displayName = "NutTabs";
-Tabs.TabPane = TabPane;
-export {
-  Tabs as T
-};

package/dist/esm/toast.taro-BIR_7Wgb.js

@@ -1,117 +0,0 @@
-import React__default, { useRef, useEffect } from "react";
-import classNames from "classnames";
-import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
-import { O as Overlay } from "./overlay.taro-BaBu-3-F.js";
-import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
-import { b as useParams, u as useCustomEvent, a as useCustomEventsPath, c as customEvents } from "./use-custom-event-DuP4onEm.js";
-import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { id: "", icon: null, iconSize: "20", msg: "", duration: 2, position: "center", type: "text", title: "", closeOnOverlayClick: false, lockScroll: false, contentClassName: "", size: "base", visible: false, wordBreak: "break-all", onClose: () => {
-} });
-const classPrefix = "nut-toast";
-const Toast = (props) => {
-  const { params: { id, position, contentStyle, icon, iconSize, msg, duration, type, title, closeOnOverlayClick, lockScroll, contentClassName, visible, size, className, style, onClose, wordBreak }, setParams } = useParams(Object.assign(Object.assign({}, defaultProps), props));
-  const timer = useRef(-1);
-  const [innerVisible, setInnerVisible] = usePropsValue({
-    value: visible,
-    defaultValue: void 0,
-    finalValue: false,
-    onChange: (v) => {
-      !v && (onClose === null || onClose === void 0 ? void 0 : onClose());
-    }
-  });
-  useEffect(() => {
-    if (innerVisible) {
-      autoClose();
-    }
-  }, [innerVisible, duration]);
-  useCustomEvent(id, ({ status, options }) => {
-    if (status) {
-      options.visible = true;
-      setParams(options);
-      show2();
-    } else {
-      setParams({ visible: false });
-      hide2();
-    }
-  });
-  const clearTimer = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = -1;
-    }
-  };
-  const show2 = () => {
-    setInnerVisible(true);
-  };
-  const hide2 = () => {
-    clearTimer();
-    setInnerVisible(false);
-  };
-  const autoClose = () => {
-    clearTimer();
-    if (duration) {
-      timer.current = window.setTimeout(() => {
-        setParams({ visible: false });
-        hide2();
-      }, duration * 1e3);
-    }
-  };
-  const clickCover = () => {
-    if (closeOnOverlayClick) {
-      hide2();
-    }
-  };
-  const hasIcon = () => {
-    if (type !== "text") {
-      return true;
-    }
-    return !!icon;
-  };
-  const iconName = () => {
-    if (icon) {
-      return icon;
-    }
-    return {
-      success: React__default.createElement(Success, { color: "#ffffff", size: iconSize }),
-      fail: React__default.createElement(Failure, { color: "#ffffff", size: iconSize }),
-      warn: React__default.createElement(Tips, { color: "#ffffff", size: iconSize }),
-      loading: React__default.createElement(Loading, { color: "#ffffff", size: iconSize })
-    }[type];
-  };
-  const classes = classNames({
-    "nut-toast-has-icon": icon,
-    [`nut-toast-${size}`]: true
-  });
-  return React__default.createElement(React__default.Fragment, null, innerVisible ? React__default.createElement(
-    Overlay,
-    { visible: innerVisible, style, className: `${classPrefix}-overlay-default ${className}`, closeOnOverlayClick, lockScroll, onClick: () => {
-      clickCover();
-    } },
-    React__default.createElement(
-      "div",
-      { className: `${classPrefix} ${classes}`, id },
-      React__default.createElement(
-        "div",
-        { className: `${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`, style: contentStyle },
-        hasIcon() ? React__default.createElement("p", { className: `${classPrefix}-icon-wrapper` }, iconName()) : null,
-        title ? React__default.createElement("div", { className: `${classPrefix}-title` }, title) : null,
-        React__default.createElement("span", { className: `${classPrefix}-text` }, msg)
-      )
-    )
-  ) : null);
-};
-function show(selector, options) {
-  const path = useCustomEventsPath(selector);
-  customEvents.trigger(path, { status: true, options });
-}
-function hide(selector) {
-  const path = useCustomEventsPath(selector);
-  customEvents.trigger(path, { status: false });
-}
-Toast.defaultProps = defaultProps;
-Toast.displayName = "NutToast";
-Toast.show = show;
-Toast.hide = hide;
-export {
-  Toast as T
-};

package/dist/esm/tour.taro-CMagdKcp.js

@@ -1,167 +0,0 @@
-import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
-import React__default, { useState, useEffect } from "react";
-import { Close } from "@nutui/icons-react-taro";
-import classNames from "classnames";
-import { P as Popover } from "./popover.taro-CcKwnX27.js";
-import Taro, { createSelectorQuery } from "@tarojs/taro";
-import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
-import { useConfig } from "./ConfigProvider.js";
-const getTaroRectById = (id) => {
-  return new Promise((resolve, reject) => {
-    if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-      const t = document ? document.querySelector(`#${id}`) : "";
-      if (t) {
-        resolve(t === null || t === void 0 ? void 0 : t.getBoundingClientRect());
-      }
-      reject();
-    } else {
-      const query = createSelectorQuery();
-      query.select(`#${id}`).boundingClientRect().exec(function(rect) {
-        if (rect[0]) {
-          resolve(rect[0]);
-        } else {
-          reject();
-        }
-      });
-    }
-  });
-};
-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
-  });
-  const classes = classNames(classPrefix, className);
-  useEffect(() => {
-    if (visible) {
-      getRootPosition();
-    }
-    setActive(0);
-    setShowTour(visible);
-    setShowPopup(visible);
-  }, [visible]);
-  useEffect(() => {
-    if (visible) {
-      setShowPopup(true);
-      getRootPosition();
-    }
-  }, [active]);
-  const getRootPosition = () => {
-    getTaroRectById(list[active].target).then((rect) => {
-      console.log("rect", rect);
-      setMaskRect({
-        top: rect.top,
-        left: rect.left,
-        right: rect.right,
-        bottom: rect.bottom,
-        width: rect.width,
-        height: rect.height
-      });
-    });
-  };
-  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;
-  };
-  const maskClose = (e) => {
-    setShowTour(false);
-    setShowPopup(false);
-    onClose && onClose(e);
-  };
-  const handleClickMask = (e) => {
-    closeOnOverlayClick && maskClose(e);
-  };
-  const changeStep = (type2) => {
-    if (type2 === "next") {
-      setActive(active + 1);
-      onChange && onChange(active + 1);
-    } else {
-      setActive(active - 1);
-      onChange && onChange(active - 1);
-    }
-    setShowPopup(false);
-  };
-  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";
-export {
-  Tour as T
-};