@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/esm/Ellipsis.js

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "content", "className", "direction", "rows", "expandText", "collapseText", "symbol", "lineHeight", "onClick", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -21,9 +23,10 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useRef, useLayoutEffect, useEffect } from "react";
-import { useConfig } from "./ConfigProvider.js";
-var defaultProps = {
+import React__default, { useState, useRef, useLayoutEffect } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   content: "",
   direction: "end",
   rows: 1,
@@ -31,21 +34,19 @@ var defaultProps = {
   collapseText: "",
   symbol: "...",
   lineHeight: "20"
-};
+});
+var classPrefix = "nut-ellipsis";
 var Ellipsis = function Ellipsis2(props) {
   var _ellipsis$current, _ellipsis$current2;
-  useConfig();
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, content = _defaultProps$props.content, direction = _defaultProps$props.direction, rows = _defaultProps$props.rows, expandText = _defaultProps$props.expandText, collapseText = _defaultProps$props.collapseText, symbol = _defaultProps$props.symbol, lineHeight = _defaultProps$props.lineHeight, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, content = _defaultProps$props.content, className = _defaultProps$props.className, direction = _defaultProps$props.direction, rows = _defaultProps$props.rows, expandText = _defaultProps$props.expandText, collapseText = _defaultProps$props.collapseText, symbol = _defaultProps$props.symbol, lineHeight = _defaultProps$props.lineHeight, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var container = null;
   var maxHeight = 0;
   var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), exceeded = _useState2[0], setExceeded = _useState2[1];
   var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), expanded = _useState4[0], setExpanded = _useState4[1];
   var ellipsis = useRef();
   var root = useRef(null);
+  var classes = classNames(classPrefix, className);
   useLayoutEffect(function() {
-    createContainer();
-  }, []);
-  useEffect(function() {
     if (content) {
       createContainer();
     }
@@ -153,11 +154,11 @@ var Ellipsis = function Ellipsis2(props) {
   var handleClick = function handleClick2() {
     onClick && onClick();
   };
-  return React__default.createElement("div", {
-    className: "nut-ellipsis",
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
     onClick: handleClick,
     ref: root
-  }, React__default.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? React__default.createElement(React__default.Fragment, null, (_ellipsis$current = ellipsis.current) === null || _ellipsis$current === void 0 ? void 0 : _ellipsis$current.leading, expandText ? React__default.createElement("span", {
+  }, rest), React__default.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? React__default.createElement(React__default.Fragment, null, (_ellipsis$current = ellipsis.current) === null || _ellipsis$current === void 0 ? void 0 : _ellipsis$current.leading, expandText ? React__default.createElement("span", {
     className: "nut-ellipsis-text",
     onClick: function onClick2(e) {
       e.stopPropagation();

package/dist/esm/Empty.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["image", "imageSize", "description", "children", "className"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["image", "imageSize", "description", "children", "className", "status"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,35 +24,29 @@ function _objectSpread(target) {
   return target;
 }
 import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
+import { C as ComponentDefaults } from "./typings.js";
 var defaultStatus = {
   empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
   error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
   network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
 };
-var defaultProps = {
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   description: "",
-  image: "empty",
   imageSize: "",
-  className: ""
-};
+  status: "empty"
+});
+var classPrefix = "nut-empty";
 var Empty = function Empty2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), image = _defaultProps$props.image, imageSize = _defaultProps$props.imageSize, description = _defaultProps$props.description, children = _defaultProps$props.children, className = _defaultProps$props.className, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), image = _defaultProps$props.image, imageSize = _defaultProps$props.imageSize, description = _defaultProps$props.description, children = _defaultProps$props.children, className = _defaultProps$props.className, status = _defaultProps$props.status, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var _useState = useState({}), _useState2 = _slicedToArray(_useState, 2), imgStyle = _useState2[0], setImgStyle = _useState2[1];
-  var b = cn("empty");
-  var imageNode = image;
-  if (typeof image === "string") {
-    var isHttpUrl = image.startsWith("https://") || image.startsWith("http://") || image.startsWith("//");
-    var imageUrl = isHttpUrl ? image : defaultStatus[image];
-    imageNode = React__default.createElement("img", {
-      className: "img",
-      src: imageUrl,
-      alt: "empty"
-    });
-  }
+  var imageUrl = image || defaultStatus[status];
+  var imageNode = typeof imageUrl === "string" ? React__default.createElement("img", {
+    className: "img",
+    src: imageUrl,
+    alt: "empty"
+  }) : imageUrl;
   useEffect(function() {
     setImgStyle(function() {
       if (!imageSize) {
@@ -71,15 +65,13 @@ var Empty = function Empty2(props) {
     });
   }, [imageSize]);
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className)
+    className: "".concat(classPrefix, " ").concat(className)
   }, rest), React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: b("image"),
+    className: "".concat(classPrefix, "__image"),
     style: imgStyle
   }, imageNode), typeof description === "string" ? React__default.createElement("div", {
-    className: b("description")
-  }, description || locale.noData) : {
-    description
-  }, children));
+    className: "".concat(classPrefix, "__description")
+  }, description || locale.noData) : description, children));
 };
 Empty.defaultProps = defaultProps;
 Empty.displayName = "NutEmpty";

