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

package/dist/esm/Sticky.js

@@ -1,25 +1,43 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["position", "top", "bottom", "zIndex", "children", "container", "className", "onChange"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React__default, { useRef, useEffect, useState, useCallback } from 'react';
-import classNames from 'classnames';
-import { g as getScrollParent } from './get-scroll-parent-5f85dee8.js';
-import { g as getRect } from './useClientRect-56bb675b.js';
-import { c as cn } from './bem-3b438e61.js';
-import '@bem-react/classname';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["position", "zIndex", "children", "container", "style", "className", "threshold", "onChange"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useRef, useEffect, useState, useCallback } from "react";
+import classNames from "classnames";
+import { g as getScrollParent } from "./get-scroll-parent.js";
+import { g as getRect } from "./use-client-rect.js";
+import { C as ComponentDefaults } from "./typings.js";
 function useWatch(dep, callback) {
-  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+  var config = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
     immediate: false
   };
   var immediate = config.immediate;
   var prev = useRef();
   var inited = useRef(false);
   var stop = useRef(false);
-  useEffect(function () {
-    var execute = function execute() {
+  useEffect(function() {
+    var execute = function execute2() {
       return callback(prev.current);
     };
     if (!stop.current) {
@@ -34,159 +52,132 @@ function useWatch(dep, callback) {
       prev.current = dep;
     }
   }, [dep]);
-  return function () {
+  return function() {
     stop.current = true;
   };
 }
-var defaultProps = {
-  position: 'top',
-  top: 0,
-  bottom: 0,
-  zIndex: 2000
-};
-var b = cn('sticky');
-var Sticky = function Sticky(props) {
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  position: "top",
+  threshold: 0,
+  zIndex: 2e3
+});
+var classPrefix = "nut-sticky";
+var Sticky = function Sticky2(props) {
   var _useState5;
-  var _props$position = props.position,
-    position = _props$position === void 0 ? 'top' : _props$position,
-    _props$top = props.top,
-    top = _props$top === void 0 ? 0 : _props$top,
-    _props$bottom = props.bottom,
-    bottom = _props$bottom === void 0 ? 0 : _props$bottom,
-    _props$zIndex = props.zIndex,
-    zIndex = _props$zIndex === void 0 ? 2000 : _props$zIndex,
-    children = props.children,
-    container = props.container,
-    className = props.className,
-    onChange = props.onChange,
-    rest = _objectWithoutProperties(props, _excluded);
-  // const { locale } = useConfig()
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), position = _defaultProps$props.position, zIndex = _defaultProps$props.zIndex, children = _defaultProps$props.children, container = _defaultProps$props.container, style = _defaultProps$props.style, className = _defaultProps$props.className, threshold = _defaultProps$props.threshold, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var stickyRef = useRef(null);
   var rootRef = useRef(null);
-  var offset = position === 'top' ? top : bottom;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFixed = _useState2[0],
-    setIsFixed = _useState2[1];
-  var _useState3 = useState((_useState5 = {}, _defineProperty(_useState5, position, "".concat(offset, "px")), _defineProperty(_useState5, "zIndex", zIndex), _useState5)),
-    _useState4 = _slicedToArray(_useState3, 2),
-    stickyStyle = _useState4[0],
-    setStickyStyle = _useState4[1];
-  var _useState6 = useState({}),
-    _useState7 = _slicedToArray(_useState6, 2),
-    rootStyle = _useState7[0],
-    setRootStyle = _useState7[1];
-  var getElement = useCallback(function () {
-    // if (!rootRef.current) return Window
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isFixed = _useState2[0], setIsFixed = _useState2[1];
+  var _useState3 = useState((_useState5 = {}, _defineProperty(_useState5, position, "".concat(threshold, "px")), _defineProperty(_useState5, "zIndex", zIndex), _useState5)), _useState4 = _slicedToArray(_useState3, 2), stickyStyle = _useState4[0], setStickyStyle = _useState4[1];
+  var _useState6 = useState({}), _useState7 = _slicedToArray(_useState6, 2), rootStyle = _useState7[0], setRootStyle = _useState7[1];
+  var getElement = useCallback(function() {
     return getScrollParent(rootRef.current);
   }, []);
-  useEffect(function () {
-    if (position === 'top') return;
+  useEffect(function() {
+    if (position === "top")
+      return;
     var containerEle = container === null || container === void 0 ? void 0 : container.current;
-    if (!rootRef.current && !containerEle) return;
+    if (!rootRef.current && !containerEle)
+      return;
     var rootRect = getRect(rootRef.current);
     var containerRect = getRect(containerEle);
     var clientHeight = document.documentElement.clientHeight;
     var stCurrent = stickyRef.current;
     var stickyRect = getRect(stCurrent);
-    var fixed = clientHeight - bottom < rootRect.bottom;
+    var fixed = clientHeight - threshold < rootRect.bottom;
     if (containerEle) {
-      fixed = containerRect.bottom > clientHeight - bottom - stickyRect.height && clientHeight - bottom - stickyRect.height > containerRect.top;
+      fixed = containerRect.bottom > clientHeight - threshold - stickyRect.height && clientHeight - threshold - stickyRect.height > containerRect.top;
     }
-    var defaultPostVal = fixed ? 'fixed' : 'inherit';
-    setStickyStyle(function (prev) {
+    var defaultPostVal = fixed ? "fixed" : "inherit";
+    setStickyStyle(function(prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
         position: defaultPostVal
       });
     });
     setIsFixed(fixed);
-  }, [position, container, bottom]);
-  var handleScroll = useCallback(function () {
+  }, [position, container, threshold]);
+  var handleScroll = useCallback(function() {
     var containerEle = container === null || container === void 0 ? void 0 : container.current;
-    if (!rootRef.current && !containerEle) return;
+    if (!rootRef.current && !containerEle)
+      return;
     var rootRect = getRect(rootRef.current);
     var stCurrent = stickyRef.current;
     var stickyRect = getRect(stCurrent);
     var containerRect = getRect(containerEle);
     if (rootRect.height) {
-      setRootStyle(function (prev) {
+      setRootStyle(function(prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           height: rootRect.height
         });
       });
     }
-    if (position === 'top') {
-      //  containerRect.bottom > top + stickyRect.height
-      if (containerEle) {
-        var fixed = top > rootRect.top && containerRect.bottom > 0;
-        var positionVal = fixed ? 'fixed' : 'inherit';
-        var diff = containerRect.bottom - top - stickyRect.height;
-        var transform = diff < 0 ? diff : 0;
-        setStickyStyle(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            position: positionVal,
-            transform: "translate3d(0, ".concat(transform, "px, 0)")
-          });
-        });
-        setIsFixed(fixed);
+    var getFixed = function getFixed2() {
+      var fixed2 = false;
+      if (position === "top") {
+        fixed2 = containerEle ? threshold > rootRect.top && containerRect.bottom > 0 : threshold > rootRect.top;
       } else {
-        var _fixed = top > rootRect.top;
-        var _positionVal = _fixed ? 'fixed' : 'inherit';
-        setStickyStyle(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            position: _positionVal
-          });
-        });
-        setIsFixed(_fixed);
+        var clientHeight = document.documentElement.clientHeight;
+        fixed2 = containerEle ? containerRect.bottom > 0 && clientHeight - threshold - stickyRect.height > containerRect.top : clientHeight - threshold < rootRect.bottom;
+      }
+      return {
+        position: fixed2 ? "fixed" : "inherit",
+        fixed: fixed2
+      };
+    };
+    var getTransform = function getTransform2() {
+      if (position === "top") {
+        if (containerEle) {
+          var diff = containerRect.bottom - threshold - stickyRect.height;
+          var transform = diff < 0 ? diff : 0;
+          return {
+            transform: "translate3d(0, ".concat(transform, "px, 0)")
+          };
+        }
+        return {};
       }
-    } else {
-      var clientHeight = document.documentElement.clientHeight;
-      if (containerEle) {
-        // clientHeight - bottom - stickyRect.height
-        var _fixed2 = containerRect.bottom > 0 && clientHeight - bottom - stickyRect.height > containerRect.top;
-        var _positionVal2 = _fixed2 ? 'fixed' : 'inherit';
-        var _diff = containerRect.bottom - (clientHeight - bottom);
-        var _transform = _diff < 0 ? _diff : 0;
-        setStickyStyle(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            position: _positionVal2,
+      if (position === "bottom") {
+        if (containerEle) {
+          var clientHeight = document.documentElement.clientHeight;
+          var _diff = containerRect.bottom - (clientHeight - threshold);
+          var _transform = _diff < 0 ? _diff : 0;
+          return {
             transform: "translate3d(0, ".concat(_transform, "px, 0)")
-          });
-        });
-        setIsFixed(_fixed2);
-      } else {
-        var _fixed3 = clientHeight - bottom < rootRect.bottom;
-        var _positionVal3 = _fixed3 ? 'fixed' : 'inherit';
-        setStickyStyle(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            position: _positionVal3
-          });
-        });
-        setIsFixed(_fixed3);
+          };
+        }
+        return {};
       }
-    }
-  }, [position, bottom, container, top]);
-  useWatch(isFixed, function () {
+      return {};
+    };
+    var fixed = getFixed();
+    setStickyStyle(function(prev) {
+      return _objectSpread(_objectSpread(_objectSpread({}, prev), getTransform()), {}, {
+        position: fixed.position
+      });
+    });
+    setIsFixed(fixed.fixed);
+  }, [position, threshold, container]);
+  useWatch(isFixed, function() {
     onChange && onChange(isFixed);
   });
