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

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,41 +1,41 @@
1
- @use "../style/variable" as variable;
2
- $pickerCls: 'triones-antm-picker';
3
-
4
- .#{$pickerCls} {
5
- width: 100%;
6
- height: 300Px;
7
- overflow: hidden;
8
- position: relative;
9
- display: flex;
10
- flex-direction: column;
11
-
12
- &-header {
13
- display: flex;
14
- justify-content: space-between;
15
- align-items: center;
16
- border-bottom: 1Px solid #eee;
17
- padding: 4Px;
18
-
19
- &-button {
20
- padding: 8Px;
21
- font-size: 12Px;
22
- &-cancel{
23
- color: variable.$trionesColorTextSecondary;
24
- }
25
- &-ok{
26
- color: variable.$trionesColorPrimary;
27
- }
28
- }
29
-
30
- &-title {
31
- }
32
- }
33
-
34
- &-body {
35
- flex: 1 1;
36
- width: 100%;
37
- height: 100%;
38
- pointer-events: unset;
39
- }
40
-
41
- }
1
+ @use "../style/variable" as variable;
2
+ $pickerCls: 'triones-antm-picker';
3
+
4
+ .#{$pickerCls} {
5
+ width: 100%;
6
+ height: 300Px;
7
+ overflow: hidden;
8
+ position: relative;
9
+ display: flex;
10
+ flex-direction: column;
11
+
12
+ &-header {
13
+ display: flex;
14
+ justify-content: space-between;
15
+ align-items: center;
16
+ border-bottom: 1Px solid #eee;
17
+ padding: 4Px;
18
+
19
+ &-button {
20
+ padding: 8Px;
21
+ font-size: 12Px;
22
+ &-cancel{
23
+ color: variable.$trionesColorTextSecondary;
24
+ }
25
+ &-ok{
26
+ color: variable.$trionesColorPrimary;
27
+ }
28
+ }
29
+
30
+ &-title {
31
+ }
32
+ }
33
+
34
+ &-body {
35
+ flex: 1 1;
36
+ width: 100%;
37
+ height: 100%;
38
+ pointer-events: unset;
39
+ }
40
+
41
+ }
@@ -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
+ }
@@ -8,11 +8,23 @@ export type PopupProps = {
8
8
  * @default null
9
9
  */
10
10
  height?: number | string;
11
+ /**
12
+ * @description 弹窗最大高度,当position 为 `top`或`bottom` 时生效
13
+ * @default null
14
+ */
15
+ maxHeight?: number | string;
16
+ /**
17
+ * @description 弹窗最小高度,当position 为 `top`或`bottom` 时生效
18
+ * @default null
19
+ */
20
+ minHeight?: number | string;
11
21
  /**
12
22
  * @description 弹窗宽度,当position 为 `left`或`right` 时生效
13
23
  * @default null
14
24
  */
15
25
  width?: number | string;
26
+ maxWidth?: number | string;
27
+ minWidth?: number | string;
16
28
  backable?: boolean;
17
29
  backIcon?: React.ReactNode;
18
30
  closable?: boolean;
@@ -23,7 +23,11 @@ export var Popup = function Popup(_ref) {
23
23
  _ref$position = _ref.position,
24
24
  position = _ref$position === void 0 ? 'bottom' : _ref$position,
25
25
  height = _ref.height,
26
+ maxHeight = _ref.maxHeight,
27
+ minHeight = _ref.minHeight,
26
28
  width = _ref.width,
29
+ maxWidth = _ref.maxWidth,
30
+ minWidth = _ref.minWidth,
27
31
  _ref$backable = _ref.backable,
28
32
  backable = _ref$backable === void 0 ? false : _ref$backable,
29
33
  backIcon = _ref.backIcon,
@@ -116,7 +120,11 @@ export var Popup = function Popup(_ref) {
116
120
  className: classNames("".concat(cls, "-container"), "".concat(cls, "-").concat(position), _defineProperty({}, "".concat(cls, "-round"), round)),
117
121
  style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.container), {}, {
118
122
  width: width,
119
- height: height
123
+ maxWidth: maxWidth,
124
+ minWidth: minWidth,
125
+ height: height,
126
+ maxHeight: maxHeight,
127
+ minHeight: minHeight
120
128
  })
121
129
  }, (title || backable || closable) && /*#__PURE__*/React.createElement("div", {
122
130
  className: "".concat(cls, "-header"),
@@ -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
+ }