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

package/dist/esm/Drag.js

@@ -1,60 +1,30 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["attract", "direction", "boundary", "children", "className", "style"];
-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, useRef, useEffect } from "react";
 import { useDrag } from "@use-gesture/react";
 import { useSpring, animated } from "@react-spring/web";
 import { C as ComponentDefaults } from "./typings.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  attract: false,
-  direction: void 0,
-  boundary: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
-var Drag = function Drag2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), attract = _defaultProps$props.attract, direction = _defaultProps$props.direction, boundary = _defaultProps$props.boundary, children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, reset = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classPrefix = "nut-drag";
-  var _useState = useState(boundary), _useState2 = _slicedToArray(_useState, 2), boundaryState = _useState2[0], setBoundaryState = _useState2[1];
-  var myDrag = useRef(null);
-  var _useSpring = useSpring(function() {
-    return {
-      x: 0,
-      y: 0
-    };
-  }), _useSpring2 = _slicedToArray(_useSpring, 2), currstyle = _useSpring2[0], api = _useSpring2[1];
-  var middleLine = useRef(0);
-  var getInfo = function getInfo2() {
-    var el = myDrag.current;
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { attract: false, direction: void 0, boundary: {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+} });
+const Drag = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { attract, direction, boundary, children, className, style } = _a, reset = __rest(_a, ["attract", "direction", "boundary", "children", "className", "style"]);
+  const classPrefix = "nut-drag";
+  const [boundaryState, setBoundaryState] = useState(boundary);
+  const myDrag = useRef(null);
+  const [currstyle, api] = useSpring(() => ({
+    x: 0,
+    y: 0
+  }));
+  const middleLine = useRef(0);
+  const getInfo = () => {
+    const el = myDrag.current;
     if (el) {
-      var offsetWidth = el.offsetWidth, offsetHeight = el.offsetHeight, offsetTop = el.offsetTop, offsetLeft = el.offsetLeft;
-      var _document$documentEle = document.documentElement, clientWidth = _document$documentEle.clientWidth, clientHeight = _document$documentEle.clientHeight;
-      var top = boundary.top, left = boundary.left, bottom = boundary.bottom, right = boundary.right;
+      const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = el;
+      const { clientWidth, clientHeight } = document.documentElement;
+      const { top, left, bottom, right } = boundary;
       setBoundaryState({
         top: -offsetTop + top,
         left: -offsetLeft + left,
@@ -64,21 +34,12 @@ var Drag = function Drag2(props) {
       middleLine.current = clientWidth - offsetWidth - offsetLeft - (clientWidth - offsetWidth) / 2;
     }
   };
-  var bind = useDrag(function(_ref) {
-    var down = _ref.down, last = _ref.last, _ref$offset = _slicedToArray(_ref.offset, 2), x = _ref$offset[0], y = _ref$offset[1];
-    api.start({
-      x,
-      y,
-      immediate: down
-    });
+  const bind = useDrag(({ down, last, offset: [x, y] }) => {
+    api.start({ x, y, immediate: down });
     if (last) {
       if (props.direction !== "y" && props.attract) {
         if (x < middleLine.current) {
-          api.start({
-            x: boundaryState.left,
-            y,
-            immediate: down
-          });
+          api.start({ x: boundaryState.left, y, immediate: down });
         } else {
           api.start({
             x: boundaryState.right,
@@ -89,23 +50,18 @@ var Drag = function Drag2(props) {
       }
     }
   }, {
-    from: function from() {
-      return [currstyle.x.get(), currstyle.y.get()];
-    },
+    from: () => [currstyle.x.get(), currstyle.y.get()],
     axis: direction,
     bounds: boundaryState
   });
-  useEffect(function() {
+  useEffect(() => {
     getInfo();
   }, [myDrag]);
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    style,
-    className: "".concat(classPrefix, " ").concat(className)
-  }, reset), {}, {
-    ref: myDrag
-  }), React__default.createElement(animated.div, _objectSpread({
-    style: currstyle
-  }, bind()), children));
+  return React__default.createElement(
+    "div",
+    Object.assign({ style, className: `${classPrefix} ${className}` }, reset, { ref: myDrag }),
+    React__default.createElement(animated.div, Object.assign({ style: currstyle }, bind()), children)
+  );
 };
 Drag.defaultProps = defaultProps;
 Drag.displayName = "NutDrag";

package/dist/esm/Elevator.js

@@ -1,88 +1,56 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["height", "floorKey", "list", "sticky", "spaceHeight", "titleHeight", "showKeys", "className", "style", "onItemClick", "onIndexClick", "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, { createContext, useRef, useState, useEffect } from "react";
 import { useGesture } from "@use-gesture/react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
-var elevatorContext = createContext({});
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  height: "200px",
-  floorKey: "title",
-  list: [],
-  sticky: false,
-  spaceHeight: 23,
-  titleHeight: 35,
-  showKeys: true
-});
-var Elevator = function Elevator2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), height = _defaultProps$props.height, floorKey = _defaultProps$props.floorKey, list = _defaultProps$props.list, sticky = _defaultProps$props.sticky, spaceHeight = _defaultProps$props.spaceHeight, titleHeight = _defaultProps$props.titleHeight, showKeys = _defaultProps$props.showKeys, className = _defaultProps$props.className, style = _defaultProps$props.style, onItemClick = _defaultProps$props.onItemClick, onIndexClick = _defaultProps$props.onIndexClick, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classPrefix = "nut-elevator";
-  var listview = useRef(null);
-  var initData = {
+const elevatorContext = createContext({});
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { height: "200px", floorKey: "title", list: [], sticky: false, spaceHeight: 23, titleHeight: 35, showKeys: true });
+const Elevator = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { height, floorKey, list, sticky, spaceHeight, titleHeight, showKeys, className, style, onItemClick, onIndexClick, children } = _a, rest = __rest(_a, ["height", "floorKey", "list", "sticky", "spaceHeight", "titleHeight", "showKeys", "className", "style", "onItemClick", "onIndexClick", "children"]);
+  const classPrefix = "nut-elevator";
+  const listview = useRef(null);
+  const initData = {
     anchorIndex: 0,
     listHeight: [],
     listGroup: [],
     scrollY: 0
   };
-  var touchState = useRef({
+  const touchState = useRef({
     y1: 0,
     y2: 0
   });
-  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), scrollY = _useState2[0], setScrollY = _useState2[1];
-  var _useState3 = useState({}), _useState4 = _slicedToArray(_useState3, 2), currentData = _useState4[0], setCurrentData = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), currentKey = _useState6[0], setCurrentKey = _useState6[1];
-  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), currentIndex = _useState8[0], setCurrentIndex = _useState8[1];
-  var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), codeIndex = _useState10[0], setCodeIndex = _useState10[1];
-  var _useState11 = useState(false), _useState12 = _slicedToArray(_useState11, 2), scrollStart = _useState12[0], setScrollStart = _useState12[1];
-  var state = useRef(initData);
-  var resetScrollState = function resetScrollState2() {
+  const [scrollY, setScrollY] = useState(0);
+  const [currentData, setCurrentData] = useState({});
+  const [currentKey, setCurrentKey] = useState("");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [codeIndex, setCodeIndex] = useState(0);
+  const [scrollStart, setScrollStart] = useState(false);
+  const state = useRef(initData);
+  const resetScrollState = () => {
     setScrollStart(false);
   };
-  var getData = function getData2(el, name) {
-    var prefix = "data-";
+  const getData = (el, name) => {
+    const prefix = "data-";
     return el.getAttribute(prefix + name);
   };
-  var calculateHeight = function calculateHeight2() {
-    var height2 = 0;
+  const calculateHeight = () => {
+    let height2 = 0;
     state.current.listHeight.push(height2);
-    for (var i = 0; i < state.current.listGroup.length; i++) {
-      var item = state.current.listGroup[i];
+    for (let i = 0; i < state.current.listGroup.length; i++) {
+      const item = state.current.listGroup[i];
       height2 += item.clientHeight;
       state.current.listHeight.push(height2);
     }
   };
-  var scrollTo = function scrollTo2(index) {
+  const scrollTo = (index) => {
     if (!index && index !== 0) {
       return;
     }
     if (!state.current.listHeight.length) {
       calculateHeight();
     }
-    var cacheIndex = index;
+    let cacheIndex = index;
     if (index < 0) {
       cacheIndex = 0;
     }
@@ -94,59 +62,55 @@ var Elevator = function Elevator2(props) {
       listview.current.scrollTo(0, state.current.listHeight[cacheIndex]);
     }
   };
-  var bind = useGesture({
-    onDragStart: function onDragStart(_ref) {
-      var target = _ref.target, offset = _ref.offset;
+  const bind = useGesture({
+    onDragStart: ({ target, offset }) => {
       setScrollStart(true);
-      var index = Number(getData(target, "index"));
+      const index = Number(getData(target, "index"));
       touchState.current.y1 = offset[1];
       state.current.anchorIndex = +index;
-      setCodeIndex(function(codeIndex2) {
-        return codeIndex2 + index;
-      });
+      setCodeIndex((codeIndex2) => codeIndex2 + index);
       scrollTo(index);
     },
-    onDragEnd: function onDragEnd(_ref2) {
-      var offset = _ref2.offset;
+    onDragEnd: ({ offset }) => {
       touchState.current.y2 = offset[1];
-      var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
-      var cacheIndex = state.current.anchorIndex + Math.round(delta);
+      const delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
+      const cacheIndex = state.current.anchorIndex + Math.round(delta);
       setCodeIndex(cacheIndex);
       scrollTo(cacheIndex);
       resetScrollState();
     }
   });
-  var handleClickItem = function handleClickItem2(key, item) {
+  const handleClickItem = (key, item) => {
     onItemClick && onItemClick(key, item);
     setCurrentData(item);
     setCurrentKey(key);
   };
-  var handleClickIndex = function handleClickIndex2(key) {
+  const handleClickIndex = (key) => {
     onIndexClick && onIndexClick(key);
   };
-  var setListGroup = function setListGroup2() {
+  const setListGroup = () => {
     if (listview.current) {
-      var els = listview.current.querySelectorAll(".nut-elevator-list-item");
-      els.forEach(function(el) {
+      const els = listview.current.querySelectorAll(".nut-elevator-list-item");
+      els.forEach((el) => {
         if (el != null && !state.current.listGroup.includes(el)) {
           state.current.listGroup.push(el);
         }
       });
     }
   };
-  var listViewScroll = function listViewScroll2(e) {
-    var listHeight = state.current.listHeight;
+  const listViewScroll = (e) => {
+    const { listHeight } = state.current;
     if (!listHeight.length) {
       calculateHeight();
     }
-    var target = e.target;
-    var scrollTop = target.scrollTop;
+    const target = e.target;
+    let { scrollTop } = target;
     scrollTop = Math.ceil(scrollTop);
     state.current.scrollY = scrollTop;
     setScrollY(scrollTop);
-    for (var i = 0; i < listHeight.length - 1; i++) {
-      var height1 = listHeight[i];
-      var height2 = listHeight[i + 1];
+    for (let i = 0; i < listHeight.length - 1; i++) {
+      const height1 = listHeight[i];
+      const height2 = listHeight[i + 1];
       if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
         setCurrentIndex(i);
         return;
@@ -154,64 +118,60 @@ var Elevator = function Elevator2(props) {
     }
     setCurrentIndex(listHeight.length - 2);
   };
-  useEffect(function() {
+  useEffect(() => {
     if (listview.current) {
       setListGroup();
       listview.current.addEventListener("scroll", listViewScroll);
     }
   }, [listview]);
-  return React__default.createElement("div", _objectSpread({
-    className: "".concat(classPrefix, " ").concat(className),
-    style
-  }, rest), sticky && scrollY > 0 ? React__default.createElement("div", {
-    className: "".concat(classPrefix, "-list-fixed")
-  }, React__default.createElement("span", {
-    className: "".concat(classPrefix, "-list-fixed-title")
-  }, list[currentIndex][floorKey])) : null, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-list"),
-    style: {
-      height: Number.isNaN(+height) ? height : "".concat(height, "px")
-    }
-  }, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-list-inner"),
-    ref: listview
-  }, list.map(function(item, idx) {
-    return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-list-item"),
-      key: idx
-    }, React__default.createElement("div", {
-      className: "".concat(classPrefix, "-list-item-code")
-    }, item[floorKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function(subitem) {
-      return React__default.createElement("div", {
-        className: classNames(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-list-item-name"), true), "".concat(classPrefix, "-list-item-name-highcolor"), currentData.id === subitem.id && currentKey === item[floorKey])),
-        key: subitem.id,
-        onClick: function onClick() {
-          return handleClickItem(item[floorKey], subitem);
-        }
-      }, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement(elevatorContext.Provider, {
-        value: subitem
-      }, children)) : subitem.name);
-    })));
-  }))), showKeys ? React__default.createElement(React__default.Fragment, null, list.length && scrollStart ? React__default.createElement("div", {
-    className: classNames(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-code-current"), true), "".concat(classPrefix, "-code-current-current"), true))
-  }, list[codeIndex][floorKey]) : null, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-bars")
-  }, React__default.createElement(animated.div, _objectSpread(_objectSpread({
-    className: "".concat(classPrefix, "-bars-inner")
-  }, bind()), {}, {
-    style: {
-      touchAction: "pan-y"
-    }
-  }), list.map(function(item, index) {
-    return React__default.createElement("div", {
-      className: classNames(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-bars-inner-item"), true), "".concat(classPrefix, "-bars-inner-item-active"), item[floorKey] === list[currentIndex][floorKey])),
-      "data-index": index,
-      key: index,
-      onClick: function onClick() {
-        return handleClickIndex(item[floorKey]);
-      }
-    }, item[floorKey]);
-  })))) : null);
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: `${classPrefix} ${className}`, style }, rest),
+    sticky && scrollY > 0 ? React__default.createElement(
+      "div",
+      { className: `${classPrefix}-list-fixed` },
+      React__default.createElement("span", { className: `${classPrefix}-list-fixed-title` }, list[currentIndex][floorKey])
+    ) : null,
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-list`, style: { height: Number.isNaN(+height) ? height : `${height}px` } },
+      React__default.createElement("div", { className: `${classPrefix}-list-inner`, ref: listview }, list.map((item, idx) => {
+        return React__default.createElement(
+          "div",
+          { className: `${classPrefix}-list-item`, key: idx },
+          React__default.createElement("div", { className: `${classPrefix}-list-item-code` }, item[floorKey]),
+          React__default.createElement(React__default.Fragment, null, item.list.map((subitem) => {
+            return React__default.createElement("div", { className: classNames({
+              [`${classPrefix}-list-item-name`]: true,
+              [`${classPrefix}-list-item-name-highcolor`]: currentData.id === subitem.id && currentKey === item[floorKey]
+            }), key: subitem.id, onClick: () => handleClickItem(item[floorKey], subitem) }, children ? React__default.createElement(
+              React__default.Fragment,
+              null,
+              React__default.createElement(elevatorContext.Provider, { value: subitem }, children)
+            ) : subitem.name);
+          }))
+        );
+      }))
+    ),
+    showKeys ? React__default.createElement(
+      React__default.Fragment,
+      null,
+      list.length && scrollStart ? React__default.createElement("div", { className: classNames({
+        [`${classPrefix}-code-current`]: true,
+        [`${classPrefix}-code-current-current`]: true
+      }) }, list[codeIndex][floorKey]) : null,
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-bars` },
+        React__default.createElement(animated.div, Object.assign({ className: `${classPrefix}-bars-inner` }, bind(), { style: { touchAction: "pan-y" } }), list.map((item, index) => {
+          return React__default.createElement("div", { className: classNames({
+            [`${classPrefix}-bars-inner-item`]: true,
+            [`${classPrefix}-bars-inner-item-active`]: item[floorKey] === list[currentIndex][floorKey]
+          }), "data-index": index, key: index, onClick: () => handleClickIndex(item[floorKey]) }, item[floorKey]);
+        }))
+      )
+    ) : null
+  );
 };
 Elevator.defaultProps = defaultProps;
 Elevator.displayName = "NutElevator";