blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Switch: inactive loading color

Browse Source
This commit is contained in:
陈嘉涵 2019-05-10 20:36:54 +08:00
parent 4e27ecbd99
commit bf7a9ba863
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/switch-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value">
<div class="van-switch van-switch--on" style="font-size: 24px;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</div>
</div>

25
packages/switch/index.tsx
View File

@ -1,5 +1,5 @@
import { use } from '../utils';
import { BLUE } from '../utils/color';
import { BLUE, GRAY_DARK } from '../utils/color';
import { switchProps, SharedSwitchProps } from './shared';
import { emit, inherit } from '../utils/functional';
import Loading from '../loading';
@ -20,13 +20,24 @@ function Switch(
slots: DefaultSlots,
ctx: RenderContext<SharedSwitchProps>
) {
const { value, loading, disabled, activeValue, inactiveValue } = props;
const {
size,
value,
loading,
disabled,
activeColor,
activeValue,
inactiveColor,
inactiveValue
} = props;
const style = {
fontSize: props.size,
backgroundColor: value ? props.activeColor : props.inactiveColor
const switchStyle = {
fontSize: size,
backgroundColor: value ? activeColor : inactiveColor
};
const loadingColor = value ? activeColor || BLUE : inactiveColor || GRAY_DARK;
function onClick() {
if (!disabled && !loading) {
const newValue = value === activeValue ? inactiveValue : activeValue;
@ -41,12 +52,12 @@ function Switch(
on: value === activeValue,
disabled
})}
style={style}
style={switchStyle}
onClick={onClick}
{...inherit(ctx)}
>
<div class={bem('node')}>
{loading && <Loading class={bem('loading')} color={props.activeColor || BLUE} />}
{loading && <Loading class={bem('loading')} color={loadingColor} />}
</div>
</div>
);

2
packages/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-switch van-switch--on" style="font-size: 30px;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</div>
</div>