@arco-design/mobile-react 2.25.4 → 2.27.0

package/esm/date-picker/index.js

@@ -8,49 +8,55 @@ import { ContextLayout } from '../context-provider';
 import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
 export * from './type';
 var allTypes = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+
 var defaultFormatter = function defaultFormatter(value) {
   return value < 10 ? "0" + value : String(value);
 };
+
 export var YEAR = 12 * 30 * 24 * 60 * 60 * 1000;
 var initMinDate = Date.now() - 10 * YEAR;
 var initMaxDate = Date.now() + 10 * YEAR;
 var initDate = Date.now();
 var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$currentTs = props.currentTs,
-    userSetCurrentTs = _props$currentTs === void 0 ? initDate : _props$currentTs,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? false : _props$visible,
-    onOk = props.onOk,
-    onChange = props.onChange,
-    onValueChange = props.onValueChange,
-    _props$mode = props.mode,
-    mode = _props$mode === void 0 ? 'datetime' : _props$mode,
-    _props$typeArr = props.typeArr,
-    typeArr = _props$typeArr === void 0 ? [] : _props$typeArr,
-    _props$minTs = props.minTs,
-    minTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
-    _props$maxTs = props.maxTs,
-    maxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
-    _props$formatter = props.formatter,
-    formatter = _props$formatter === void 0 ? defaultFormatter : _props$formatter,
-    _props$valueFilter = props.valueFilter,
-    valueFilter = _props$valueFilter === void 0 ? function () {
-      return true;
-    } : _props$valueFilter,
-    columnsProcessor = props.columnsProcessor,
-    touchToStop = props.touchToStop,
-    _props$useUTC = props.useUTC,
-    useUTC = _props$useUTC === void 0 ? false : _props$useUTC,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      userSetCurrentTs = _props$currentTs === void 0 ? initDate : _props$currentTs,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      onOk = props.onOk,
+      onChange = props.onChange,
+      onValueChange = props.onValueChange,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'datetime' : _props$mode,
+      _props$typeArr = props.typeArr,
+      typeArr = _props$typeArr === void 0 ? [] : _props$typeArr,
+      _props$minTs = props.minTs,
+      minTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
+      _props$maxTs = props.maxTs,
+      maxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
+      _props$formatter = props.formatter,
+      formatter = _props$formatter === void 0 ? defaultFormatter : _props$formatter,
+      _props$valueFilter = props.valueFilter,
+      valueFilter = _props$valueFilter === void 0 ? function () {
+    return true;
+  } : _props$valueFilter,
+      columnsProcessor = props.columnsProcessor,
+      touchToStop = props.touchToStop,
+      _props$useUTC = props.useUTC,
+      useUTC = _props$useUTC === void 0 ? false : _props$useUTC,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   var currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+
   var _useState = useState([[]]),
-    data = _useState[0],
-    setData = _useState[1];
+      data = _useState[0],
+      setData = _useState[1];
+
   var _useState2 = useState([]),
-    value = _useState2[0],
-    setValue = _useState2[1];
+      value = _useState2[0],
+      setValue = _useState2[1];
+
   var currentDateObjRef = useRef(_convertTsToDateObj(currentTs));
   var minDateObjRef = useRef(_convertTsToDateObj(minTs));
   var maxDateObjRef = useRef(_convertTsToDateObj(maxTs));
@@ -63,6 +69,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       dom: pickerRef.current ? pickerRef.current.dom : null
     };
   });
