@arco-design/mobile-react 2.25.4 → 2.27.0

package/cjs/image-preview/methods.js

@@ -1,11 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.open = open;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _mobileUtils = require("@arco-design/mobile-utils");
+
 var _render = require("../_helpers/render");
+
 function open(Component) {
   return function (config, context) {
     var baseProps = (0, _extends2.default)({
@@ -13,32 +18,40 @@ function open(Component) {
     }, config || {}, {
       close: function close() {}
     });
-    var dynamicProps = (0, _extends2.default)({}, baseProps);
-
-    // 不同的key用不同的容器挂载
+    var dynamicProps = (0, _extends2.default)({}, baseProps); // 不同的key用不同的容器挂载
     // @en Different keys are mounted in different containers
+
     var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
+
     var _appendElementById = (0, _mobileUtils.appendElementById)(id, baseProps.getContainer),
-      div = _appendElementById.child;
+        div = _appendElementById.child;
+
     var leaving = false;
+
     var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context),
-      render = _ReactDOMRender.render;
+        render = _ReactDOMRender.render;
+
     function update(newConfig) {
       dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig || {});
       render(dynamicProps);
     }
+
     function close() {
       leaving = true;
       dynamicProps.openIndex = -1;
       render(dynamicProps);
     }
+
     dynamicProps.close = close;
+
     dynamicProps.onClose = function () {
       baseProps.onClose && baseProps.onClose();
+
       if (baseProps.unmountOnExit) {
         (0, _mobileUtils.removeElement)(div);
       }
     };
+
     dynamicProps.openIndex = -1;
     render(dynamicProps);
     setTimeout(function () {

package/cjs/image-preview/style/css/index.js

@@ -1,7 +1,11 @@
 "use strict";
 
 require("../../../../style/css/public.css");
+
 require("../../../transition/style/css");
+
 require("../../../carousel/style/css");
+
 require("../../../image/style/css");
+
 require("./index.css");

package/cjs/image-preview/style/index.js

@@ -1,7 +1,11 @@
 "use strict";
 
 require("../../../style/public.less");
+
 require("../../transition/style");
+
 require("../../carousel/style");
+
 require("../../image/style");
+
 require("./index.less");

package/cjs/index-bar/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IndexBarContext as IndexBarContextType } from './type';
+export declare const IndexBarContext: import("react").Context<IndexBarContextType>;

package/cjs/index-bar/context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.IndexBarContext = void 0;
+
+var _react = require("react");
+
+var IndexBarContext = /*#__PURE__*/(0, _react.createContext)({
+  sticky: true,
+  getScrollContainer: function getScrollContainer() {
+    return null;
+  },
+  updateRef: function updateRef() {}
+});
+exports.IndexBarContext = IndexBarContext;

package/cjs/index-bar/demo/style/css/mobile.css

@@ -0,0 +1,23 @@
+#demo-index-bar {
+  padding-bottom: 0px;
+}
+#demo-index-bar .arcodesign-mobile-title {
+  display: none;
+}
+#demo-index-bar .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  font-size: 0.32rem;
+}
+#demo-index-bar .arcodesign-mobile-demo-nav-inner::after {
+  border-bottom-color: transparent;
+}
+#demo-index-bar .custom-index-bar-height {
+  height: 480px;
+}
+#demo-index-bar .arco-tab-cell.vertical.line {
+  font-size: 0.32rem;
+}
+#demo-index-bar .arco-tab-cell.vertical.line:not(.last) {
+  margin-right: 2.78rem;
+}

package/cjs/index-bar/demo/style/mobile.less

@@ -0,0 +1,26 @@
+@import '../../../../style/mixin.less';
+
+#demo-index-bar {
+    padding-bottom: 0px;
+    .arcodesign-mobile-title {
+        display: none;
+    }
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(font-size, 16);
+    }
+    .arcodesign-mobile-demo-nav-inner::after {
+        border-bottom-color: transparent;
+    }
+
+    .custom-index-bar-height {
+        height: 480px;
+    }
+    .arco-tab-cell.vertical.line {
+        .rem(font-size, 16);
+        &:not(.last) {
+            .rem(margin-right, 139);
+        }
+    }
+}

