@arco-design/mobile-react 2.38.4 → 2.39.0

package/esm/image-preview/methods.js

@@ -5,44 +5,35 @@ export function open(Component) {
   return function (config, context) {
     var baseProps = _extends({}, config || {}, {
       close: function close() {}
-    }); // 不同的key用不同的容器挂载
-    // @en Different keys are mounted in different containers
-
+    });
 
+    // 不同的key用不同的容器挂载
+    // @en Different keys are mounted in different containers
     var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
-
     var _appendElementById = appendElementById(id, baseProps.getContainer),
-        div = _appendElementById.child;
-
+      div = _appendElementById.child;
     var leaving = false;
-
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-        render = _ReactDOMRender.render;
-
+      render = _ReactDOMRender.render;
     var dynamicProps = _extends({}, baseProps, {
       getContainer: function getContainer() {
         return div;
       }
     });
-
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig || {});
       render(dynamicProps);
     }
-
     function close() {
       leaving = true;
       dynamicProps.openIndex = -1;
       render(dynamicProps);
     }
-
     dynamicProps.close = close;
-
     dynamicProps.onClose = function () {
       baseProps.onClose && baseProps.onClose();
       removeElement(div);
     };
-
     dynamicProps.openIndex = -1;
     render(dynamicProps);
     setTimeout(function () {

package/esm/index-bar/group.js

@@ -5,41 +5,36 @@ import Sticky from '../sticky';
 import { IndexBarContext } from './context';
 export var IndexBarGroup = /*#__PURE__*/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;
-
+    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 = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls; // 有可能是IndexBar.Group的写法，因此sticky从context中获得
-
-
+    prefixCls = _useContext.prefixCls;
+  // 有可能是IndexBar.Group的写法，因此sticky从context中获得
   var _useContext2 = useContext(IndexBarContext),
-      sticky = _useContext2.sticky,
-      getScrollContainer = _useContext2.getScrollContainer,
-      activeIndex = _useContext2.activeIndex,
-      updateRef = _useContext2.updateRef;
-
+    sticky = _useContext2.sticky,
+    getScrollContainer = _useContext2.getScrollContainer,
+    activeIndex = _useContext2.activeIndex,
+    updateRef = _useContext2.updateRef;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
     };
-  }); // 用户自定义列表元素vnode的key
+  });
 
+  // 用户自定义列表元素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.createElement("div", {
         className: prefixCls + "-index-bar-group-item",
@@ -50,14 +45,11 @@ export var IndexBarGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       }, 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.createElement("div", {
       className: cls(prefixCls + "-index-bar-group-title", (_cls = {}, _cls[prefixCls + "-index-bar-group-active"] = activeIndex === groupIndex, _cls))
     }, groupIndex);
@@ -75,7 +67,6 @@ export var IndexBarGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, titleDom) : titleDom;
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-index-bar-group", className),
     style: style,

package/esm/index-bar/index.js

@@ -8,55 +8,53 @@ import { IndexBarSideBar } from './side-bar';
 import { filterValidIndexBarChild, getGroupDomFromIndex, getFormatIndex, isValidIndex } from './utils';
 var IndexBar = /*#__PURE__*/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 = useRef(null); // 所有group的容器dom，domRef的内容就是contanerRef和sidebar的内容
-
-  var containerRef = useRef(null); // 过滤掉jsx写法中，奇怪的child
-
-  var formatChildren = filterValidIndexBarChild(children); // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
-
+    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 = useRef(null);
+  // 所有group的容器dom，domRef的内容就是contanerRef和sidebar的内容
+  var containerRef = useRef(null);
+  // 过滤掉jsx写法中，奇怪的child
+  var formatChildren = filterValidIndexBarChild(children);
+  // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
   var indexes = 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 = useRef({}); // 当前激活的Index
-
+  var groupRefs = useRef({});
+  // 当前激活的Index
   var _useState = useState(function () {
-    return defaultIndex != null ? defaultIndex : indexes == null ? void 0 : indexes[0];
-  }),
-      activeIndex = _useState[0],
-      setActiveIndex = _useState[1]; // 给IndexBarGroup用的上下文，主要是为了兼容jsx的写法
-
-
+      return defaultIndex != null ? defaultIndex : indexes == null ? void 0 : indexes[0];
+    }),
+    activeIndex = _useState[0],
+    setActiveIndex = _useState[1];
+  // 给IndexBarGroup用的上下文，主要是为了兼容jsx的写法
   var contextValue = useMemo(function () {
     return {
       sticky: sticky,
@@ -68,52 +66,46 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
         groupRefs.current[groupIndex] = stickyRef;
       }
     };
-  }, [sticky, activeIndex]); // 用户是否正在触碰sidebar, 如果为true的话，禁用handleScroll的处理
-
+  }, [sticky, activeIndex]);
+  // 用户是否正在触碰sidebar, 如果为true的话，禁用handleScroll的处理
   var isScrollHandlerDisabledRef = useRef(false);
-
   var handleChangeActiveIndex = function handleChangeActiveIndex(index, type) {
     setActiveIndex(function (oldActiveIndex) {
-      var newActiveIndex = getFormatIndex(index, oldActiveIndex); // 和上一次激活的acitveIndex不同，再触发onChange事件
-
+      var newActiveIndex = getFormatIndex(index, oldActiveIndex);
+      // 和上一次激活的acitveIndex不同，再触发onChange事件
       if (newActiveIndex !== oldActiveIndex) {
         onChange == null ? void 0 : onChange(newActiveIndex, type);
       }
-
       return newActiveIndex;
     });
-  }; // 要滚动到哪个指定的index
-
+  };
 