package/dist/esm/Image.js

@@ -41,18 +41,16 @@ var Image = function Image2(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, src = _defaultProps$props.src, fit = _defaultProps$props.fit, position = _defaultProps$props.position, alt = _defaultProps$props.alt, width = _defaultProps$props.width, height = _defaultProps$props.height, radius = _defaultProps$props.radius, error = _defaultProps$props.error, loading = _defaultProps$props.loading, lazy = _defaultProps$props.lazy, onClick = _defaultProps$props.onClick, onLoad = _defaultProps$props.onLoad, onError = _defaultProps$props.onError;
   var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), innerLoading = _useState2[0], setInnerLoading = _useState2[1];
   var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), isError = _useState4[0], setIsError = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), _src = _useState6[0], setSrc = _useState6[1];
   var imgRef = useRef(null);
   useEffect(function() {
     if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight !== 0) {
       setInnerLoading(false);
     } else if (src) {
-      setSrc(src);
-      setIsError(false);
       setInnerLoading(true);
     }
   }, [src]);
   var handleLoad = function handleLoad2() {
+    setIsError(false);
     setInnerLoading(false);
     onLoad && onLoad();
   };
@@ -73,7 +71,6 @@ var Image = function Image2(props) {
   }, style);
   var observer = useRef(null);
   var initObserver = function initObserver2() {
-    var images = document.querySelectorAll(".nut-img.lazyload");
     var options = {
       threshold: [0],
       rootMargin: "0px"
@@ -88,14 +85,12 @@ var Image = function Image2(props) {
               img.src = img.dataset.src;
               img.removeAttribute("data-src");
             }
-            observer.current.unobserve(item.target);
+            resetObserver();
           }, 300);
         }
       });
     }, options);
