@nutui/nutui-react-taro 1.4.4 → 1.4.5-beta.0

package/dist/esm/elevator.taro-d7d65470.js

@@ -1,270 +1,196 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["height", "acceptKey", "indexList", "isSticky", "spaceHeight", "titleHeight", "className", "onClickItem", "onClickIndex", "children"];
-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, { createContext, useRef, useState, useEffect } from 'react';
 import Taro from '@tarojs/taro';
 import { ScrollView } from '@tarojs/components';
 import { c as cn } from './bem-893ad28d.js';
-var elevatorContext = createContext({});
-var defaultProps = {
-  height: '200px',
-  acceptKey: 'title',
-  indexList: [],
-  isSticky: false,
-  spaceHeight: 23,
-  titleHeight: 35,
-  className: 'weapp-elevator'
+
+const elevatorContext = createContext({});
+const defaultProps = {
+    height: '200px',
+    acceptKey: 'title',
+    indexList: [],
+    isSticky: false,
+    spaceHeight: 23,
+    titleHeight: 35,
+    className: 'weapp-elevator',
 };
-var Elevator = function Elevator(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    height = _defaultProps$props.height,
-    acceptKey = _defaultProps$props.acceptKey,
-    indexList = _defaultProps$props.indexList,
-    isSticky = _defaultProps$props.isSticky,
-    spaceHeight = _defaultProps$props.spaceHeight,
-    titleHeight = _defaultProps$props.titleHeight,
-    className = _defaultProps$props.className,
-    onClickItem = _defaultProps$props.onClickItem,
-    onClickIndex = _defaultProps$props.onClickIndex,
-    children = _defaultProps$props.children,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn('elevator');
-  var listview = useRef(null);
-  var initData = {
-    anchorIndex: 0,
-    listHeight: [],
-    listGroup: [],
-    scrollY: 0,
-    diff: -1,
-    fixedTop: 0
-  };
-  var 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 _useState13 = useState(0),
-    _useState14 = _slicedToArray(_useState13, 2),
-    scrollTop = _useState14[0],
-    setScrollTop = _useState14[1];
-  // 重置滚动参数
-  var resetScrollState = function resetScrollState() {
-    setScrollStart(false);
-  };
-  var clientHeight = function clientHeight() {
-    return listview.current ? listview.current.clientHeight : 0;
-  };
-  var getData = function getData(el) {
-    if (!el.dataset.index) {
-      return '0';
-    }
-    return el.dataset.index;
-  };
-  var calculateHeight = function calculateHeight() {
-    var height = 0;
-    state.current.listHeight.push(height);
-    for (var i = 0; i < state.current.listGroup.length; i++) {
-      var query = Taro.createSelectorQuery();
-      query.selectAll(".".concat(className, " .elevator__item__").concat(i)).boundingClientRect();
-      // eslint-disable-next-line no-loop-func
-      query.exec(function (res) {
-        if (res[0][0]) height += res[0][0].height;
-        // console.log(res, res[0][0].height, height, 'res')
-        state.current.listHeight.push(height);
-      });
-    }
-  };
-  var scrollTo = function scrollTo(index) {
-    if (!index && index !== 0) {
-      return;
-    }
-    if (!state.current.listHeight.length) {
-      calculateHeight();
-    }
-    var cacheIndex = index;
-    if (index < 0) {
-      cacheIndex = 0;
-    }
-    if (index > state.current.listHeight.length - 2) {
-      cacheIndex = state.current.listHeight.length - 2;
-    }
-    setCodeIndex(cacheIndex);
-    setScrollTop(state.current.listHeight[cacheIndex]);
-  };
-  var touchMove = function touchMove(e) {
-    var firstTouch = e.touches[0];
-    touchState.current.y2 = firstTouch.pageY;
-    var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
-    var cacheIndex = state.current.anchorIndex + Math.floor(delta);
-    setCodeIndex(cacheIndex);
-    scrollTo(cacheIndex);
-  };
-  var touchEnd = function touchEnd() {
-    resetScrollState();
-  };
-  var touchStart = function touchStart(e) {
-    setScrollStart(true);
-    var index = Number(getData(e.target));
-    var firstTouch = e.touches[0];
-    touchState.current.y1 = firstTouch.pageY;
-    state.current.anchorIndex = +index;
-    setCodeIndex(function (codeIndex) {
-      return codeIndex + index;
+const Elevator = (props) => {
+    const { height, acceptKey, indexList, isSticky, spaceHeight, titleHeight, className, onClickItem, onClickIndex, children, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('elevator');
+    const listview = useRef(null);
+    const initData = {
+        anchorIndex: 0,
+        listHeight: [],
+        listGroup: [],
+        scrollY: 0,
+        diff: -1,
+        fixedTop: 0,
+    };
+    const touchState = useRef({
+        y1: 0,
+        y2: 0,
     });
-    scrollTo(index);
-  };
-  var handleClickItem = function handleClickItem(key, item) {
-    onClickItem && onClickItem(key, item);
-    setCurrentData(item);
-    setCurrentKey(key);
-  };
-  var handleClickIndex = function handleClickIndex(key) {
-    onClickIndex && onClickIndex(key);
-  };
-  var setListGroup = function setListGroup() {
-    if (listview.current) {
-      Taro.createSelectorQuery().selectAll(".".concat(className, " .nut-elevator__list__item")).node(function (el) {
-        state.current.listGroup = _toConsumableArray(Object.keys(el));
-        calculateHeight();
-      }).exec();
-    }
-  };
-  var listViewScroll = function listViewScroll(e) {
-    var listHeight = state.current.listHeight;
-    if (!listHeight.length) {
-      calculateHeight();
-    }
-    var target = e.target;
-    var scrollTop = target.scrollTop;
-    state.current.scrollY = Math.floor(scrollTop);
-    setScrollY(scrollTop);
-    for (var i = 0; i < listHeight.length - 1; i++) {
-      var height1 = listHeight[i];
-      var height2 = listHeight[i + 1];
-      if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
-        setCurrentIndex(i);
-        state.current.diff = height2 - state.current.scrollY;
-        return;
-      }
-    }
-    setCurrentIndex(listHeight.length - 2);
-  };
-  useEffect(function () {
-    if (listview.current) {
-      Taro.nextTick(function () {
-        setListGroup();
-      });
-    }
-  }, [listview]);
-  useEffect(function () {
-    var _state$current = state.current,
-      listHeight = _state$current.listHeight,
-      diff = _state$current.diff,
-      scrollY = _state$current.scrollY;
-    var fixedTop = diff > 0 && diff < titleHeight ? diff - titleHeight : 0;
-    if (scrollY + clientHeight() === listHeight[listHeight.length - 1]) {
-      if (fixedTop !== 0) {
-        fixedTop = 0;
-      }
-    }
-    if (state.current.fixedTop === fixedTop) return;
-    state.current.fixedTop = fixedTop;
-  }, [state.current.diff, titleHeight]);
-  return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className, " ")
-  }, rest), isSticky && scrollY > 0 ? React__default.createElement("div", {
-    className: b('list__fixed')
-  }, React__default.createElement("span", {
-    className: "fixed-title"
-  }, indexList[currentIndex][acceptKey])) : null, React__default.createElement("div", {
-    className: b('list'),
-    style: {
-      height: Number.isNaN(+height) ? height : "".concat(height, "px")
-    }
-  }, React__default.createElement(ScrollView, {
-    scrollTop: scrollTop,
-    scrollY: true,
-    className: b('list__inner'),
-    ref: listview,
-    onScroll: listViewScroll
-  }, indexList.map(function (item, idx) {
-    return React__default.createElement("div", {
-      className: "".concat(b('list__item'), " elevator__item__").concat(idx),
-      key: idx
-    }, React__default.createElement("div", {
-      className: b('list__item__code')
-    }, item[acceptKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function (subitem) {
-      return React__default.createElement("div", {
-        className: b('list__item__name', {
-          highcolor: currentData.id === subitem.id && currentKey === item[acceptKey]
-        }),
-        key: subitem.id,
-        onClick: function onClick() {
-          return handleClickItem(item[acceptKey], subitem);
+    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 [scrollTop, setScrollTop] = useState(0);
+    // 重置滚动参数
+    const resetScrollState = () => {
+        setScrollStart(false);
+    };
+    const clientHeight = () => {
+        return listview.current ? listview.current.clientHeight : 0;
+    };
+    const getData = (el) => {
+        if (!el.dataset.index) {
+            return '0';
+        }
+        return el.dataset.index;
+    };
+    const calculateHeight = () => {
+        let height = 0;
+        state.current.listHeight.push(height);
+        for (let i = 0; i < state.current.listGroup.length; i++) {
+            const query = Taro.createSelectorQuery();
+            query
+                .selectAll(`.${className} .elevator__item__${i}`)
+                .boundingClientRect();
+            // eslint-disable-next-line no-loop-func
+            query.exec((res) => {
+                if (res[0][0])
+                    height += res[0][0].height;
+                // console.log(res, res[0][0].height, height, 'res')
+                state.current.listHeight.push(height);
+            });
+        }
+    };
+    const scrollTo = (index) => {
+        if (!index && index !== 0) {
+            return;
+        }
+        if (!state.current.listHeight.length) {
+            calculateHeight();
+        }
+        let cacheIndex = index;
+        if (index < 0) {
+            cacheIndex = 0;
+        }
+        if (index > state.current.listHeight.length - 2) {
+            cacheIndex = state.current.listHeight.length - 2;
+        }
+        setCodeIndex(cacheIndex);
+        setScrollTop(state.current.listHeight[cacheIndex]);
+    };
+    const touchMove = (e) => {
+        const firstTouch = e.touches[0];
+        touchState.current.y2 = firstTouch.pageY;
+        const delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
+        const cacheIndex = state.current.anchorIndex + Math.floor(delta);
+        setCodeIndex(cacheIndex);
+        scrollTo(cacheIndex);
+    };
+    const touchEnd = () => {
+        resetScrollState();
+    };
+    const touchStart = (e) => {
+        setScrollStart(true);
+        const index = Number(getData(e.target));
+        const firstTouch = e.touches[0];
+        touchState.current.y1 = firstTouch.pageY;
+        state.current.anchorIndex = +index;
+        setCodeIndex((codeIndex) => {
+            return codeIndex + index;
+        });
+        scrollTo(index);
+    };
+    const handleClickItem = (key, item) => {
+        onClickItem && onClickItem(key, item);
+        setCurrentData(item);
+        setCurrentKey(key);
+    };
+    const handleClickIndex = (key) => {
+        onClickIndex && onClickIndex(key);
+    };
+    const setListGroup = () => {
+        if (listview.current) {
+            Taro.createSelectorQuery()
+                .selectAll(`.${className} .nut-elevator__list__item`)
+                .node((el) => {
+                state.current.listGroup = [...Object.keys(el)];
+                calculateHeight();
+            })
+                .exec();
+        }
+    };
+    const listViewScroll = (e) => {
+        const { listHeight } = state.current;
+        if (!listHeight.length) {
+            calculateHeight();
+        }
+        const target = e.target;
+        const { scrollTop } = target;
+        state.current.scrollY = Math.floor(scrollTop);
+        setScrollY(scrollTop);
+        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);
+                state.current.diff = height2 - state.current.scrollY;
+                return;
+            }
+        }
+        setCurrentIndex(listHeight.length - 2);
+    };
+    useEffect(() => {
+        if (listview.current) {
+            Taro.nextTick(() => {
+                setListGroup();
+            });
+        }
+    }, [listview]);
+    useEffect(() => {
+        const { listHeight, diff, scrollY } = state.current;
+        let fixedTop = diff > 0 && diff < titleHeight ? diff - titleHeight : 0;
+        if (scrollY + clientHeight() === listHeight[listHeight.length - 1]) {
+            if (fixedTop !== 0) {
+                fixedTop = 0;
+            }
         }
-      }, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement(elevatorContext.Provider, {
-        value: subitem
-      }, children)) : subitem.name);
-    })));
-  }))), indexList.length && scrollStart ? React__default.createElement("div", {
-    className: b('code--current', {
-      current: true
-    })
-  }, indexList[codeIndex][acceptKey]) : null, React__default.createElement("div", {
-    className: b('bars')
-  }, React__default.createElement("div", {
-    className: b('bars__inner'),
-    onTouchStart: function onTouchStart(event) {
-      return touchStart(event);
-    },
-    onTouchMove: function onTouchMove(event) {
-      return touchMove(event);
-    },
-    onTouchEnd: touchEnd,
-    style: {
-      touchAction: 'pan-y'
-    }
-  }, indexList.map(function (item, index) {
-    return React__default.createElement("div", {
-      className: "".concat(b('bars__inner__item', {
-        active: item[acceptKey] === indexList[currentIndex][acceptKey]
-      }), " "),
-      "data-index": index,
-      key: index,
-      onClick: function onClick() {
-        return handleClickIndex(item[acceptKey]);
-      }
-    }, item[acceptKey]);
-  }))));
+        if (state.current.fixedTop === fixedTop)
+            return;
+        state.current.fixedTop = fixedTop;
+    }, [state.current.diff, titleHeight]);
+    return (React__default.createElement("div", { className: `${b()} ${className} `, ...rest },
+        isSticky && scrollY > 0 ? (React__default.createElement("div", { className: b('list__fixed') },
+            React__default.createElement("span", { className: "fixed-title" }, indexList[currentIndex][acceptKey]))) : null,
+        React__default.createElement("div", { className: b('list'), style: { height: Number.isNaN(+height) ? height : `${height}px` } },
+            React__default.createElement(ScrollView, { scrollTop: scrollTop, scrollY: true, className: b('list__inner'), ref: listview, onScroll: listViewScroll }, indexList.map((item, idx) => {
+                return (React__default.createElement("div", { className: `${b('list__item')} elevator__item__${idx}`, key: idx },
+                    React__default.createElement("div", { className: b('list__item__code') }, item[acceptKey]),
+                    React__default.createElement(React__default.Fragment, null, item.list.map((subitem) => {
+                        return (React__default.createElement("div", { className: b('list__item__name', {
+                                highcolor: currentData.id === subitem.id &&
+                                    currentKey === item[acceptKey],
+                            }), key: subitem.id, onClick: () => handleClickItem(item[acceptKey], subitem) }, children ? (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement(elevatorContext.Provider, { value: subitem }, children))) : (subitem.name)));
+                    }))));
+            }))),
+        indexList.length && scrollStart ? (React__default.createElement("div", { className: b('code--current', { current: true }) }, indexList[codeIndex][acceptKey])) : null,
+        React__default.createElement("div", { className: b('bars') },
+            React__default.createElement("div", { className: b('bars__inner'), onTouchStart: (event) => touchStart(event), onTouchMove: (event) => touchMove(event), onTouchEnd: touchEnd, style: { touchAction: 'pan-y' } }, indexList.map((item, index) => {
+                return (React__default.createElement("div", { className: `${b('bars__inner__item', {
+                        active: item[acceptKey] === indexList[currentIndex][acceptKey],
+                    })} `, "data-index": index, key: index, onClick: () => handleClickIndex(item[acceptKey]) }, item[acceptKey]));
+            })))));
 };
 Elevator.defaultProps = defaultProps;
 Elevator.displayName = 'NutElevator';
+
 export { Elevator as E };