Skip to content

Commit 2c8ae7c

Browse files
QiuShuiBaiQiuShuiBai
committed
feat(rn): button tip适配
1 parent 5d6713c commit 2c8ae7c

File tree

9 files changed

+65
-13
lines changed

9 files changed

+65
-13
lines changed

‎packages/mpx-cube-ui/lib/common/stylus/theme/components/button.rn.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ $btn-with-tip-font-size := $font-size-sm
6363
$btn-with-tip-line-height := 100%
6464
$btn-tip-line-height := 109%
6565
$btn-tip-weight := normal
66-
$btn-tip-color := #000000
66+
$btn-tip-color := $btn-color
6767

6868
// btn-loading
6969
$btn-loading-dot-bgc := $btn-loading-dot-normal-color

‎packages/mpx-cube-ui/lib/components/button/button.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ createComponent({
185185
// @ts-ignore
186186
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
187187
const res = {
188+
'cube-btn-content-with-tip': this.tip,
188189
'cube-btn-content-inline': this.inline,
189190
'cube-btn-content-primary': this.primary,
190191
'cube-btn-content-outline': this.outline,
@@ -203,6 +204,23 @@ createComponent({
203204
return res;
204205
}
205206
return {};
207+
},
208+
tipClass() {
209+
// eslint-disable-next-line
210+
// @ts-ignore
211+
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
212+
const res = {
213+
'cube-btn-tip-inline': this.inline,
214+
'cube-btn-tip-primary': this.primary,
215+
'cube-btn-tip-outline': this.outline,
216+
'cube-btn-tip-outline-primary': this.outline && this.primary,
217+
'cube-btn-tip-light': this.light,
218+
'cube-btn-tip_disabled': this.disabled,
219+
'cube-btn-tip_bolder': this.bolder
220+
};
221+
return res;
222+
}
223+
return {};
206224
}
207225
},
208226
methods: {

‎packages/mpx-cube-ui/lib/components/button/css.rn.styl‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,8 @@ border-color($border-color)
3939
outline none
4040
border-width 0
4141
border-radius $var(btn-border-radius)
42-
line-height $var(btn-block-line-height)
4342
text-align center
4443
flex-wrap nowrap
45-
color $var(btn-color)
4644
-webkit-tap-highlight-color rgba(0, 0, 0, 0)
4745
background-color $var(btn-bgc)
4846
border-1px($var(btn-border-color), $var(btn-border-radius))
@@ -65,6 +63,7 @@ btn_active('', $var(btn-bgc_active), $var(btn-border-color_active), $var(btn-col
6563
justify-content: center
6664
text-align center
6765
color $var(btn-color)
66+
line-height $var(btn-block-line-height)
6867

6968
.cube-btn-tip
7069
margin-top $var(btn-tip-margin-top)
@@ -96,6 +95,8 @@ btn_active('inline', $var(btn-bgc_active), $var(btn-border-color_active), $var(b
9695
.cube-btn-content-primary
9796
color $var(btn-primary-color)
9897
font-weight $var(btn-primary-font-weight)
98+
.cube-btn-tip-primary
99+
color $var(btn-primary-color)
99100
btn_active('primary', $var(btn-primary-bgc_active), , $var(btn-primary-color_active))
100101

101102
.cube-btn-light
@@ -104,6 +105,8 @@ btn_active('primary', $var(btn-primary-bgc_active), , $var(btn-primary-color_act
104105
.cube-btn-content-light
105106
color $var(btn-light-color)
106107
font-weight $var(btn-outline-font-weight)
108+
.cube-btn-tip-light
109+
color $var(btn-light-color)
107110
btn_active('light', $var(btn-light-bgc_active), $var(btn-light-border-color), $var(btn-light-color))
108111

109112
.cube-btn-outline
@@ -112,14 +115,17 @@ btn_active('light', $var(btn-light-bgc_active), $var(btn-light-border-color), $v
112115
.cube-btn-content-outline
113116
color $var(btn-outline-color)
114117
font-weight $var(btn-outline-font-weight)
118+
.cube-btn-tip-outline
119+
color $var(btn-outline-color)
115120
btn_active('outline', $var(btn-outline-bgc_active), $var(btn-outline-border-color_active), $var(btn-outline-color))
116121

117122
.cube-btn-outline-primary
118123
border-color($var(btn-outline-primary-border-color))
119124
background-color $var(btn-outline-primary-bgc)
120125
.cube-btn-content-outline-primary
121126
color $var(btn-outline-primary-color)
122-
127+
.cube-btn-tip-outline-primary
128+
color $var(btn-outline-primary-color)
123129
btn_active('outline-primary', $var(btn-outline-primary-bgc_active), $var(btn-outline-primary-border-color), $var(btn-outline-primary-color))
124130

125131
.cube-btn_disabled
@@ -128,13 +134,15 @@ btn_active('outline-primary', $var(btn-outline-primary-bgc_active), $var(btn-out
128134
.cube-btn-content_disabled
129135
color $var(btn-disabled-color)
130136
font-weight $var(btn-disabled-font-weight)
137+
.cube-btn-tip_disabled
138+
color $var(btn-disabled-color)
131139
btn_active('disabled', $var(btn-disabled-bgc), $var(btn-disabled-border-color), $var(btn-disabled-color), 1)
132140

133141
.cube-btn-with-tip
134142
padding-top $var(btn-with-tip-padding-top)
135143
padding-bottom $var(btn-with-tip-padding-bottom)
144+
.cube-btn-content-with-tip
136145
line-height $var(btn-with-tip-line-height)
137146
font-size $var(btn-with-tip-font-size)
138-
139147
.cube-btn-content_bolder
140148
font-weight 700

‎packages/mpx-cube-ui/lib/components/button/index.mpx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
<view class="cube-btn-content" numberOfLines="{{ 1 }}" wx:class="{{ contentClass }}" wx:style="{{ styleConfig.content }}">
4040
<slot />
4141
</view>
42-
<view class="cube-btn-tip" wx:if="{{ tip }}">
42+
<view class="cube-btn-tip" wx:class="{{ tipClass }}" wx:if="{{ tip }}">
4343
<text class="cube-btn-tip-text" numberOfLines="{{ 1 }}">{{tip}}</text>
4444
</view>
4545
<slot name="tip" />

‎packages/mpx-cube-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mpxjs/mpx-cube-ui",
3-
"version": "1.3.13-rn.0",
3+
"version": "1.4.0-harmony.1",
44
"description": "mpx components library",
55
"author": "xiaolei <[email protected]>",
66
"publishConfig": {

‎packages/mpx-cube-ui/src/common/stylus/theme/components/button.rn.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ $btn-with-tip-font-size := $font-size-sm
6363
$btn-with-tip-line-height := 100%
6464
$btn-tip-line-height := 109%
6565
$btn-tip-weight := normal
66-
$btn-tip-color := #000000
66+
$btn-tip-color := $btn-color
6767

6868
// btn-loading
6969
$btn-loading-dot-bgc := $btn-loading-dot-normal-color

‎packages/mpx-cube-ui/src/components/button/button.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ createComponent({
187187
// @ts-ignore
188188
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
189189
const res = {
190+
'cube-btn-content-with-tip': this.tip,
190191
'cube-btn-content-inline': this.inline,
191192
'cube-btn-content-primary': this.primary,
192193
'cube-btn-content-outline': this.outline,
@@ -205,6 +206,23 @@ createComponent({
205206
return res
206207
}
207208
return {}
209+
},
210+
tipClass() {
211+
// eslint-disable-next-line
212+
// @ts-ignore
213+
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
214+
const res = {
215+
'cube-btn-tip-inline': this.inline,
216+
'cube-btn-tip-primary': this.primary,
217+
'cube-btn-tip-outline': this.outline,
218+
'cube-btn-tip-outline-primary': this.outline && this.primary,
219+
'cube-btn-tip-light': this.light,
220+
'cube-btn-tip_disabled': this.disabled,
221+
'cube-btn-tip_bolder': this.bolder
222+
}
223+
return res
224+
}
225+
return {}
208226
}
209227
},
210228
methods: {

‎packages/mpx-cube-ui/src/components/button/css.rn.styl‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,8 @@ border-color($border-color)
3939
outline none
4040
border-width 0
4141
border-radius $var(btn-border-radius)
42-
line-height $var(btn-block-line-height)
4342
text-align center
4443
flex-wrap nowrap
45-
color $var(btn-color)
4644
-webkit-tap-highlight-color rgba(0, 0, 0, 0)
4745
background-color $var(btn-bgc)
4846
border-1px($var(btn-border-color), $var(btn-border-radius))
@@ -65,6 +63,7 @@ btn_active('', $var(btn-bgc_active), $var(btn-border-color_active), $var(btn-col
6563
justify-content: center
6664
text-align center
6765
color $var(btn-color)
66+
line-height $var(btn-block-line-height)
6867

6968
.cube-btn-tip
7069
margin-top $var(btn-tip-margin-top)
@@ -96,6 +95,8 @@ btn_active('inline', $var(btn-bgc_active), $var(btn-border-color_active), $var(b
9695
.cube-btn-content-primary
9796
color $var(btn-primary-color)
9897
font-weight $var(btn-primary-font-weight)
98+
.cube-btn-tip-primary
99+
color $var(btn-primary-color)
99100
btn_active('primary', $var(btn-primary-bgc_active), , $var(btn-primary-color_active))
100101

101102
.cube-btn-light
@@ -104,6 +105,8 @@ btn_active('primary', $var(btn-primary-bgc_active), , $var(btn-primary-color_act
104105
.cube-btn-content-light
105106
color $var(btn-light-color)
106107
font-weight $var(btn-outline-font-weight)
108+
.cube-btn-tip-light
109+
color $var(btn-light-color)
107110
btn_active('light', $var(btn-light-bgc_active), $var(btn-light-border-color), $var(btn-light-color))
108111

109112
.cube-btn-outline
@@ -112,14 +115,17 @@ btn_active('light', $var(btn-light-bgc_active), $var(btn-light-border-color), $v
112115
.cube-btn-content-outline
113116
color $var(btn-outline-color)
114117
font-weight $var(btn-outline-font-weight)
118+
.cube-btn-tip-outline
119+
color $var(btn-outline-color)
115120
btn_active('outline', $var(btn-outline-bgc_active), $var(btn-outline-border-color_active), $var(btn-outline-color))
116121

117122
.cube-btn-outline-primary
118123
border-color($var(btn-outline-primary-border-color))
119124
background-color $var(btn-outline-primary-bgc)
120125
.cube-btn-content-outline-primary
121126
color $var(btn-outline-primary-color)
122-
127+
.cube-btn-tip-outline-primary
128+
color $var(btn-outline-primary-color)
123129
btn_active('outline-primary', $var(btn-outline-primary-bgc_active), $var(btn-outline-primary-border-color), $var(btn-outline-primary-color))
124130

125131
.cube-btn_disabled
@@ -128,13 +134,15 @@ btn_active('outline-primary', $var(btn-outline-primary-bgc_active), $var(btn-out
128134
.cube-btn-content_disabled
129135
color $var(btn-disabled-color)
130136
font-weight $var(btn-disabled-font-weight)
137+
.cube-btn-tip_disabled
138+
color $var(btn-disabled-color)
131139
btn_active('disabled', $var(btn-disabled-bgc), $var(btn-disabled-border-color), $var(btn-disabled-color), 1)
132140

133141
.cube-btn-with-tip
134142
padding-top $var(btn-with-tip-padding-top)
135143
padding-bottom $var(btn-with-tip-padding-bottom)
144+
.cube-btn-content-with-tip
136145
line-height $var(btn-with-tip-line-height)
137146
font-size $var(btn-with-tip-font-size)
138-
139147
.cube-btn-content_bolder
140148
font-weight 700

‎packages/mpx-cube-ui/src/components/button/index.mpx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
<view class="cube-btn-content" numberOfLines="{{ 1 }}" wx:class="{{ contentClass }}" wx:style="{{ styleConfig.content }}">
4040
<slot />
4141
</view>
42-
<view class="cube-btn-tip" wx:if="{{ tip }}">
42+
<view class="cube-btn-tip" wx:class="{{ tipClass }}" wx:if="{{ tip }}">
4343
<text class="cube-btn-tip-text" numberOfLines="{{ 1 }}">{{tip}}</text>
4444
</view>
4545
<slot name="tip" />

0 commit comments

Comments
 (0)