@arco-design/mobile-react 2.19.1 → 2.21.0

package/tokens/app/arcodesign/default/index.less

@@ -158,8 +158,9 @@
 @avatar-desc-ultra-small-margin-top: ~`pxtorem(2)`;
 @avatar-name-color: @font-color;
 @avatar-desc-color: @sub-info-font-color;
-@button-border-color: @primary-color;
+@button-line-height: 1.2;
 @button-radius: 2PX;
+@button-icon-text-gutter: ~`pxtorem(4)`;
 @button-primary-background: @primary-color;
 @button-primary-clicked-background: #0E42D2;
 @button-primary-disabled-background: @primary-disabled-color;
@@ -517,6 +518,7 @@
 @steps-padding: ~`pxtorem(16)` 0;
 @steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
 @steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+@steps-tail-vertical-top: ~`pxtorem(9)`;
 @steps-tail-standard-size: 1PX;
 @steps-tail-standard-background: @line-color;
 @steps-tail-finish-background: @primary-color;
@@ -543,8 +545,6 @@
 @steps-wait-description-color: @sub-info-font-color;
 @steps-icon-width: 18PX;
 @steps-icon-height: 18PX;
-@steps-custom-icon-width: 20PX;
-@steps-custom-icon-height: 20PX;
 @steps-dot-width: 8PX;
 @steps-dot-height: 8PX;
 @steps-dot-border-width: 1.5PX;
@@ -559,6 +559,16 @@
 @steps-vertical-padding-bottom: 0;
 @steps-vertical-padding-left: ~`pxtorem(20)`;
 @steps-process-with-config-item-icon-color: #FFFFFF;
+@swipe-action-open-transition: cubic-bezier(0.2, 0.8, 0.32, 1.28);
+@swipe-action-close-transition: cubic-bezier(0.34, 0.69, 0.1, 1);
+@swipe-action-info-padding: ~`pxtorem(16)`;
+@swipe-action-info-bounce-buffer: ~`pxtorem(30)`;
+@swipe-action-text-font-size: ~`pxtorem(16)`;
+@swipe-action-text-line-height: ~`pxtorem(22)`;
+@swipe-action-text-color: #ffffff;
+@swipe-action-icon-width: ~`pxtorem(20)`;
+@swipe-action-icon-height: ~`pxtorem(20)`;
+@swipe-action-icon-margin-right: ~`pxtorem(4)`;
 @badge-background-color: #F53F3F;
 @badge-text-color: #FFFFFF;
 @badge-font-size: 12PX;
@@ -646,4 +656,44 @@
 @action-sheet-header-padding: ~`pxtorem(16)`;
 @action-sheet-title-font-size: ~`pxtorem(16)`;
 @action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+@search-bar-padding: ~`pxtorem(16)`;
+@search-bar-background-color: #FFFFFF;
+@search-bar-square-shape-border-radius: ~`pxtorem(2)`;
+@search-bar-round-shape-border-radius: ~`pxtorem(9999)`;
+@search-bar-input-wrapper-height: ~`pxtorem(36)`;
+@search-bar-input-wrapper-padding: ~`pxtorem(8)` ~`pxtorem(14)`;
+@search-bar-input-wrapper-background-color: #F2F3F5;
+@search-bar-input-wrapper-font-size: ~`pxtorem(14)`;
+@search-bar-input-height: ~`pxtorem(20)`;
+@search-bar-input-caret-color: @primary-color;
+@search-bar-input-placeholder-color: @disabled-color;
+@search-bar-prefix-margin-right: ~`pxtorem(9)`;
+@search-bar-clear-icon-color: #C9CDD4;
+@search-bar-search-icon-color: #86909C;
+@search-bar-search-icon-font-size: ~`pxtorem(16)`;
+@search-bar-cancel-btn-color: @primary-color;
+@search-bar-cancel-btn-font-size: ~`pxtorem(15)`;
+@search-bar-cancel-btn-margin-left: ~`pxtorem(16)`;
+@search-bar-association-background-color: #FFFFFF;
+@search-bar-association-item-height: ~`pxtorem(52)`;
+@search-bar-association-item-padding: ~`pxtorem(16)`;
+@search-bar-association-item-font-size: ~`pxtorem(15)`;
+@search-bar-association-item-color: @font-color;
+@search-bar-association-item-highlight-color: @primary-color;
+@image-picker-font-size: ~`pxtorem(14)`;
+@image-picker-disabled-opacity: 0.7;
+@image-picker-border-radius: ~`pxtorem(2)`;
+@image-picker-add-background: #f7f8fa;
+@image-picker-add-icon-font-size: ~`pxtorem(30)`;
+@image-picker-add-icon-color: #d8d8d8;
+@image-picker-add-text-font-size: ~`pxtorem(12)`;
+@image-picker-add-text-color: @sub-info-font-color;
+@image-picker-error-color: #ffffff;
+@image-picker-error-background: rgba(0, 0, 0, 0.5);
+@image-picker-close-color: #ffffff;
+@image-picker-close-font-size: ~`pxtorem(12)`;
+@image-picker-close-width: ~`pxtorem(18)`;
+@image-picker-close-height: ~`pxtorem(18)`;
+@image-picker-close-background: rgba(0, 0, 0, 0.3);
+@image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 