+
   function _getColumns() {
     var dateObj = {};
     allTypes.forEach(function (type) {
@@ -71,17 +78,21 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     var columns = keyOptions.map(function (opt) {
       return dateObj[opt];
     });
+
     if (columnsProcessor) {
       columns = columnsProcessor(columns, currentDateObjRef.current);
     }
+
     return {
       columns: columns,
       dateObj: dateObj
     };
   }
+
   function _getSelectValue(columns) {
     var val = keyOptions.map(function (opt, index) {
       var _curCol$Math$max;
+
       var curCol = columns[index] || [];
       var selectIndex = curCol.findIndex(function (col) {
         return col.value === currentDateObjRef.current[opt];
@@ -90,47 +101,58 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     return val;
   }
+
   function _initData() {
     var _getColumns2 = _getColumns(),
-      columns = _getColumns2.columns;
+        columns = _getColumns2.columns;
+
     var val = _getSelectValue(columns);
+
     setData(function () {
       return columns;
     });
     setValue(function () {
       return val;
     });
-  }
-
-  // 根据当前选中的日期动态改变其他列的options
+  } // 根据当前选中的日期动态改变其他列的options
   // @en Dynamically change the options of other columns based on the currently selected date
+
+
   function _getActualArray(type, nowDateObj) {
     var normalRange = _getNormalRange(type, nowDateObj);
+
     var range = [];
+
     switch (type) {
       case 'year':
         range = [minDateObjRef.current.year, maxDateObjRef.current.year];
         break;
+
       default:
         {
           var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
           range = normalRange;
+
           if (judgeObj(nowDateObj, minDateObjRef.current, checkKeys)) {
             range[0] = minDateObjRef.current[type];
           }
+
           if (judgeObj(nowDateObj, maxDateObjRef.current, checkKeys)) {
             range[range.length - 1] = maxDateObjRef.current[type];
           }
         }
     }
+
     return _convertRangeToArr(type, range);
   }
+
   function _convertRangeToArr(type, range) {
     var _range$ = range[0],
-      start = _range$ === void 0 ? 0 : _range$,
-      _range$2 = range[1],
-      end = _range$2 === void 0 ? 0 : _range$2;
+        start = _range$ === void 0 ? 0 : _range$,
+        _range$2 = range[1],
+        end = _range$2 === void 0 ? 0 : _range$2;
     var arr = [];
+
     for (var i = start; i <= end; i += 1) {
       if (valueFilter(type, i)) {
         var text = formatter(i, type);
@@ -140,48 +162,60 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         });
       }
     }
+
     return arr;
   }
+
   function _getNormalRange(type, nowDateObj) {
     switch (type) {
       case 'month':
         return [1, 12];
+
       case 'date':
         if (nowDateObj.month === 2) {
           // 闰年2月29天
           // @en February 29th in leap year
           return nowDateObj.year % 4 === 0 ? [1, 29] : [1, 28];
         }
+
         return oneOf(nowDateObj.month, [1, 3, 5, 7, 8, 10, 12]) ? [1, 31] : [1, 30];
+
       case 'hour':
         return [0, 23];
+
       case 'minute':
       case 'second':
         return [0, 59];
+
       default:
         return [];
     }
   }
+
   function _convertObjToTs(obj, defaultTs) {
     return convertObjToTs(obj, defaultTs, useUTC);
   }
+
   function _convertTsToDateObj(ts) {
     return convertTsToDateObj(ts, useUTC);
   }
+
   function _handlePickerChange(values, index) {
     var type = keyOptions[index];
     var nowDateObj = {};
     values.forEach(function (i, keyIndex) {
       nowDateObj[keyOptions[keyIndex]] = i;
     });
+
     if (~keyOptions.slice(0, keyOptions.length - 1).indexOf(type)) {
       currentDateObjRef.current = nowDateObj;
-      var _getColumns3 = _getColumns(),
-        columns = _getColumns3.columns,
-        dateObj = _getColumns3.dateObj;
 
-      // 校准选中日期，比如先选中2020-02-29 年份改为2019，则2月没有29日；需要校准
+      var _getColumns3 = _getColumns(),
+          columns = _getColumns3.columns,
+          dateObj = _getColumns3.dateObj; // 校准选中日期，比如先选中2020-02-29 年份改为2019，则2月没有29日；需要校准
       // @en Calibration selected date, For example, if you first select 2020-02-29 and change the year to 2019, there will be no 29th in February; calibration is required
+
+
       keyOptions.forEach(function (key) {
         if (dateObj[key].findIndex(function (item) {
           return item.value === nowDateObj[key];
@@ -189,53 +223,69 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           nowDateObj[key] = dateObj[key][dateObj[key].length - 1].value;
         }
       });
+
       var val = _getSelectValue(columns);
+
       setData(columns);
       setValue(val);
     }
+
     if (onValueChange) {
       onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
     }
   }
+
   function _handlePickerConfirm(values) {
     var nowDateObj = {};
     values.forEach(function (index, keyIndex) {
       nowDateObj[keyOptions[keyIndex]] = index;
     });
+
     var newTs = _convertObjToTs(nowDateObj, currentTs);
+
     if (onOk) {
       onOk(newTs, nowDateObj);
     }
+
     if (onChange) {
       onChange(newTs, nowDateObj);
     }
   }
+
   function _getKeyOptions() {
     if (typeArr && typeArr.length) {
       return typeArr;
     }
+
     var options = [];
+
     switch (mode) {
       case 'date':
         options = allTypes.slice(0, 3);
         break;
+
       case 'time':
         options = allTypes.slice(3);
         break;
+
       default:
         options = allTypes;
     }
+
     return options;
   }
+
   useEffect(function () {
     minDateObjRef.current = _convertTsToDateObj(minTs);
     currentDateObjRef.current = _convertTsToDateObj(currentTs);
     maxDateObjRef.current = _convertTsToDateObj(maxTs);
+
     _initData();
   }, [currentTs, minTs, maxTs, useUTC]);
   useEffect(function () {
     if (visible) {
       currentDateObjRef.current = _convertTsToDateObj(currentTs);
+
       _initData();
     }
   }, [visible]);
@@ -263,4 +313,5 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name_en DatePicker
  * @displayName DatePicker
  */
+
 export default componentWrapper(DatePicker, 'DatePicker');

package/esm/dialog/index.d.ts

@@ -193,11 +193,11 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/dialog/index.js

@@ -11,37 +11,40 @@ export * from './methods';
 var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
   var system = useSystem();
   var nowSystem = props.platform || system;
+
   var _props$close = props.close,
-    close = _props$close === void 0 ? function () {} : _props$close,
-    children = props.children,
-    title = props.title,
-    _props$footer = props.footer,
-    footer = _props$footer === void 0 ? [] : _props$footer,
-    _props$footerType = props.footerType,
-    footerType = _props$footerType === void 0 ? 'grid' : _props$footerType,
-    renderFooter = props.renderFooter,
-    _props$footerCollapse = props.footerCollapseCount,
-    footerCollapseCount = _props$footerCollapse === void 0 ? 3 : _props$footerCollapse,
-    _props$titleAlign = props.titleAlign,
-    titleAlign = _props$titleAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$titleAlign,
-    _props$contentAlign = props.contentAlign,
-    contentAlign = _props$contentAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$contentAlign,
-    className = props.className,
-    maskClass = props.maskClass,
-    contentClass = props.contentClass,
-    contentStyle = props.contentStyle,
-    _props$contentTransit = props.contentTransitionType,
-    contentTransitionType = _props$contentTransit === void 0 ? nowSystem === 'android' ? 'fade' : 'fade-scale' : _props$contentTransit,
-    _props$maskTransition = props.maskTransitionTimeout,
-    maskTransitionTimeout = _props$maskTransition === void 0 ? 300 : _props$maskTransition,
-    _props$contentTransit2 = props.contentTransitionTimeout,
-    contentTransitionTimeout = _props$contentTransit2 === void 0 ? 450 : _props$contentTransit2,
-    extra = props.extra,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+      close = _props$close === void 0 ? function () {} : _props$close,
+      children = props.children,
+      title = props.title,
+      _props$footer = props.footer,
+      footer = _props$footer === void 0 ? [] : _props$footer,
+      _props$footerType = props.footerType,
+      footerType = _props$footerType === void 0 ? 'grid' : _props$footerType,
+      renderFooter = props.renderFooter,
+      _props$footerCollapse = props.footerCollapseCount,
+      footerCollapseCount = _props$footerCollapse === void 0 ? 3 : _props$footerCollapse,
+      _props$titleAlign = props.titleAlign,
+      titleAlign = _props$titleAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$titleAlign,
+      _props$contentAlign = props.contentAlign,
+      contentAlign = _props$contentAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$contentAlign,
+      className = props.className,
+      maskClass = props.maskClass,
+      contentClass = props.contentClass,
+      contentStyle = props.contentStyle,
+      _props$contentTransit = props.contentTransitionType,
+      contentTransitionType = _props$contentTransit === void 0 ? nowSystem === 'android' ? 'fade' : 'fade-scale' : _props$contentTransit,
+      _props$maskTransition = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition === void 0 ? 300 : _props$maskTransition,
+      _props$contentTransit2 = props.contentTransitionTimeout,
+      contentTransitionTimeout = _props$contentTransit2 === void 0 ? 450 : _props$contentTransit2,
+      extra = props.extra,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   var maskingRef = useRef(null);
   var contentRef = useRef(null);
   useImperativeHandle(ref, function () {
     var _maskingRef$current, _maskingRef$current2, _maskingRef$current3;
+
     return {
       dom: ((_maskingRef$current = maskingRef.current) == null ? void 0 : _maskingRef$current.dom) || null,
       mask: ((_maskingRef$current2 = maskingRef.current) == null ? void 0 : _maskingRef$current2.mask) || null,
@@ -49,13 +52,17 @@ var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
       setCloseScene: ((_maskingRef$current3 = maskingRef.current) == null ? void 0 : _maskingRef$current3.setCloseScene) || function () {}
     };
   });
+
   function handleFooterBtnClick(e, btn) {
     e.preventDefault();
     e.stopPropagation();
+
     if (btn.disabled) {
       return;
     }
+
     var result = btn.onClick ? btn.onClick(e) : null;
+
     if (!result || typeof result === 'boolean') {
       !result && close(e);
     } else if (result && result.then) {
@@ -64,9 +71,10 @@ var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
   }
+
   function renderDialog(_ref) {
     var prefixCls = _ref.prefixCls,
-      locale = _ref.locale;
+        locale = _ref.locale;
     var prefix = prefixCls + "-dialog";
     return /*#__PURE__*/React.createElement(Masking, _extends({
       close: close,
@@ -105,6 +113,7 @@ var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
       }, typeof btn.content === 'function' ? btn.content(locale) : btn.content);
     })) : null, extra ? /*#__PURE__*/React.createElement("section", null, extra) : null));
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderDialog);
 });
 export function methodsGenerator(Comp) {
@@ -116,6 +125,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
      */
     alert: alert(Comp),
+
     /**
      * 打开提示框(含一个确认按钮和一个取消按钮)
      * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
@@ -123,6 +133,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
      */
     confirm: confirm(Comp),
+
     /**
      * 打开常规对话框
      * @desc {en} Open the general dialog
@@ -133,7 +144,6 @@ export function methodsGenerator(Comp) {
   };
 }
 var DialogWithGlobalContext = CompWithGlobalContext(Dialog);
-
 /**
  * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
  * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -142,4 +152,5 @@ var DialogWithGlobalContext = CompWithGlobalContext(Dialog);
  * @name 对话框
  * @name_en Dialog
  */
+
 export default componentWrapper(Dialog, methodsGenerator(DialogWithGlobalContext));

package/esm/dialog/methods.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["onOk", "okText"],
-  _excluded2 = ["onOk", "okText", "onCancel", "cancelText"];
+    _excluded2 = ["onOk", "okText", "onCancel", "cancelText"];
 import { getOpenMethod, open as maskingOpen } from '../masking/methods';
 export function normalizeAlert(config) {
   var _ref = config || {},
-    onOk = _ref.onOk,
-    okText = _ref.okText,
-    restConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
+      onOk = _ref.onOk,
+      okText = _ref.okText,
+      restConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   return _extends({
     footer: [{
       content: okText || function (locale) {
@@ -20,11 +21,12 @@ export function normalizeAlert(config) {
 }
 export function normalizeConfirm(config) {
   var _ref2 = config || {},
-    onOk = _ref2.onOk,
-    okText = _ref2.okText,
-    onCancel = _ref2.onCancel,
-    cancelText = _ref2.cancelText,
-    restConfig = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+      onOk = _ref2.onOk,
+      okText = _ref2.okText,
+      onCancel = _ref2.onCancel,
+      cancelText = _ref2.cancelText,
+      restConfig = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
   return _extends({
     footer: [{
       content: cancelText || function (locale) {

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

@@ -0,0 +1,7 @@
+#demo-divider .arcodesign-mobile-demo-content {
+  padding: 0;
+}
+#demo-divider .demo-gap {
+  height: 8px;
+  background-color: #f7f8fA;
+}

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

@@ -0,0 +1,12 @@
+@import '../../../../style/mixin.less';
+
+#demo-divider {
+    .arcodesign-mobile-demo-content {
+        .rem(padding, 0);
+    }
+
+    .demo-gap {
+        height: 8px;
+        background-color: #f7f8fA;
+    }
+}

package/esm/divider/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { BaseProps } from '../_helpers';
+export interface DividerProps extends BaseProps {
+    /**
+     * 是否使用 0.5px 线
+     * @en Whether to use hairline
+     * @default true
+     */
+    hairline?: boolean;
+    /**
+     * 文字
+     * @en Divider text
+     */
+    content?: React.ReactNode;
+    /**
+     * 文字位置
+     * @en The position of text inside divider
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * 分割线宽度（单边），仅在`align`为`center`时生效
+     * @en The width of divider, only take effect when `align` is `center`.
+     */
+    width?: string | number;
+    /**
+     * 子元素，同 content，优先级低于 content
+     * @en Children element, same as `content`, with the priority lower than `content`
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface DividerRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 划分内容的装饰线
+ * @en A partitioning line element
+ * @type 布局
+ * @type_en Layout
+ * @name 分割线
+ * @name_en Divider
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<DividerRef>>;
+export default Divider;

package/esm/divider/index.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, useContext } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { getStyleWithVendor } from '../_helpers';
+
+/**
+ * 划分内容的装饰线
+ * @en A partitioning line element
+ * @type 布局
+ * @type_en Layout
+ * @name 分割线
+ * @name_en Divider
+ */
+var Divider = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$hairline = props.hairline,
+      hairline = _props$hairline === void 0 ? true : _props$hairline,
+      _props$align = props.align,
+      align = _props$align === void 0 ? 'center' : _props$align,
+      width = props.width;
+  var domRef = useRef(null);
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var prefix = prefixCls + "-divider";
+  var children = props.content || props.children;
+  var hasCustomWidth = children && width !== undefined && align === 'center';
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function () {
+    var _cls;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefix, className, (_cls = {}, _cls[prefix + "--hairline"] = hairline, _cls[prefix + "--with-text " + prefix + "--text-" + align] = children, _cls[prefix + "--with-width"] = hasCustomWidth, _cls)),
+      style: _extends({}, style, hasCustomWidth ? getStyleWithVendor({
+        flexBasis: width
+      }) : {}),
+      ref: domRef
+    }, children);
+  });
+});
+export default Divider;