@arco-design/mobile-react 2.19.0

package/esm/tabs/tab-pane.js

@@ -0,0 +1,287 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo } from 'react';
+import lodashThrottle from 'lodash.throttle';
+import { cls, scrollWithAnimation, getScrollContainerRect } from '@arco-design/mobile-utils';
+import { getStyleWithVendor } from '../_helpers';
+var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _cls;
+
+  var prefixCls = props.prefixCls,
+      panes = props.panes,
+      tabDirection = props.tabDirection,
+      activeIndex = props.activeIndex,
+      activeIndexRef = props.activeIndexRef,
+      distance = props.distance,
+      wrapWidth = props.wrapWidth,
+      wrapHeight = props.wrapHeight,
+      handlePaneTouchEnd = props.handlePaneTouchEnd,
+      transitionDuration = props.transitionDuration,
+      paneTrans = props.paneTrans,
+      swipeable = props.swipeable,
+      lazyloadCount = props.lazyloadCount,
+      hideContentStyle = props.hideContentStyle,
+      renderHideContent = props.renderHideContent,
+      mode = props.mode,
+      tabPaneStyle = props.tabPaneStyle,
+      tabPaneClass = props.tabPaneClass,
+      tabPaneExtra = props.tabPaneExtra,
+      getScrollContainer = props.getScrollContainer,
+      scrollThrottle = props.scrollThrottle,
+      _props$scrollOffset = props.scrollOffset,
+      scrollOffset = _props$scrollOffset === void 0 ? 0 : _props$scrollOffset,
+      goLastWhenScrollBottom = props.goLastWhenScrollBottom,
+      scrollVertical = props.scrollVertical,
+      translateZ = props.translateZ,
+      fullScreen = props.fullScreen,
+      autoHeight = props.autoHeight,
+      changeIndex = props.changeIndex,
+      onScroll = props.onScroll;
+  var domRef = useRef(null);
+  var panesRef = useRef([]);
+  var autoScrollingRef = useRef(false);
+  var timerRef = useRef(0);
+
+  var _useState = useState([activeIndex, activeIndex]),
+      shownIndexes = _useState[0],
+      setShownIndexes = _useState[1];
+
+  var prefix = prefixCls + "-tab-pane";
+  var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
+
+  var _useState2 = useState('auto'),
+      currentPaneHeight = _useState2[0],
+      setCurrentPaneHeight = _useState2[1];
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      getTransition: getTransition,
+      scrollToIndex: scrollToIndex,
+      setCurrentHeight: setCurrentHeight
+    };
+  });
+  useEffect(function () {
+    if (mode === 'swipe') {
+      setTimeout(function () {
+        calcShownIndexes();
+      }, getTransition());
+    }
+  }, [lazyloadCount, activeIndex, mode]);
+  var scrollHandler = useMemo(function () {
+    if (mode !== 'scroll') {
+      return function () {};
+    }
+
+    var handler = function handler() {
+      onScroll == null ? void 0 : onScroll();
+
+      if (autoScrollingRef.current) {
+        return;
+      }
+
+      var container = getScrollContainer ? getScrollContainer() : window;
+      if (!container) return;
+
+      var _getContainerTop = getContainerTop(container),
+          containerTop = _getContainerTop.containerTop,
+          containerBottom = _getContainerTop.containerBottom;
+
+      for (var i = 0; i < panes.length; i += 1) {
+        // 判断范围：-∞ ... top0 ... top1 ... top n ... ∞
+        // @en Judge the range: (-∞, top0, top1, ...top n, ∞)
+        var curPaneTop = i === 0 ? -Infinity : getRectTop(panesRef.current[i]);
+        var nextPaneTop = i === panes.length - 1 ? Infinity : getRectTop(panesRef.current[i + 1]);
+
+        if (containerTop >= curPaneTop - scrollOffset && containerTop < nextPaneTop - scrollOffset) {
+          changeIndex(i, 'scroll');
+          break;
+        }
+      }
+
+      if (goLastWhenScrollBottom) {
+        var lastIndex = panes.length - 1;
+        var curPaneBottom = getRectTop(panesRef.current[lastIndex], 'bottom');
+
+        if (containerBottom === curPaneBottom) {
+          changeIndex(lastIndex, 'scroll');
+        }
+      }
+    };
+
+    return scrollThrottle ? lodashThrottle(handler, scrollThrottle) : handler;
+  }, [mode, scrollThrottle, getScrollContainer, panes.length, scrollOffset, goLastWhenScrollBottom, scrollVertical, onScroll]);
+  useEffect(function () {
+    var container = (getScrollContainer == null ? void 0 : getScrollContainer()) || window;
+
+    if (container && mode === 'scroll') {
+      container.addEventListener('scroll', scrollHandler);
+    }
+
+    return function () {
+      if (container && mode === 'scroll') {
+        container.removeEventListener('scroll', scrollHandler);
+      }
+    };
+  }, [scrollHandler]);
+
+  function setCurrentHeight() {
+    if (!domRef.current || !autoHeight || mode !== 'swipe' || tabDirection !== 'vertical') {
+      return;
+    }
+
+    var allPanesDom = panesRef.current;
+    var nowIndex = activeIndexRef.current;
+    var currentHeight = (allPanesDom[nowIndex] || {}).offsetHeight || 'auto';
+    setCurrentPaneHeight(currentHeight);
+  }
+
+  function calcShownIndexes() {
+    if (typeof lazyloadCount === 'number') {
+      setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
+      return;
+    }
+
+    setShownIndexes([0, Infinity]);
+  }
+
+  function getTransition() {
+    return paneTrans ? transitionDuration || 0 : 0;
+  }
+
+  function scrollToIndex(index, rightNow) {
+    var container = (getScrollContainer == null ? void 0 : getScrollContainer()) || window;
+
+    var _getContainerTop2 = getContainerTop(container),
+        isGlobal = _getContainerTop2.isGlobal,
+        scrollEle = _getContainerTop2.scrollEle,
+        containerTop = _getContainerTop2.containerTop;
+
+    var curPaneTop = getRectTop(panesRef.current[index]);
+    var topDis = curPaneTop - containerTop - scrollOffset;
+    var scrollAttr = scrollVertical ? 'scrollTop' : 'scrollLeft';
+    var scrollTop = isGlobal ? Math.max(document.documentElement[scrollAttr], document.body[scrollAttr]) : scrollEle[scrollAttr];
+    clearTimeout(timerRef.current);
+    autoScrollingRef.current = true;
+    var duration = rightNow ? 0 : transitionDuration || 0;
+    scrollWithAnimation(scrollTop, scrollTop + topDis, function (top) {
+      if (isGlobal) {
+        document.documentElement[scrollAttr] = top;
+        document.body[scrollAttr] = top;
+      } else {
+        scrollEle[scrollAttr] = top;
+      }
+    }, duration); // 在自动滚动完成后，过一小段时间再解锁，避免最后一次触发scroll还未完成时就解锁导致乱跳的情况
+    // @en After the automatic scrolling is completed, unlock it after a short period of time, to avoid the situation of random jumping caused by unlocking when the scroll is not completed for the last time.
+
+    var buffer = 100;
+    timerRef.current = window.setTimeout(function () {
+      autoScrollingRef.current = false;
+    }, duration + (scrollThrottle || 0) + buffer);
+  }
+
+  function getContainerTop(container) {
+    var _getScrollContainerRe = getScrollContainerRect(container),
+        isGlobal = _getScrollContainerRe.isGlobal,
+        scrollEle = _getScrollContainerRe.scrollEle,
+        containerRect = _getScrollContainerRe.containerRect;
+
+    var containerTop = Math.floor(scrollVertical ? containerRect.top : containerRect.left);
+    var containerBottom = Math.floor(scrollVertical ? containerRect.bottom : containerRect.right);
+    return {
+      isGlobal: isGlobal,
+      scrollEle: scrollEle,
+      containerTop: containerTop,
+      containerBottom: containerBottom
+    };
+  }
+
+  function getRectTop(ele, attr) {
+    if (attr === void 0) {
+      attr = 'top';
+    }
+
+    var attrMap = scrollVertical ? {
+      top: 'top',
+      bottom: 'bottom'
+    } : {
+      top: 'left',
+      bottom: 'right'
+    };
+    var attrKey = attrMap[attr];
+    var rect = (ele == null ? void 0 : ele.getBoundingClientRect()) || {}; // 消除误差
+    // @en Eliminate errors
+
+    return rect[attrKey] ? Math.floor(rect[attrKey]) : 0;
+  }
+
+  function getPaneStyle() {
+    var commonStyle = tabPaneStyle || {};
+
+    if (mode === 'scroll') {
+      return commonStyle;
+    }
+
+    var translateStr = translateZ ? ' translateZ(0)' : '';
+    var sizeStyle = tabDirection === 'vertical' ? {
+      width: 100 * panes.length + "%",
+      transform: "translateX(" + (distance - wrapWidth * activeIndex) + "px)" + translateStr
+    } : {
+      height: 100 * panes.length + "%",
+      transform: "translateY(" + (distance - wrapHeight * activeIndex) + "px)" + translateStr
+    };
+    var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
+      height: currentPaneHeight
+    } : {};
+    return getStyleWithVendor(_extends({}, sizeStyle, {
+      transitionDuration: getTransition() + "ms"
+    }, heightStyle, commonStyle));
+  }
+
+  function renderContent(pane, index) {
+    var contentProps = {
+      key: index,
+      className: cls(prefix, "mode-" + mode, {
+        'full-screen': fullScreen
+      }),
+      ref: function ref(r) {
+        return panesRef.current[index] = r;
+      }
+    }; // 是滚动模式或在加载范围内，直接渲染
+    // @en Render directly when in scroll mode or in loading scope
+
+    if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
+      return /*#__PURE__*/React.createElement("div", contentProps, pane);
+    } // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+    // @en Not in the loading range, depending on renderHideContent and hideContentStyle
+
+
+    if (renderHideContent) {
+      return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
+        style: hideContentStyle || {}
+      }), renderHideContent(index, pane));
+    }
+
+    if (hideContentStyle === null) {
+      return /*#__PURE__*/React.createElement("div", contentProps);
+    }
+
+    return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
+      style: hideContentStyle
+    }), pane);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
+      'full-screen': fullScreen
+    }, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
+    style: getPaneStyle(),
+    ref: domRef,
+    onTouchEnd: handleTouchEnd,
+    onTouchCancel: handleTouchEnd
+  }, panes.map(function (pane, index) {
+    return renderContent(pane, index);
+  }), tabPaneExtra ? /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-extra"
+  }, tabPaneExtra) : null);
+});
+export default TabPane;

