feat: update switch to 1.8.0
parent
ef31389965
commit
1370d4b7e9
|
@ -12,4 +12,5 @@ export const switchPropTypes = {
|
||||||
checked: PropTypes.bool.def(false),
|
checked: PropTypes.bool.def(false),
|
||||||
defaultChecked: PropTypes.bool.def(false),
|
defaultChecked: PropTypes.bool.def(false),
|
||||||
autoFocus: PropTypes.bool.def(false),
|
autoFocus: PropTypes.bool.def(false),
|
||||||
|
loadingIcon: PropTypes.any,
|
||||||
}
|
}
|
||||||
|
|
|
@ -62,8 +62,6 @@ export default {
|
||||||
this.setChecked(false)
|
this.setChecked(false)
|
||||||
} else if (e.keyCode === 39) { // Right
|
} else if (e.keyCode === 39) { // Right
|
||||||
this.setChecked(true)
|
this.setChecked(true)
|
||||||
} else if (e.keyCode === 32 || e.keyCode === 13) { // Space, Enter
|
|
||||||
this.toggle()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleMouseUp (e) {
|
handleMouseUp (e) {
|
||||||
|
@ -80,9 +78,8 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render () {
|
render () {
|
||||||
const { prefixCls, disabled, tabIndex, ...restProps } = getOptionProps(this)
|
const { prefixCls, disabled, loadingIcon, ...restProps } = getOptionProps(this)
|
||||||
const checked = this.stateChecked
|
const checked = this.stateChecked
|
||||||
const switchTabIndex = disabled ? -1 : (tabIndex || 0)
|
|
||||||
const switchClassName = {
|
const switchClassName = {
|
||||||
[prefixCls]: true,
|
[prefixCls]: true,
|
||||||
[`${prefixCls}-checked`]: checked,
|
[`${prefixCls}-checked`]: checked,
|
||||||
|
@ -97,17 +94,21 @@ export default {
|
||||||
mouseup: this.handleMouseUp,
|
mouseup: this.handleMouseUp,
|
||||||
},
|
},
|
||||||
attrs: {
|
attrs: {
|
||||||
tabIndex: switchTabIndex,
|
type: 'button',
|
||||||
|
role: 'switch',
|
||||||
|
'aria-checked': checked,
|
||||||
|
disabled,
|
||||||
},
|
},
|
||||||
class: switchClassName,
|
class: switchClassName,
|
||||||
ref: 'refSwitchNode',
|
ref: 'refSwitchNode',
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<span {...spanProps}>
|
<button {...spanProps}>
|
||||||
|
{loadingIcon}
|
||||||
<span class={`${prefixCls}-inner`}>
|
<span class={`${prefixCls}-inner`}>
|
||||||
{checked ? getComponentFromProp(this, 'checkedChildren') : getComponentFromProp(this, 'unCheckedChildren')}
|
{checked ? getComponentFromProp(this, 'checkedChildren') : getComponentFromProp(this, 'unCheckedChildren')}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</button>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
padding: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-radius: 20px 20px;
|
border-radius: 20px 20px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
|
@ -21,6 +22,7 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 24px;
|
left: 24px;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// base rc-switch 1.6.0
|
// base rc-switch 1.8.0
|
||||||
import Switch from './Switch'
|
import Switch from './Switch'
|
||||||
|
|
||||||
export default Switch
|
export default Switch
|
||||||
|
|
Loading…
Reference in New Issue