package/cjs/index-bar/group.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IndexBarBaseData, IndexBarGroupProps, IndexBarGroupRef } from './type';
+export declare const IndexBarGroup: React.ForwardRefExoticComponent<IndexBarGroupProps<IndexBarBaseData> & React.RefAttributes<IndexBarGroupRef>>;

package/cjs/index-bar/group.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.IndexBarGroup = void 0;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _contextProvider = require("../context-provider");
+
+var _sticky = _interopRequireDefault(require("../sticky"));
+
+var _context = require("./context");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var IndexBarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var groupIndex = props.index,
+      list = props.list,
+      className = props.className,
+      style = props.style,
+      children = props.children,
+      listKey = props.listKey,
+      onGroupItemClick = props.onGroupItemClick,
+      renderGroupItem = props.renderGroupItem,
+      renderStickyItem = props.renderStickyItem;
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls; // 有可能是IndexBar.Group的写法，因此sticky从context中获得
+
+
+  var _useContext2 = (0, _react.useContext)(_context.IndexBarContext),
+      sticky = _useContext2.sticky,
+      getScrollContainer = _useContext2.getScrollContainer,
+      activeIndex = _useContext2.activeIndex,
+      updateRef = _useContext2.updateRef;
+
+  var domRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  }); // 用户自定义列表元素vnode的key
+
+  var formatGetListKey = function formatGetListKey(data, index) {
+    var _listKey;
+
+    return (_listKey = listKey == null ? void 0 : listKey(data, index)) != null ? _listKey : index;
+  };
+
+  var renderChildren = function renderChildren() {
+    var _ref;
+
+    return (_ref = children != null ? children : list == null ? void 0 : list.map(function (data, index) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-index-bar-group-item",
+        key: formatGetListKey(data, index),
+        onClick: function onClick() {
+          return onGroupItemClick == null ? void 0 : onGroupItemClick(groupIndex, data, index);
+        }
+      }, renderGroupItem ? renderGroupItem(groupIndex, data, index) : data.content);
+    })) != null ? _ref : null;
+  };
+
+  var renderIndexTitle = function renderIndexTitle() {
+    var _cls;
+
+    if (renderStickyItem) {
+      return renderStickyItem(groupIndex);
+    }
+
+    var titleDom = /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-index-bar-group-title", (_cls = {}, _cls[prefixCls + "-index-bar-group-active"] = activeIndex === groupIndex, _cls))
+    }, groupIndex);
+
+    var groupDom = domRef.current;
+    return sticky ? /*#__PURE__*/_react.default.createElement(_sticky.default, {
+      getContainer: function getContainer() {
+        return groupDom;
+      },
+      stickyStyle: "absolute",
+      getScrollContainer: getScrollContainer,
+      ref: function ref(stickyRef) {
+        return stickyRef && updateRef(groupIndex, stickyRef);
+      }
+    }, titleDom) : titleDom;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-index-bar-group", className),
+    style: style,
+    "data-index": groupIndex,
+    ref: domRef
+  }, renderIndexTitle(), renderChildren());
+});
+exports.IndexBarGroup = IndexBarGroup;

package/cjs/index-bar/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IndexBarBaseData, IndexBarProps, IndexBarRef } from './type';
+export type { IndexBarProps, IndexBarRef, IndexBarGroupProps, IndexBarGroupRef, IndexBarChangeTrigger, IndexBarIndexType, IndexBarTipType, } from './type';
+declare const _default: React.ForwardRefExoticComponent<IndexBarProps<IndexBarBaseData> & React.RefAttributes<IndexBarRef>> & {
+    Group: React.ForwardRefExoticComponent<import("./type").IndexBarGroupProps<IndexBarBaseData> & React.RefAttributes<import("./type").IndexBarGroupRef>>;
+};
+/**
+ * 索引栏组件
+ * @en IndexBar component
+ * @type 导航
+ * @type_en Navigation
+ * @name 索引栏
+ * @name_en SearchBar
+ */
+export default _default;