package/esm/tag/demo/style/css/mobile.css

@@ -0,0 +1,6 @@
+#demo-tag {
+  padding-bottom: 0.5rem;
+}
+#demo-tag .arco-tag:not(:last-child) {
+  margin-right: 0.48rem;
+}

package/esm/tag/demo/style/mobile.less

@@ -0,0 +1,8 @@
+@import '../../../../style/mixin.less';
+
+#demo-tag {
+    .rem(padding-bottom, 25);
+    .@{prefix}-tag:not(:last-child) {
+        .rem(margin-right, 24);
+    }
+}

package/esm/tag/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").TagProps & import("react").RefAttributes<import("./type").TagRef>> & {
+    List: import("react").ForwardRefExoticComponent<import("./type").TagListProps<import("./type").TagProps & import("react").RefAttributes<import("./type").TagRef>> & import("react").RefAttributes<import("./type").TagListRef>>;
+};
+/**
+ * 标签组件，支持标签和标签组。
+ * @en Tag component, supports tags and tag groups.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 标签
+ * @name_en Tag
+ */
+export default _default;

package/esm/tag/index.js

@@ -0,0 +1,22 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './list';
+import { Tag } from './tag';
+export * from './type';
+/**
+ * 标签列表，支持动态编辑标签
+ * @en Tag list, support dynamic editing of tags
+ */
+
+var List = componentGenerator(Tag);
+/**
+ * 标签组件，支持标签和标签组。
+ * @en Tag component, supports tags and tag groups.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 标签
+ * @name_en Tag
+ */
+
+export default componentWrapper(Tag, {
+  List: List
+});