package/umd/_helpers/type.d.ts

@@ -25,6 +25,6 @@ export interface BaseRef {
     /**
      * 组件外层dom元素
      * @en The outer DOM element of the component
-     * */
+     */
     dom: HTMLDivElement | null;
 }

package/umd/avatar/group.js

@@ -64,7 +64,7 @@
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
       style: style,
-      className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", "group-" + size)
+      className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", prefixCls + "-avatar-group-size-" + size, "group-" + size)
     }, /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
       value: {
         isGroup: true,

package/umd/avatar/index.d.ts

@@ -9,7 +9,7 @@ declare const _default: React.ForwardRefExoticComponent<AvatarProps<ImageProps &
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 头像
  * @name_en Avatar

package/umd/avatar/index.js

@@ -38,7 +38,7 @@
 
   function componentGenerator(Comp) {
     return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-      var _cls;
+      var _cls, _cls2;
 
       var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
           prefixCls = _useContext.prefixCls;
@@ -77,10 +77,7 @@
           style = _props$style === void 0 ? {} : _props$style,
           _props$imageProps = props.imageProps,
           imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
-          _props$defaultOverLap = props.defaultOverLap,
-          defaultOverLap = _props$defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
-        className: prefixCls + "-avatar-default"
-      }) : _props$defaultOverLap,
+          defaultOverLap = props.defaultOverLap,
           onClickDecoration = props.onClickDecoration,
           onClick = props.onClick;
       var domRef = (0, _react.useRef)(null);
@@ -140,19 +137,19 @@
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: domRef,
         style: style,
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, {
-          'with-info': Boolean(avatarName)
-        }),
+        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_cls = {}, _cls[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _cls)),
         onClick: onClick
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar", size, shape, (_cls = {}, _cls[prefixCls + "-text-avatar"] = isTextAvatar, _cls[prefixCls + "-image-avatar"] = isImageAvatar, _cls['default-overlap'] = useDefaultAvatar, _cls)),
+        className: (0, _mobileUtils.cls)(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_cls2 = {}, _cls2[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _cls2[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _cls2[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _cls2)),
         style: avatarStyle,
         ref: avatarRef
-      }, children, useDefaultAvatar && defaultOverLap, isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+      }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
+        className: prefixCls + "-avatar-default " + prefixCls + "-avatar-default-icon-size-" + size
+      }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
         className: prefixCls + "-avatar-img",
         src: src
       }, imageProps)), isTextAvatar && /*#__PURE__*/_react.default.createElement("span", {
-        className: prefixCls + "-avatar-text",
+        className: prefixCls + "-avatar-text " + prefixCls + "-avatar-text-size-" + size,
         ref: avatarTextRef,
         style: {
           transform: "scale(" + textScale + ")"
@@ -163,9 +160,9 @@
       }, decoration)), renderInfo, !renderInfo && avatarName && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-avatar-info")
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-name")
+        className: prefixCls + "-avatar-name " + prefixCls + "-avatar-name-size-" + size
       }, avatarName), avatarDesc && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-desc")
+        className: prefixCls + "-avatar-desc " + prefixCls + "-avatar-desc-size-" + size
       }, avatarDesc)));
     });
   }
