@arco-design/mobile-react 2.21.3 → 2.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/index.d.ts +1 -0
  5. package/cjs/_helpers/index.js +9 -0
  6. package/cjs/_helpers/react-dom.d.ts +13 -0
  7. package/cjs/_helpers/react-dom.js +65 -0
  8. package/cjs/_helpers/render.d.ts +10 -0
  9. package/cjs/_helpers/render.js +40 -0
  10. package/cjs/action-sheet/index.d.ts +1 -1
  11. package/cjs/action-sheet/style/css/index.css +2 -2
  12. package/cjs/action-sheet/style/index.less +1 -1
  13. package/cjs/dialog/style/css/index.css +2 -2
  14. package/cjs/dialog/style/index.less +1 -1
  15. package/cjs/image-picker/index.js +0 -1
  16. package/cjs/image-preview/index.d.ts +2 -10
  17. package/cjs/image-preview/methods.js +4 -11
  18. package/cjs/masking/index.d.ts +10 -0
  19. package/cjs/masking/methods.js +4 -11
  20. package/cjs/notify/methods.js +6 -9
  21. package/cjs/popover/hooks/useEvent.js +6 -6
  22. package/cjs/pull-refresh/android-pull-refresh.js +2 -0
  23. package/cjs/pull-refresh/ios-pull-refresh.js +3 -2
  24. package/cjs/pull-refresh/model.d.ts +6 -2
  25. package/cjs/steps/demo/style/css/mobile.css +8 -2
  26. package/cjs/steps/index.d.ts +1 -1
  27. package/cjs/steps/index.js +5 -1
  28. package/cjs/steps/step.js +5 -3
  29. package/cjs/steps/style/css/index.css +78 -23
  30. package/cjs/steps/style/index.less +92 -24
  31. package/cjs/steps/type.d.ts +12 -0
  32. package/cjs/swipe-action/index.js +21 -3
  33. package/cjs/tabs/index.js +8 -4
  34. package/cjs/tabs/style/css/index.css +8 -8
  35. package/cjs/tabs/style/index.less +4 -4
  36. package/cjs/tabs/tab-cell.js +4 -3
  37. package/cjs/tabs/type.d.ts +11 -0
  38. package/cjs/toast/methods.js +9 -12
  39. package/dist/index.js +186 -81
  40. package/dist/index.min.js +4 -4
  41. package/dist/style.css +87 -35
  42. package/dist/style.min.css +1 -1
  43. package/esm/_helpers/index.d.ts +1 -0
  44. package/esm/_helpers/index.js +1 -0
  45. package/esm/_helpers/react-dom.d.ts +13 -0
  46. package/esm/_helpers/react-dom.js +57 -0
  47. package/esm/_helpers/render.d.ts +10 -0
  48. package/esm/_helpers/render.js +29 -0
  49. package/esm/action-sheet/index.d.ts +1 -1
  50. package/esm/action-sheet/style/css/index.css +2 -2
  51. package/esm/action-sheet/style/index.less +1 -1
  52. package/esm/dialog/style/css/index.css +2 -2
  53. package/esm/dialog/style/index.less +1 -1
  54. package/esm/image-picker/index.js +0 -1
  55. package/esm/image-preview/index.d.ts +2 -10
  56. package/esm/image-preview/methods.js +3 -9
  57. package/esm/masking/index.d.ts +10 -0
  58. package/esm/masking/methods.js +3 -9
  59. package/esm/notify/methods.js +6 -7
  60. package/esm/popover/hooks/useEvent.js +6 -6
  61. package/esm/pull-refresh/android-pull-refresh.js +2 -0
  62. package/esm/pull-refresh/ios-pull-refresh.js +3 -2
  63. package/esm/pull-refresh/model.d.ts +6 -2
  64. package/esm/steps/demo/style/css/mobile.css +8 -2
  65. package/esm/steps/index.d.ts +1 -1
  66. package/esm/steps/index.js +5 -1
  67. package/esm/steps/step.js +5 -3
  68. package/esm/steps/style/css/index.css +78 -23
  69. package/esm/steps/style/index.less +92 -24
  70. package/esm/steps/type.d.ts +12 -0
  71. package/esm/swipe-action/index.js +21 -3
  72. package/esm/tabs/index.js +9 -5
  73. package/esm/tabs/style/css/index.css +8 -8
  74. package/esm/tabs/style/index.less +4 -4
  75. package/esm/tabs/tab-cell.js +4 -3
  76. package/esm/tabs/type.d.ts +11 -0
  77. package/esm/toast/methods.js +8 -9
  78. package/package.json +3 -3
  79. package/tokens/app/arcodesign/default/css-variables.less +7 -3
  80. package/tokens/app/arcodesign/default/index.d.ts +4 -0
  81. package/tokens/app/arcodesign/default/index.js +7 -3
  82. package/tokens/app/arcodesign/default/index.json +58 -10
  83. package/tokens/app/arcodesign/default/index.less +7 -3
  84. package/tokens/mixin/index.less +1 -1
  85. package/umd/_helpers/index.d.ts +1 -0
  86. package/umd/_helpers/index.js +10 -4
  87. package/umd/_helpers/react-dom.d.ts +13 -0
  88. package/umd/_helpers/react-dom.js +78 -0
  89. package/umd/_helpers/render.d.ts +10 -0
  90. package/umd/_helpers/render.js +51 -0
  91. package/umd/action-sheet/index.d.ts +1 -1
  92. package/umd/action-sheet/style/css/index.css +2 -2
  93. package/umd/action-sheet/style/index.less +1 -1
  94. package/umd/dialog/style/css/index.css +2 -2
  95. package/umd/dialog/style/index.less +1 -1
  96. package/umd/image-picker/index.js +0 -1
  97. package/umd/image-preview/index.d.ts +2 -10
  98. package/umd/image-preview/methods.js +6 -13
  99. package/umd/masking/index.d.ts +10 -0
  100. package/umd/masking/methods.js +6 -13
  101. package/umd/notify/methods.js +9 -12
  102. package/umd/popover/hooks/useEvent.js +6 -6
  103. package/umd/pull-refresh/android-pull-refresh.js +2 -0
  104. package/umd/pull-refresh/ios-pull-refresh.js +3 -2
  105. package/umd/pull-refresh/model.d.ts +6 -2
  106. package/umd/steps/demo/style/css/mobile.css +8 -2
  107. package/umd/steps/index.d.ts +1 -1
  108. package/umd/steps/index.js +5 -1
  109. package/umd/steps/step.js +5 -3
  110. package/umd/steps/style/css/index.css +78 -23
  111. package/umd/steps/style/index.less +92 -24
  112. package/umd/steps/type.d.ts +12 -0
  113. package/umd/swipe-action/index.js +21 -3
  114. package/umd/tabs/index.js +8 -4
  115. package/umd/tabs/style/css/index.css +8 -8
  116. package/umd/tabs/style/index.less +4 -4
  117. package/umd/tabs/tab-cell.js +4 -3
  118. package/umd/tabs/type.d.ts +11 -0
  119. package/umd/toast/methods.js +11 -14
