@arco-design/mobile-react 2.25.4 → 2.26.0

package/esm/divider/style/css/index.css

@@ -0,0 +1,69 @@
+.arco-divider {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  padding:  0.32rem 0;
+  border-color:  #e5e6eb ;
+  border-width: 0;
+  border-style: solid;
+}
+.arco-divider::before,
+.arco-divider::after {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+          flex-grow: 1;
+  -webkit-flex-shrink: 1;
+          flex-shrink: 1;
+  -webkit-flex-basis: inherit;
+          flex-basis: inherit;
+  border-width: 0;
+  border-color: inherit;
+  border-style: inherit;
+  border-top-width:  1PX ;
+}
+.arco-divider::before {
+  content: '';
+}
+.arco-divider--hairline::before,
+.arco-divider--hairline::after {
+  -webkit-transform: scaleY(0.5);
+          transform: scaleY(0.5);
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.33333333);
+            transform: scaleY(0.33333333);
+  }
+}
+.arco-divider--with-text {
+  font-size:  0.28rem ;
+  color:  #4e5969 ;
+}
+.arco-divider--with-text::before {
+  margin-right:  0.24rem ;
+}
+.arco-divider--with-text::after {
+  content: '';
+  margin-left:  0.24rem ;
+}
+.arco-divider--with-width::before,
+.arco-divider--with-width::after {
+  -webkit-flex-shrink: 0;
+          flex-shrink: 0;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+          flex-grow: 0;
+}
+.arco-divider--text-left::before {
+  max-width:  0.56rem ;
+}
+.arco-divider--text-right::after {
+  max-width:  0.56rem ;
+}

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

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

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

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

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

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

package/esm/divider/style/index.js

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

package/esm/divider/style/index.less

@@ -0,0 +1,66 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .use-var(padding, 'divider-padding', '', 0);
+    .use-var(border-color, 'divider-line-color');
+    border-width: 0;
+    border-style: solid;
+
+    &::before,
+    &::after {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: inherit;
+        border-width: 0;
+        border-color: inherit;
+        border-style: inherit;
+        .use-var(border-top-width, 'divider-line-thickness');
+    }
+
+    &::before {
+        content: '';
+    }
+
+    &--hairline {
+        &::before,
+        &::after {
+            transform: scaleY(0.5);
+
+            @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+                transform: scaleY(0.33333333);
+            }
+        }
+    }
+
+    &--with-text {
+        .use-var(font-size, 'divider-content-font-size');
+        .use-var(color, 'divider-content-font-color');
+
+        &::before {
+            .use-var(margin-right, 'divider-content-padding');
+        }
+
+        &::after {
+            content: '';
+            .use-var(margin-left, 'divider-content-padding');
+        }
+    }
+
+    &--with-width {
+        &::before,
+        &::after {
+            flex-shrink: 0;
+            flex-grow: 0;
+        }
+    }
+
+    &--text-left::before {
+        .use-var(max-width, 'divider-left-width');
+    }
+    &--text-right::after {
+        .use-var(max-width, 'divider-right-width');
+    }
+}

package/esm/dropdown/dropdown.js

