@arco-design/mobile-react 2.26.0 → 2.27.0

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;
+}

package/esm/index-bar/style/css/index.css

@@ -0,0 +1,164 @@
+.arco-index-bar {
+  position: relative;
+  background:  white ;
+  overflow: hidden;
+}
+.arco-index-bar-container {
+  height: 100%;
+  overflow-y: auto;
+}
+.arco-index-bar-container::-webkit-scrollbar {
+  display: none;
+}
+.arco-index-bar-group-active {
+  color:  #165dff ;
+}
+.arco-index-bar-group-title {
+  padding-left:  0.32rem ;
+  height:  0.48rem ;
+  background:  #f7f8fa ;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-index-bar-group-item {
+  height:  1.08rem ;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  margin-left:  0.32rem ;
+  font-size:  0.32rem ;
+}
+.arco-index-bar-group-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-index-bar-group-item:not(:last-child)::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-index-bar-group-item:not(:last-child)::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-index-bar-group-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-index-bar-sidebar {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translateY(-50%) translateZ(0);
+          transform: translateY(-50%) translateZ(0);
+  -webkit-user-select: none;
+          user-select: none;
+}
+.arco-index-bar-sidebar-touching {
+  left: 0;
+}
+.arco-index-bar-sidebar-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  position: relative;
+  padding:  0.04rem 0.16rem ;
+  cursor: pointer;
+}
+.arco-index-bar-sidebar-item-wrapper {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  width:  0.2rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-index-bar-sidebar-item:last-child {
+  padding-bottom: 0px;
+}
+.arco-index-bar-sidebar-active {
+  color:  #165dff ;
+}
+.arco-index-bar-sidebar-sweat {
+  position: absolute;
+  height:  1rem ;
+  min-width:  1rem ;
+  line-height:  1rem ;
+  border-radius: 9999px;
+  text-align: center;
+  padding:  0 0.16rem ;
+  background:  #323232 ;
+  right:  0.72rem ;
+  font-size:  0.48rem ;
+  color:  white ;
+}
+.arco-index-bar-sidebar-sweat::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right:  -0.54rem ;
+  width: 0;
+  height: 0;
+  border:  0.36rem solid transparent ;
+  border: 18px solid transparent;
+  border-left-color:  #323232 ;
+  border-radius: 4px;
+}
+.arco-index-bar-sidebar-toast {
+  position: absolute;
+  background:  #323232 ;
+  color:  white ;
+  left: 50%;
+  top: 50%;
+  min-width:  0.96rem ;
+  height:  0.96rem ;
+  line-height:  0.96rem ;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  text-align: center;
+  padding:  0 0.16rem ;
+  font-size:  0.48rem ;
+  border-radius:  0.08rem ;
+}

package/esm/index-bar/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../sticky/style/css';
+import './index.css';

package/esm/index-bar/style/css/index.js

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../sticky/style/css';
+import './index.css';

package/esm/index-bar/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../sticky/style';
+import './index.less';

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

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../sticky/style';
+import './index.less';

package/esm/index-bar/style/index.less

@@ -0,0 +1,122 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-index-bar {
+    position: relative;
+    .use-var(background, index-bar-background);
+    overflow: hidden;
+    &-container {
+        height: 100%;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &-group {
+        &-active {
+            .use-var(color, index-bar-group-active-color);
+        }
+        &-title {
+            .use-var(padding-left, index-bar-group-left-spacing);
+            .use-var(height, index-bar-group-title-height);
+            .use-var(background, index-bar-group-title-background);
+            .use-var(font-size, index-bar-group-title-font-size);
+            .use-var(color, index-bar-group-title-font-color);
+            display: flex;
+            align-items: center;
+        }
+        &-item {
+            .use-var(height, index-bar-group-item-height);
+            display: flex;
+            align-items: center;
+            .use-var(margin-left, index-bar-group-left-spacing);
+            .use-var(font-size, index-bar-group-item-font-size);
+
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
+        }
+    }
+
+    &-sidebar {
+        &-touching {
+            left: 0;
+        }
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%) translateZ(0);
+        user-select: none;
+
+        &-item {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            position: relative;
+            .use-var(padding, index-bar-sidebar-item-padding);
+            cursor: pointer;
+
+            &-wrapper {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                .use-var(width, index-bar-sidebar-item-width);
+                .use-var(font-size, index-bar-sidebar-item-font-size);
+                .use-var(line-height, index-bar-sidebar-item-line-height);
+            }
+
+            &:last-child {
+                padding-bottom: 0px;
+            }
+        }
+        &-active {
+            .use-var(color, index-bar-sidebar-active-color);
+        }
+
+        &-sweat {
+            position: absolute;
+            .use-var(height, index-bar-sidebar-sweat-radius);
+            .use-var(min-width, index-bar-sidebar-sweat-radius);
+            .use-var(line-height, index-bar-sidebar-sweat-radius);
+            border-radius: 9999px;
+            text-align: center;
+            .use-var(padding, index-bar-sidebar-sweat-padding);
+            .use-var(background, index-bar-sidebar-sweat-background);
+            .use-var(right, index-bar-sidebar-sweat-right);
+            .use-var(font-size, index-bar-sidebar-sweat-font-size);
+            .use-var(color, index-bar-sidebar-sweat-color);
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                .use-var(right, index-bar-sidebar-sweat-triangle-position);
+                width: 0;
+                height: 0;
+                .use-var(border, index-bar-sidebar-sweat-triangle-border);
+                border: 18px solid transparent;
+                .use-var(border-left-color, index-bar-sidebar-sweat-background);
+                border-radius: 4px;
+            }
+        }
+
+        &-toast {
+            position: absolute;
+            .use-var(background, index-bar-sidebar-toast-background);
+            .use-var(color, index-bar-sidebar-toast-color);
+            left: 50%;
+            top: 50%;
+            .use-var(min-width, index-bar-sidebar-toast-height);
+            .use-var(height, index-bar-sidebar-toast-height);
+            .use-var(line-height, index-bar-sidebar-toast-height);
+            transform: translate(-50%, -50%);
+            text-align: center;
+            .use-var(padding, index-bar-sidebar-toast-padding);
+            .use-var(font-size, index-bar-sidebar-toast-font-size);
+            .use-var(border-radius, index-bar-sidebar-toast-radius);
+        }
+    }
+}