@arco-design/mobile-react 2.22.0 → 2.22.3
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.
- package/CHANGELOG.md +26 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/action-sheet/style/css/index.css +2 -2
- package/cjs/action-sheet/style/index.less +1 -1
- package/cjs/carousel/index.d.ts +6 -0
- package/cjs/carousel/index.js +6 -4
- package/cjs/dialog/style/css/index.css +2 -2
- package/cjs/dialog/style/index.less +1 -1
- package/cjs/pull-refresh/android-pull-refresh.js +2 -0
- package/cjs/pull-refresh/ios-pull-refresh.js +3 -2
- package/cjs/pull-refresh/model.d.ts +6 -2
- package/cjs/steps/demo/style/css/mobile.css +8 -2
- package/cjs/steps/index.d.ts +1 -1
- package/cjs/steps/index.js +5 -1
- package/cjs/steps/step.js +5 -3
- package/cjs/steps/style/css/index.css +78 -23
- package/cjs/steps/style/index.less +92 -24
- package/cjs/steps/type.d.ts +12 -0
- package/cjs/tabs/index.js +3 -2
- package/cjs/tabs/style/css/index.css +8 -8
- package/cjs/tabs/style/index.less +4 -4
- package/dist/index.js +107 -95
- package/dist/index.min.js +3 -3
- package/dist/style.css +87 -35
- package/dist/style.min.css +1 -1
- package/esm/action-sheet/style/css/index.css +2 -2
- package/esm/action-sheet/style/index.less +1 -1
- package/esm/carousel/index.d.ts +6 -0
- package/esm/carousel/index.js +6 -4
- package/esm/dialog/style/css/index.css +2 -2
- package/esm/dialog/style/index.less +1 -1
- package/esm/pull-refresh/android-pull-refresh.js +2 -0
- package/esm/pull-refresh/ios-pull-refresh.js +3 -2
- package/esm/pull-refresh/model.d.ts +6 -2
- package/esm/steps/demo/style/css/mobile.css +8 -2
- package/esm/steps/index.d.ts +1 -1
- package/esm/steps/index.js +5 -1
- package/esm/steps/step.js +5 -3
- package/esm/steps/style/css/index.css +78 -23
- package/esm/steps/style/index.less +92 -24
- package/esm/steps/type.d.ts +12 -0
- package/esm/tabs/index.js +4 -3
- package/esm/tabs/style/css/index.css +8 -8
- package/esm/tabs/style/index.less +4 -4
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +7 -3
- package/tokens/app/arcodesign/default/index.d.ts +4 -0
- package/tokens/app/arcodesign/default/index.js +7 -3
- package/tokens/app/arcodesign/default/index.json +58 -10
- package/tokens/app/arcodesign/default/index.less +7 -3
- package/tokens/mixin/index.less +1 -1
- package/tools/flexible.js +82 -63
- package/umd/action-sheet/style/css/index.css +2 -2
- package/umd/action-sheet/style/index.less +1 -1
- package/umd/carousel/index.d.ts +6 -0
- package/umd/carousel/index.js +6 -4
- package/umd/dialog/style/css/index.css +2 -2
- package/umd/dialog/style/index.less +1 -1
- package/umd/pull-refresh/android-pull-refresh.js +2 -0
- package/umd/pull-refresh/ios-pull-refresh.js +3 -2
- package/umd/pull-refresh/model.d.ts +6 -2
- package/umd/steps/demo/style/css/mobile.css +8 -2
- package/umd/steps/index.d.ts +1 -1
- package/umd/steps/index.js +5 -1
- package/umd/steps/step.js +5 -3
- package/umd/steps/style/css/index.css +78 -23
- package/umd/steps/style/index.less +92 -24
- package/umd/steps/type.d.ts +12 -0
- package/umd/tabs/index.js +3 -2
- package/umd/tabs/style/css/index.css +8 -8
- package/umd/tabs/style/index.less +4 -4
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,32 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [2.22.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.2...@arco-design/mobile-react@2.22.3) (2022-11-23)
|
7
|
+
|
8
|
+
|
9
|
+
### Bug Fixes
|
10
|
+
|
11
|
+
* `Carousel` supports autoPlayDirection ([#72](https://github.com/arco-design/arco-design-mobile/issues/72)) ([527aaf4](https://github.com/arco-design/arco-design-mobile/commit/527aaf4bdf86fe4cf995bd8e4bd2580e9db8c942))
|
12
|
+
* flexible.js support umd ([#73](https://github.com/arco-design/arco-design-mobile/issues/73)) ([d3f35c0](https://github.com/arco-design/arco-design-mobile/commit/d3f35c093a579bb404fff91dbf6437cdd93f19f7))
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
## [2.22.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.0...@arco-design/mobile-react@2.22.2) (2022-11-09)
|
19
|
+
|
20
|
+
|
21
|
+
### Bug Fixes
|
22
|
+
|
23
|
+
* `PullRefresh` support custom style ([edac495](https://github.com/arco-design/arco-design-mobile/commit/edac4954526b8f2e3a86c9742752222e19f899f8))
|
24
|
+
* `Steps` optimize style & support custom alignment ([617c570](https://github.com/arco-design/arco-design-mobile/commit/617c57003135215787897b48c07d2b674c482828))
|
25
|
+
* `Tabs` fix touch event on foldable screen ([a67fa71](https://github.com/arco-design/arco-design-mobile/commit/a67fa71c8944e27aa43d6353e4a24e4ba676cec3))
|
26
|
+
* optimize .text-medium mixin ([ab62ab2](https://github.com/arco-design/arco-design-mobile/commit/ab62ab2cdb51174cbd2106467bbf1a3db4694982))
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
|
31
|
+
|
6
32
|
# [2.22.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.3...@arco-design/mobile-react@2.22.0) (2022-10-28)
|
7
33
|
|
8
34
|
|
package/README.en-US.md
CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
|
|
59
59
|
React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
|
60
60
|
|
61
61
|
```
|
62
|
-
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.
|
63
|
-
<script src="https://unpkg.com/@arco-design/mobile-react@2.
|
62
|
+
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
|
63
|
+
<script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
|
64
64
|
```
|
65
65
|
|
66
66
|
## Full import
|
package/README.md
CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="
|
|
59
59
|
React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
|
60
60
|
|
61
61
|
```
|
62
|
-
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.
|
63
|
-
<script src="https://unpkg.com/@arco-design/mobile-react@2.
|
62
|
+
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
|
63
|
+
<script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
|
64
64
|
```
|
65
65
|
|
66
66
|
## 引入全部
|
@@ -46,8 +46,8 @@
|
|
46
46
|
.arco-action-sheet-title.android,
|
47
47
|
.arco-action-sheet-title.system-android {
|
48
48
|
font-weight: 400;
|
49
|
-
-webkit-text-stroke: 0.3PX
|
50
|
-
text-stroke: 0.3PX
|
49
|
+
-webkit-text-stroke: 0.3PX currentColor;
|
50
|
+
text-stroke: 0.3PX currentColor;
|
51
51
|
}
|
52
52
|
.arco-action-sheet-sub-title {
|
53
53
|
color: #86909c ;
|
package/cjs/carousel/index.d.ts
CHANGED
@@ -66,6 +66,12 @@ export interface CarouselProps {
|
|
66
66
|
* @default true
|
67
67
|
*/
|
68
68
|
autoPlay?: boolean;
|
69
|
+
/**
|
70
|
+
* 自动播放方向
|
71
|
+
* @en Direction when playing auto
|
72
|
+
* @default "normal"
|
73
|
+
*/
|
74
|
+
autoPlayDirection?: 'normal' | 'reverse';
|
69
75
|
/**
|
70
76
|
* 是否响应手势滑动
|
71
77
|
* @en Whether to respond to gesture swipe
|
package/cjs/carousel/index.js
CHANGED
@@ -42,6 +42,8 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
42
42
|
loop = _props$loop === void 0 ? true : _props$loop,
|
43
43
|
_props$autoPlay = props.autoPlay,
|
44
44
|
autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
|
45
|
+
_props$autoPlayDirect = props.autoPlayDirection,
|
46
|
+
autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
|
45
47
|
_props$swipeable = props.swipeable,
|
46
48
|
swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
|
47
49
|
_props$stayDuration = props.stayDuration,
|
@@ -164,7 +166,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
164
166
|
transformsRef = _useRefState4[1],
|
165
167
|
setTransforms = _useRefState4[2];
|
166
168
|
|
167
|
-
var _useRefState5 = (0, _helpers.useRefState)('left'),
|
169
|
+
var _useRefState5 = (0, _helpers.useRefState)(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
|
168
170
|
direction = _useRefState5[0],
|
169
171
|
directionRef = _useRefState5[1],
|
170
172
|
setStateDirection = _useRefState5[2];
|
@@ -401,7 +403,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
401
403
|
return function () {
|
402
404
|
clear();
|
403
405
|
};
|
404
|
-
}, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
|
406
|
+
}, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
|
405
407
|
(0, _helpers.useUpdateEffect)(function () {
|
406
408
|
if (currentIndex !== void 0) {
|
407
409
|
jumpTo(currentIndex);
|
@@ -541,7 +543,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
541
543
|
var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
|
542
544
|
|
543
545
|
if (autoJump) {
|
544
|
-
setDirection('left');
|
546
|
+
setDirection(autoPlayDirection === 'reverse' ? 'right' : 'left');
|
545
547
|
} else if (newIndex === indexRef.current) {
|
546
548
|
setDirection(distanceRef.current > 0 ? 'right' : 'left');
|
547
549
|
} else {
|
@@ -595,7 +597,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
595
597
|
}
|
596
598
|
|
597
599
|
timerRef.current = delayTimeout(function () {
|
598
|
-
jumpTo(indexRef.current + 1);
|
600
|
+
jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
|
599
601
|
}, stayDuration);
|
600
602
|
}
|
601
603
|
|
@@ -126,8 +126,8 @@
|
|
126
126
|
.arco-dialog-header.ios.android,
|
127
127
|
.arco-dialog-header.ios.system-android {
|
128
128
|
font-weight: 400;
|
129
|
-
-webkit-text-stroke: 0.3PX
|
130
|
-
text-stroke: 0.3PX
|
129
|
+
-webkit-text-stroke: 0.3PX currentColor;
|
130
|
+
text-stroke: 0.3PX currentColor;
|
131
131
|
}
|
132
132
|
.arco-dialog-header.ios.only-title {
|
133
133
|
padding-bottom: 0.4rem ;
|
@@ -105,7 +105,7 @@
|
|
105
105
|
.use-var(padding-right, dialog-ios-horizontal-padding);
|
106
106
|
.use-var(font-size, dialog-header-ios-font-size);
|
107
107
|
.use-var(line-height, dialog-header-ios-line-height);
|
108
|
-
.text-medium
|
108
|
+
.text-medium();
|
109
109
|
|
110
110
|
&.only-title {
|
111
111
|
.use-var(padding-bottom, dialog-ios-vertical-padding);
|
@@ -36,6 +36,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
36
36
|
locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
|
37
37
|
|
38
38
|
var className = props.className,
|
39
|
+
style = props.style,
|
39
40
|
children = props.children,
|
40
41
|
_props$loosingText = props.loosingText,
|
41
42
|
loosingText = _props$loosingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
|
@@ -272,6 +273,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
272
273
|
className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh all-border-box is-android", className, {
|
273
274
|
'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== _model.PullRefreshStatus.Loading
|
274
275
|
}),
|
276
|
+
style: style,
|
275
277
|
ref: domRef
|
276
278
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
277
279
|
className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-place"),
|
@@ -35,6 +35,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
35
35
|
|
36
36
|
var animationRef = (0, _react.useRef)(0);
|
37
37
|
var className = props.className,
|
38
|
+
style = props.style,
|
38
39
|
children = props.children,
|
39
40
|
_props$loadingText = props.loadingText,
|
40
41
|
loadingText = _props$loadingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
|
@@ -214,9 +215,9 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
214
215
|
'is-disabled': disabled || !touching && useHideAsNestedScroll
|
215
216
|
}),
|
216
217
|
ref: domRef,
|
217
|
-
style: contentHeight > 0 ? {
|
218
|
+
style: contentHeight > 0 ? (0, _extends2.default)({
|
218
219
|
height: contentHeight
|
219
|
-
}
|
220
|
+
}, style || {}) : style
|
220
221
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
221
222
|
className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-content-wrapper")
|
222
223
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { ReactNode } from 'react';
|
1
|
+
import type { CSSProperties, ReactNode } from 'react';
|
2
2
|
export interface PullRefreshRef {
|
3
3
|
/**
|
4
4
|
* 最外层元素 DOM
|
@@ -32,9 +32,13 @@ export interface PullRefreshBasicProps {
|
|
32
32
|
/**
|
33
33
|
* 样式类名
|
34
34
|
* @en Custom classname
|
35
|
-
* @default ""
|
36
35
|
*/
|
37
36
|
className?: string;
|
37
|
+
/**
|
38
|
+
* 自定义样式
|
39
|
+
* @en Custom style
|
40
|
+
*/
|
41
|
+
style?: CSSProperties;
|
38
42
|
/**
|
39
43
|
* 是否禁用
|
40
44
|
* @en Whether to be disabled
|
@@ -30,7 +30,10 @@
|
|
30
30
|
#demo-steps #demo-order-7 .process-title-color-with-config {
|
31
31
|
color: #FFB400;
|
32
32
|
}
|
33
|
-
#demo-steps #demo-order-7 .finish-tail-color-with-config
|
33
|
+
#demo-steps #demo-order-7 .finish-tail-color-with-config::before,
|
34
|
+
#demo-steps #demo-order-7 .finish-tail-color-with-config::after,
|
35
|
+
#demo-steps #demo-order-7 .process-tail-color-with-config::before,
|
36
|
+
#demo-steps #demo-order-7 .error-tail-color-with-config::before {
|
34
37
|
background: #FFB400;
|
35
38
|
}
|
36
39
|
#demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
|
@@ -57,7 +60,10 @@
|
|
57
60
|
#demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
|
58
61
|
color: #165DFF;
|
59
62
|
}
|
60
|
-
#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config
|
63
|
+
#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
|
64
|
+
#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
|
65
|
+
#demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
|
66
|
+
#demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
|
61
67
|
background: #165DFF;
|
62
68
|
}
|
63
69
|
#demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
|
package/cjs/steps/index.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { StepsProps, StepsRef } from './type';
|
3
3
|
export * from './type';
|
4
|
-
export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
|
4
|
+
export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
|
5
5
|
index?: number | undefined;
|
6
6
|
changeIndex: (newIndex: number) => void;
|
7
7
|
}>;
|
package/cjs/steps/index.js
CHANGED
@@ -44,6 +44,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
44
44
|
children = props.children,
|
45
45
|
_props$direction = props.direction,
|
46
46
|
direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
|
47
|
+
userSetAlign = props.align,
|
47
48
|
_props$iconType = props.iconType,
|
48
49
|
iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
|
49
50
|
current = props.current,
|
@@ -54,6 +55,8 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
54
55
|
items = props.items,
|
55
56
|
onClick = props.onClick,
|
56
57
|
onChange = props.onChange;
|
58
|
+
var defaultAlign = direction === 'vertical' ? 'start' : 'center';
|
59
|
+
var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
|
57
60
|
|
58
61
|
var _useState = (0, _react.useState)(Number(defaultIndex)),
|
59
62
|
innerIndex = _useState[0],
|
@@ -89,11 +92,12 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
89
92
|
direction: direction,
|
90
93
|
index: index,
|
91
94
|
status: activeIndex === index ? status : void 0,
|
95
|
+
align: align,
|
92
96
|
changeIndex: changeIndex
|
93
97
|
},
|
94
98
|
key: index
|
95
99
|
}, child);
|
96
|
-
}, [iconType, activeIndex, direction]);
|
100
|
+
}, [iconType, activeIndex, direction, align]);
|
97
101
|
return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
|
98
102
|
var prefixCls = _ref.prefixCls;
|
99
103
|
return /*#__PURE__*/_react.default.createElement("div", {
|
package/cjs/steps/step.js
CHANGED
@@ -29,9 +29,11 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
29
29
|
_useContext$index = _useContext.index,
|
30
30
|
index = _useContext$index === void 0 ? 0 : _useContext$index,
|
31
31
|
contextStatus = _useContext.status,
|
32
|
+
contextAlign = _useContext.align,
|
32
33
|
changeIndex = _useContext.changeIndex;
|
33
34
|
|
34
35
|
var status = props.status || contextStatus;
|
36
|
+
var align = props.align || contextAlign;
|
35
37
|
var domRef = (0, _react.useRef)(null);
|
36
38
|
(0, _react.useImperativeHandle)(ref, function () {
|
37
39
|
return {
|
@@ -70,12 +72,12 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
70
72
|
var prefixCls = _ref.prefixCls;
|
71
73
|
return /*#__PURE__*/_react.default.createElement("div", {
|
72
74
|
ref: domRef,
|
73
|
-
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", currentStatus, direction, iconType),
|
75
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
|
74
76
|
onClick: function onClick() {
|
75
77
|
return changeIndex(index);
|
76
78
|
}
|
77
79
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
78
|
-
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
|
80
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
|
79
81
|
}), icon ? /*#__PURE__*/_react.default.createElement("div", {
|
80
82
|
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
|
81
83
|
}, icon) : /*#__PURE__*/_react.default.createElement("div", {
|
@@ -83,7 +85,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
83
85
|
}, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/_react.default.createElement("span", {
|
84
86
|
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-icon-dot")
|
85
87
|
})), title || description ? /*#__PURE__*/_react.default.createElement("div", {
|
86
|
-
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content")
|
88
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
|
87
89
|
}, title ? /*#__PURE__*/_react.default.createElement("div", {
|
88
90
|
className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
|
89
91
|
}, title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
|
@@ -18,17 +18,23 @@
|
|
18
18
|
-webkit-box-direction: normal;
|
19
19
|
-webkit-flex-direction: column;
|
20
20
|
flex-direction: column;
|
21
|
+
}
|
22
|
+
.arco-steps-item-align-center {
|
21
23
|
-webkit-box-align: center;
|
22
24
|
-webkit-align-items: center;
|
23
25
|
align-items: center;
|
24
26
|
}
|
25
|
-
.arco-steps-item
|
27
|
+
.arco-steps-item-align-start {
|
26
28
|
-webkit-box-align: start;
|
27
29
|
-webkit-align-items: flex-start;
|
28
30
|
align-items: flex-start;
|
29
31
|
}
|
30
|
-
.arco-steps-item
|
31
|
-
|
32
|
+
.arco-steps-item-align-center.vertical {
|
33
|
+
padding-bottom: 0.5rem ;
|
34
|
+
}
|
35
|
+
.arco-steps-item:first-child .arco-steps-item-tail::before,
|
36
|
+
.arco-steps-item:last-child .arco-steps-item-tail::after {
|
37
|
+
visibility: hidden;
|
32
38
|
}
|
33
39
|
.arco-steps-item-tail {
|
34
40
|
position: absolute;
|
@@ -44,33 +50,81 @@
|
|
44
50
|
}
|
45
51
|
.horizontal .arco-steps-item-tail {
|
46
52
|
width: 100%;
|
47
|
-
left: 50%;
|
48
53
|
height: 18PX ;
|
49
|
-
padding: 0 0.36rem ;
|
50
54
|
}
|
51
|
-
.horizontal .arco-steps-item-tail
|
55
|
+
.horizontal .arco-steps-item-tail::before,
|
56
|
+
.horizontal .arco-steps-item-tail::after {
|
57
|
+
height: 1PX ;
|
58
|
+
}
|
59
|
+
.horizontal .arco-steps-item-tail-align-start {
|
60
|
+
left: 9PX ;
|
61
|
+
padding: 0 18PX ;
|
62
|
+
}
|
63
|
+
.horizontal .arco-steps-item-tail-align-start::after {
|
52
64
|
content: "";
|
53
|
-
display: inline-block;
|
54
65
|
width: 100%;
|
55
|
-
|
56
|
-
|
57
|
-
|
66
|
+
border-radius: 2PX ;
|
67
|
+
}
|
68
|
+
.horizontal .arco-steps-item-tail-align-center::before,
|
69
|
+
.horizontal .arco-steps-item-tail-align-center::after {
|
70
|
+
content: "";
|
71
|
+
width: 50%;
|
72
|
+
}
|
73
|
+
.horizontal .arco-steps-item-tail-align-center::before {
|
74
|
+
margin-right: 18PX ;
|
75
|
+
border-top-right-radius: 2PX ;
|
76
|
+
border-bottom-right-radius: 2PX ;
|
77
|
+
}
|
78
|
+
.horizontal .arco-steps-item-tail-align-center::after {
|
79
|
+
margin-left: 18PX ;
|
80
|
+
border-top-left-radius: 2PX ;
|
81
|
+
border-bottom-left-radius: 2PX ;
|
58
82
|
}
|
59
83
|
.vertical .arco-steps-item-tail {
|
60
84
|
height: 100%;
|
61
85
|
width: 18PX ;
|
62
|
-
|
63
|
-
|
86
|
+
-webkit-box-orient: vertical;
|
87
|
+
-webkit-box-direction: normal;
|
88
|
+
-webkit-flex-direction: column;
|
89
|
+
flex-direction: column;
|
64
90
|
}
|
65
|
-
.vertical .arco-steps-item-tail
|
91
|
+
.vertical .arco-steps-item-tail::before,
|
92
|
+
.vertical .arco-steps-item-tail::after {
|
93
|
+
width: 1PX ;
|
94
|
+
}
|
95
|
+
.vertical .arco-steps-item-tail-align-start {
|
96
|
+
top: 9PX ;
|
97
|
+
padding: 14PX 0 ;
|
98
|
+
}
|
99
|
+
.vertical .arco-steps-item-tail-align-start::after {
|
66
100
|
content: "";
|
67
|
-
display: inline-block;
|
68
101
|
height: 100%;
|
69
|
-
|
102
|
+
border-radius: 2PX ;
|
103
|
+
}
|
104
|
+
.vertical .arco-steps-item-tail-align-center::before,
|
105
|
+
.vertical .arco-steps-item-tail-align-center::after {
|
106
|
+
content: "";
|
107
|
+
height: 50%;
|
108
|
+
}
|
109
|
+
.vertical .arco-steps-item-tail-align-center::before {
|
110
|
+
margin-bottom: 14PX ;
|
111
|
+
border-bottom-left-radius: 2PX ;
|
112
|
+
border-bottom-right-radius: 2PX ;
|
113
|
+
}
|
114
|
+
.vertical .arco-steps-item-tail-align-center::after {
|
115
|
+
margin-top: 14PX ;
|
116
|
+
border-top-left-radius: 2PX ;
|
117
|
+
border-top-right-radius: 2PX ;
|
118
|
+
}
|
119
|
+
.arco-steps-item-tail::after,
|
120
|
+
.arco-steps-item-tail::before {
|
121
|
+
display: inline-block;
|
70
122
|
background: #e5e6eb ;
|
71
|
-
border-radius: 0.04rem;
|
72
123
|
}
|
73
|
-
.
|
124
|
+
.arco-steps-item-tail-status-finish::before,
|
125
|
+
.arco-steps-item-tail-status-finish::after,
|
126
|
+
.arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
|
127
|
+
.arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
|
74
128
|
background: #165dff ;
|
75
129
|
}
|
76
130
|
.arco-steps-item-custom-icon,
|
@@ -122,8 +176,8 @@
|
|
122
176
|
.arco-steps-item-icon-num.android,
|
123
177
|
.arco-steps-item-icon-num.system-android {
|
124
178
|
font-weight: 400;
|
125
|
-
-webkit-text-stroke: 0.3PX
|
126
|
-
text-stroke: 0.3PX
|
179
|
+
-webkit-text-stroke: 0.3PX currentColor;
|
180
|
+
text-stroke: 0.3PX currentColor;
|
127
181
|
}
|
128
182
|
.process .arco-steps-item-icon-num {
|
129
183
|
color: #FFFFFF ;
|
@@ -147,18 +201,19 @@
|
|
147
201
|
border: none;
|
148
202
|
background: #165dff ;
|
149
203
|
}
|
150
|
-
.arco-steps-item-content {
|
151
|
-
text-align: center;
|
152
|
-
}
|
153
204
|
.horizontal .arco-steps-item-content {
|
154
205
|
margin-top: 0.1rem ;
|
155
206
|
}
|
207
|
+
.horizontal .arco-steps-item-content-align-center {
|
208
|
+
text-align: center;
|
209
|
+
}
|
156
210
|
.vertical .arco-steps-item-content {
|
157
211
|
margin-left: 0.26rem ;
|
158
|
-
text-align: left;
|
159
212
|
-webkit-box-flex: 1;
|
160
213
|
-webkit-flex: 1;
|
161
214
|
flex: 1;
|
215
|
+
}
|
216
|
+
.vertical .arco-steps-item-content-align-start {
|
162
217
|
padding-bottom: 0.5rem ;
|
163
218
|
}
|
164
219
|
.arco-steps-item-title {
|
@@ -11,15 +11,23 @@
|
|
11
11
|
|
12
12
|
&.horizontal {
|
13
13
|
flex-direction: column;
|
14
|
+
}
|
15
|
+
|
16
|
+
&-align-center {
|
14
17
|
align-items: center;
|
15
18
|
}
|
16
19
|
|
17
|
-
|
20
|
+
&-align-start {
|
18
21
|
align-items: flex-start;
|
19
22
|
}
|
20
23
|
|
21
|
-
|
22
|
-
|
24
|
+
&-align-center.vertical {
|
25
|
+
.use-var(padding-bottom, steps-vertical-content-padding-bottom);
|
26
|
+
}
|
27
|
+
|
28
|
+
&:first-child &-tail::before,
|
29
|
+
&:last-child &-tail::after {
|
30
|
+
visibility: hidden;
|
23
31
|
}
|
24
32
|
|
25
33
|
&-tail {
|
@@ -30,37 +38,93 @@
|
|
30
38
|
|
31
39
|
.horizontal & {
|
32
40
|
width: 100%;
|
33
|
-
left: 50%;
|
34
41
|
.use-var(height, steps-icon-height);
|
35
|
-
.use-var(padding, steps-tail-horizontal-padding);
|
36
42
|
|
37
|
-
|
38
|
-
|
39
|
-
display: inline-block;
|
40
|
-
width: 100%;
|
43
|
+
&::before,
|
44
|
+
&::after {
|
41
45
|
.use-var(height, steps-tail-standard-size);
|
42
|
-
|
43
|
-
|
46
|
+
}
|
47
|
+
|
48
|
+
&-align-start {
|
49
|
+
.use-var(left, steps-tail-horizontal-left);
|
50
|
+
.use-var(padding, steps-tail-horizontal-padding);
|
51
|
+
|
52
|
+
&::after {
|
53
|
+
content: "";
|
54
|
+
width: 100%;
|
55
|
+
.use-var(border-radius, steps-tail-border-radius);
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
&-align-center {
|
60
|
+
&::before,
|
61
|
+
&::after {
|
62
|
+
content: "";
|
63
|
+
width: 50%;
|
64
|
+
}
|
65
|
+
&::before {
|
66
|
+
.use-var(margin-right, steps-tail-horizontal-gutter);
|
67
|
+
.use-var(border-top-right-radius, steps-tail-border-radius);
|
68
|
+
.use-var(border-bottom-right-radius, steps-tail-border-radius);
|
69
|
+
}
|
70
|
+
&::after {
|
71
|
+
.use-var(margin-left, steps-tail-horizontal-gutter);
|
72
|
+
.use-var(border-top-left-radius, steps-tail-border-radius);
|
73
|
+
.use-var(border-bottom-left-radius, steps-tail-border-radius);
|
74
|
+
}
|
44
75
|
}
|
45
76
|
}
|
46
77
|
|
47
78
|
.vertical & {
|
48
79
|
height: 100%;
|
49
80
|
.use-var(width, steps-icon-width);
|
50
|
-
|
51
|
-
.use-var(padding, steps-tail-vertical-padding);
|
81
|
+
flex-direction: column;
|
52
82
|
|
53
|
-
|
54
|
-
|
55
|
-
display: inline-block;
|
56
|
-
height: 100%;
|
83
|
+
&::before,
|
84
|
+
&::after {
|
57
85
|
.use-var(width, steps-tail-standard-size);
|
58
|
-
.use-var(background, steps-tail-standard-background);
|
59
|
-
.rem(border-radius, 2);
|
60
86
|
}
|
87
|
+
|
88
|
+
&-align-start {
|
89
|
+
.use-var(top, steps-tail-vertical-top);
|
90
|
+
.use-var(padding, steps-tail-vertical-padding);
|
91
|
+
|
92
|
+
&::after {
|
93
|
+
content: "";
|
94
|
+
height: 100%;
|
95
|
+
.use-var(border-radius, steps-tail-border-radius);
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
&-align-center {
|
100
|
+
&::before,
|
101
|
+
&::after {
|
102
|
+
content: "";
|
103
|
+
height: 50%;
|
104
|
+
}
|
105
|
+
&::before {
|
106
|
+
.use-var(margin-bottom, steps-tail-vertical-gutter);
|
107
|
+
.use-var(border-bottom-left-radius, steps-tail-border-radius);
|
108
|
+
.use-var(border-bottom-right-radius, steps-tail-border-radius);
|
109
|
+
}
|
110
|
+
&::after {
|
111
|
+
.use-var(margin-top, steps-tail-vertical-gutter);
|
112
|
+
.use-var(border-top-left-radius, steps-tail-border-radius);
|
113
|
+
.use-var(border-top-right-radius, steps-tail-border-radius);
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
&::after,
|
119
|
+
&::before {
|
120
|
+
display: inline-block;
|
121
|
+
.use-var(background, steps-tail-standard-background);
|
61
122
|
}
|
62
123
|
|
63
|
-
|
124
|
+
&-status-finish::before,
|
125
|
+
&-status-finish::after,
|
126
|
+
&-align-center&-status-process::before,
|
127
|
+
&-align-center&-status-error::before {
|
64
128
|
.use-var(background, steps-tail-finish-background);
|
65
129
|
}
|
66
130
|
}
|
@@ -110,7 +174,7 @@
|
|
110
174
|
.use-var(font-size, steps-icon-num-font-size);
|
111
175
|
.use-var(line-height, steps-icon-num-line-height);
|
112
176
|
.use-var(color, steps-icon-num-color);
|
113
|
-
.text-medium
|
177
|
+
.text-medium();
|
114
178
|
|
115
179
|
.process & {
|
116
180
|
.use-var(color, steps-process-icon-num-color);
|
@@ -142,17 +206,21 @@
|
|
142
206
|
}
|
143
207
|
|
144
208
|
&-content {
|
145
|
-
text-align: center;
|
146
209
|
|
147
210
|
.horizontal & {
|
148
211
|
.use-var(margin-top, steps-horizontal-content-margin-top);
|
212
|
+
&-align-center {
|
213
|
+
text-align: center;
|
214
|
+
}
|
149
215
|
}
|
150
216
|
|
151
217
|
.vertical & {
|
152
218
|
.use-var(margin-left, steps-vertical-content-margin-left);
|
153
|
-
text-align: left;
|
154
219
|
flex: 1;
|
155
|
-
|
220
|
+
|
221
|
+
&-align-start {
|
222
|
+
.use-var(padding-bottom, steps-vertical-content-padding-bottom);
|
223
|
+
}
|
156
224
|
}
|
157
225
|
}
|
158
226
|
|