@trionesdev/antd-taro-react 0.0.2-beta.22 → 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,
@@ -40,6 +44,8 @@ export var Popup = function Popup(_ref) {
40
44
  onBack = _ref.onBack,
41
45
  afterClose = _ref.afterClose,
42
46
  afterOpenChange = _ref.afterOpenChange,
47
+ className = _ref.className,
48
+ style = _ref.style,
43
49
  _ref$round = _ref.round,
44
50
  round = _ref$round === void 0 ? false : _ref$round,
45
51
  _ref$zIndex = _ref.zIndex,
@@ -96,11 +102,11 @@ export var Popup = function Popup(_ref) {
96
102
  if (!render) return null;
97
103
  return /*#__PURE__*/React.createElement(RootPortal, null, /*#__PURE__*/React.createElement(View, {
98
104
  catchMove: true,
99
- className: classNames("".concat(cls), _defineProperty({}, "".concat(cls, "-open"), internalOpen)),
100
- style: {
105
+ className: classNames("".concat(cls), _defineProperty({}, "".concat(cls, "-open"), internalOpen), className),
106
+ style: _objectSpread(_objectSpread({}, style), {}, {
101
107
  zIndex: zIndex,
102
108
  transitionDuration: "".concat(duration, "ms")
103
- }
109
+ })
104
110
  }, showOverlay && /*#__PURE__*/React.createElement(View, {
105
111
  className: classNames("".concat(cls, "-overlay")),
106
112
  onClick: function onClick(e) {
@@ -114,7 +120,11 @@ export var Popup = function Popup(_ref) {
114
120
  className: classNames("".concat(cls, "-container"), "".concat(cls, "-").concat(position), _defineProperty({}, "".concat(cls, "-round"), round)),
115
121
  style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.container), {}, {
116
122
  width: width,
117
- height: height
123
+ maxWidth: maxWidth,
124
+ minWidth: minWidth,
125
+ height: height,
126
+ maxHeight: maxHeight,
127
+ minHeight: minHeight
118
128
  })
119
129
  }, (title || backable || closable) && /*#__PURE__*/React.createElement("div", {
120
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
+ }