package/cjs/index-bar/index.js

@@ -0,0 +1,276 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _utils = require("@arco-design/mobile-utils/utils");
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _contextProvider = require("../context-provider");
+
+var _context = require("./context");
+
+var _group = require("./group");
+
+var _sideBar = require("./side-bar");
+
+var _utils2 = require("./utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      children = props.children,
+      _props$sticky = props.sticky,
+      sticky = _props$sticky === void 0 ? true : _props$sticky,
+      _props$groups = props.groups,
+      groups = _props$groups === void 0 ? [] : _props$groups,
+      _props$tipType = props.tipType,
+      tipType = _props$tipType === void 0 ? 'toast' : _props$tipType,
+      defaultIndex = props.defaultIndex,
+      scrollBezier = props.scrollBezier,
+      _props$scrollDuration = props.scrollDuration,
+      scrollDuration = _props$scrollDuration === void 0 ? 0 : _props$scrollDuration,
+      _props$disableSidebar = props.disableSidebar,
+      disableSidebar = _props$disableSidebar === void 0 ? false : _props$disableSidebar,
+      onChange = props.onChange,
+      onGroupItemClick = props.onGroupItemClick,
+      renderSideBar = props.renderSideBar,
+      renderSideBarItem = props.renderSideBarItem,
+      renderTip = props.renderTip,
+      renderStickyItem = props.renderStickyItem,
+      renderGroupItem = props.renderGroupItem; // 最外层dom元素的ref
+
+  var domRef = (0, _react.useRef)(null); // 所有group的容器dom，domRef的内容就是contanerRef和sidebar的内容
+
+  var containerRef = (0, _react.useRef)(null); // 过滤掉jsx写法中，奇怪的child
+
+  var formatChildren = (0, _utils2.filterValidIndexBarChild)(children); // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
+
+  var indexes = (0, _react.useMemo)(function () {
+    if (groups.length) {
+      return groups.map(function (group) {
+        return group.index;
+      });
+    }
+
+    return formatChildren.map(function (child) {
+      return child.props.index;
+    });
+  }, [children, groups]);
+  var groupRefs = (0, _react.useRef)({}); // 当前激活的Index
+
+  var _useState = (0, _react.useState)(function () {
+    return defaultIndex != null ? defaultIndex : indexes == null ? void 0 : indexes[0];
+  }),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1]; // 给IndexBarGroup用的上下文，主要是为了兼容jsx的写法
+
+
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      sticky: sticky,
+      getScrollContainer: function getScrollContainer() {
+        return containerRef.current;
+      },
+      activeIndex: activeIndex,
+      updateRef: function updateRef(groupIndex, stickyRef) {
+        groupRefs.current[groupIndex] = stickyRef;
+      }
+    };
+  }, [sticky, activeIndex]); // 用户是否正在触碰sidebar, 如果为true的话，禁用handleScroll的处理
+
+  var isScrollHandlerDisabledRef = (0, _react.useRef)(false);
+
+  var handleChangeActiveIndex = function handleChangeActiveIndex(index, type) {
+    setActiveIndex(function (oldActiveIndex) {
+      var newActiveIndex = (0, _utils2.getFormatIndex)(index, oldActiveIndex); // 和上一次激活的acitveIndex不同，再触发onChange事件
+
+      if (newActiveIndex !== oldActiveIndex) {
+        onChange == null ? void 0 : onChange(newActiveIndex, type);
+      }
+
+      return newActiveIndex;
+    });
+  }; // 要滚动到哪个指定的index
+
+
+  var handleScrollIntoIndex = function handleScrollIntoIndex(params) {
+    var index = params.index,
+        type = params.type,
+        _params$rightNow = params.rightNow,
+        rightNow = _params$rightNow === void 0 ? false : _params$rightNow; // 不传index默认走第一个index
+
+    var formatIndex = index != null ? index : indexes == null ? void 0 : indexes[0];
+    var containerDom = containerRef.current;
+
+    if (!(0, _utils2.isValidIndex)(index) || !containerDom) {
+      return;
+    } // 寻找Index对应的groupDom
+
+
+    var groupDom = (0, _utils2.getGroupDomFromIndex)(containerDom, formatIndex);
+
+    if (groupDom) {
+      handleChangeActiveIndex(formatIndex, type);
+      var duration = rightNow ? 0 : scrollDuration;
+      var targetScrollTop = groupDom.offsetTop; // 将屏幕滚动到groupDom
+      // 手动触发需要禁用handleScroll事件
+
+      if (type === 'manual') {
+        isScrollHandlerDisabledRef.current = true;
+        setTimeout(function () {
+          isScrollHandlerDisabledRef.current = false;
+        }, duration);
+      }
+
+      if (duration > 0) {
+        (0, _utils.scrollWithAnimation)(containerDom.scrollTop, targetScrollTop, function (top) {
+          return containerDom.scrollTop = top;
+        }, duration, scrollBezier);
+      } else {
+        containerDom.scrollTop = targetScrollTop;
+      }
+    }
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      scrollToIndex: function scrollToIndex(index, rightNow) {
+        if ((0, _utils2.isValidIndex)(index)) {
+          handleScrollIntoIndex({
+            index: index,
+            rightNow: rightNow,
+            type: 'manual'
+          });
+        }
+      },
+      recalculatePosition: function recalculatePosition(targetIndex) {
+        var formatIndex = targetIndex != null ? targetIndex : activeIndex;
+
+        if (formatIndex) {
+          var targetStickyRef = groupRefs.current[formatIndex];
+
+          if (targetStickyRef && targetStickyRef.recalculatePosition) {
+            targetStickyRef.recalculatePosition();
+          }
+        }
+      }
+    };
+  });
+
+  var renderChildren = function renderChildren() {
+    if (formatChildren.length) {
+      return formatChildren;
+    }
+
+    return groups == null ? void 0 : groups.map(function (group) {
+      return /*#__PURE__*/_react.default.createElement(_group.IndexBarGroup, {
+        index: group.index,
+        key: group.index,
+        list: group.list,
+        onGroupItemClick: onGroupItemClick,
+        renderGroupItem: renderGroupItem,
+        renderStickyItem: renderStickyItem
+      });
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    var _containerRef$current;
+
+    var handleScroll = (0, _lodash.default)(function () {
+      // 用户正在触碰sidebar和手动触发scroll时禁用滚动事件的处理
+      if (!containerRef.current || isScrollHandlerDisabledRef.current) {
+        return;
+      } // 根据滚动的距离，获取处于屏幕最顶部的group是哪个
+
+
+      var scrollTop = containerRef.current.scrollTop;
+
+      for (var i = 0; i < containerRef.current.children.length; i++) {
+        var child = containerRef.current.children[i];
+
+        if (!child || !child.dataset || typeof child.dataset.index === 'undefined') {
+          continue;
+        }
+
+        if (child.offsetTop + child.clientHeight >= scrollTop) {
+          handleChangeActiveIndex(child.dataset.index, 'swipe');
+          break;
+        }
+      }
+    }, 100); // 页面挂载时，如果是传入了defaultIndex，则滚动到对应位置
+
+    if (activeIndex) {
+      handleScrollIntoIndex({
+        index: activeIndex,
+        rightNow: true,
+        type: 'manual'
+      });
+    }
+
+    (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.addEventListener('scroll', handleScroll);
+    return function () {
+      var _containerRef$current2;
+
+      (_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/_react.default.createElement(_context.IndexBarContext.Provider, {
+      value: contextValue
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-index-bar", className),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-index-bar-container",
+      ref: containerRef
+    }, renderChildren()), !disableSidebar && /*#__PURE__*/_react.default.createElement(_sideBar.IndexBarSideBar, {
+      tipType: tipType,
+      activeIndex: activeIndex,
+      prefixCls: prefixCls,
+      indexes: indexes,
+      onTouching: function onTouching(isTouching) {
+        return isScrollHandlerDisabledRef.current = isTouching;
+      },
+      onClick: function onClick(newIndex) {
+        return handleScrollIntoIndex({
+          index: newIndex,
+          type: 'sidebar'
+        });
+      },
+      renderSideBar: renderSideBar,
+      renderSideBarItem: renderSideBarItem,
+      renderTip: renderTip
+    })));
+  });
+});
+/**
+ * 索引栏组件
+ * @en IndexBar component
+ * @type 导航
+ * @type_en Navigation
+ * @name 索引栏
+ * @name_en SearchBar
+ */
+
+var _default = (0, _mobileUtils.componentWrapper)(IndexBar, {
+  Group: _group.IndexBarGroup
+});
+
+exports.default = _default;