+  // 要滚动到哪个指定的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
-
+      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 (!isValidIndex(index) || !containerDom) {
       return;
-    } // 寻找Index对应的groupDom
-
-
+    }
+    // 寻找Index对应的groupDom
     var groupDom = getGroupDomFromIndex(containerDom, formatIndex);
-
     if (groupDom) {
       handleChangeActiveIndex(formatIndex, type);
       var duration = rightNow ? 0 : scrollDuration;
-      var targetScrollTop = groupDom.offsetTop; // 将屏幕滚动到groupDom
+      var targetScrollTop = groupDom.offsetTop;
+      // 将屏幕滚动到groupDom
       // 手动触发需要禁用handleScroll事件
-
       if (type === 'manual') {
         isScrollHandlerDisabledRef.current = true;
         setTimeout(function () {
           isScrollHandlerDisabledRef.current = false;
         }, duration);
       }
-
       if (duration > 0) {
         scrollWithAnimation(containerDom.scrollTop, targetScrollTop, function (top) {
           return containerDom.scrollTop = top;
@@ -123,7 +115,6 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   };
-
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -138,10 +129,8 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       recalculatePosition: function recalculatePosition(targetIndex) {
         var formatIndex = targetIndex != null ? targetIndex : activeIndex;
-
         if (formatIndex) {
           var targetStickyRef = groupRefs.current[formatIndex];
-
           if (targetStickyRef && targetStickyRef.recalculatePosition) {
             targetStickyRef.recalculatePosition();
           }
@@ -149,12 +138,10 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   });
-
   var renderChildren = function renderChildren() {
     if (formatChildren.length) {
       return formatChildren;
     }
-
     return groups == null ? void 0 : groups.map(function (group) {
       return /*#__PURE__*/React.createElement(Group, {
         index: group.index,
@@ -166,33 +153,29 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     });
   };
-
   useEffect(function () {
     var _containerRef$current;
-
     var handleScroll = lodashThrottle(function () {
       // 用户正在触碰sidebar和手动触发scroll时禁用滚动事件的处理
       if (!containerRef.current || isScrollHandlerDisabledRef.current) {
         return;
-      } // 根据滚动的距离，获取处于屏幕最顶部的group是哪个
-
+      }
 
+      // 根据滚动的距离，获取处于屏幕最顶部的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，则滚动到对应位置
+    }, 100);
 
+    // 页面挂载时，如果是传入了defaultIndex，则滚动到对应位置
     if (activeIndex) {
       handleScrollIntoIndex({
         index: activeIndex,
@@ -200,11 +183,9 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
         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);
     };
   }, []);
@@ -239,6 +220,7 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
     })));
   });
 });
+
 /**
  * 索引栏组件
  * @en IndexBar component
@@ -247,7 +229,6 @@ var IndexBar = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name 索引栏
  * @name_en SearchBar
  */
-
 export default componentWrapper(IndexBar, {
   Group: Group
 });

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

@@ -2,64 +2,52 @@ import React, { useState } from 'react';
 import { cls } from '@arco-design/mobile-utils';
 export 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;
-
+    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 = useState(false),
-      isTouching = _useState[0],
-      originSetIsTouching = _useState[1];
-
+    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;
+      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.createElement("div", {
       className: prefixCls + "-index-bar-sidebar-" + type
     }, index);
   };
-
   var node = /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-index-bar-sidebar", (_cls = {}, _cls[prefixCls + "-index-bar-sidebar-touching"] = isTouching, _cls)),
     onTouchStart: function onTouchStart() {
@@ -74,7 +62,6 @@ export function IndexBarSideBar(props) {
     onTouchMove: handleTouchMove
   }, tipType === 'toast' && isTouching && activeIndex && renderSideBarTip(activeIndex, 'toast'), indexes.map(function (index) {
     var _cls2;
-
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-index-bar-sidebar-item", (_cls2 = {}, _cls2[prefixCls + "-index-bar-sidebar-active"] = activeIndex === index, _cls2)),
       key: index,

package/esm/index-bar/utils.js

@@ -6,25 +6,22 @@ export function filterValidIndexBarChild(children) {
       console.warn('<IndexBar /> only accept <IndexBar.Group /> as the children');
       return;
     }
-
     validChildren.push(child);
   });
   return validChildren;
-} // index有可能是number或者string，但是绑在data-index的attr上后
-// 通过滑动事件得到的都是string，需要处理下
+}
 
+// index有可能是number或者string，但是绑在data-index的attr上后
+// 通过滑动事件得到的都是string，需要处理下
 export function getFormatIndex(index, activeIndex) {
   var activeIndexType = typeof activeIndex;
   var indexType = typeof index;
-
   if (indexType === activeIndexType) {
     return index;
   }
-
   if (activeIndexType === 'number') {
     return Number(index);
   }
-
   return index.toString();
 }
 export function isValidIndex(index) {
@@ -33,20 +30,16 @@ export function isValidIndex(index) {
 export function getGroupDomFromIndex(containerDom, activeIndex) {
   var targetDom = null;
   var containerChildren = containerDom.children;
-
   for (var i = 0; i < containerChildren.length; i++) {
     var dom = containerChildren[i];
     var dataset = dom == null ? void 0 : dom.dataset;
-
     if (dataset && dataset.index) {
       var formatIndex = getFormatIndex(dataset.index, activeIndex);
-
       if (formatIndex === activeIndex) {
         targetDom = dom;
         break;
       }
     }
   }
-
   return targetDom;
 }