package/esm/tag/list.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TagListProps, TagListRef, TagProps, TagRef } from './type';
+export declare function componentGenerator<P extends TagProps = TagProps, R extends TagRef = TagRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<TagListProps<P> & React.RefAttributes<TagListRef>>;

package/esm/tag/list.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { Tag } from './tag';
+import IconAdd from '../icon/IconAdd';
+export function componentGenerator(Comp) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var className = props.className,
+        style = props.style,
+        list = props.list,
+        type = props.type,
+        _props$showAddButton = props.showAddButton,
+        showAddButton = _props$showAddButton === void 0 ? true : _props$showAddButton,
+        addArea = props.addArea,
+        horizontalPadding = props.horizontalPadding,
+        verticalPadding = props.verticalPadding,
+        onAdd = props.onAdd,
+        _onClose = props.onClose;
+    var domRef = useRef(null);
+    useImperativeHandle(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    function getTagStyle(tag, index) {
+      var baseStyle = tag.style || {};
+      var paddingStyle = index === list.length - 1 && !showAddButton ? {} : {
+        marginRight: horizontalPadding
+      };
+      return _extends({}, baseStyle, paddingStyle, {
+        marginBottom: verticalPadding
+      });
+    }
+
+    function getListStyle() {
+      var marginStyle = {};
+
+      if (verticalPadding && typeof verticalPadding === 'string') {
+        marginStyle = {
+          marginBottom: "-" + verticalPadding
+        };
+      } else if (verticalPadding && typeof verticalPadding === 'number') {
+        marginStyle = {
+          marginBottom: -1 * verticalPadding
+        };
+      }
+
+      return _extends({}, style || {}, marginStyle);
+    }
+
+    return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls,
+          locale = _ref.locale;
+      var prefix = prefixCls + "-tag-list";
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls(prefix, className),
+        style: getListStyle(),
+        ref: domRef
+      }, list.map(function (tag, index) {
+        return /*#__PURE__*/React.createElement(Comp, _extends({
+          key: index
+        }, tag, {
+          style: getTagStyle(tag, index),
+          type: type,
+          onClose: function onClose(e) {
+            tag.onClose && tag.onClose(e);
+            _onClose && _onClose(index, e);
+          }
+        }));
+      }), showAddButton ? /*#__PURE__*/React.createElement("div", {
+        className: "tag-list-add-wrap",
+        onClick: onAdd
+      }, addArea !== void 0 ? addArea : /*#__PURE__*/React.createElement(Tag, {
+        type: type,
+        className: "tag-list-add",
+        borderStyle: "dashed",
+        icon: /*#__PURE__*/React.createElement(IconAdd, null),
+        style: {
+          marginBottom: verticalPadding
+        }
+      }, locale == null ? void 0 : locale.Tag.addTag)) : null);
+    });
+  });
+}

