@arco-design/mobile-react 2.27.5 → 2.28.1

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 (110) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/hooks.d.ts +1 -0
  5. package/cjs/_helpers/hooks.js +43 -27
  6. package/cjs/avatar/type.d.ts +1 -1
  7. package/cjs/badge/style/css/index.css +12 -0
  8. package/cjs/badge/style/index.less +3 -3
  9. package/cjs/button/style/css/index.css +4 -0
  10. package/cjs/button/style/index.less +1 -1
  11. package/cjs/cell/style/css/index.css +7 -0
  12. package/cjs/cell/style/index.less +4 -1
  13. package/cjs/checkbox/style/css/index.css +13 -0
  14. package/cjs/checkbox/style/index.less +3 -3
  15. package/cjs/collapse/collapse.js +12 -6
  16. package/cjs/form/style/css/index.css +16 -0
  17. package/cjs/form/style/index.less +4 -4
  18. package/cjs/image-preview/index.js +2 -1
  19. package/cjs/radio/style/css/index.css +8 -0
  20. package/cjs/radio/style/index.less +2 -2
  21. package/cjs/rate/index.js +5 -3
  22. package/cjs/rate/style/css/index.css +4 -0
  23. package/cjs/rate/style/index.less +4 -0
  24. package/cjs/sticky/index.d.ts +5 -0
  25. package/cjs/sticky/index.js +20 -7
  26. package/cjs/switch/index.js +7 -2
  27. package/cjs/switch/style/css/index.css +44 -0
  28. package/cjs/switch/style/index.less +19 -7
  29. package/cjs/tabs/demo/style/css/mobile.css +11 -0
  30. package/cjs/tabs/demo/style/mobile.less +5 -1
  31. package/cjs/tabs/index.js +14 -5
  32. package/cjs/tabs/style/css/index.css +32 -7
  33. package/cjs/tabs/style/index.less +9 -14
  34. package/cjs/tabs/tab-cell-underline.js +14 -5
  35. package/cjs/tabs/tab-cell.js +15 -7
  36. package/cjs/tabs/tab-pane.js +4 -3
  37. package/cjs/tabs/type.d.ts +1 -0
  38. package/dist/index.js +92 -40
  39. package/dist/index.min.js +3 -3
  40. package/dist/style.css +134 -7
  41. package/dist/style.min.css +1 -1
  42. package/esm/_helpers/hooks.d.ts +1 -0
  43. package/esm/_helpers/hooks.js +41 -27
  44. package/esm/avatar/type.d.ts +1 -1
  45. package/esm/badge/style/css/index.css +12 -0
  46. package/esm/badge/style/index.less +3 -3
  47. package/esm/button/style/css/index.css +4 -0
  48. package/esm/button/style/index.less +1 -1
  49. package/esm/cell/style/css/index.css +7 -0
  50. package/esm/cell/style/index.less +4 -1
  51. package/esm/checkbox/style/css/index.css +13 -0
  52. package/esm/checkbox/style/index.less +3 -3
  53. package/esm/collapse/collapse.js +14 -8
  54. package/esm/form/style/css/index.css +16 -0
  55. package/esm/form/style/index.less +4 -4
  56. package/esm/image-preview/index.js +2 -1
  57. package/esm/radio/style/css/index.css +8 -0
  58. package/esm/radio/style/index.less +2 -2
  59. package/esm/rate/index.js +5 -3
  60. package/esm/rate/style/css/index.css +4 -0
  61. package/esm/rate/style/index.less +4 -0
  62. package/esm/sticky/index.d.ts +5 -0
  63. package/esm/sticky/index.js +20 -7
  64. package/esm/switch/index.js +9 -4
  65. package/esm/switch/style/css/index.css +44 -0
  66. package/esm/switch/style/index.less +19 -7
  67. package/esm/tabs/demo/style/css/mobile.css +11 -0
  68. package/esm/tabs/demo/style/mobile.less +5 -1
  69. package/esm/tabs/index.js +16 -7
  70. package/esm/tabs/style/css/index.css +32 -7
  71. package/esm/tabs/style/index.less +9 -14
  72. package/esm/tabs/tab-cell-underline.js +14 -6
  73. package/esm/tabs/tab-cell.js +15 -8
  74. package/esm/tabs/tab-pane.js +4 -3
  75. package/esm/tabs/type.d.ts +1 -0
  76. package/package.json +17 -3
  77. package/umd/_helpers/hooks.d.ts +1 -0
  78. package/umd/_helpers/hooks.js +43 -27
  79. package/umd/avatar/type.d.ts +1 -1
  80. package/umd/badge/style/css/index.css +12 -0
  81. package/umd/badge/style/index.less +3 -3
  82. package/umd/button/style/css/index.css +4 -0
  83. package/umd/button/style/index.less +1 -1
  84. package/umd/cell/style/css/index.css +7 -0
  85. package/umd/cell/style/index.less +4 -1
  86. package/umd/checkbox/style/css/index.css +13 -0
  87. package/umd/checkbox/style/index.less +3 -3
  88. package/umd/collapse/collapse.js +12 -6
  89. package/umd/form/style/css/index.css +16 -0
  90. package/umd/form/style/index.less +4 -4
  91. package/umd/image-preview/index.js +2 -1
  92. package/umd/radio/style/css/index.css +8 -0
  93. package/umd/radio/style/index.less +2 -2
  94. package/umd/rate/index.js +5 -3
  95. package/umd/rate/style/css/index.css +4 -0
  96. package/umd/rate/style/index.less +4 -0
  97. package/umd/sticky/index.d.ts +5 -0
  98. package/umd/sticky/index.js +20 -7
  99. package/umd/switch/index.js +7 -2
  100. package/umd/switch/style/css/index.css +44 -0
  101. package/umd/switch/style/index.less +19 -7
  102. package/umd/tabs/demo/style/css/mobile.css +11 -0
  103. package/umd/tabs/demo/style/mobile.less +5 -1
  104. package/umd/tabs/index.js +14 -5
  105. package/umd/tabs/style/css/index.css +32 -7
  106. package/umd/tabs/style/index.less +9 -14
  107. package/umd/tabs/tab-cell-underline.js +16 -9
  108. package/umd/tabs/tab-cell.js +17 -11
  109. package/umd/tabs/tab-pane.js +4 -3
  110. package/umd/tabs/type.d.ts +1 -0
package/dist/style.css CHANGED
@@ -327,11 +327,12 @@ samp {
327
327
  .arco-tab-cell.vertical.tag-divide {
328
328
  flex: 1;
329
329
  }
330
- .arco-tab-cell.vertical:not(.custom).line {
330
+ .arco-tab-cell.vertical:not(.custom).line:not(.last) {
331
331
  margin-right: 0.8rem ;
332
332
  }
333
- .arco-tab-cell.vertical:not(.custom).line.last {
334
- margin-right: 0;
333
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).line:not(.last) {
334
+ margin-right: initial;
335
+ margin-left: 0.8rem ;
335
336
  }
336
337
  .arco-tab-cell.vertical:not(.custom).line.active,
337
338
  .arco-tab-cell.vertical:not(.custom).line-divide.active {
@@ -366,29 +367,53 @@ samp {
366
367
  .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
367
368
  border-right: 1PX solid #165dff ;
368
369
  }
370
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
371
+ border-right: initial;
372
+ border-left: 1PX solid #165dff ;
373
+ }
369
374
  .arco-tab-cell.vertical:not(.custom).card:first-of-type {
370
375
  border-top-left-radius: 2PX ;
371
376
  border-bottom-left-radius: 2PX ;
372
377
  }
378
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
379
+ border-top-left-radius: initial;
380
+ border-top-right-radius: 2PX ;
381
+ }
382
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
383
+ border-bottom-left-radius: initial;
384
+ border-bottom-right-radius: 2PX ;
385
+ }
373
386
  .arco-tab-cell.vertical:not(.custom).card:last-of-type {
374
387
  border-top-right-radius: 2PX ;
375
388
  border-bottom-right-radius: 2PX ;
376
389
  }
390
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
391
+ border-top-right-radius: initial;
392
+ border-top-left-radius: 2PX ;
393
+ }
394
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
395
+ border-bottom-right-radius: initial;
396
+ border-bottom-left-radius: 2PX ;
397
+ }
377
398
  .arco-tab-cell.vertical:not(.custom).card.android,
378
399
  .arco-tab-cell.vertical:not(.custom).tag-divide.android {
379
400
  padding-top: 0.04rem;
380
401
  }
381
402
  .arco-tab-cell.vertical:not(.custom).tag,
382
403
  .arco-tab-cell.vertical:not(.custom).tag-divide {
383
- margin-right: 0.32rem ;
384
404
  padding: 0 0.32rem ;
385
405
  border-radius: 2rem;
386
406
  background: #f7f8fA ;
387
407
  color: #1d2129 ;
388
408
  }
389
- .arco-tab-cell.vertical:not(.custom).tag.last,
390
- .arco-tab-cell.vertical:not(.custom).tag-divide.last {
391
- margin-right: 0;
409
+ .arco-tab-cell.vertical:not(.custom).tag:not(.last),
410
+ .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
411
+ margin-right: 0.32rem ;
412
+ }
413
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag:not(.last),
414
+ [dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
415
+ margin-right: initial;
416
+ margin-left: 0.32rem ;
392
417
  }
393
418
  .arco-tab-cell.vertical:not(.custom).tag.active,
394
419
  .arco-tab-cell.vertical:not(.custom).tag-divide.active {
@@ -620,6 +645,9 @@ samp {
620
645
  -webkit-box-orient: vertical;
621
646
  white-space: normal;
622
647
  }
648
+ [dir="rtl"] .arco-cell .cell-content .cell-text {
649
+ text-align: left;
650
+ }
623
651
  .arco-cell .cell-label-icon {
624
652
  margin-right: 0.24rem ;
625
653
  font-size: 0;
@@ -637,6 +665,9 @@ samp {
637
665
  margin-left: 0.16rem ;
638
666
  font-size: 0;
639
667
  }
668
+ [dir="rtl"] .arco-cell .cell-arrow-icon {
669
+ transform: scale(-1);
670
+ }
640
671
  [dir="rtl"] .arco-cell .cell-arrow-icon {
641
672
  margin-left: initial;
642
673
  margin-right: 0.16rem ;
@@ -1503,10 +1534,22 @@ samp {
1503
1534
  margin-left: -8PX ;
1504
1535
  margin-top: -8PX ;
1505
1536
  }
1537
+ [dir="rtl"] .arco-badge-absolute {
1538
+ left: initial;
1539
+ right: 100%;
1540
+ }
1541
+ [dir="rtl"] .arco-badge-absolute {
1542
+ margin-left: initial;
1543
+ margin-right: -8PX ;
1544
+ }
1506
1545
  .arco-badge-absolute.arco-badge-dot {
1507
1546
  margin-left: -4PX ;
1508
1547
  margin-top: -4PX ;
1509
1548
  }
1549
+ [dir="rtl"] .arco-badge-absolute.arco-badge-dot {
1550
+ margin-left: initial;
1551
+ margin-right: -4PX ;
1552
+ }
1510
1553
 
1511
1554
  .arco-button {
1512
1555
  cursor: pointer;
@@ -1715,6 +1758,10 @@ samp {
1715
1758
  .arco-button-text-has-icon {
1716
1759
  margin-left: 0.08rem ;
1717
1760
  }
1761
+ [dir="rtl"] .arco-button-text-has-icon {
1762
+ margin-left: initial;
1763
+ margin-right: 0.08rem ;
1764
+ }
1718
1765
  .arco-button-loading-icon {
1719
1766
  display: inline-block;
1720
1767
  vertical-align: middle;
@@ -1950,6 +1997,10 @@ samp {
1950
1997
  .arco-checkbox .checkbox-icon + .checkbox-text {
1951
1998
  margin-left: 0.16rem ;
1952
1999
  }
2000
+ [dir="rtl"] .arco-checkbox .checkbox-icon + .checkbox-text {
2001
+ margin-left: initial;
2002
+ margin-right: 0.16rem ;
2003
+ }
1953
2004
  .arco-checkbox.disabled .checkbox-text {
1954
2005
  opacity: 0.5 ;
1955
2006
  }
@@ -1963,10 +2014,19 @@ samp {
1963
2014
  .arco-checkbox-group .arco-checkbox:not(:last-child) {
1964
2015
  margin-right: 0.48rem ;
1965
2016
  }
2017
+ [dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child) {
2018
+ margin-right: initial;
2019
+ margin-left: 0.48rem ;
2020
+ }
1966
2021
  .arco-checkbox-group .arco-checkbox:not(:last-child).block,
1967
2022
  .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
1968
2023
  margin-right: 0;
1969
2024
  }
2025
+ [dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).block,
2026
+ [dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
2027
+ margin-right: initial;
2028
+ margin-left: 0;
2029
+ }
1970
2030
 
1971
2031
  .arco-circle-progress {
1972
2032
  position: relative;
@@ -2854,6 +2914,10 @@ samp {
2854
2914
  padding-right: 0.32rem ;
2855
2915
  width: 1.92rem ;
2856
2916
  }
2917
+ [dir="rtl"] .arco-form-label-item {
2918
+ padding-right: initial;
2919
+ padding-left: 0.32rem ;
2920
+ }
2857
2921
  .arco-form-label-item-required-asterisk {
2858
2922
  position: absolute;
2859
2923
  left: -0.6em;
@@ -2862,6 +2926,10 @@ samp {
2862
2926
  line-height: 1.08rem ;
2863
2927
  color: #f53f3f ;
2864
2928
  }
2929
+ [dir="rtl"] .arco-form-label-item-required-asterisk {
2930
+ left: initial;
2931
+ right: -0.6em;
2932
+ }
2865
2933
  .disabled .arco-form-label-item {
2866
2934
  color: #c9cdd4 ;
2867
2935
  }
@@ -2893,6 +2961,10 @@ samp {
2893
2961
  .arco-form-item-message svg {
2894
2962
  margin-right: 0.08rem;
2895
2963
  }
2964
+ [dir="rtl"] .arco-form-item-message svg {
2965
+ margin-right: initial;
2966
+ margin-left: 0.08rem;
2967
+ }
2896
2968
  .arco-form-item-error-message {
2897
2969
  color: #f53f3f ;
2898
2970
  }
@@ -2905,6 +2977,10 @@ samp {
2905
2977
  .arco-form-item.arco-form-item-vertical .arco-input-wrap {
2906
2978
  padding-left: 0;
2907
2979
  }
2980
+ [dir="rtl"] .arco-form-item.arco-form-item-vertical .arco-input-wrap {
2981
+ padding-left: initial;
2982
+ padding-right: 0;
2983
+ }
2908
2984
  .arco-form-item.arco-form-item-vertical .arco-form-label-item {
2909
2985
  width: auto;
2910
2986
  margin-top: 16px;
@@ -4531,6 +4607,10 @@ samp {
4531
4607
  .arco-radio .radio-icon + .radio-text {
4532
4608
  margin-left: 0.16rem ;
4533
4609
  }
4610
+ [dir="rtl"] .arco-radio .radio-icon + .radio-text {
4611
+ margin-left: initial;
4612
+ margin-right: 0.16rem ;
4613
+ }
4534
4614
  .arco-radio.disabled .radio-text {
4535
4615
  opacity: 0.5 ;
4536
4616
  }
@@ -4544,6 +4624,10 @@ samp {
4544
4624
  .arco-radio-group .arco-radio:not(:last-child, .block) {
4545
4625
  margin-right: 0.48rem ;
4546
4626
  }
4627
+ [dir="rtl"] .arco-radio-group .arco-radio:not(:last-child, .block) {
4628
+ margin-right: initial;
4629
+ margin-left: 0.48rem ;
4630
+ }
4547
4631
 
4548
4632
  .arco-rate {
4549
4633
  display: inline-flex;
@@ -4579,6 +4663,9 @@ samp {
4579
4663
  position: absolute;
4580
4664
  z-index: 1;
4581
4665
  }
4666
+ [dir="rtl"] .arco-rate-icon.half-active {
4667
+ transform: scaleX(-1);
4668
+ }
4582
4669
  .arco-rate-icon-click-half {
4583
4670
  width: 50%;
4584
4671
  height: 100%;
@@ -5375,14 +5462,28 @@ samp {
5375
5462
  right: auto;
5376
5463
  left: 5PX ;
5377
5464
  }
5465
+ [dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
5466
+ right: initial;
5467
+ left: auto;
5468
+ }
5469
+ [dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
5470
+ left: initial;
5471
+ right: 5PX ;
5472
+ }
5378
5473
  .arco-switch.type-android.checked .arco-switch-inner {
5379
5474
  transform: translateX(16PX) ;
5380
5475
  }
5476
+ [dir="rtl"] .arco-switch.type-android.checked .arco-switch-inner {
5477
+ transform: rotate(180deg) translateX(16PX) ;
5478
+ }
5381
5479
  .arco-switch.type-android .arco-switch-inner {
5382
5480
  width: 20PX ;
5383
5481
  height: 20PX ;
5384
5482
  box-shadow: 0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
5385
5483
  }
5484
+ [dir="rtl"] .arco-switch.type-android .arco-switch-inner {
5485
+ transform: rotate(180deg);
5486
+ }
5386
5487
  .arco-switch.type-android.disabled.checked {
5387
5488
  background-color: #94bfff ;
5388
5489
  }
@@ -5393,6 +5494,10 @@ samp {
5393
5494
  font-size: 12PX ;
5394
5495
  right: 5PX ;
5395
5496
  }
5497
+ [dir="rtl"] .arco-switch.type-android .arco-switch-text {
5498
+ right: initial;
5499
+ left: 5PX ;
5500
+ }
5396
5501
  .arco-switch.type-ios {
5397
5502
  width: 1.02rem ;
5398
5503
  height: 0.62rem ;
@@ -5413,10 +5518,21 @@ samp {
5413
5518
  right: auto;
5414
5519
  left: 0.12rem ;
5415
5520
  }
5521
+ [dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
5522
+ right: initial;
5523
+ left: auto;
5524
+ }
5525
+ [dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
5526
+ left: initial;
5527
+ right: 0.12rem ;
5528
+ }
5416
5529
  .arco-switch.type-ios.checked .arco-switch-inner {
5417
5530
  transform: translateX(0.4rem) ;
5418
5531
  box-shadow: 0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
5419
5532
  }
5533
+ [dir="rtl"] .arco-switch.type-ios.checked .arco-switch-inner {
5534
+ transform: rotate(180deg) translateX(0.4rem) ;
5535
+ }
5420
5536
  .arco-switch.type-ios.disabled.checked {
5421
5537
  opacity: 0.3 ;
5422
5538
  }
@@ -5424,6 +5540,10 @@ samp {
5424
5540
  font-size: 0.28rem ;
5425
5541
  right: 0.12rem ;
5426
5542
  }
5543
+ [dir="rtl"] .arco-switch.type-ios .arco-switch-text {
5544
+ right: initial;
5545
+ left: 0.12rem ;
5546
+ }
5427
5547
  .arco-switch.type-ios .arco-switch-inner {
5428
5548
  width: 0.54rem ;
5429
5549
  height: 0.54rem ;
@@ -5465,6 +5585,9 @@ samp {
5465
5585
  border-radius: 150%;
5466
5586
  }
5467
5587
  }
5588
+ [dir="rtl"] .arco-switch.type-ios .arco-switch-inner {
5589
+ transform: rotate(180deg);
5590
+ }
5468
5591
  .arco-switch.type-ios.disabled.checked {
5469
5592
  background-color: #4DD865 ;
5470
5593
  }
@@ -5490,6 +5613,10 @@ samp {
5490
5613
  background-color: #FFFFFF ;
5491
5614
  transition: all 0.2s ;
5492
5615
  }
5616
+ [dir="rtl"] .arco-switch-inner {
5617
+ left: initial;
5618
+ right: 0;
5619
+ }
5493
5620
  .fully .arco-switch-inner {
5494
5621
  border-radius: 50% ;
5495
5622
  }