-  useEffect(function () {
+  useEffect(function() {
     var el = getElement();
-    el.addEventListener('scroll', handleScroll, false);
-    return function () {
-      el.removeEventListener('tap', handleScroll);
+    el.addEventListener("scroll", handleScroll, false);
+    return function() {
+      el.removeEventListener("tap", handleScroll);
     };
   }, [getElement, handleScroll]);
   return React__default.createElement("div", _objectSpread({
     ref: rootRef,
-    style: rootStyle,
-    className: classNames(b(), className)
+    style: _objectSpread(_objectSpread({}, style), rootStyle),
+    className: classNames(classPrefix, className)
   }, rest), React__default.createElement("div", {
-    // 应符合 bem 规范
-    className: "nut-sticky-box",
+    className: "nut-sticky--box",
     ref: stickyRef,
     style: stickyStyle
   }, children));
 };
 Sticky.defaultProps = defaultProps;
-Sticky.displayName = 'NutSticky';
-export { Sticky as default };
+Sticky.displayName = "NutSticky";
+export {
+  Sticky as default
+};

package/dist/esm/SubSideNavBar.js

@@ -1,69 +1,79 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "ikey", "children", "onClick", "open"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React__default, { useContext, useRef, useCallback, useEffect } from 'react';
-import { O as OffsetContext, h as handleClick } from './offsetContext-3ab00d40.js';
+var _excluded = ["title", "key", "children", "onClick", "open"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useContext, useRef, useCallback, useEffect } from "react";
+import { O as OffsetContext, h as handleClick } from "./offsetContext.js";
 var defaultProps = {
   open: true
 };
-var SubSideNavBar = function SubSideNavBar(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    title = _defaultProps$props.title,
-    ikey = _defaultProps$props.ikey,
-    children = _defaultProps$props.children,
-    onClick = _defaultProps$props.onClick,
-    open = _defaultProps$props.open,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  // const offset = props.offset ? Number(props.offset) : 20
+var SubSideNavBar = function SubSideNavBar2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), title = _defaultProps$props.title, key = _defaultProps$props.key, children = _defaultProps$props.children, onClick = _defaultProps$props.onClick, open = _defaultProps$props.open, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var offset = useContext(OffsetContext);
-  console.log('offset>>>>>>>', offset);
+  console.log("offset>>>>>>>", offset);
   var listRef = useRef(null);
-  var setListLevel = useCallback(function (nodeList) {
-    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var setListLevel = useCallback(function(nodeList) {
+    var level = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
     var titleClass = nodeList[0].className;
-    if (titleClass.includes('nut-subsidenavbar__title')) {
-      // const left = 15 + offset * level
+    if (titleClass.includes("nut-subsidenavbar__title")) {
       var left = offset * (level + 1);
       nodeList[0].style.paddingLeft = "".concat(left, "px");
     }
-    var childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter(function (item) {
+    var childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter(function(item) {
       return item.nodeType !== 3 && item.nodeType !== 8;
     });
-    childNodes.forEach(function (item) {
+    childNodes.forEach(function(item) {
       var itemClass = item.className;
-      if (itemClass.includes('nut-subsidenavbar__item')) {
-        // const left = 15 + offset * (level + 1)
+      if (itemClass.includes("nut-subsidenavbar__item")) {
         var _left = offset * (level + 2);
         item.style.paddingLeft = "".concat(_left, "px");
       }
-      if (itemClass.includes('nut-subsidenavbar__list')) {
-        var _level = item.getAttribute('level') ? Number(item.getAttribute('level')) : 1;
-        _level += 1;
-        item.setAttribute('level', _level.toString());
-        item.children && setListLevel(item.children, _level);
+      if (itemClass.includes("nut-subsidenavbar__list")) {
+        var level2 = item.getAttribute("level") ? Number(item.getAttribute("level")) : 1;
+        level2 += 1;
+        item.setAttribute("level", level2.toString());
+        item.children && setListLevel(item.children, level2);
       }
     });
   }, [offset]);
-  var clickFn = function clickFn(e) {
+  var clickFn = function clickFn2(e) {
     handleClick(e);
     var currentClass = e.currentTarget.className;
-    var isShow = currentClass.includes('nutShow');
+    var isShow = currentClass.includes("nutShow");
     onClick && onClick({
-      title: title,
-      ikey: ikey,
-      isShow: isShow
+      title,
+      key,
+      isShow
     });
   };
-  useEffect(function () {
+  useEffect(function() {
     var _listRef$current, _listRef$current2;
     var childNodes = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.children;
-    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.setAttribute('level', '1');
+    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.setAttribute("level", "1");
     childNodes && setListLevel(childNodes);
   }, [setListLevel]);
-  var divClass = open ? 'nut-subsidenavbar__list  nutShow' : 'nut-subsidenavbar__list  nutHide';
-  var iconClass = open ? 'arrow-icon arrow-down' : 'arrow-icon arrow-up';
+  var divClass = open ? "nut-subsidenavbar__list  nutShow" : "nut-subsidenavbar__list  nutHide";
+  var iconClass = open ? "arrow-icon arrow-down" : "arrow-icon arrow-up";
   return React__default.createElement("div", _objectSpread({
     className: divClass,
     ref: listRef,
@@ -76,4 +86,6 @@ var SubSideNavBar = function SubSideNavBar(props) {
     className: "nut-subsidenavbar__content"
   }, children));
 };
-export { SubSideNavBar as default };
+export {
+  SubSideNavBar as default
+};