package/cjs/index-bar/side-bar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IndexBarSideBarProps } from './type';
+export declare function IndexBarSideBar(props: IndexBarSideBarProps): JSX.Element;

package/cjs/index-bar/side-bar.js

@@ -0,0 +1,102 @@
+"use strict";
+
+exports.__esModule = true;
+exports.IndexBarSideBar = IndexBarSideBar;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function IndexBarSideBar(props) {
+  var _cls;
+
+  var indexes = props.indexes,
+      prefixCls = props.prefixCls,
+      onTouching = props.onTouching,
+      onClick = props.onClick,
+      activeIndex = props.activeIndex,
+      tipType = props.tipType,
+      renderSideBar = props.renderSideBar,
+      _props$renderSideBarI = props.renderSideBarItem,
+      renderSideBarItem = _props$renderSideBarI === void 0 ? function (index) {
+    return index;
+  } : _props$renderSideBarI,
+      propsRenderTip = props.renderTip;
+
+  var _useState = (0, _react.useState)(false),
+      isTouching = _useState[0],
+      originSetIsTouching = _useState[1];
+
+  var setIsTouching = function setIsTouching(touching) {
+    originSetIsTouching(touching);
+    onTouching(touching);
+  };
+
+  var handleTouchingStart = function handleTouchingStart() {
+    return setIsTouching(true);
+  };
+
+  var handleTouchingStop = function handleTouchingStop() {
+    return setIsTouching(false);
+  };
+
+  var handleTouchMove = function handleTouchMove(e) {
+    var _e$touches, _target$dataset;
+
+    if (!isTouching || !((_e$touches = e.touches) != null && _e$touches.length)) {
+      return;
+    }
+
+    var _e$touches$ = e.touches[0],
+        clientX = _e$touches$.clientX,
+        clientY = _e$touches$.clientY;
+    var target = document.elementFromPoint(clientX, clientY);
+
+    if (target && (_target$dataset = target.dataset) != null && _target$dataset.index) {
+      onClick(target.dataset.index);
+    }
+  };
+
+  var renderSideBarTip = function renderSideBarTip(index, type) {
+    if (propsRenderTip) {
+      return propsRenderTip(index);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-index-bar-sidebar-" + type
+    }, index);
+  };
+
+  var node = /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-index-bar-sidebar", (_cls = {}, _cls[prefixCls + "-index-bar-sidebar-touching"] = isTouching, _cls)),
+    onTouchStart: function onTouchStart() {
+      return handleTouchingStart();
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleTouchingStop();
+    },
+    onTouchCancel: function onTouchCancel() {
+      return handleTouchingStop();
+    },
+    onTouchMove: handleTouchMove
+  }, tipType === 'toast' && isTouching && activeIndex && renderSideBarTip(activeIndex, 'toast'), indexes.map(function (index) {
+    var _cls2;
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-index-bar-sidebar-item", (_cls2 = {}, _cls2[prefixCls + "-index-bar-sidebar-active"] = activeIndex === index, _cls2)),
+      key: index,
+      onTouchStart: function onTouchStart() {
+        return onClick(index);
+      },
+      "data-index": index
+    }, tipType === 'sweat' && isTouching && activeIndex === index && renderSideBarTip(index, 'sweat'), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-index-bar-sidebar-item-wrapper"
+    }, renderSideBarItem(index)));
+  }));
+
+  return renderSideBar ? renderSideBar(node) : node;
+}