-    images.forEach(function(item) {
-      observer.current.observe(item);
-    });
+    observer.current.observe(imgRef.current);
   };
   var resetObserver = function resetObserver2() {
     observer.current.disconnect && observer.current.disconnect();
@@ -149,7 +144,7 @@ var Image = function Image2(props) {
     ref: imgRef,
     className: "nut-img lazyload",
     style: imgStyle,
-    "data-src": _src,
+    "data-src": src,
     alt,
     loading: "lazy",
     onLoad: handleLoad,
@@ -158,7 +153,7 @@ var Image = function Image2(props) {
     ref: imgRef,
     className: "nut-img",
     style: imgStyle,
-    src: _src,
+    src,
     alt,
     onLoad: handleLoad,
     onError: handleError

package/dist/esm/ImagePreview.js

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,33 +23,47 @@ function _objectSpread(target) {
 }
 import React__default, { useRef, useState, useEffect } from "react";
 import Popup from "./Popup.js";
+import Image from "./Image.js";
 import Video from "./Video.js";
 import Swiper from "./Swiper.js";
 import SwiperItem from "./SwiperItem.js";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   images: [],
   videos: [],
-  show: false,
-  autoplay: 3e3,
-  initNo: 1,
-  contentClose: false,
-  paginationVisible: false,
-  paginationColor: "#fff",
+  visible: false,
+  autoPlay: 3e3,
+  defaultValue: 0,
+  closeOnContentClick: false,
+  indicator: false,
+  indicatorColor: "#fff",
+  onChange: function onChange(value) {
+  },
   onClose: function onClose() {
   }
-};
+});
 var ImagePreview = function ImagePreview2(props) {
-  var images = props.images, videos = props.videos, show = props.show, initNo = props.initNo, paginationColor = props.paginationColor, paginationVisible = props.paginationVisible, autoplay = props.autoplay, contentClose = props.contentClose, onClose2 = props.onClose;
-  var nutImagePreview = useRef(null);
-  var _useState = useState(initNo), _useState2 = _slicedToArray(_useState, 2), innerNo = _useState2[0], setInnerNo = _useState2[1];
-  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), showPop = _useState4[0], setShowPop = _useState4[1];
-  var _useState5 = useState(1), _useState6 = _slicedToArray(_useState5, 2), active = _useState6[0], setActive = _useState6[1];
-  var _useState7 = useState(1), _useState8 = _slicedToArray(_useState7, 2), maxNo = _useState8[0], setMaxNo = _useState8[1];
-  var _useState9 = useState({
+  var images = props.images, videos = props.videos, visible = props.visible, defaultValue = props.defaultValue, indicatorColor = props.indicatorColor, indicator = props.indicator, autoPlay = props.autoPlay, closeOnContentClick = props.closeOnContentClick, onClose2 = props.onClose;
+  var classPrefix = "nut-imagepreview";
+  var ref = useRef(null);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: function onChange2(val) {
+      var _props$onChange;
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val);
+    }
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerNo = _usePropsValue2[0], setInnerNo = _usePropsValue2[1];
+  var _useState = useState(visible), _useState2 = _slicedToArray(_useState, 2), showPop = _useState2[0], setShowPop = _useState2[1];
+  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), active = _useState4[0], setActive = _useState4[1];
+  var _useState5 = useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), _useState6 = _slicedToArray(_useState5, 1), maxNo = _useState6[0];
+  var _useState7 = useState({
     scale: 1,
     moveable: false
-  }), _useState10 = _slicedToArray(_useState9, 2), store = _useState10[0], setStore = _useState10[1];
-  var _useState11 = useState(0), _useState12 = _slicedToArray(_useState11, 2), lastTouchEndTime = _useState12[0], setLastTouchEndTime = _useState12[1];
+  }), _useState8 = _slicedToArray(_useState7, 2), store = _useState8[0], setStore = _useState8[1];
+  var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), lastTouchEndTime = _useState10[0], setLastTouchEndTime = _useState10[1];
   var onTouchStart = function onTouchStart2(event) {
     var touches = event.touches;
     var events = touches[0];
@@ -110,33 +124,34 @@ var ImagePreview = function ImagePreview2(props) {
       scaleNow();
     }
   };
+  useEffect(function() {
+    init();
+  }, []);
   var init = function init2() {
     document.addEventListener("touchmove", onTouchMove);
     document.addEventListener("touchend", onTouchEnd);
     document.addEventListener("touchcancel", onTouchEnd);
   };
   useEffect(function() {
-    setShowPop(show);
-    setInnerNo(initNo);
-    setActive(initNo);
-    init();
-  }, [show, initNo]);
+    setShowPop(visible);
+  }, [visible]);
   useEffect(function() {
-    if (innerNo !== void 0) {
-      setActive(innerNo);
-    }
-    if (show !== void 0) {
-      setShowPop(show);
-    }
-    if (images && videos) {
-      setMaxNo(images.length + videos.length);
-    }
-  }, []);
+    setInnerNo(defaultValue || 1);
+  }, [defaultValue]);
+  useEffect(function() {
+    setActive(innerNo);
+  }, [innerNo]);
   var scaleNow = function scaleNow2() {
-    if (nutImagePreview.current) {
-      nutImagePreview.current.style.transform = "scale(".concat(store.scale, ")");
+    if (ref.current) {
+      ref.current.style.transform = "scale(".concat(store.scale, ")");
     }
   };
+  var getDistance = function getDistance2(first, second) {
+    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+  };
+  var slideChangeEnd = function slideChangeEnd2(page) {
+    setActive(page + 1);
+  };
   var onCloseInner = function onCloseInner2() {
     setShowPop(false);
     setActive(1);
@@ -146,42 +161,38 @@ var ImagePreview = function ImagePreview2(props) {
       scale: 1
     }));
   };