package/dist/style.css CHANGED
@@ -241,8 +241,8 @@ samp {
241
241
  .arco-action-sheet-title.android,
242
242
  .arco-action-sheet-title.system-android {
243
243
  font-weight: 400;
244
- -webkit-text-stroke: 0.3PX #1d2129;
245
- text-stroke: 0.3PX #1d2129;
244
+ -webkit-text-stroke: 0.3PX currentColor;
245
+ text-stroke: 0.3PX currentColor;
246
246
  }
247
247
  .arco-action-sheet-sub-title {
248
248
  color: #86909c ;
@@ -2222,8 +2222,8 @@ samp {
2222
2222
  .arco-tab-cell.vertical:not(.custom).line.active.system-android,
2223
2223
  .arco-tab-cell.vertical:not(.custom).line-divide.active.system-android {
2224
2224
  font-weight: 400;
2225
- -webkit-text-stroke: 0.3PX #165dff;
2226
- text-stroke: 0.3PX #165dff;
2225
+ -webkit-text-stroke: 0.3PX currentColor;
2226
+ text-stroke: 0.3PX currentColor;
2227
2227
  }
2228
2228
  .arco-tab-cell.vertical:not(.custom).card {
2229
2229
  color: #165dff ;
@@ -2237,8 +2237,8 @@ samp {
2237
2237
  .arco-tab-cell.vertical:not(.custom).card.active.android,
2238
2238
  .arco-tab-cell.vertical:not(.custom).card.active.system-android {
2239
2239
  font-weight: 400;
2240
- -webkit-text-stroke: 0.3PX #ffffff;
2241
- text-stroke: 0.3PX #ffffff;
2240
+ -webkit-text-stroke: 0.3PX currentColor;
2241
+ text-stroke: 0.3PX currentColor;
2242
2242
  }
2243
2243
  .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
2244
2244
  border-right: 1PX solid #165dff ;
@@ -2280,8 +2280,8 @@ samp {
2280
2280
  .arco-tab-cell.vertical:not(.custom).tag.active.system-android,
2281
2281
  .arco-tab-cell.vertical:not(.custom).tag-divide.active.system-android {
2282
2282
  font-weight: 400;
2283
- -webkit-text-stroke: 0.3PX #ffffff;
2284
- text-stroke: 0.3PX #ffffff;
2283
+ -webkit-text-stroke: 0.3PX currentColor;
2284
+ text-stroke: 0.3PX currentColor;
2285
2285
  }
2286
2286
  .arco-tab-cell.horizontal {
2287
2287
  height: 1.08rem ;
@@ -2294,8 +2294,8 @@ samp {
2294
2294
  .arco-tab-cell.horizontal.active.android,
2295
2295
  .arco-tab-cell.horizontal.active.system-android {
2296
2296
  font-weight: 400;
2297
- -webkit-text-stroke: 0.3PX #165dff;
2298
- text-stroke: 0.3PX #165dff;
2297
+ -webkit-text-stroke: 0.3PX currentColor;
2298
+ text-stroke: 0.3PX currentColor;
2299
2299
  }
2300
2300
  .arco-tab-pane-container.mode-swipe {
2301
2301
  display: flex;
@@ -2447,8 +2447,8 @@ samp {
2447
2447
  .arco-dialog-header.ios.android,
2448
2448
  .arco-dialog-header.ios.system-android {
2449
2449
  font-weight: 400;
2450
- -webkit-text-stroke: 0.3PX #1d2129;
2451
- text-stroke: 0.3PX #1d2129;
2450
+ -webkit-text-stroke: 0.3PX currentColor;
2451
+ text-stroke: 0.3PX currentColor;
2452
2452
  }
2453
2453
  .arco-dialog-header.ios.only-title {
2454
2454
  padding-bottom: 0.4rem ;
@@ -4858,13 +4858,19 @@ samp {
4858
4858
  }
4859
4859
  .arco-steps-item.horizontal {
4860
4860
  flex-direction: column;
4861
+ }
4862
+ .arco-steps-item-align-center {
4861
4863
  align-items: center;
4862
4864
  }
4863
- .arco-steps-item.vertical {
4865
+ .arco-steps-item-align-start {
4864
4866
  align-items: flex-start;
4865
4867
  }
4866
- .arco-steps-item:last-child .arco-steps-item-tail:after {
4867
- display: none;
4868
+ .arco-steps-item-align-center.vertical {
4869
+ padding-bottom: 0.5rem ;
4870
+ }
4871
+ .arco-steps-item:first-child .arco-steps-item-tail::before,
4872
+ .arco-steps-item:last-child .arco-steps-item-tail::after {
4873
+ visibility: hidden;
4868
4874
  }
4869
4875
  .arco-steps-item-tail {
4870
4876
  position: absolute;
@@ -4874,33 +4880,78 @@ samp {
4874
4880
  }
4875
4881
  .horizontal .arco-steps-item-tail {
4876
4882
  width: 100%;
4877
- left: 50%;
4878
4883
  height: 18PX ;
4879
- padding: 0 0.36rem ;
4880
4884
  }
4881
- .horizontal .arco-steps-item-tail:after {
4885
+ .horizontal .arco-steps-item-tail::before,
4886
+ .horizontal .arco-steps-item-tail::after {
4887
+ height: 1PX ;
4888
+ }
4889
+ .horizontal .arco-steps-item-tail-align-start {
4890
+ left: 9PX ;
4891
+ padding: 0 18PX ;
4892
+ }
4893
+ .horizontal .arco-steps-item-tail-align-start::after {
4882
4894
  content: "";
4883
- display: inline-block;
4884
4895
  width: 100%;
4885
- height: 1PX ;
4886
- background: #e5e6eb ;
4887
- border-radius: 0.04rem;
4896
+ border-radius: 2PX ;
4897
+ }
4898
+ .horizontal .arco-steps-item-tail-align-center::before,
4899
+ .horizontal .arco-steps-item-tail-align-center::after {
4900
+ content: "";
4901
+ width: 50%;
4902
+ }
4903
+ .horizontal .arco-steps-item-tail-align-center::before {
4904
+ margin-right: 18PX ;
4905
+ border-top-right-radius: 2PX ;
4906
+ border-bottom-right-radius: 2PX ;
4907
+ }
4908
+ .horizontal .arco-steps-item-tail-align-center::after {
4909
+ margin-left: 18PX ;
4910
+ border-top-left-radius: 2PX ;
4911
+ border-bottom-left-radius: 2PX ;
4888
4912
  }
4889
4913
  .vertical .arco-steps-item-tail {
4890
4914
  height: 100%;
4891
4915
  width: 18PX ;
4892
- top: 0.18rem ;
4893
- padding: 0.28rem 0 ;
4916
+ flex-direction: column;
4894
4917
  }
4895
- .vertical .arco-steps-item-tail:after {
4918
+ .vertical .arco-steps-item-tail::before,
4919
+ .vertical .arco-steps-item-tail::after {
4920
+ width: 1PX ;
4921
+ }
4922
+ .vertical .arco-steps-item-tail-align-start {
4923
+ top: 9PX ;
4924
+ padding: 14PX 0 ;
4925
+ }
4926
+ .vertical .arco-steps-item-tail-align-start::after {
4896
4927
  content: "";
4897
- display: inline-block;
4898
4928
  height: 100%;
4899
- width: 1PX ;
4929
+ border-radius: 2PX ;
4930
+ }
4931
+ .vertical .arco-steps-item-tail-align-center::before,
4932
+ .vertical .arco-steps-item-tail-align-center::after {
4933
+ content: "";
4934
+ height: 50%;
4935
+ }
4936
+ .vertical .arco-steps-item-tail-align-center::before {
4937
+ margin-bottom: 14PX ;
4938
+ border-bottom-left-radius: 2PX ;
4939
+ border-bottom-right-radius: 2PX ;
4940
+ }
4941
+ .vertical .arco-steps-item-tail-align-center::after {
4942
+ margin-top: 14PX ;
4943
+ border-top-left-radius: 2PX ;
4944
+ border-top-right-radius: 2PX ;
4945
+ }
4946
+ .arco-steps-item-tail::after,
4947
+ .arco-steps-item-tail::before {
4948
+ display: inline-block;
4900
4949
  background: #e5e6eb ;
4901
- border-radius: 0.04rem;
4902
4950
  }
4903
- .finish .arco-steps-item-tail:after {
4951
+ .arco-steps-item-tail-status-finish::before,
4952
+ .arco-steps-item-tail-status-finish::after,
4953
+ .arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
4954
+ .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
4904
4955
  background: #165dff ;
4905
4956
  }
4906
4957
  .arco-steps-item-custom-icon,
@@ -4946,8 +4997,8 @@ samp {
4946
4997
  .arco-steps-item-icon-num.android,
4947
4998
  .arco-steps-item-icon-num.system-android {
4948
4999
  font-weight: 400;
4949
- -webkit-text-stroke: 0.3PX #86909c;
4950
- text-stroke: 0.3PX #86909c;
5000
+ -webkit-text-stroke: 0.3PX currentColor;
5001
+ text-stroke: 0.3PX currentColor;
4951
5002
  }
4952
5003
  .process .arco-steps-item-icon-num {
4953
5004
  color: #FFFFFF ;
@@ -4971,16 +5022,17 @@ samp {
4971
5022
  border: none;
4972
5023
  background: #165dff ;
4973
5024
  }
4974
- .arco-steps-item-content {
4975
- text-align: center;
4976
- }
4977
5025
  .horizontal .arco-steps-item-content {
4978
5026
  margin-top: 0.1rem ;
4979
5027
  }
5028
+ .horizontal .arco-steps-item-content-align-center {
5029
+ text-align: center;
5030
+ }
4980
5031
  .vertical .arco-steps-item-content {
4981
5032
  margin-left: 0.26rem ;
4982
- text-align: left;
4983
5033
  flex: 1;
5034
+ }
5035
+ .vertical .arco-steps-item-content-align-start {
4984
5036
  padding-bottom: 0.5rem ;
4985
5037
  }
4986
5038
  .arco-steps-item-title {