@@ -10,123 +10,138 @@ export function componentGenerator(Comp) {
     var optionsWrapper = useRef(null);
     var domRef = useRef(null);
     var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$options = props.options,
-      options = _props$options === void 0 ? [] : _props$options,
-      _props$showDropdown = props.showDropdown,
-      showDropdown = _props$showDropdown === void 0 ? false : _props$showDropdown,
-      _props$showMask = props.showMask,
-      showMask = _props$showMask === void 0 ? true : _props$showMask,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'down' : _props$direction,
-      height = props.height,
-      _props$maxHeight = props.maxHeight,
-      maxHeight = _props$maxHeight === void 0 ? 500 : _props$maxHeight,
-      _props$touchToClose = props.touchToClose,
-      touchToClose = _props$touchToClose === void 0 ? true : _props$touchToClose,
-      useColumn = props.useColumn,
-      optionIcon = props.optionIcon,
-      multiple = props.multiple,
-      defaultSelectedValue = props.defaultSelectedValue,
-      onCancel = props.onCancel,
-      getAnchorElement = props.getAnchorElement,
-      isStopTouchEl = props.isStopTouchEl,
-      getStopTouchElements = props.getStopTouchElements,
-      _props$getScrollConta = props.getScrollContainer,
-      getScrollContainer = _props$getScrollConta === void 0 ? function () {
-        return optionsWrapper.current;
-      } : _props$getScrollConta,
-      getPortalContainer = props.getPortalContainer,
-      _props$clickOtherToCl = props.clickOtherToClose,
-      clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
-      _props$dropdownAnimat = props.dropdownAnimationTimeout,
-      dropdownAnimationTimeout = _props$dropdownAnimat === void 0 ? 300 : _props$dropdownAnimat,
-      _props$dropdownAnimat2 = props.dropdownAnimationFunction,
-      dropdownAnimationFunction = _props$dropdownAnimat2 === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$dropdownAnimat2,
-      _props$maskAnimationT = props.maskAnimationTimeout,
-      maskAnimationTimeout = _props$maskAnimationT === void 0 ? 500 : _props$maskAnimationT,
-      _props$maskAnimationF = props.maskAnimationFunction,
-      maskAnimationFunction = _props$maskAnimationF === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$maskAnimationF,
-      _props$mountOnEnter = props.mountOnEnter,
-      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
-      _props$unmountOnExit = props.unmountOnExit,
-      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
-      _props$preventBodyScr = props.preventBodyScroll,
-      preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
-      initialBodyOverflow = props.initialBodyOverflow;
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$options = props.options,
+        options = _props$options === void 0 ? [] : _props$options,
+        _props$showDropdown = props.showDropdown,
+        showDropdown = _props$showDropdown === void 0 ? false : _props$showDropdown,
+        _props$showMask = props.showMask,
+        showMask = _props$showMask === void 0 ? true : _props$showMask,
+        _props$direction = props.direction,
+        direction = _props$direction === void 0 ? 'down' : _props$direction,
+        height = props.height,
+        _props$maxHeight = props.maxHeight,
+        maxHeight = _props$maxHeight === void 0 ? 500 : _props$maxHeight,
+        _props$touchToClose = props.touchToClose,
+        touchToClose = _props$touchToClose === void 0 ? true : _props$touchToClose,
+        useColumn = props.useColumn,
+        optionIcon = props.optionIcon,
+        multiple = props.multiple,
+        defaultSelectedValue = props.defaultSelectedValue,
+        onCancel = props.onCancel,
+        getAnchorElement = props.getAnchorElement,
+        isStopTouchEl = props.isStopTouchEl,
+        getStopTouchElements = props.getStopTouchElements,
+        _props$getScrollConta = props.getScrollContainer,
+        getScrollContainer = _props$getScrollConta === void 0 ? function () {
+      return optionsWrapper.current;
+    } : _props$getScrollConta,
+        getPortalContainer = props.getPortalContainer,
+        _props$clickOtherToCl = props.clickOtherToClose,
+        clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
+        _props$dropdownAnimat = props.dropdownAnimationTimeout,
+        dropdownAnimationTimeout = _props$dropdownAnimat === void 0 ? 300 : _props$dropdownAnimat,
+        _props$dropdownAnimat2 = props.dropdownAnimationFunction,
+        dropdownAnimationFunction = _props$dropdownAnimat2 === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$dropdownAnimat2,
+        _props$maskAnimationT = props.maskAnimationTimeout,
+        maskAnimationTimeout = _props$maskAnimationT === void 0 ? 500 : _props$maskAnimationT,
+        _props$maskAnimationF = props.maskAnimationFunction,
+        maskAnimationFunction = _props$maskAnimationF === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$maskAnimationF,
+        _props$mountOnEnter = props.mountOnEnter,
+        mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+        _props$unmountOnExit = props.unmountOnExit,
+        unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+        _props$preventBodyScr = props.preventBodyScroll,
+        preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
+        initialBodyOverflow = props.initialBodyOverflow;
     var system = useSystem();
+
     var _useWindowSize = useWindowSize(),
-      windowHeight = _useWindowSize.windowHeight,
-      windowWidth = _useWindowSize.windowWidth;
+        windowHeight = _useWindowSize.windowHeight,
+        windowWidth = _useWindowSize.windowWidth;
+
     var _useState = useState({
-        top: '',
-        bottom: ''
-      }),
-      positionStyle = _useState[0],
-      setPositionStyle = _useState[1];
-    var _useState2 = useState(function () {
-        var defaultValue = multiple ? [] : 0;
-        return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
-      }),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1];
+      top: '',
+      bottom: ''
+    }),
+        positionStyle = _useState[0],
+        setPositionStyle = _useState[1];
 
