@trionesdev/antd-taro-react 0.0.2-beta.21 → 0.0.2-beta.23

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.
@@ -1,13 +1,13 @@
1
- $pickerViewCls: 'triones-antm-picker-view';
2
- .#{$pickerViewCls}{
3
- &-column{
4
- &-item{
5
- flex-shrink: 0;
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- height: 32Px;
10
- box-sizing: border-box;
11
- }
12
- }
13
- }
1
+ $pickerViewCls: 'triones-antm-picker-view';
2
+ .#{$pickerViewCls}{
3
+ &-column{
4
+ &-item{
5
+ flex-shrink: 0;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ height: 32Px;
10
+ box-sizing: border-box;
11
+ }
12
+ }
13
+ }
@@ -40,6 +40,8 @@ export var Popup = function Popup(_ref) {
40
40
  onBack = _ref.onBack,
41
41
  afterClose = _ref.afterClose,
42
42
  afterOpenChange = _ref.afterOpenChange,
43
+ className = _ref.className,
44
+ style = _ref.style,
43
45
  _ref$round = _ref.round,
44
46
  round = _ref$round === void 0 ? false : _ref$round,
45
47
  _ref$zIndex = _ref.zIndex,
@@ -96,11 +98,11 @@ export var Popup = function Popup(_ref) {
96
98
  if (!render) return null;
97
99
  return /*#__PURE__*/React.createElement(RootPortal, null, /*#__PURE__*/React.createElement(View, {
98
100
  catchMove: true,
99
- className: classNames("".concat(cls), _defineProperty({}, "".concat(cls, "-open"), internalOpen)),
100
- style: {
101
+ className: classNames("".concat(cls), _defineProperty({}, "".concat(cls, "-open"), internalOpen), className),
102
+ style: _objectSpread(_objectSpread({}, style), {}, {
101
103
  zIndex: zIndex,
102
104
  transitionDuration: "".concat(duration, "ms")
103
- }
105
+ })
104
106
  }, showOverlay && /*#__PURE__*/React.createElement(View, {
105
107
  className: classNames("".concat(cls, "-overlay")),
106
108
  onClick: function onClick(e) {
@@ -1,126 +1,126 @@
1
- @use "../style/variable" as variable;
2
-
3
- $trionesPopupCls: 'triones-antm-popup';
4
-
5
- .#{$trionesPopupCls} {
6
- position: fixed;
7
- top: 0;
8
- bottom: 0;
9
- left: 0;
10
- right: 0;
11
- touch-action: none;
12
- pointer-events: none;
13
- opacity: 0;
14
- transition: opacity 0.3s ease;
15
-
16
- &-open {
17
- pointer-events: auto;
18
- opacity: 1;
19
- }
20
-
21
- &-overlay {
22
- width: 100%;
23
- height: 100%;
24
- background-color: rgba(0, 0, 0, .55);
25
- }
26
-
27
- &-container {
28
- position: fixed;
29
- overflow: hidden;
30
- background-color: white;
31
- display: flex;
32
- flex-direction: column;
33
- }
34
-
35
-
36
- &-header {
37
- display: flex;
38
- align-items: center;
39
- padding-block: variable.$trionesPaddingContentVertical;
40
- padding-inline: variable.$trionesPaddingContentHorizontal;
41
- border-bottom: 1px solid variable.$trionesBorderColor;
42
- &-title{
43
- flex: 1;
44
- text-align: center;
45
- font-size: variable.$trionesFontSizeLg;
46
- }
47
- }
48
-
49
- &-body{
50
- min-height: 0;
51
- flex: 1;
52
- }
53
-
54
- &-top {
55
- top: 0;
56
- left: 0;
57
- right: 0;
58
- max-height: 100%;
59
-
60
-
61
- &.#{$trionesPopupCls} {
62
- &-round {
63
- border-bottom-left-radius: variable.$trionesBorderRadiusLg;
64
- border-bottom-right-radius: variable.$trionesBorderRadiusLg;
65
- }
66
- }
67
- }
68
-
69
- &-bottom {
70
- bottom: 0;
71
- left: 0;
72
- right: 0;
73
- max-height: 100%;
74
-
75
-
76
- &.#{$trionesPopupCls} {
77
- &-round {
78
- border-top-left-radius: variable.$trionesBorderRadiusLg;
79
- border-top-right-radius: variable.$trionesBorderRadiusLg;
80
- }
81
- }
82
- }
83
-
84
- &-left {
85
- top: 0;
86
- bottom: 0;
87
- left: 0;
88
- max-width: 100%;
89
-
90
- &.#{$trionesPopupCls} {
91
- &-round {
92
- border-top-right-radius: variable.$trionesBorderRadiusLg;
93
- border-bottom-right-radius: variable.$trionesBorderRadiusLg;
94
- }
95
- }
96
- }
97
-
98
- &-right {
99
- top: 0;
100
- bottom: 0;
101
- right: 0;
102
- max-width: 100%;
103
-
104
- &.#{$trionesPopupCls} {
105
- &-round {
106
- border-top-left-radius: variable.$trionesBorderRadiusLg;
107
- border-bottom-left-radius: variable.$trionesBorderRadiusLg;
108
- }
109
- }
110
- }
111
-
112
- &-center {
113
- top: 50%;
114
- left: 50%;
115
- transform: translate(-50%, -50%);
116
- max-width: 100%;
117
- max-height: 100%;
118
-
119
- &.#{$trionesPopupCls} {
120
- &-round {
121
- border-radius: variable.$trionesBorderRadiusLg;
122
- }
123
- }
124
- }
125
-
126
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $trionesPopupCls: 'triones-antm-popup';
4
+
5
+ .#{$trionesPopupCls} {
6
+ position: fixed;
7
+ top: 0;
8
+ bottom: 0;
9
+ left: 0;
10
+ right: 0;
11
+ touch-action: none;
12
+ pointer-events: none;
13
+ opacity: 0;
14
+ transition: opacity 0.3s ease;
15
+
16
+ &-open {
17
+ pointer-events: auto;
18
+ opacity: 1;
19
+ }
20
+
21
+ &-overlay {
22
+ width: 100%;
23
+ height: 100%;
24
+ background-color: rgba(0, 0, 0, .55);
25
+ }
26
+
27
+ &-container {
28
+ position: fixed;
29
+ overflow: hidden;
30
+ background-color: white;
31
+ display: flex;
32
+ flex-direction: column;
33
+ }
34
+
35
+
36
+ &-header {
37
+ display: flex;
38
+ align-items: center;
39
+ padding-block: variable.$trionesPaddingContentVertical;
40
+ padding-inline: variable.$trionesPaddingContentHorizontal;
41
+ border-bottom: 1px solid variable.$trionesBorderColor;
42
+ &-title{
43
+ flex: 1;
44
+ text-align: center;
45
+ font-size: variable.$trionesFontSizeLg;
46
+ }
47
+ }
48
+
49
+ &-body{
50
+ min-height: 0;
51
+ flex: 1;
52
+ }
53
+
54
+ &-top {
55
+ top: 0;
56
+ left: 0;
57
+ right: 0;
58
+ max-height: 100%;
59
+
60
+
61
+ &.#{$trionesPopupCls} {
62
+ &-round {
63
+ border-bottom-left-radius: variable.$trionesBorderRadiusLg;
64
+ border-bottom-right-radius: variable.$trionesBorderRadiusLg;
65
+ }
66
+ }
67
+ }
68
+
69
+ &-bottom {
70
+ bottom: 0;
71
+ left: 0;
72
+ right: 0;
73
+ max-height: 100%;
74
+
75
+
76
+ &.#{$trionesPopupCls} {
77
+ &-round {
78
+ border-top-left-radius: variable.$trionesBorderRadiusLg;
79
+ border-top-right-radius: variable.$trionesBorderRadiusLg;
80
+ }
81
+ }
82
+ }
83
+
84
+ &-left {
85
+ top: 0;
86
+ bottom: 0;
87
+ left: 0;
88
+ max-width: 100%;
89
+
90
+ &.#{$trionesPopupCls} {
91
+ &-round {
92
+ border-top-right-radius: variable.$trionesBorderRadiusLg;
93
+ border-bottom-right-radius: variable.$trionesBorderRadiusLg;
94
+ }
95
+ }
96
+ }
97
+
98
+ &-right {
99
+ top: 0;
100
+ bottom: 0;
101
+ right: 0;
102
+ max-width: 100%;
103
+
104
+ &.#{$trionesPopupCls} {
105
+ &-round {
106
+ border-top-left-radius: variable.$trionesBorderRadiusLg;
107
+ border-bottom-left-radius: variable.$trionesBorderRadiusLg;
108
+ }
109
+ }
110
+ }
111
+
112
+ &-center {
113
+ top: 50%;
114
+ left: 50%;
115
+ transform: translate(-50%, -50%);
116
+ max-width: 100%;
117
+ max-height: 100%;
118
+
119
+ &.#{$trionesPopupCls} {
120
+ &-round {
121
+ border-radius: variable.$trionesBorderRadiusLg;
122
+ }
123
+ }
124
+ }
125
+
126
+ }
@@ -106,8 +106,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
106
106
  };
