@nutui/nutui-react 4.0.0-beta.3 → 4.0.0-beta.4
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 +13 -6
- package/dist/cjs/packages/configprovider/types.d.ts +1 -1
- package/dist/cjs/packages/empty/empty.d.ts +4 -11
- package/dist/cjs/packages/empty/empty.js +21 -17
- package/dist/cjs/packages/empty/index.d.ts +1 -1
- package/dist/cjs/packages/empty/style/empty.scss +97 -31
- package/dist/cjs/packages/empty/style/style.css +77 -32
- package/dist/cjs/packages/empty/style-jmapp/empty.scss +97 -31
- package/dist/cjs/packages/empty/style-jmapp/style.css +77 -32
- package/dist/cjs/packages/empty/style-jrkf/empty.scss +97 -31
- package/dist/cjs/packages/empty/style-jrkf/style.css +77 -32
- package/dist/cjs/packages/rate/index.d.ts +1 -1
- package/dist/cjs/packages/rate/rate.js +54 -8
- package/dist/cjs/packages/rate/style/rate.scss +244 -76
- package/dist/cjs/packages/rate/style/style.css +198 -68
- package/dist/cjs/packages/rate/style-jmapp/rate.scss +244 -76
- package/dist/cjs/packages/rate/style-jmapp/style.css +198 -68
- package/dist/cjs/packages/rate/style-jrkf/rate.scss +244 -76
- package/dist/cjs/packages/rate/style-jrkf/style.css +198 -68
- package/dist/cjs/packages/steps/style/style.css +1 -1
- package/dist/cjs/types/spec/empty/base.d.ts +12 -8
- package/dist/cjs/types/spec/empty/base.js +28 -1
- package/dist/cjs/types/spec/rate/base.d.ts +3 -0
- package/dist/es/packages/configprovider/types.d.ts +1 -1
- package/dist/es/packages/empty/empty.d.ts +4 -11
- package/dist/es/packages/empty/empty.js +21 -17
- package/dist/es/packages/empty/index.d.ts +1 -1
- package/dist/es/packages/empty/style/empty.scss +97 -31
- package/dist/es/packages/empty/style/style.css +77 -32
- package/dist/es/packages/empty/style-jmapp/empty.scss +97 -31
- package/dist/es/packages/empty/style-jmapp/style.css +77 -32
- package/dist/es/packages/empty/style-jrkf/empty.scss +97 -31
- package/dist/es/packages/empty/style-jrkf/style.css +77 -32
- package/dist/es/packages/rate/index.d.ts +1 -1
- package/dist/es/packages/rate/rate.js +54 -8
- package/dist/es/packages/rate/style/rate.scss +244 -76
- package/dist/es/packages/rate/style/style.css +198 -68
- package/dist/es/packages/rate/style-jmapp/rate.scss +244 -76
- package/dist/es/packages/rate/style-jmapp/style.css +198 -68
- package/dist/es/packages/rate/style-jrkf/rate.scss +244 -76
- package/dist/es/packages/rate/style-jrkf/style.css +198 -68
- package/dist/es/packages/steps/style/style.css +1 -1
- package/dist/es/types/spec/empty/base.d.ts +15 -11
- package/dist/es/types/spec/empty/base.js +13 -1
- package/dist/es/types/spec/rate/base.d.ts +9 -0
- package/dist/nutui.react.umd.js +92 -30
- package/dist/style-jmapp.css +1 -1
- package/dist/style-jmapp.scss +37 -37
- package/dist/style-jrkf.css +1 -1
- package/dist/style-jrkf.scss +33 -33
- package/dist/style.css +1 -1
- package/dist/style.scss +34 -34
- package/dist/styles/variables-daojia.scss +25 -12
- package/dist/styles/variables-jmapp.scss +42 -17
- package/dist/styles/variables-jrkf.scss +24 -20
- package/dist/styles/variables.scss +32 -24
- package/package.json +1 -1
|
@@ -6,23 +6,8 @@
|
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: center;
|
|
8
8
|
padding: $empty-padding;
|
|
9
|
-
background-color: $empty-background-color;
|
|
10
|
-
|
|
11
|
-
&-base {
|
|
12
|
-
width: $empty-image-size;
|
|
13
|
-
height: $empty-image-size;
|
|
14
|
-
|
|
15
|
-
img,
|
|
16
|
-
image {
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&-small {
|
|
23
|
-
width: $empty-image-small-size;
|
|
24
|
-
height: $empty-image-small-size;
|
|
25
9
|
|
|
10
|
+
&-image {
|
|
26
11
|
img,
|
|
27
12
|
image {
|
|
28
13
|
width: 100%;
|
|
@@ -31,32 +16,113 @@
|
|
|
31
16
|
}
|
|
32
17
|
|
|
33
18
|
&-title {
|
|
34
|
-
|
|
19
|
+
text-align: center;
|
|
20
|
+
color: $empty-title-color;
|
|
35
21
|
font-weight: $font-weight-bold;
|
|
36
|
-
margin-bottom: $empty-title-margin-bottom;
|
|
37
|
-
color: $color-title;
|
|
38
|
-
font-size: $font-size-l;
|
|
39
|
-
line-height: $empty-title-line-height;
|
|
40
22
|
}
|
|
41
23
|
|
|
42
24
|
&-description {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
&-actions-base {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: $empty-description-color;
|
|
27
|
+
font-weight: $font-weight;
|
|
51
28
|
}
|
|
52
|
-
|
|
29
|
+
|
|
30
|
+
&-actions {
|
|
53
31
|
display: flex;
|
|
54
32
|
flex-direction: row;
|
|
55
|
-
|
|
33
|
+
justify-content: center;
|
|
56
34
|
}
|
|
57
35
|
|
|
58
36
|
&-action {
|
|
59
37
|
margin-right: scale-px(6px);
|
|
60
38
|
margin-left: scale-px(6px);
|
|
61
39
|
}
|
|
40
|
+
|
|
41
|
+
&-partial-body {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
align-items: center;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&-content {
|
|
49
|
+
flex: 1;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// 全屏型：整页无数据
|
|
54
|
+
&--full {
|
|
55
|
+
padding-top: $empty-full-padding-top;
|
|
56
|
+
|
|
57
|
+
.nut-empty-image {
|
|
58
|
+
width: $empty-full-image-size;
|
|
59
|
+
height: $empty-full-image-size;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.nut-empty-title {
|
|
63
|
+
font-size: $empty-full-title-font-size;
|
|
64
|
+
line-height: $empty-full-title-line-height;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.nut-empty-description {
|
|
68
|
+
font-size: $empty-full-description-font-size;
|
|
69
|
+
line-height: $empty-full-description-line-height;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nut-empty-actions {
|
|
73
|
+
margin-top: $empty-full-actions-margin-top;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// 半屏型：模块、弹层等区域
|
|
78
|
+
&--half {
|
|
79
|
+
.nut-empty-image {
|
|
80
|
+
width: $empty-half-image-size;
|
|
81
|
+
height: $empty-half-image-size;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nut-empty-title {
|
|
85
|
+
font-size: $empty-half-title-font-size;
|
|
86
|
+
line-height: $empty-half-title-line-height;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nut-empty-description {
|
|
90
|
+
font-size: $empty-half-description-font-size;
|
|
91
|
+
line-height: $empty-half-description-line-height;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.nut-empty-actions {
|
|
95
|
+
margin-top: $empty-half-actions-margin-top;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// 局部型：横向图文
|
|
100
|
+
&--partial {
|
|
101
|
+
padding: $empty-partial-padding;
|
|
102
|
+
|
|
103
|
+
.nut-empty-partial-body {
|
|
104
|
+
gap: $empty-partial-content-gap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nut-empty-image {
|
|
108
|
+
width: $empty-partial-image-size;
|
|
109
|
+
height: $empty-partial-image-size;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.nut-empty-title {
|
|
113
|
+
text-align: left;
|
|
114
|
+
font-size: $empty-partial-description-font-size;
|
|
115
|
+
line-height: $empty-partial-description-line-height;
|
|
116
|
+
color: $empty-title-color;
|
|
117
|
+
font-weight: $font-weight;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.nut-empty-description {
|
|
121
|
+
text-align: left;
|
|
122
|
+
font-size: $empty-partial-description-font-size;
|
|
123
|
+
line-height: $empty-partial-description-line-height;
|
|
124
|
+
color: $empty-description-color;
|
|
125
|
+
font-weight: $font-weight;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
62
128
|
}
|
|
@@ -9,51 +9,96 @@
|
|
|
9
9
|
align-items: center;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
justify-content: center;
|
|
12
|
-
padding: var(--nutui-empty-padding,
|
|
13
|
-
background-color: var(--nutui-empty-background-color, #fff);
|
|
12
|
+
padding: var(--nutui-empty-padding, 20px);
|
|
14
13
|
}
|
|
15
|
-
.nut-empty-
|
|
16
|
-
|
|
17
|
-
height: var(--nutui-empty-image-size, 160px);
|
|
18
|
-
}
|
|
19
|
-
.nut-empty-base img,
|
|
20
|
-
.nut-empty-base image {
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
}
|
|
24
|
-
.nut-empty-small {
|
|
25
|
-
width: var(--nutui-empty-image-small-size, 120px);
|
|
26
|
-
height: var(--nutui-empty-image-small-size, 120px);
|
|
27
|
-
}
|
|
28
|
-
.nut-empty-small img,
|
|
29
|
-
.nut-empty-small image {
|
|
14
|
+
.nut-empty-image img,
|
|
15
|
+
.nut-empty-image image {
|
|
30
16
|
width: 100%;
|
|
31
17
|
height: 100%;
|
|
32
18
|
}
|
|
33
19
|
.nut-empty-title {
|
|
34
|
-
|
|
20
|
+
text-align: center;
|
|
21
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
35
22
|
font-weight: var(--nutui-font-weight-bold);
|
|
36
|
-
margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
|
|
37
|
-
color: var(--nutui-color-title);
|
|
38
|
-
font-size: var(--nutui-font-text-large);
|
|
39
|
-
line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
|
|
40
23
|
}
|
|
41
24
|
.nut-empty-description {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
.nut-empty-actions-base {
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
27
|
+
font-weight: var(--nutui-font-weight);
|
|
50
28
|
}
|
|
51
|
-
.nut-empty-actions
|
|
29
|
+
.nut-empty-actions {
|
|
52
30
|
display: flex;
|
|
53
31
|
flex-direction: row;
|
|
54
|
-
|
|
32
|
+
justify-content: center;
|
|
55
33
|
}
|
|
56
34
|
.nut-empty-action {
|
|
57
35
|
margin-right: scale-px(6px);
|
|
58
36
|
margin-left: scale-px(6px);
|
|
37
|
+
}
|
|
38
|
+
.nut-empty-partial-body {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
align-items: center;
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
}
|
|
44
|
+
.nut-empty-content {
|
|
45
|
+
flex: 1;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
}
|
|
48
|
+
.nut-empty--full {
|
|
49
|
+
padding-top: var(--nutui-empty-full-padding-top, 160px);
|
|
50
|
+
}
|
|
51
|
+
.nut-empty--full .nut-empty-image {
|
|
52
|
+
width: var(--nutui-empty-full-image-size, 160px);
|
|
53
|
+
height: var(--nutui-empty-full-image-size, 160px);
|
|
54
|
+
}
|
|
55
|
+
.nut-empty--full .nut-empty-title {
|
|
56
|
+
font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
|
|
57
|
+
line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
|
|
58
|
+
}
|
|
59
|
+
.nut-empty--full .nut-empty-description {
|
|
60
|
+
font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
|
|
61
|
+
line-height: var(--nutui-empty-full-description-line-height, 22px);
|
|
62
|
+
}
|
|
63
|
+
.nut-empty--full .nut-empty-actions {
|
|
64
|
+
margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
|
|
65
|
+
}
|
|
66
|
+
.nut-empty--half .nut-empty-image {
|
|
67
|
+
width: var(--nutui-empty-half-image-size, 80px);
|
|
68
|
+
height: var(--nutui-empty-half-image-size, 80px);
|
|
69
|
+
}
|
|
70
|
+
.nut-empty--half .nut-empty-title {
|
|
71
|
+
font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
|
|
72
|
+
line-height: var(--nutui-empty-half-title-line-height, 22px);
|
|
73
|
+
}
|
|
74
|
+
.nut-empty--half .nut-empty-description {
|
|
75
|
+
font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
76
|
+
line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
|
|
77
|
+
}
|
|
78
|
+
.nut-empty--half .nut-empty-actions {
|
|
79
|
+
margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
|
|
80
|
+
}
|
|
81
|
+
.nut-empty--partial {
|
|
82
|
+
padding: var(--nutui-empty-partial-padding, 0px 16px);
|
|
83
|
+
}
|
|
84
|
+
.nut-empty--partial .nut-empty-partial-body {
|
|
85
|
+
gap: var(--nutui-empty-partial-content-gap, 8px);
|
|
86
|
+
}
|
|
87
|
+
.nut-empty--partial .nut-empty-image {
|
|
88
|
+
width: var(--nutui-empty-partial-image-size, 32px);
|
|
89
|
+
height: var(--nutui-empty-partial-image-size, 32px);
|
|
90
|
+
}
|
|
91
|
+
.nut-empty--partial .nut-empty-title {
|
|
92
|
+
text-align: left;
|
|
93
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
94
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
95
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
96
|
+
font-weight: var(--nutui-font-weight);
|
|
97
|
+
}
|
|
98
|
+
.nut-empty--partial .nut-empty-description {
|
|
99
|
+
text-align: left;
|
|
100
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
101
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
102
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
103
|
+
font-weight: var(--nutui-font-weight);
|
|
59
104
|
}
|
|
@@ -6,23 +6,8 @@
|
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: center;
|
|
8
8
|
padding: $empty-padding;
|
|
9
|
-
background-color: $empty-background-color;
|
|
10
|
-
|
|
11
|
-
&-base {
|
|
12
|
-
width: $empty-image-size;
|
|
13
|
-
height: $empty-image-size;
|
|
14
|
-
|
|
15
|
-
img,
|
|
16
|
-
image {
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&-small {
|
|
23
|
-
width: $empty-image-small-size;
|
|
24
|
-
height: $empty-image-small-size;
|
|
25
9
|
|
|
10
|
+
&-image {
|
|
26
11
|
img,
|
|
27
12
|
image {
|
|
28
13
|
width: 100%;
|
|
@@ -31,32 +16,113 @@
|
|
|
31
16
|
}
|
|
32
17
|
|
|
33
18
|
&-title {
|
|
34
|
-
|
|
19
|
+
text-align: center;
|
|
20
|
+
color: $empty-title-color;
|
|
35
21
|
font-weight: $font-weight-bold;
|
|
36
|
-
margin-bottom: $empty-title-margin-bottom;
|
|
37
|
-
color: $color-title;
|
|
38
|
-
font-size: $font-size-l;
|
|
39
|
-
line-height: $empty-title-line-height;
|
|
40
22
|
}
|
|
41
23
|
|
|
42
24
|
&-description {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
&-actions-base {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: $empty-description-color;
|
|
27
|
+
font-weight: $font-weight;
|
|
51
28
|
}
|
|
52
|
-
|
|
29
|
+
|
|
30
|
+
&-actions {
|
|
53
31
|
display: flex;
|
|
54
32
|
flex-direction: row;
|
|
55
|
-
|
|
33
|
+
justify-content: center;
|
|
56
34
|
}
|
|
57
35
|
|
|
58
36
|
&-action {
|
|
59
37
|
margin-right: scale-px(6px);
|
|
60
38
|
margin-left: scale-px(6px);
|
|
61
39
|
}
|
|
40
|
+
|
|
41
|
+
&-partial-body {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
align-items: center;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&-content {
|
|
49
|
+
flex: 1;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// 全屏型：整页无数据
|
|
54
|
+
&--full {
|
|
55
|
+
padding-top: $empty-full-padding-top;
|
|
56
|
+
|
|
57
|
+
.nut-empty-image {
|
|
58
|
+
width: $empty-full-image-size;
|
|
59
|
+
height: $empty-full-image-size;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.nut-empty-title {
|
|
63
|
+
font-size: $empty-full-title-font-size;
|
|
64
|
+
line-height: $empty-full-title-line-height;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.nut-empty-description {
|
|
68
|
+
font-size: $empty-full-description-font-size;
|
|
69
|
+
line-height: $empty-full-description-line-height;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nut-empty-actions {
|
|
73
|
+
margin-top: $empty-full-actions-margin-top;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// 半屏型：模块、弹层等区域
|
|
78
|
+
&--half {
|
|
79
|
+
.nut-empty-image {
|
|
80
|
+
width: $empty-half-image-size;
|
|
81
|
+
height: $empty-half-image-size;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nut-empty-title {
|
|
85
|
+
font-size: $empty-half-title-font-size;
|
|
86
|
+
line-height: $empty-half-title-line-height;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nut-empty-description {
|
|
90
|
+
font-size: $empty-half-description-font-size;
|
|
91
|
+
line-height: $empty-half-description-line-height;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.nut-empty-actions {
|
|
95
|
+
margin-top: $empty-half-actions-margin-top;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// 局部型：横向图文
|
|
100
|
+
&--partial {
|
|
101
|
+
padding: $empty-partial-padding;
|
|
102
|
+
|
|
103
|
+
.nut-empty-partial-body {
|
|
104
|
+
gap: $empty-partial-content-gap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nut-empty-image {
|
|
108
|
+
width: $empty-partial-image-size;
|
|
109
|
+
height: $empty-partial-image-size;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.nut-empty-title {
|
|
113
|
+
text-align: left;
|
|
114
|
+
font-size: $empty-partial-description-font-size;
|
|
115
|
+
line-height: $empty-partial-description-line-height;
|
|
116
|
+
color: $empty-title-color;
|
|
117
|
+
font-weight: $font-weight;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.nut-empty-description {
|
|
121
|
+
text-align: left;
|
|
122
|
+
font-size: $empty-partial-description-font-size;
|
|
123
|
+
line-height: $empty-partial-description-line-height;
|
|
124
|
+
color: $empty-description-color;
|
|
125
|
+
font-weight: $font-weight;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
62
128
|
}
|
|
@@ -9,51 +9,96 @@
|
|
|
9
9
|
align-items: center;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
justify-content: center;
|
|
12
|
-
padding: var(--nutui-empty-padding,
|
|
13
|
-
background-color: var(--nutui-empty-background-color, #fff);
|
|
12
|
+
padding: var(--nutui-empty-padding, 20px);
|
|
14
13
|
}
|
|
15
|
-
.nut-empty-
|
|
16
|
-
|
|
17
|
-
height: var(--nutui-empty-image-size, 160px);
|
|
18
|
-
}
|
|
19
|
-
.nut-empty-base img,
|
|
20
|
-
.nut-empty-base image {
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
}
|
|
24
|
-
.nut-empty-small {
|
|
25
|
-
width: var(--nutui-empty-image-small-size, 120px);
|
|
26
|
-
height: var(--nutui-empty-image-small-size, 120px);
|
|
27
|
-
}
|
|
28
|
-
.nut-empty-small img,
|
|
29
|
-
.nut-empty-small image {
|
|
14
|
+
.nut-empty-image img,
|
|
15
|
+
.nut-empty-image image {
|
|
30
16
|
width: 100%;
|
|
31
17
|
height: 100%;
|
|
32
18
|
}
|
|
33
19
|
.nut-empty-title {
|
|
34
|
-
|
|
20
|
+
text-align: center;
|
|
21
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
35
22
|
font-weight: var(--nutui-font-weight-bold);
|
|
36
|
-
margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
|
|
37
|
-
color: var(--nutui-color-title);
|
|
38
|
-
font-size: var(--nutui-font-text-large);
|
|
39
|
-
line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
|
|
40
23
|
}
|
|
41
24
|
.nut-empty-description {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
.nut-empty-actions-base {
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
27
|
+
font-weight: var(--nutui-font-weight);
|
|
50
28
|
}
|
|
51
|
-
.nut-empty-actions
|
|
29
|
+
.nut-empty-actions {
|
|
52
30
|
display: flex;
|
|
53
31
|
flex-direction: row;
|
|
54
|
-
|
|
32
|
+
justify-content: center;
|
|
55
33
|
}
|
|
56
34
|
.nut-empty-action {
|
|
57
35
|
margin-right: scale-px(6px);
|
|
58
36
|
margin-left: scale-px(6px);
|
|
37
|
+
}
|
|
38
|
+
.nut-empty-partial-body {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
align-items: center;
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
}
|
|
44
|
+
.nut-empty-content {
|
|
45
|
+
flex: 1;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
}
|
|
48
|
+
.nut-empty--full {
|
|
49
|
+
padding-top: var(--nutui-empty-full-padding-top, 160px);
|
|
50
|
+
}
|
|
51
|
+
.nut-empty--full .nut-empty-image {
|
|
52
|
+
width: var(--nutui-empty-full-image-size, 160px);
|
|
53
|
+
height: var(--nutui-empty-full-image-size, 160px);
|
|
54
|
+
}
|
|
55
|
+
.nut-empty--full .nut-empty-title {
|
|
56
|
+
font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
|
|
57
|
+
line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
|
|
58
|
+
}
|
|
59
|
+
.nut-empty--full .nut-empty-description {
|
|
60
|
+
font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
|
|
61
|
+
line-height: var(--nutui-empty-full-description-line-height, 22px);
|
|
62
|
+
}
|
|
63
|
+
.nut-empty--full .nut-empty-actions {
|
|
64
|
+
margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
|
|
65
|
+
}
|
|
66
|
+
.nut-empty--half .nut-empty-image {
|
|
67
|
+
width: var(--nutui-empty-half-image-size, 80px);
|
|
68
|
+
height: var(--nutui-empty-half-image-size, 80px);
|
|
69
|
+
}
|
|
70
|
+
.nut-empty--half .nut-empty-title {
|
|
71
|
+
font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
|
|
72
|
+
line-height: var(--nutui-empty-half-title-line-height, 22px);
|
|
73
|
+
}
|
|
74
|
+
.nut-empty--half .nut-empty-description {
|
|
75
|
+
font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
76
|
+
line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
|
|
77
|
+
}
|
|
78
|
+
.nut-empty--half .nut-empty-actions {
|
|
79
|
+
margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
|
|
80
|
+
}
|
|
81
|
+
.nut-empty--partial {
|
|
82
|
+
padding: var(--nutui-empty-partial-padding, 0px 16px);
|
|
83
|
+
}
|
|
84
|
+
.nut-empty--partial .nut-empty-partial-body {
|
|
85
|
+
gap: var(--nutui-empty-partial-content-gap, 8px);
|
|
86
|
+
}
|
|
87
|
+
.nut-empty--partial .nut-empty-image {
|
|
88
|
+
width: var(--nutui-empty-partial-image-size, 32px);
|
|
89
|
+
height: var(--nutui-empty-partial-image-size, 32px);
|
|
90
|
+
}
|
|
91
|
+
.nut-empty--partial .nut-empty-title {
|
|
92
|
+
text-align: left;
|
|
93
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
94
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
95
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
96
|
+
font-weight: var(--nutui-font-weight);
|
|
97
|
+
}
|
|
98
|
+
.nut-empty--partial .nut-empty-description {
|
|
99
|
+
text-align: left;
|
|
100
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
101
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
102
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
103
|
+
font-weight: var(--nutui-font-weight);
|
|
59
104
|
}
|
|
@@ -23,6 +23,7 @@ var _getrect = require("../../utils/get-rect");
|
|
|
23
23
|
var _userefs = require("../../hooks/use-refs");
|
|
24
24
|
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
|
|
25
25
|
size: 'normal',
|
|
26
|
+
direction: 'horizontal',
|
|
26
27
|
showScore: false,
|
|
27
28
|
count: 5,
|
|
28
29
|
min: 0,
|
|
@@ -34,15 +35,29 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
|
|
|
34
35
|
touchable: false
|
|
35
36
|
});
|
|
36
37
|
var Rate = function Rate(props) {
|
|
37
|
-
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
|
|
38
|
+
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, direction = _$_object_spread.direction, label = _$_object_spread.label, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
|
|
38
39
|
var classPrefix = 'nut-rate';
|
|
39
|
-
var
|
|
40
|
+
var shouldAnimate = direction === 'vertical' || size === 'large';
|
|
41
|
+
var _useState = (0, _sliced_to_array._)((0, _react.useState)(-1), 2), animatingIndex = _useState[0], setAnimatingIndex = _useState[1];
|
|
42
|
+
(0, _react.useEffect)(function() {
|
|
43
|
+
if (animatingIndex >= 0) {
|
|
44
|
+
var timer = setTimeout(function() {
|
|
45
|
+
return setAnimatingIndex(-1);
|
|
46
|
+
}, 300);
|
|
47
|
+
return function() {
|
|
48
|
+
return clearTimeout(timer);
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
}, [
|
|
52
|
+
animatingIndex
|
|
53
|
+
]);
|
|
54
|
+
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([
|
|
40
55
|
1,
|
|
41
56
|
2,
|
|
42
57
|
3,
|
|
43
58
|
4,
|
|
44
59
|
5
|
|
45
|
-
]), 2), countArray =
|
|
60
|
+
]), 2), countArray = _useState1[0], setCountArray = _useState1[1];
|
|
46
61
|
var _useRefs = (0, _sliced_to_array._)((0, _userefs.useRefs)(), 2), refs = _useRefs[0], setRefs = _useRefs[1];
|
|
47
62
|
var rateRects = (0, _react.useRef)([]);
|
|
48
63
|
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
|
|
@@ -74,12 +89,18 @@ var Rate = function Rate(props) {
|
|
|
74
89
|
value = index;
|
|
75
90
|
}
|
|
76
91
|
value = Math.max(value, min);
|
|
92
|
+
if (shouldAnimate && value > score) {
|
|
93
|
+
setAnimatingIndex(index - 1);
|
|
94
|
+
}
|
|
77
95
|
setScore(value);
|
|
78
96
|
};
|
|
79
97
|
var onHalfClick = function onHalfClick(event, n) {
|
|
80
98
|
event.preventDefault();
|
|
81
99
|
event.stopPropagation();
|
|
82
100
|
var value = Math.max(min, n - 0.5);
|
|
101
|
+
if (shouldAnimate && value > score) {
|
|
102
|
+
setAnimatingIndex(n - 1);
|
|
103
|
+
}
|
|
83
104
|
setScore(value);
|
|
84
105
|
};
|
|
85
106
|
var getScoreByPosition = function getScoreByPosition(x) {
|
|
@@ -161,14 +182,41 @@ var Rate = function Rate(props) {
|
|
|
161
182
|
}
|
|
162
183
|
};
|
|
163
184
|
}, []);
|
|
185
|
+
var isArrayLabel = Array.isArray(label);
|
|
186
|
+
var renderSingleLabel = function renderSingleLabel() {
|
|
187
|
+
if (label == null || isArrayLabel) return null;
|
|
188
|
+
return /*#__PURE__*/ _react.default.createElement("span", {
|
|
189
|
+
className: (0, _classnames.default)("".concat(classPrefix, "-label"), "".concat(classPrefix, "-label-").concat(size))
|
|
190
|
+
}, label);
|
|
191
|
+
};
|
|
192
|
+
var renderArrayLabels = function renderArrayLabels() {
|
|
193
|
+
if (!isArrayLabel) return null;
|
|
194
|
+
return /*#__PURE__*/ _react.default.createElement("div", {
|
|
195
|
+
className: (0, _classnames.default)("".concat(classPrefix, "-labels"), "".concat(classPrefix, "-labels-").concat(size))
|
|
196
|
+
}, label.map(function(item, index) {
|
|
197
|
+
return /*#__PURE__*/ _react.default.createElement("span", {
|
|
198
|
+
className: "".concat(classPrefix, "-labels-item"),
|
|
199
|
+
key: index
|
|
200
|
+
}, item);
|
|
201
|
+
}));
|
|
202
|
+
};
|
|
203
|
+
var renderScore = function renderScore() {
|
|
204
|
+
if (!showScore) return null;
|
|
205
|
+
return /*#__PURE__*/ _react.default.createElement("span", {
|
|
206
|
+
className: (0, _classnames.default)("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), (0, _define_property._)({}, "".concat(classPrefix, "-score-disabled"), disabled))
|
|
207
|
+
}, score.toFixed(1));
|
|
208
|
+
};
|
|
164
209
|
return /*#__PURE__*/ _react.default.createElement("div", {
|
|
165
|
-
className: (0, _classnames.default)(classPrefix, {
|
|
210
|
+
className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-").concat(direction), {
|
|
166
211
|
disabled: disabled,
|
|
167
212
|
readonly: readOnly
|
|
168
213
|
}, className),
|
|
169
214
|
ref: rateRef,
|
|
170
215
|
style: style
|
|
216
|
+
}, direction === 'horizontal' && renderSingleLabel(), /*#__PURE__*/ _react.default.createElement("div", {
|
|
217
|
+
className: "".concat(classPrefix, "-list")
|
|
171
218
|
}, countArray.map(function(n, index) {
|
|
219
|
+
var _obj;
|
|
172
220
|
return /*#__PURE__*/ _react.default.createElement("div", {
|
|
173
221
|
className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
|
|
174
222
|
key: n,
|
|
@@ -177,15 +225,13 @@ var Rate = function Rate(props) {
|
|
|
177
225
|
return onClick(event, n);
|
|
178
226
|
}
|
|
179
227
|
}, /*#__PURE__*/ _react.default.createElement("div", {
|
|
180
|
-
className: (0, _classnames.default)("".concat(classPrefix, "-item-icon"), (0, _define_property._)(
|
|
228
|
+
className: (0, _classnames.default)("".concat(classPrefix, "-item-icon"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score), (0, _define_property._)(_obj, "".concat(classPrefix, "-item-icon-animate"), animatingIndex === index), _obj))
|
|
181
229
|
}, renderIcon(n)), allowHalf && score > n - 1 && /*#__PURE__*/ _react.default.createElement("div", {
|
|
182
230
|
className: (0, _classnames.default)("".concat(classPrefix, "-item-half"), "".concat(classPrefix, "-item-icon"), "".concat(classPrefix, "-item-icon-half")),
|
|
183
231
|
onClick: function onClick(event) {
|
|
184
232
|
return onHalfClick(event, n);
|
|
185
233
|
}
|
|
186
234
|
}, renderIcon(n)));
|
|
187
|
-
}),
|
|
188
|
-
className: (0, _classnames.default)("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), (0, _define_property._)({}, "".concat(classPrefix, "-score-disabled"), disabled))
|
|
189
|
-
}, score.toFixed(1)) : null);
|
|
235
|
+
})), direction === 'horizontal' && renderScore(), direction === 'vertical' && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderScore(), isArrayLabel ? renderArrayLabels() : renderSingleLabel()));
|
|
190
236
|
};
|
|
191
237
|
Rate.displayName = 'NutRate';
|