-  var getDistance = function getDistance2(first, second) {
-    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
-  };
-  var slideChangeEnd = function slideChangeEnd2(page) {
-    setActive(page + 1);
-  };
   var closeOnImg = function closeOnImg2() {
-    if (contentClose) {
+    if (closeOnContentClick) {
       onCloseInner();
     }
   };
   return React__default.createElement(Popup, {
     visible: showPop,
-    className: "custom-pop",
+    className: "".concat(classPrefix, "-pop"),
     style: {
       width: "100%"
     },
     onClick: onCloseInner
   }, React__default.createElement("div", {
-    className: "nut-imagepreview",
-    ref: nutImagePreview,
+    className: classPrefix,
+    ref,
     onClick: closeOnImg,
     onTouchStart
   }, React__default.createElement(Swiper, {
-    autoPlay: autoplay,
-    className: "nut-imagepreview-swiper",
+    autoPlay,
+    className: "".concat(classPrefix, "-swiper"),
     loop: true,
-    isPreventDefault: false,
+    preventDefault: false,
     style: {
-      display: showPop ? "block" : "none"
+      display: showPop ? "block" : "none",
+      "--nutui-indicator-color": indicatorColor
     },
     direction: "horizontal",
-    onChange: slideChangeEnd,
-    initPage: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
-    paginationColor,
-    paginationVisible
+    onChange: function onChange2(page) {
+      return slideChangeEnd(page);
+    },
+    defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+    indicator
   }, (videos && videos.length > 0 ? videos.map(function(item, index) {
     return React__default.createElement(SwiperItem, {
       key: index
@@ -192,13 +203,11 @@ var ImagePreview = function ImagePreview2(props) {
   }) : []).concat(images && images.length > 0 ? images.map(function(item, index) {
     return React__default.createElement(SwiperItem, {
       key: index
-    }, React__default.createElement("img", {
-      src: item.src,
-      alt: "",
-      className: "nut-imagepreview-img"
+    }, React__default.createElement(Image, {
+      src: item.src
     }));
   }) : []))), React__default.createElement("div", {
-    className: "nut-imagepreview-index"
+    className: "".concat(classPrefix, "-index")
   }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
 };
 ImagePreview.defaultProps = defaultProps;

package/dist/esm/Indicator.js

@@ -26,7 +26,7 @@ import React__default from "react";
 import classNames from "classnames";
 var defaultProps = {
   total: 3,
-  current: 1,
+  current: 0,
   direction: "horizontal"
 };
 var classPrefix = "nut-indicator";
@@ -35,11 +35,11 @@ var Indicator = function Indicator2(props) {
   var classes = classNames(_defineProperty({}, "".concat(classPrefix, "__vertical"), direction === "vertical"));
   var renderElement = function renderElement2() {
     var childs = [];
-    for (var item = 1; item <= total; item++) {
-      childs.push(item === current ? React__default.createElement(React__default.Fragment, null, children || React__default.createElement("div", {
+    for (var item = 0; item < total; item++) {
+      childs.push(item === current ? children || React__default.createElement("div", {
         key: item,
         className: "".concat(classPrefix, "__dot ").concat(classPrefix, "__active")
-      })) : React__default.createElement("div", {
+      }) : React__default.createElement("div", {
         key: item,
         className: "".concat(classPrefix, "__dot")
       }));