package/esm/tag/style/css/index.css

@@ -0,0 +1,182 @@
+.arco-tag {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  justify-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  vertical-align: middle;
+  box-sizing: border-box;
+  border: none;
+  border-radius:  2PX ;
+  font-size:  0.24rem ;
+  border-width: 1PX;
+  border-style: solid;
+}
+.arco-tag.size-small {
+  height:  0.36rem ;
+  padding: 0 0.08rem ;
+}
+.arco-tag.size-small .tag-text {
+  -webkit-transform: scale(0.8333);
+          transform: scale(0.8333);
+  margin-left: -0.04rem;
+  margin-right: -0.04rem;
+}
+.arco-tag.size-medium {
+  height:  0.4rem ;
+  padding: 0 0.08rem ;
+}
+.arco-tag.size-large {
+  height:  0.48rem ;
+  padding: 0 0.12rem ;
+}
+.arco-tag.filleted {
+  padding: 0 0.16rem ;
+  border-radius: 100px;
+}
+.arco-tag.half-border:not(.arco-tag-solid):not(.filleted) {
+  position: relative;
+  border-width: 0;
+}
+.arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-style: inherit;
+  border-width: 1PX;
+  border-color: inherit;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 2PX;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+    -webkit-transform: scale(0.5);
+    border-radius: 4PX;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
+    width: 300%;
+    height: 300%;
+    transform: scale(0.33333333);
+    -webkit-transform: scale(0.33333333);
+    border-radius: 6PX;
+  }
+}
+.arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
+  border: inherit;
+  border-width: 1PX;
+}
+.arco-tag.half-border:not(.arco-tag-solid).filleted {
+  position: relative;
+  border-width: 0;
+}
+.arco-tag.half-border:not(.arco-tag-solid).filleted::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-style: inherit;
+  border-width: 1PX;
+  border-color: inherit;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 100px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-tag.half-border:not(.arco-tag-solid).filleted::after {
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+    -webkit-transform: scale(0.5);
+    border-radius: 200px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-tag.half-border:not(.arco-tag-solid).filleted::after {
+    width: 300%;
+    height: 300%;
+    transform: scale(0.33333333);
+    -webkit-transform: scale(0.33333333);
+    border-radius: 300px;
+  }
+}
+.arco-tag.half-border:not(.arco-tag-solid).filleted::after {
+  border: inherit;
+  border-width: 1PX;
+}
+.arco-tag .tag-text {
+  vertical-align: middle;
+  font-size: inherit;
+}
+.arco-tag .arco-icon:not(.tag-close-icon) {
+  vertical-align: middle;
+  margin-right:  0.04rem ;
+  font-size:  0.24rem ;
+}
+.arco-tag .tag-close-wrap {
+  font-size: 0;
+}
+.arco-tag .tag-close-icon {
+  vertical-align: middle;
+  margin-left:  0.08rem ;
+  font-size:  0.24rem ;
+}
+.arco-tag.android .tag-text {
+  padding-top: 0.02rem;
+}
+.arco-tag.arco-tag-primary {
+  color:  #165dff ;
+  background:  #e8f3ff ;
+  border-color:  #165dff ;
+}
+.arco-tag.arco-tag-hollow {
+  color:  #165dff ;
+  background: transparent;
+  border-color:  #165dff ;
+}
+.arco-tag.arco-tag-solid {
+  color:  #ffffff ;
+  background:  #165dff ;
+  border-width: 0;
+}
+.arco-tag-list {
+  margin-bottom: 0;
+}
+.arco-tag-list .arco-tag {
+  vertical-align: top;
+  margin-bottom:  0 ;
+}
+.arco-tag-list .arco-tag:not(:last-child) {
+  margin-right:  0.16rem ;
+}
+.arco-tag-list .tag-list-add-wrap {
+  font-size: 0;
+  display: inline-block;
+}
+.arco-tag-list .tag-list-add {
+  margin-bottom:  0 ;
+  border-color:  #c2c6cc ;
+  background:  #fafbfc ;
+  color:  #939aa3 ;
+}

package/esm/tag/style/css/index.d.ts

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

package/esm/tag/style/css/index.js

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

package/esm/tag/style/index.d.ts

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

package/esm/tag/style/index.js

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