@arco-design/mobile-react 2.25.4 → 2.27.0

package/esm/image-preview/methods.js

@@ -8,32 +8,42 @@ export function open(Component) {
     }, config || {}, {
       close: function close() {}
     });
-    var dynamicProps = _extends({}, baseProps);
 
-    // 不同的key用不同的容器挂载
+    var dynamicProps = _extends({}, baseProps); // 不同的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;
+
     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();
+
       if (baseProps.unmountOnExit) {
         removeElement(div);
       }
     };
+
     dynamicProps.openIndex = -1;
     render(dynamicProps);
     setTimeout(function () {

package/esm/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/esm/index-bar/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export var IndexBarContext = /*#__PURE__*/createContext({
+  sticky: true,
+  getScrollContainer: function getScrollContainer() {
+    return null;
+  },
+  updateRef: function updateRef() {}
+});

package/esm/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/esm/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/esm/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/esm/index-bar/group.js

@@ -0,0 +1,83 @@
+import { cls } from '@arco-design/mobile-utils';
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { GlobalContext } from '../context-provider';
+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;
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls; // 有可能是IndexBar.Group的写法，因此sticky从context中获得
+
+
+  var _useContext2 = useContext(IndexBarContext),
+      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
+
+  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",
+        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.createElement("div", {
+      className: 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.createElement(Sticky, {
+      getContainer: function getContainer() {
+        return groupDom;
+      },
+      stickyStyle: "absolute",
+      getScrollContainer: getScrollContainer,
+      ref: function ref(stickyRef) {
+        return stickyRef && updateRef(groupIndex, stickyRef);
+      }
+    }, titleDom) : titleDom;
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-index-bar-group", className),
+    style: style,
+    "data-index": groupIndex,
+    ref: domRef
+  }, renderIndexTitle(), renderChildren());
+});

package/esm/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/esm/index-bar/index.js

@@ -0,0 +1,254 @@
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { scrollWithAnimation } from '@arco-design/mobile-utils/utils';
+import lodashThrottle from 'lodash.throttle';
+import React, { useRef, forwardRef, useImperativeHandle, useMemo, useState, useEffect } from 'react';
+import { ContextLayout } from '../context-provider';
+import { IndexBarContext } from './context';
+import { IndexBarGroup as Group } from './group';
+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中获取
+
+  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 _useState = useState(function () {
+    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,
+      getScrollContainer: function getScrollContainer() {
+        return containerRef.current;
+      },
+      activeIndex: activeIndex,
+      updateRef: function updateRef(groupIndex, stickyRef) {
+        groupRefs.current[groupIndex] = stickyRef;
+      }
+    };
+  }, [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事件
+
+      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 (!isValidIndex(index) || !containerDom) {
+      return;
+    } // 寻找Index对应的groupDom
+
+
+    var groupDom = 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) {
+        scrollWithAnimation(containerDom.scrollTop, targetScrollTop, function (top) {
+          return containerDom.scrollTop = top;
+        }, duration, scrollBezier);
+      } else {
+        containerDom.scrollTop = targetScrollTop;
+      }
+    }
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      scrollToIndex: function scrollToIndex(index, rightNow) {
+        if (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.createElement(Group, {
+        index: group.index,
+        key: group.index,
+        list: group.list,
+        onGroupItemClick: onGroupItemClick,
+        renderGroupItem: renderGroupItem,
+        renderStickyItem: renderStickyItem
+      });
+    });
+  };
+
+  useEffect(function () {
+    var _containerRef$current;
+
+    var handleScroll = lodashThrottle(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.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement(IndexBarContext.Provider, {
+      value: contextValue
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-index-bar", className),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-index-bar-container",
+      ref: containerRef
+    }, renderChildren()), !disableSidebar && /*#__PURE__*/React.createElement(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
+ */
+
+export default componentWrapper(IndexBar, {
+  Group: Group
+});

package/esm/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/esm/index-bar/side-bar.js

@@ -0,0 +1,90 @@
+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;
+
+  var _useState = 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.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() {
+      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.createElement("div", {
+      className: 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.createElement("div", {
+      className: prefixCls + "-index-bar-sidebar-item-wrapper"
+    }, renderSideBarItem(index)));
+  }));
+  return renderSideBar ? renderSideBar(node) : node;
+}