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

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";

package/dist/esm/TrendArrow.js

@@ -1,97 +1,55 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["value", "digits", "symbol", "zero", "left", "sync", "color", "riseColor", "dropColor", "riseIcon", "dropIcon", "className", "style", "children"];
-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, { useRef } from "react";
 import { TriangleUp, TriangleDown } from "@nutui/icons-react";
 import { C as ComponentDefaults } from "./typings.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  value: 0,
-  digits: 2,
-  symbol: false,
-  zero: false,
-  left: false,
-  sync: true,
-  color: "",
-  riseColor: "var(--nutui-brand-6)",
-  dropColor: "var(--nutui-secondary-1)",
-  riseIcon: null,
-  dropIcon: null
-});
-var TrendArrow = function TrendArrow2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), value = _defaultProps$props.value, digits = _defaultProps$props.digits, symbol = _defaultProps$props.symbol, zero = _defaultProps$props.zero, left = _defaultProps$props.left, sync = _defaultProps$props.sync, color = _defaultProps$props.color, riseColor = _defaultProps$props.riseColor, dropColor = _defaultProps$props.dropColor, riseIcon = _defaultProps$props.riseIcon, dropIcon = _defaultProps$props.dropIcon, className = _defaultProps$props.className, style = _defaultProps$props.style, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classPrefix = "nut-trendarrow";
-  var rateTrend = useRef(value > 0);
-  var myFixed = function myFixed2(num) {
-    var digit = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: 0, digits: 2, symbol: false, zero: false, left: false, sync: true, color: "", riseColor: "var(--nutui-brand-6)", dropColor: "var(--nutui-secondary-1)", riseIcon: null, dropIcon: null });
+const TrendArrow = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { value, digits, symbol, zero, left, sync, color, riseColor, dropColor, riseIcon, dropIcon, className, style, children } = _a, rest = __rest(_a, ["value", "digits", "symbol", "zero", "left", "sync", "color", "riseColor", "dropColor", "riseIcon", "dropIcon", "className", "style", "children"]);
+  const classPrefix = "nut-trendarrow";
+  const rateTrend = useRef(value > 0);
+  const myFixed = (num, digit = 2) => {
     if (Object.is(parseFloat(num), NaN)) {
-      return console.warn("传入的值：".concat(num, "不是一个数字"));
+      return console.warn(`传入的值：${num}不是一个数字`);
     }
     num = parseFloat(num);
-    var numPow = Math.pow(10, digit);
+    const numPow = Math.pow(10, digit);
     return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
   };
-  var calcStyle = function() {
-    var arrowColor = rateTrend.current ? riseColor : dropColor;
-    var textEquArrowColor = sync ? arrowColor : color;
-    var style2 = {
+  const calcStyle = (() => {
+    const arrowColor = rateTrend.current ? riseColor : dropColor;
+    const textEquArrowColor = sync ? arrowColor : color;
+    const style2 = {
       color: value === 0 ? color : textEquArrowColor
     };
     return style2;
-  }();
-  var calcRate = function() {
+  })();
+  const calcRate = (() => {
     rateTrend.current = value > 0;
-    var absRate = Math.abs(value);
+    const absRate = Math.abs(value);
     if (!zero && value === 0) {
       return "--";
     }
-    var resultRate = "".concat(
-      // eslint-disable-next-line no-nested-ternary
-      symbol && value !== 0 ? rateTrend.current ? "+" : "-" : ""
-    ).concat(myFixed(Number(absRate), digits), "%");
+    const resultRate = `${// eslint-disable-next-line no-nested-ternary
+    symbol && value !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
     return resultRate;
-  }();
-  var calcIconProps = function() {
-    var iconProps = {
+  })();
+  const calcIconProps = (() => {
+    const iconProps = {
       color: rateTrend.current ? riseColor : dropColor
     };
     return iconProps;
-  }();
-  var renderContent = function renderContent2(left2) {
-    var classNameSuffix = !left2 ? "icon-after" : "icon-before";
-    return React__default.createElement("span", {
-      className: "".concat(classPrefix, "-").concat(classNameSuffix, " ").concat(classPrefix, "-value"),
-      style: calcStyle
-    }, calcRate);
+  })();
+  const renderContent = (left2) => {
+    const classNameSuffix = !left2 ? "icon-after" : "icon-before";
+    return React__default.createElement("span", { className: `${classPrefix}-${classNameSuffix} ${classPrefix}-value`, style: calcStyle }, calcRate);
   };
-  return React__default.createElement("div", _objectSpread({
-    className: "".concat(classPrefix, " ").concat(className),
-    style
-  }, rest), !left && renderContent(!left), Number(value) !== 0 && React__default.createElement(React__default.Fragment, null, rateTrend.current ? React__default.createElement(React__default.Fragment, null, riseIcon || React__default.createElement(TriangleUp, {
-    color: calcIconProps.color
-  })) : React__default.createElement(React__default.Fragment, null, dropIcon || React__default.createElement(TriangleDown, {
-    color: calcIconProps.color
-  }))), left && renderContent(!left));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: `${classPrefix} ${className}`, style }, rest),
+    !left && renderContent(!left),
+    Number(value) !== 0 && React__default.createElement(React__default.Fragment, null, rateTrend.current ? React__default.createElement(React__default.Fragment, null, riseIcon || React__default.createElement(TriangleUp, { color: calcIconProps.color })) : React__default.createElement(React__default.Fragment, null, dropIcon || React__default.createElement(TriangleDown, { color: calcIconProps.color }))),
+    left && renderContent(!left)
+  );
 };
 TrendArrow.defaultProps = defaultProps;
 TrendArrow.displayName = "NutTrendArrow";