-    // down=0为向上展开，1为向下展开
+    var _useState2 = useState(function () {
+      var defaultValue = multiple ? [] : 0;
+      return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+    }),
+        innerValue = _useState2[0],
+        setInnerValue = _useState2[1]; // down=0为向上展开，1为向下展开
     // @en down=0 is to expand upwards, 1 is to expand downwards
+
+
     var _useState3 = useState(null),
-      down = _useState3[0],
-      setDown = _useState3[1];
+        down = _useState3[0],
+        setDown = _useState3[1];
+
     var maskHeight = useRef(0);
     var optionsContainer = useRef(null);
     var dropdownContainer = useRef(null);
-    var _useState4 = useState(0),
-      optionsWrapperHeight = _useState4[0],
-      setOptionsWrapperHeight = _useState4[1];
 
+    var _useState4 = useState(0),
+        optionsWrapperHeight = _useState4[0],
+        setOptionsWrapperHeight = _useState4[1];
     /**
      * 判断是否阻止touch事件
      * @en Determine whether to block touch events
      * */
 
+
     var ifStopTouch = function ifStopTouch(el) {
       var _dropdownContainer$cu;
+
       if (isStopTouchEl) return isStopTouchEl(el);
       var tempEl = el;
       var elements = getStopTouchElements ? getStopTouchElements() : [(_dropdownContainer$cu = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu.parentElement];
+
       for (var i = 0; i < elements.length; i++) {
         while (tempEl && elements[i]) {
           if (tempEl === elements[i]) {
             return true;
           }
+
           tempEl = tempEl.parentElement;
         }
       }
+
       return false;
     };
+
     usePopupScroll(showDropdown, domRef.current, getScrollContainer);
     usePreventBodyScroll(showDropdown, preventBodyScroll, initialBodyOverflow);
     var updateDown = useCallback(function (wrapperHeight) {
       var _dropdownContainer$cu2;
+
       // 为0的时候不改变
       // @en Does not change when it is 0
       if (wrapperHeight === 0) {
         return;
       }
+
       var tempEl = getAnchorElement ? getAnchorElement() : (_dropdownContainer$cu2 = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu2.parentElement;
+
       var _ref = (tempEl == null ? void 0 : tempEl.getBoundingClientRect()) || {
-          bottom: 0,
-          top: 0
-        },
-        bottom = _ref.bottom,
-        top = _ref.top;
+        bottom: 0,
+        top: 0
+      },
+          bottom = _ref.bottom,
+          top = _ref.top;
+
       var tempTop = props.top || bottom;
       var tempBottom = props.bottom || windowHeight - top;
-      var tempMaskHeight = windowHeight - tempTop;
-      // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
+      var tempMaskHeight = windowHeight - tempTop; // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
       // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
+
       var tempDown = direction !== 'up' && wrapperHeight < tempMaskHeight || wrapperHeight > tempTop;
+
       if (tempDown) {
         maskHeight.current = tempMaskHeight;
         setPositionStyle({
@@ -140,35 +155,42 @@ export function componentGenerator(Comp) {
           bottom: tempBottom + "px"
         });
       }
+
       setDown(tempDown);
     }, [props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
-
     /**
      * 取消选择
      * @en Cancel selection
      * */
+
     var handleCancel = useCallback(function (e) {
       var optionsWrapperDom = optionsWrapper.current;
+
       if (!e || !optionsWrapperDom) {
         return;
       }
+
       var target = e.target;
+
       if (!optionsWrapperDom.contains(target) && !ifStopTouch(target)) {
         onCancel();
       }
+
       e.stopPropagation();
     }, [ifStopTouch, onCancel]);
-
     /**
      * 当面板放下时，给body添加事件监听，面板收起时，移除
      * @en When the panel is down, add an event listener to the body, and when the panel is retracted, remove it
      * */
+
     useEffect(function () {
       var needBind = showDropdown && clickOtherToClose;
       var event = touchToClose ? 'touchstart' : 'click';
+
       if (needBind) {
         document.addEventListener(event, handleCancel);
       }
+
       return function () {
         if (needBind) {
           document.removeEventListener(event, handleCancel);
@@ -177,18 +199,21 @@ export function componentGenerator(Comp) {
     }, [showDropdown, clickOtherToClose, handleCancel]);
     useEffect(function () {
       var wrapperHeight = 0;
+
       if (height !== void 0) {
         // 受控模式下，完全交由外层控制
         // @en In controlled mode, it is completely controlled by the outer layer
         wrapperHeight = height;
       } else {
         if (!optionsContainer.current) return;
+
         if (!showDropdown) {
           wrapperHeight = 0;
         } else {
           wrapperHeight = optionsContainer.current.getBoundingClientRect().height;
         }
       }
+
       updateDown(wrapperHeight);
       nextTick(function () {
         setOptionsWrapperHeight(wrapperHeight);
@@ -199,6 +224,7 @@ export function componentGenerator(Comp) {
         dom: domRef.current
       };
     });
+
     function getOptionsStyle() {
       var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
       var transStyle = down === null ? {
@@ -213,6 +239,7 @@ export function componentGenerator(Comp) {
         maxHeight: maxHeight + "px"
       }));
     }
+
     function renderInnerOptions() {
       var value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
       var optionProps = {
@@ -229,6 +256,7 @@ export function componentGenerator(Comp) {
       };
       return /*#__PURE__*/React.createElement(Comp, optionProps);
     }
+
     return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
       var prefixCls = _ref2.prefixCls;
       return /*#__PURE__*/React.createElement("div", {

package/esm/dropdown/index.js

@@ -3,7 +3,6 @@ import Options from './options';
 import { componentGenerator } from './dropdown';
 export * from './type';
 var Dropdown = componentGenerator(Options);
-
 /**
  * 下拉面板，展示供选择的选择项
  * @en Dropdown panel, showing options to choose from
@@ -12,6 +11,7 @@ var Dropdown = componentGenerator(Options);
  * @name 下拉面板
  * @name_en Dropdown
  */
+
 export default componentWrapper(Dropdown, {
   Options: Options
 });

package/esm/dropdown/options.js

@@ -4,19 +4,22 @@ import { GlobalContext } from '../context-provider';
 import IconCheck from '../icon/IconCheck';
 var Options = /*#__PURE__*/forwardRef(function (props, ref) {
   var options = props.options,
-    useColumn = props.useColumn,
-    icon = props.icon,
-    selectedValue = props.selectedValue,
-    defaultSelectedValue = props.defaultSelectedValue,
-    multiple = props.multiple;
+      useColumn = props.useColumn,
+      icon = props.icon,
+      selectedValue = props.selectedValue,
+      defaultSelectedValue = props.defaultSelectedValue,
+      multiple = props.multiple;
+
   var _useContext = useContext(GlobalContext),
-    prefixCls = _useContext.prefixCls;
+      prefixCls = _useContext.prefixCls;
+
   var _useState = useState(function () {
-      var defaultValue = multiple ? [] : 0;
-      return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
-    }),
-    innerValue = _useState[0],
-    setInnerValue = _useState[1];
+    var defaultValue = multiple ? [] : 0;
+    return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+  }),
+      innerValue = _useState[0],
+      setInnerValue = _useState[1];
+
   var value = useMemo(function () {
     return selectedValue === void 0 ? innerValue : selectedValue;
   }, [selectedValue, innerValue]);
@@ -31,17 +34,19 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
       dom: domRef.current
     };
   });
-
   /**
    * 当选项改变时触发的回调函数
    * @en callback when options change
    * */
+
   function handleOptionChange(e, op) {
     if (op.disabled) return;
+
     if (props.multiple === true) {
       if (!Array.isArray(value)) {
         return;
       }
+
       var index = value.indexOf(op.value);
       var checked = index >= 0;
       props.onOptionClick == null ? void 0 : props.onOptionClick(checked, op.value, op);
@@ -55,11 +60,14 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
       setInnerValue(_newValue);
       _newValue !== value && (props.onOptionChange == null ? void 0 : props.onOptionChange(_newValue, op));
     }
+
     e.stopPropagation();
   }
+
   function checkSelected(op) {
     return multiple && Array.isArray(value) ? value.includes(op.value) : op.value === value;
   }
+
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     className: cls(prefixCls + "-dropdown-options-wrap", {