refactor: switch #3885
tangjinzhou
4 years ago
parent
67b9da71eb
commit
4a7fcf95f5
@ -1,7 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Switch should has click wave effect 1`] = `
|
||||
<button class="ant-switch ant-switch-checked" type="button" role="switch" aria-checked="true">
|
||||
<button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked">
|
||||
<!----><span class="ant-switch-inner"><!----></span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
@switchPrefixCls: rc-switch;
|
||||
|
||||
@duration: 0.3s;
|
||||
|
||||
.@{switchPrefixCls} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 44px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px 20px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);
|
||||
|
||||
&-inner {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 2px;
|
||||
top: 1px;
|
||||
border-radius: 50% 50%;
|
||||
background-color: #fff;
|
||||
content: ' ';
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
|
||||
transform: scale(1);
|
||||
transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
|
||||
animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
|
||||
animation-duration: @duration;
|
||||
animation-name: rcSwitchOff;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
transform: scale(1.1);
|
||||
animation-name: rcSwitchOn;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px tint(#2db7f5, 80%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
border: 1px solid #87d068;
|
||||
background-color: #87d068;
|
||||
|
||||
.@{switchPrefixCls}-inner {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
cursor: no-drop;
|
||||
background: #ccc;
|
||||
border-color: #ccc;
|
||||
|
||||
&:after {
|
||||
background: #9e9e9e;
|
||||
animation-name: none;
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
transform: scale(1);
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
padding-left: 10px;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSwitchOn {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSwitchOff {
|
||||
0% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
// base rc-switch 1.9.0
|
||||
import Switch from './src/Switch';
|
||||
|
||||
export default Switch;
|
||||
@ -1,16 +0,0 @@
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
|
||||
export const switchPropTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
disabled: PropTypes.looseBool.def(false),
|
||||
checkedChildren: PropTypes.any,
|
||||
unCheckedChildren: PropTypes.any,
|
||||
// onChange: PropTypes.func,
|
||||
// onMouseUp: PropTypes.func,
|
||||
// onClick: PropTypes.func,
|
||||
tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
checked: PropTypes.looseBool,
|
||||
defaultChecked: PropTypes.looseBool.def(false),
|
||||
autofocus: PropTypes.looseBool.def(false),
|
||||
loadingIcon: PropTypes.any,
|
||||
};
|
||||
@ -1,99 +0,0 @@
|
||||
import { switchPropTypes } from './PropTypes';
|
||||
import Omit from 'omit.js';
|
||||
import { defineComponent, nextTick, onMounted, ref } from 'vue';
|
||||
import KeyCode from '../../_util/KeyCode';
|
||||
import { getPropsSlot } from '../../_util/props-util';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VcSwitch',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
...switchPropTypes,
|
||||
prefixCls: switchPropTypes.prefixCls.def('rc-switch'),
|
||||
},
|
||||
emits: ['update:checked', 'mouseup', 'change', 'click'],
|
||||
setup(props, { attrs, slots, emit, expose }) {
|
||||
const checked = ref('checked' in props ? !!props.checked : !!props.defaultChecked);
|
||||
|
||||
const refSwitchNode = ref();
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (props.autofocus && !props.disabled) {
|
||||
refSwitchNode.value.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const setChecked = (check: boolean, e: MouseEvent | KeyboardEvent) => {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
checked.value = !checked.value;
|
||||
emit('update:checked', checked);
|
||||
emit('change', check, e);
|
||||
};
|
||||
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
setChecked(checked.value, e);
|
||||
emit('click', checked.value, e);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.keyCode === KeyCode.LEFT) {
|
||||
setChecked(false, e);
|
||||
} else if (e.keyCode === KeyCode.RIGHT) {
|
||||
setChecked(true, e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = (e: MouseEvent) => {
|
||||
refSwitchNode.value?.blur();
|
||||
emit('mouseup', e);
|
||||
};
|
||||
|
||||
const focus = () => {
|
||||
refSwitchNode.value?.focus();
|
||||
};
|
||||
const blur = () => {
|
||||
refSwitchNode.value?.blur();
|
||||
};
|
||||
|
||||
expose({ focus, blur });
|
||||
|
||||
return () => (
|
||||
<button
|
||||
{...Omit(props, [
|
||||
'prefixCls',
|
||||
'checkedChildren',
|
||||
'unCheckedChildren',
|
||||
'checked',
|
||||
'autofocus',
|
||||
'defaultChecked',
|
||||
])}
|
||||
{...attrs}
|
||||
onKeydown={handleKeyDown}
|
||||
onClick={handleClick}
|
||||
onMouseup={handleMouseUp}
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked.value}
|
||||
disabled={props.disabled}
|
||||
class={{
|
||||
[attrs.class as string]: attrs.class,
|
||||
[props.prefixCls]: true,
|
||||
[`${props.prefixCls}-checked`]: checked.value,
|
||||
[`${props.prefixCls}-disabled`]: props.disabled,
|
||||
}}
|
||||
ref={refSwitchNode}
|
||||
>
|
||||
{props.loadingIcon}
|
||||
<span class={`${props.prefixCls}-inner`}>
|
||||
{checked.value
|
||||
? getPropsSlot(slots, props, 'checkedChildren')
|
||||
: getPropsSlot(slots, props, 'unCheckedChildren')}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -1 +1 @@
|
||||
Subproject commit 496ff9154658d1ff28917f0bea6adfcb0cd05d43
|
||||
Subproject commit 31d85319dcc0438b3c80957c99f57b931b047c11
|
||||
Loading…
Reference in new issue