107
107
  }();
108
108
 
109
- /**
110
- * 计算当前页顶部,距离可滚动区域顶部的距离
109
+ /**
110
+ * 计算当前页顶部,距离可滚动区域顶部的距离
111
111
  */
112
112
  var computeReactiveOffsetTop = /*#__PURE__*/function () {
113
113
  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -153,8 +153,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
153
153
  };
154
154
  }();
155
155
 
156
- /**
157
- * 计算当前页底部,距离可滚动区域顶部的距离
156
+ /**
157
+ * 计算当前页底部,距离可滚动区域顶部的距离
158
158
  */
159
159
  var computeReactiveOffsetBottom = /*#__PURE__*/function () {
160
160
  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
@@ -232,8 +232,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
232
232
  }
233
233
  }, [activeKey]);
234
234
 
235
- /**
236
- * 监听滚动变化,只有在人为操作的时候才监听滚动的位置是否需要切换tab,如果是切换tab 引发的滚动则不执行
235
+ /**
236
+ * 监听滚动变化,只有在人为操作的时候才监听滚动的位置是否需要切换tab,如果是切换tab 引发的滚动则不执行
237
237
  */
238
238
  useEffect(function () {
239
239
  if (mode === 'scroll' && manual && scrollDetail !== null && scrollDetail !== void 0 && scrollDetail.manual) {
@@ -1,85 +1,85 @@
1
- @use "../style/variable" as 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: variable.$trionesColorFill;
13
- overflow: auto;
14
- scrollbar-width: thin;
15
- flex-shrink: 0;
16
- }
17
-
18
- &-tab {
19
- cursor: pointer;
20
- padding: variable.$trionesPadding variable.$trionesPadding;
21
- color: variable.$trionesColorTextSecondary;
22
-
23
- &-active {
24
- color: variable.$trionesColorPrimaryText;
25
- background-color: variable.$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 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: variable.$trionesColorFill;
13
+ overflow: auto;
14
+ scrollbar-width: thin;
15
+ flex-shrink: 0;
16
+ }
17
+
18
+ &-tab {
19
+ cursor: pointer;
20
+ padding: variable.$trionesPadding variable.$trionesPadding;
21
+ color: variable.$trionesColorTextSecondary;
22
+
23
+ &-active {
24
+ color: variable.$trionesColorPrimaryText;
25
+ background-color: variable.$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,63 +1,63 @@
1
- $toastCls: 'triones-antm-toast';
2
-
3
- .#{$toastCls} {
4
- position: fixed;
5
- top: 0;
6
- left: 0;
7
- width: 100%;
8
- height: 100%;
9
- text-align: center;
10
- pointer-events: none;
11
-
12
- &-main {
13
-
14
- padding: 12Px;
15
- display: inline-block;
16
- position: relative;
17
- top: 50%;
18
- transform: translateY(-50%);
19
- width: auto;
20
- max-width: 204px;
21
- max-height: 70%;
22
- overflow: auto;
23
- color: #fff;
24
- word-break: break-all;
25
- background-color: rgba(0, 0, 0, .7);
26
- border-radius: 8px;
27
- pointer-events: all;
28
- font-size: var(--adm-font-size-7);
29
- line-height: 1.5;
30
- box-sizing: border-box;
31
- &-icon{
32
- padding: 35Px 12Px;
33
- min-width: 150Px;
34
- .#{$toastCls}{
35
- &-center{
36
- &-center{
37
- text-align: initial;
38
- }
39
- }
40
- }
41
- }
42
- }
43
-
44
- &-center{
45
- display: flex;
46
- flex-direction: column;
47
- justify-content: center;
48
- align-items: center;
49
- gap: 8Px;
50
- &-icon{
51
- .triones-antm-icon{
52
- font-size: 36Px;
53
- }
54
- }
55
- &-content{
56
- display: inline-block;
57
- color: #fff;
58
- word-break: break-all;
59
- pointer-events: all;
60
- text-align: initial;
61
- }
62
- }
63
- }
1
+ $toastCls: 'triones-antm-toast';
2
+
3
+ .#{$toastCls} {
4
+ position: fixed;
5
+ top: 0;
6
+ left: 0;
7
+ width: 100%;
8
+ height: 100%;
9
+ text-align: center;
10
+ pointer-events: none;
11
+
12
+ &-main {
13
+
14
+ padding: 12Px;
15
+ display: inline-block;
16
+ position: relative;
17
+ top: 50%;
18
+ transform: translateY(-50%);
19
+ width: auto;
20
+ max-width: 204px;
21
+ max-height: 70%;
22
+ overflow: auto;
23
+ color: #fff;
24
+ word-break: break-all;
25
+ background-color: rgba(0, 0, 0, .7);
26
+ border-radius: 8px;
27
+ pointer-events: all;
28
+ font-size: var(--adm-font-size-7);
29
+ line-height: 1.5;
30
+ box-sizing: border-box;
31
+ &-icon{
32
+ padding: 35Px 12Px;
33
+ min-width: 150Px;
34
+ .#{$toastCls}{
35
+ &-center{
36
+ &-center{
37
+ text-align: initial;
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+
44
+ &-center{
45
+ display: flex;
46
+ flex-direction: column;
47
+ justify-content: center;
48
+ align-items: center;
49
+ gap: 8Px;
50
+ &-icon{
51
+ .triones-antm-icon{
52
+ font-size: 36Px;
53
+ }
54
+ }
55
+ &-content{
56
+ display: inline-block;
57
+ color: #fff;
58
+ word-break: break-all;
59
+ pointer-events: all;
60
+ text-align: initial;
61
+ }
62
+ }
63
+ }
@@ -1,20 +1,20 @@
1
- @use "../style/variable" as variable;
2
-
3
- $verificationCodeInputCls: 'triones-antm-verification-code-input';
4
-
5
- .#{$verificationCodeInputCls} {
6
- &-send {
7
- padding-inline: variable.$trionesPaddingContentHorizontal;
8
- cursor: pointer;
9
-
10
- &:hover {
11
- color: variable.$trionesColorPrimary;
12
- }
13
- }
14
-
15
- &-counting {
16
- padding-inline: variable.$trionesPaddingContentHorizontal;
17
- cursor: not-allowed;
18
- color: variable.$trionesColorTextDisabled;
19
- }
20
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $verificationCodeInputCls: 'triones-antm-verification-code-input';
4
+
5
+ .#{$verificationCodeInputCls} {
6
+ &-send {
7
+ padding-inline: variable.$trionesPaddingContentHorizontal;
8
+ cursor: pointer;
9
+
10
+ &:hover {
11
+ color: variable.$trionesColorPrimary;
12
+ }
13
+ }
14
+
15
+ &-counting {
16
+ padding-inline: variable.$trionesPaddingContentHorizontal;
17
+ cursor: not-allowed;
18
+ color: variable.$trionesColorTextDisabled;
19
+ }
20
+ }