@@ -174,7 +171,7 @@
   /**
    * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
    * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 头像
    * @name_en Avatar

package/umd/avatar/style/css/index.css

@@ -1,74 +1,3 @@
-.arco-avatar-wrapper {
-  display: inline-block;
-}
-.arco-avatar-wrapper.with-info.ultra-small {
-  height:  1.12rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-name {
-  font-size:  0.26rem ;
-  line-height:  0.36rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.2rem ;
-  line-height:  0.28rem ;
-}
-.arco-avatar-wrapper.with-info.smaller {
-  height:  1.28rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-name {
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.small {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-name {
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.medium {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info.large {
-  height:  1.76rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-}
 .arco-avatar {
   position: relative;
   font-size: 0;
@@ -84,104 +13,134 @@
   color:  #fff ;
   background-color:  #4080FF ;
 }
-.arco-avatar.arco-image-avatar {
+.arco-avatar-mode-image {
   background-color: transparent;
 }
-.arco-avatar.default-overlap {
+.arco-avatar-default-overlap {
   background-color:  #c9cdd4 ;
 }
-.arco-avatar.circle {
+.arco-avatar-shape-circle {
   border-radius: 50%;
 }
-.arco-avatar.circle .arco-avatar-img .image-content {
+.arco-avatar-shape-circle .arco-avatar-img .image-content {
   border-radius: 50%;
 }
-.arco-avatar.square {
+.arco-avatar-shape-square {
   border-radius: 0.08rem;
 }
-.arco-avatar.square .arco-avatar-img .image-content {
+.arco-avatar-shape-square .arco-avatar-img .image-content {
   border-radius: 0.08rem;
 }
-.arco-avatar.group-ultra-small .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
-}
-.arco-avatar.group-ultra-small .arco-avatar {
-  border-width:  0.02rem ;
-}
-.arco-avatar.ultra-small {
+.arco-avatar-size-ultra-small {
   width:  0.48rem ;
   height:  0.48rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-default {
+.arco-avatar-default-icon-size-ultra-small {
   font-size:  0.24rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-text {
+.arco-avatar-text-size-ultra-small {
   font-size:  0.2rem ;
 }
-.arco-avatar.group-smaller .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
+.arco-avatar-wrapper-with-info-size-ultra-small {
+  height:  1.12rem ;
 }
-.arco-avatar.group-smaller .arco-avatar {
-  border-width:  0.02rem ;
+.arco-avatar-name-size-ultra-small {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
 }
-.arco-avatar.smaller {
+.arco-avatar-desc-size-ultra-small {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-avatar-size-smaller {
   width:  0.64rem ;
   height:  0.64rem ;
 }
-.arco-avatar.smaller .arco-avatar-default {
+.arco-avatar-default-icon-size-smaller {
   font-size:  0.32rem ;
 }
-.arco-avatar.smaller .arco-avatar-text {
+.arco-avatar-text-size-smaller {
   font-size:  0.24rem ;
 }
-.arco-avatar.group-small .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-smaller {
+  height:  1.28rem ;
 }
-.arco-avatar.group-small .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-smaller {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.small {
+.arco-avatar-desc-size-smaller {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-size-small {
   width:  0.8rem ;
   height:  0.8rem ;
 }
-.arco-avatar.small .arco-avatar-default {
+.arco-avatar-default-icon-size-small {
   font-size:  0.4rem ;
 }
-.arco-avatar.small .arco-avatar-text {
+.arco-avatar-text-size-small {
   font-size:  0.28rem ;
 }
-.arco-avatar.group-medium .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-small {
+  height:  1.6rem ;
 }
-.arco-avatar.group-medium .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-small {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-desc-size-small {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.medium {
+.arco-avatar-size-medium {
   width:  0.96rem ;
   height:  0.96rem ;
 }
-.arco-avatar.medium .arco-avatar-default {
+.arco-avatar-default-icon-size-medium {
   font-size:  0.48rem ;
 }
-.arco-avatar.medium .arco-avatar-text {
+.arco-avatar-text-size-medium {
   font-size:  0.32rem ;
 }
-.arco-avatar.group-large .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-medium {
+  height:  1.6rem ;
 }
-.arco-avatar.group-large .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-medium {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-medium {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.large {
+.arco-avatar-size-large {
   width:  1.12rem ;
   height:  1.12rem ;
 }
-.arco-avatar.large .arco-avatar-default {
+.arco-avatar-default-icon-size-large {
   font-size:  0.56rem ;
 }
-.arco-avatar.large .arco-avatar-text {
+.arco-avatar-text-size-large {
   font-size:  0.32rem ;
 }
+.arco-avatar-wrapper-with-info-size-large {
+  height:  1.76rem ;
+}
+.arco-avatar-name-size-large {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-large {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
 .arco-avatar-img {
   width: 100%;
   height: 100%;
@@ -195,6 +154,17 @@
           flex: 0 0 auto;
   font-weight: bold;
 }
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper-with-info {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
 .arco-avatar-info {
   display: -webkit-box;
   display: -webkit-flex;
@@ -214,43 +184,43 @@
 .arco-avatar-desc {
   color:  #86909c ;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle {
   position: relative;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
   margin-left: 0;
 }
 .arco-avatar-group .arco-avatar {
   border-style: solid;
   border-color:  #ffffff ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar {
+.arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+.arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar {
+.arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-small .arco-avatar-wrapper {
+.arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-small .arco-avatar {
+.arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar-wrapper {
+.arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar {
+.arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-large .arco-avatar-wrapper {
+.arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-large .arco-avatar {
+.arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }