@trionesdev/antd-mobile-react 0.0.2-beta.0 → 0.0.2-beta.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 (60) hide show
  1. package/LICENSE +21 -21
  2. package/dist/Avatar/demo/base.js +2 -2
  3. package/dist/Avatar/demo/style.scss +6 -6
  4. package/dist/Badge/demo/base.js +2 -2
  5. package/dist/Badge/demo/base.scss +6 -6
  6. package/dist/Button/demo/base.js +2 -2
  7. package/dist/Button/style.scss +232 -231
  8. package/dist/Calendar/calendar-grid.js +2 -2
  9. package/dist/Calendar/calendar-range.js +2 -2
  10. package/dist/Calendar/style.scss +85 -85
  11. package/dist/Calendar/touchable-calendar-grid.js +9 -9
  12. package/dist/CalendarDatetimePicker/style.scss +54 -54
  13. package/dist/CalendarPicker/style.scss +31 -31
  14. package/dist/Card/demo/base.js +2 -2
  15. package/dist/Card/demo/base.scss +18 -18
  16. package/dist/Checkbox/demo/base.js +2 -2
  17. package/dist/ConfigProvider/demo/base.js +2 -2
  18. package/dist/DemoBlock/index.scss +20 -20
  19. package/dist/DemoDescription/index.scss +3 -3
  20. package/dist/Divider/demo/base.js +2 -2
  21. package/dist/Ellipsis/demo/base.js +2 -2
  22. package/dist/Empty/demo/base.js +2 -2
  23. package/dist/ErrorBlock/demo/base.js +2 -2
  24. package/dist/Footer/demo/base.js +2 -2
  25. package/dist/Grid/demo/base.js +2 -2
  26. package/dist/Grid/demo/base.scss +7 -7
  27. package/dist/Icon/demo/base.js +4 -4
  28. package/dist/Image/demo/base.js +2 -2
  29. package/dist/Image/demo/base.scss +4 -4
  30. package/dist/Image/style.scss +30 -30
  31. package/dist/ImagesPreview/style.scss +34 -34
  32. package/dist/ImagesWall/ImagesWall.js +1 -1
  33. package/dist/ImagesWall/style.scss +70 -70
  34. package/dist/Input/demo/base.js +2 -2
  35. package/dist/NavBar/demo/base.scss +5 -5
  36. package/dist/NoticeBar/demo/base.js +2 -2
  37. package/dist/PageIndicator/demo/base.js +2 -2
  38. package/dist/Popup/demo/base.js +2 -2
  39. package/dist/Progress/style.scss +33 -33
  40. package/dist/Radio/demo/base.scss +4 -4
  41. package/dist/Result/demo/base.js +2 -2
  42. package/dist/SafeArea/demo/base.scss +18 -18
  43. package/dist/SideBar/side-bar.js +6 -6
  44. package/dist/SideBar/style.scss +85 -85
  45. package/dist/Space/demo/base.js +2 -2
  46. package/dist/Swiper/style.scss +54 -54
  47. package/dist/Switch/demo/base.js +2 -2
  48. package/dist/TabBar/demo/base.js +2 -2
  49. package/dist/Tag/demo/base.js +2 -2
  50. package/dist/Tag/demo/style.scss +8 -8
  51. package/dist/Toast/style.scss +63 -63
  52. package/dist/WaterMark/demo/demo1.js +2 -2
  53. package/dist/WaterMark/demo/demo1.scss +6 -6
  54. package/dist/WaterMark/demo/demo2.js +2 -2
  55. package/dist/style/variable.scss +1 -0
  56. package/dist/utils/type.js +36 -36
  57. package/dist/utils/use-isomorphic-update-layout-effect.d.ts +1 -1
  58. package/dist/utils/with-default-props.js +4 -4
  59. package/package.json +8 -8
  60. package/readme.md +43 -43
@@ -1,34 +1,34 @@
1
- $imagePreviewCls: 'triones-antm-image-preview';
2
-
3
- .#{$imagePreviewCls} {
4
- height: 100%;
5
- width: 100%;
6
- position: relative;
7
- background-color: rgba(0, 0, 0, 0.8);
8
-
9
- &-head {
10
- position: fixed;
11
- top: 50Px;
12
- left: 0;
13
- right: 0;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- color: white;
18
- font-size: 14Px;
19
- z-index: 1000;
20
- }
21
-
22
- &-content {
23
- height: 100%;
24
- width: 100%;
25
- :global{
26
- .triones-antm-image-img{
27
- height: auto!important;
28
- }
29
- }
30
- }
31
-
32
- &-foot {
33
- }
34
- }
1
+ $imagePreviewCls: 'triones-antm-image-preview';
2
+
3
+ .#{$imagePreviewCls} {
4
+ height: 100%;
5
+ width: 100%;
6
+ position: relative;
7
+ background-color: rgba(0, 0, 0, 0.8);
8
+
9
+ &-head {
10
+ position: fixed;
11
+ top: 50Px;
12
+ left: 0;
13
+ right: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ color: white;
18
+ font-size: 14Px;
19
+ z-index: 1000;
20
+ }
21
+
22
+ &-content {
23
+ height: 100%;
24
+ width: 100%;
25
+ :global{
26
+ .triones-antm-image-img{
27
+ height: auto!important;
28
+ }
29
+ }
30
+ }
31
+
32
+ &-foot {
33
+ }
34
+ }
@@ -19,7 +19,7 @@ import "./style.scss";
19
19
  import ActionSheet from "../ActionSheet";
20
20
  import { CameraModal } from "./CameraModal";
21
21
  import { ImagesPreview } from "../index";
22
- import { isEqual } from "lodash";
22
+ import { isEqual } from "lodash-es";
23
23
  import { RandomUtils } from "../utils/random-utils";
24
24
  var cls = 'triones-antm-images-wall';
25
25
  var ImagesWallItem = function ImagesWallItem(_ref) {
@@ -1,70 +1,70 @@
1
- @import "@trionesdev/antd-mobile-base-react/dist/style/variable";
2
-
3
- $imagesWallCls: 'triones-antm-images-wall';
4
-
5
- .#{$imagesWallCls} {
6
- display: grid;
7
- grid-gap: 4PX;
8
- width: 100%;
9
-
10
- &-item {
11
- aspect-ratio: 1;
12
- border-radius: $trionesBorderRadius;
13
- overflow: hidden;
14
- position: relative;
15
-
16
- &-inner {
17
- width: 100%;
18
- height: 100%;
19
- }
20
-
21
- &-close {
22
- position: absolute;
23
- top: 0;
24
- right: 0;
25
- background-color: rgb(0 0 0 / 63%);
26
- width: 20Px;
27
- height: 20Px;
28
- border-bottom-left-radius: $trionesBorderRadius;
29
- display: flex;
30
- justify-content: center;
31
- align-items: center;
32
-
33
- .triones-antm-icon {
34
- color: white;
35
- font-size: 12Px;
36
- }
37
- }
38
-
39
- &-input {
40
- position: absolute;
41
- width: 100%;
42
- height: 100%;
43
- top: 0;
44
- left: 0;
45
- margin: 0;
46
- padding: 0;
47
- z-index: 1;
48
- opacity: 0;
49
- }
50
-
51
- &-image {
52
- width: 100%;
53
- height: 100%;
54
- object-fit: cover;
55
- }
56
- }
57
-
58
- &-upload {
59
- display: flex;
60
- justify-content: center;
61
- align-items: center;
62
- background-color: $trionesColorBgTextActive;
63
- }
64
-
65
- &-action-sheet {
66
-
67
- }
68
- }
69
-
70
-
1
+ @use "../style/variable" as *;
2
+
3
+ $imagesWallCls: 'triones-antm-images-wall';
4
+
5
+ .#{$imagesWallCls} {
6
+ display: grid;
7
+ grid-gap: 4PX;
8
+ width: 100%;
9
+
10
+ &-item {
11
+ aspect-ratio: 1;
12
+ border-radius: $trionesBorderRadius;
13
+ overflow: hidden;
14
+ position: relative;
15
+
16
+ &-inner {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+
21
+ &-close {
22
+ position: absolute;
23
+ top: 0;
24
+ right: 0;
25
+ background-color: rgb(0 0 0 / 63%);
26
+ width: 20Px;
27
+ height: 20Px;
28
+ border-bottom-left-radius: $trionesBorderRadius;
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+
33
+ .triones-antm-icon {
34
+ color: white;
35
+ font-size: 12Px;
36
+ }
37
+ }
38
+
39
+ &-input {
40
+ position: absolute;
41
+ width: 100%;
42
+ height: 100%;
43
+ top: 0;
44
+ left: 0;
45
+ margin: 0;
46
+ padding: 0;
47
+ z-index: 1;
48
+ opacity: 0;
49
+ }
50
+
51
+ &-image {
52
+ width: 100%;
53
+ height: 100%;
54
+ object-fit: cover;
55
+ }
56
+ }
57
+
58
+ &-upload {
59
+ display: flex;
60
+ justify-content: center;
61
+ align-items: center;
62
+ background-color: $trionesColorBgTextActive;
63
+ }
64
+
65
+ &-action-sheet {
66
+
67
+ }
68
+ }
69
+
70
+
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -1,5 +1,5 @@
1
- .my-nav-bar {
2
- &-subtitle {
3
- font-size: 12px;
4
- }
5
- }
1
+ .my-nav-bar {
2
+ &-subtitle {
3
+ font-size: 12px;
4
+ }
5
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { CloseCircleOutline, SetOutline } from "../../../../antd-mobile-icons-react";
5
5
  import { DemoBlock } from "../../DemoBlock";
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -4,8 +4,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
4
4
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
5
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
- /**
8
- * compact: true
7
+ /**
8
+ * compact: true
9
9
  */
10
10
  import { DemoBlock } from "../../DemoBlock";
11
11
  import React, { useEffect } from 'react';
@@ -1,33 +1,33 @@
1
- $progressLineCls: 'triones-antm-progress-line';
2
- $progressCircleCls: 'triones-antm-progress-circle';
3
-
4
- .#{$progressLineCls}{
5
- width: 100%;
6
- display: flex;
7
- align-items: center;
8
- gap: 4Px;
9
- &-rail{
10
- flex: 1 auto;
11
- border-radius: 90Px;
12
- }
13
- &-track{
14
- border-radius: 90Px;
15
- }
16
- &-indicator{}
17
- }
18
-
19
- .#{$progressCircleCls} {
20
- position: relative;
21
- &-indicator {
22
- position: absolute;
23
- inset-block-start: 50%;
24
- inset-inline-start: 0;
25
- width: 100%;
26
- margin: 0;
27
- padding: 0;
28
- line-height: 1;
29
- white-space: normal;
30
- text-align: center;
31
- transform: translatey(-50%);
32
- }
33
- }
1
+ $progressLineCls: 'triones-antm-progress-line';
2
+ $progressCircleCls: 'triones-antm-progress-circle';
3
+
4
+ .#{$progressLineCls}{
5
+ width: 100%;
6
+ display: flex;
7
+ align-items: center;
8
+ gap: 4Px;
9
+ &-rail{
10
+ flex: 1 auto;
11
+ border-radius: 90Px;
12
+ }
13
+ &-track{
14
+ border-radius: 90Px;
15
+ }
16
+ &-indicator{}
17
+ }
18
+
19
+ .#{$progressCircleCls} {
20
+ position: relative;
21
+ &-indicator {
22
+ position: absolute;
23
+ inset-block-start: 50%;
24
+ inset-inline-start: 0;
25
+ width: 100%;
26
+ margin: 0;
27
+ padding: 0;
28
+ line-height: 1;
29
+ white-space: normal;
30
+ text-align: center;
31
+ transform: translatey(-50%);
32
+ }
33
+ }
@@ -1,4 +1,4 @@
1
- .blockIndicator {
2
- background-color: #f5f5f5;
3
- border-radius: 2px;
4
- }
1
+ .blockIndicator {
2
+ background-color: #f5f5f5;
3
+ border-radius: 2px;
4
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -1,18 +1,18 @@
1
- $class-prefix-card: 'card-demo';
2
-
3
- .#{$class-prefix-card} {
4
- &-content {
5
- height: 50px;
6
- }
7
- &-footer {
8
- padding-top: 11px;
9
- border-top: 1px solid #e5e5e5;
10
- display: flex;
11
- justify-content: flex-end;
12
- }
13
-
14
- &-customBody {
15
- color: green;
16
- }
17
-
18
- }
1
+ $class-prefix-card: 'card-demo';
2
+
3
+ .#{$class-prefix-card} {
4
+ &-content {
5
+ height: 50px;
6
+ }
7
+ &-footer {
8
+ padding-top: 11px;
9
+ border-top: 1px solid #e5e5e5;
10
+ display: flex;
11
+ justify-content: flex-end;
12
+ }
13
+
14
+ &-customBody {
15
+ color: green;
16
+ }
17
+
18
+ }
@@ -70,8 +70,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
70
70
  };
71
71
  }();
72
72
 
73
- /**
74
- * 计算当前页顶部,距离可滚动区域顶部的距离
73
+ /**
74
+ * 计算当前页顶部,距离可滚动区域顶部的距离
75
75
  */
76
76
  var computeReactiveOffsetTop = /*#__PURE__*/function () {
77
77
  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -90,8 +90,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
90
90
  };
91
91
  }();
92
92
 
93
- /**
94
- * 计算当前页底部,距离可滚动区域顶部的距离
93
+ /**
94
+ * 计算当前页底部,距离可滚动区域顶部的距离
95
95
  */
96
96
  var computeReactiveOffsetBottom = /*#__PURE__*/function () {
97
97
  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
@@ -138,8 +138,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
138
138
  }
139
139
  }, [activeKey]);
140
140
 
141
- /**
142
- * 监听滚动变化,只有在人为操作的时候才监听滚动的位置是否需要切换tab,如果是切换tab 引发的滚动则不执行
141
+ /**
142
+ * 监听滚动变化,只有在人为操作的时候才监听滚动的位置是否需要切换tab,如果是切换tab 引发的滚动则不执行
143
143
  */
144
144
  useEffect(function () {
145
145
  // return;
@@ -1,85 +1,85 @@
1
- @import "@trionesdev/antd-mobile-base-react/dist/style/variable";
2
-
3
- $trionesSideBarCls: 'triones-antm-sidebar';
4
-
5
- .#{$trionesSideBarCls} {
6
- display: flex;
7
- height: 100%;
8
-
9
-
10
- &-tabs {
11
- min-width: 0;
12
- background-color: $trionesColorFill;
13
- overflow: auto;
14
- scrollbar-width: thin;
15
- flex-shrink: 0;
16
- }
17
-
18
- &-tab {
19
- cursor: pointer;
20
- padding: $trionesPadding $trionesPadding;
21
- color: $trionesColorTextSecondary;
22
-
23
- &-active {
24
- color: $trionesColorPrimaryText;
25
- background-color: $trionesColorBgBase;
26
- }
27
-
28
- }
29
-
30
- &-content {
31
- flex: 1 auto;
32
- min-width: 0;
33
- overflow: hidden;
34
- //overflow-y: auto;
35
- //scrollbar-width: none;
36
- position: relative;
37
- user-select: none;
38
- touch-action: none;
39
-
40
-
41
- &-wheel {
42
- width: 100%;
43
- cursor: grab;
44
- position: absolute;
45
- }
46
-
47
- &-item {
48
-
49
- &-active {
50
- display: block;
51
- }
52
- }
53
- }
54
-
55
- &-switch-mode {
56
- .#{$trionesSideBarCls} {
57
- &-content {
58
-
59
- &-item {
60
- height: 100%;
61
- display: none;
62
- &-active {
63
- display: block;
64
- }
65
- }
66
- }
67
- }
68
- }
69
-
70
- &-scroll-mode {
71
- .#{$trionesSideBarCls} {
72
- &-content {
73
-
74
- &-item {
75
-
76
-
77
- &-active {
78
- display: block;
79
- }
80
- }
81
- }
82
- }
83
- }
84
-
85
- }
1
+ @use "../style/variable" as *;
2
+
3
+ $trionesSideBarCls: 'triones-antm-sidebar';
4
+
5
+ .#{$trionesSideBarCls} {
6
+ display: flex;
7
+ height: 100%;
8
+
9
+
10
+ &-tabs {
11
+ min-width: 0;
12
+ background-color: $trionesColorFill;
13
+ overflow: auto;
14
+ scrollbar-width: thin;
15
+ flex-shrink: 0;
16
+ }
17
+
18
+ &-tab {
19
+ cursor: pointer;
20
+ padding: $trionesPadding $trionesPadding;
21
+ color: $trionesColorTextSecondary;
22
+
23
+ &-active {
24
+ color: $trionesColorPrimaryText;
25
+ background-color: $trionesColorBgBase;
26
+ }
27
+
28
+ }
29
+
30
+ &-content {
31
+ flex: 1 auto;
32
+ min-width: 0;
33
+ overflow: hidden;
34
+ //overflow-y: auto;
35
+ //scrollbar-width: none;
36
+ position: relative;
37
+ user-select: none;
38
+ touch-action: none;
39
+
40
+
41
+ &-wheel {
42
+ width: 100%;
43
+ cursor: grab;
44
+ position: absolute;
45
+ }
46
+
47
+ &-item {
48
+
49
+ &-active {
50
+ display: block;
51
+ }
52
+ }
53
+ }
54
+
55
+ &-switch-mode {
56
+ .#{$trionesSideBarCls} {
57
+ &-content {
58
+
59
+ &-item {
60
+ height: 100%;
61
+ display: none;
62
+ &-active {
63
+ display: block;
64
+ }
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ &-scroll-mode {
71
+ .#{$trionesSideBarCls} {
72
+ &-content {
73
+
74
+ &-item {
75
+
76
+
77
+ &-active {
78
+ display: block;
79
+ }
80
+ }
81
+ }
82
+ }
83
+ }
84
+
85
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';