2022-03-16 15:04:47 +08:00
|
|
|
// deps-lint-skip-all
|
|
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
|
|
import { CSSObject } from '@ant-design/cssinjs';
|
2022-04-11 16:04:00 +08:00
|
|
|
import {
|
|
|
|
resetComponent,
|
|
|
|
GenerateStyle,
|
|
|
|
FullToken,
|
|
|
|
genComponentStyleHook,
|
|
|
|
mergeToken,
|
|
|
|
} from '../../_util/theme';
|
2022-04-08 14:36:26 +08:00
|
|
|
|
|
|
|
interface SwitchToken extends FullToken<'Switch'> {
|
2022-03-16 15:04:47 +08:00
|
|
|
switchMinWidth: number;
|
|
|
|
switchHeight: number;
|
|
|
|
switchDuration: string;
|
|
|
|
switchColor: string;
|
|
|
|
switchDisabledOpacity: number;
|
|
|
|
switchInnerMarginMin: number;
|
|
|
|
switchInnerMarginMax: number;
|
|
|
|
switchPadding: number;
|
|
|
|
switchPinSize: number;
|
|
|
|
switchBg: string;
|
|
|
|
switchShadowColor: string;
|
|
|
|
switchMinWidthSM: number;
|
|
|
|
switchHeightSM: number;
|
|
|
|
switchInnerMarginMinSM: number;
|
|
|
|
switchInnerMarginMaxSM: number;
|
|
|
|
switchPinSizeSM: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => ({
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-small`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
minWidth: token.switchMinWidthSM,
|
|
|
|
height: token.switchHeightSM,
|
|
|
|
lineHeight: `${token.switchHeightSM}px`,
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`${token.componentCls}-inner`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
marginInlineStart: token.switchInnerMarginMaxSM,
|
|
|
|
marginInlineEnd: token.switchInnerMarginMinSM,
|
|
|
|
fontSize: token.fontSizeSM,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`${token.componentCls}-handle`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
width: token.switchPinSizeSM,
|
|
|
|
height: token.switchPinSizeSM,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`${token.componentCls}-loading-icon`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
top: (token.switchPinSizeSM - 9) / 2,
|
|
|
|
// FIXME
|
|
|
|
fontSize: 9,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked`]: {
|
|
|
|
[`${token.componentCls}-inner`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
marginInlineStart: token.switchInnerMarginMinSM,
|
|
|
|
marginInlineEnd: token.switchInnerMarginMaxSM,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`${token.componentCls}-handle`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
insetInlineStart: `calc(100% - ${token.switchPinSizeSM + token.switchPadding}px)`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => ({
|
2022-04-08 14:36:26 +08:00
|
|
|
[`${token.componentCls}-loading-icon${token.iconCls}`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
position: 'relative',
|
|
|
|
top: (token.switchPinSize - token.fontSize) / 2,
|
|
|
|
color: 'rgba(0, 0, 0, 0.65)',
|
|
|
|
verticalAlign: 'top',
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked ${token.componentCls}-loading-icon`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
color: token.switchColor,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
2022-04-08 14:36:26 +08:00
|
|
|
const switchHandleCls = `${token.componentCls}-handle`;
|
2022-03-16 15:04:47 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
[switchHandleCls]: {
|
|
|
|
position: 'absolute',
|
|
|
|
top: token.switchPadding,
|
|
|
|
insetInlineStart: token.switchPadding,
|
|
|
|
width: token.switchPinSize,
|
|
|
|
height: token.switchPinSize,
|
|
|
|
transition: `all ${token.switchDuration} ease-in-out`,
|
|
|
|
|
|
|
|
'&::before': {
|
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
bottom: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
backgroundColor: token.switchBg,
|
|
|
|
borderRadius: token.switchPinSize / 2,
|
|
|
|
// FIXME
|
|
|
|
boxShadow: `0 2px 4px 0 ${token.switchShadowColor}`,
|
|
|
|
transition: `all ${token.switchDuration} ease-in-out`,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked ${switchHandleCls}`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
insetInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding}px)`,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&:not(${token.componentCls}-disabled):active`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
[`${switchHandleCls}::before`]: {
|
|
|
|
// FIXME
|
|
|
|
insetInlineEnd: '-30%',
|
|
|
|
insetInlineStart: 0,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked ${switchHandleCls}::before`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
insetInlineEnd: 0,
|
|
|
|
// FIXME
|
|
|
|
insetInlineStart: '-30%',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
2022-04-08 14:36:26 +08:00
|
|
|
const switchInnerCls = `${token.componentCls}-inner`;
|
2022-03-16 15:04:47 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
[switchInnerCls]: {
|
|
|
|
display: 'block',
|
|
|
|
marginInlineEnd: token.switchInnerMarginMin,
|
|
|
|
marginInlineStart: token.switchInnerMarginMax,
|
2022-03-22 13:26:29 +08:00
|
|
|
color: token.colorTextLightSolid,
|
2022-03-16 15:04:47 +08:00
|
|
|
fontSize: token.fontSizeSM,
|
|
|
|
transition: `margin-inline-end ${token.switchDuration}, margin-inline-start ${token.switchDuration}`,
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked ${switchInnerCls}`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
marginInlineEnd: token.switchInnerMarginMax,
|
|
|
|
marginInlineStart: token.switchInnerMarginMin,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
2022-04-08 14:36:26 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-16 15:04:47 +08:00
|
|
|
|
|
|
|
return {
|
2022-04-08 14:36:26 +08:00
|
|
|
[componentCls]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
|
|
|
boxSizing: 'border-box',
|
|
|
|
minWidth: token.switchMinWidth,
|
|
|
|
height: token.switchHeight,
|
|
|
|
lineHeight: `${token.switchHeight}px`,
|
|
|
|
verticalAlign: 'middle',
|
2022-05-01 16:32:08 +08:00
|
|
|
backgroundImage: `linear-gradient(to right, ${token.colorTextDisabled}, ${token.colorTextDisabled}), linear-gradient(to right, ${token.colorBgComponent}, ${token.colorBgComponent})`,
|
2022-03-16 15:04:47 +08:00
|
|
|
border: '0',
|
|
|
|
borderRadius: 100,
|
|
|
|
cursor: 'pointer',
|
|
|
|
transition: `all ${token.switchDuration}`,
|
|
|
|
userSelect: 'none',
|
|
|
|
|
2022-03-24 14:30:48 +08:00
|
|
|
'&:focus-visible': {
|
2022-03-16 15:04:47 +08:00
|
|
|
outline: 0,
|
2022-03-24 18:44:42 +08:00
|
|
|
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorDefaultOutline}`,
|
2022-03-16 15:04:47 +08:00
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked:focus-visible`]: {
|
2022-03-24 14:30:48 +08:00
|
|
|
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
|
2022-03-16 15:04:47 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&:focus:hover': {
|
|
|
|
boxShadow: 'none',
|
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-checked`]: {
|
2022-04-20 11:30:55 +08:00
|
|
|
background: token.switchColor,
|
2022-03-16 15:04:47 +08:00
|
|
|
},
|
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-loading, &${token.componentCls}-disabled`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
opacity: token.switchDisabledOpacity,
|
|
|
|
|
|
|
|
'*': {
|
|
|
|
boxShadow: 'none',
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// inner style
|
|
|
|
...genSwitchInnerStyle(token),
|
|
|
|
|
|
|
|
// handle style
|
|
|
|
...genSwitchHandleStyle(token),
|
|
|
|
|
|
|
|
// loading style
|
|
|
|
...genSwitchLoadingStyle(token),
|
|
|
|
|
|
|
|
// small style
|
|
|
|
...genSwitchSmallStyle(token),
|
|
|
|
|
|
|
|
// rtl style
|
2022-04-08 14:36:26 +08:00
|
|
|
[`&${token.componentCls}-rtl`]: {
|
2022-03-16 15:04:47 +08:00
|
|
|
direction: 'rtl',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-08 14:36:26 +08:00
|
|
|
export default genComponentStyleHook('Switch', token => {
|
2022-03-16 15:04:47 +08:00
|
|
|
const switchHeight = 22;
|
|
|
|
const switchHeightSM = 16;
|
|
|
|
|
2022-04-11 16:04:00 +08:00
|
|
|
const switchToken = mergeToken<SwitchToken>(token, {
|
2022-03-16 15:04:47 +08:00
|
|
|
// FIXME: missing token
|
|
|
|
switchMinWidth: 44,
|
|
|
|
switchHeight,
|
|
|
|
switchDuration: '0.2s',
|
2022-03-22 09:37:37 +08:00
|
|
|
switchColor: token.colorPrimary,
|
2022-03-16 15:04:47 +08:00
|
|
|
switchDisabledOpacity: 0.4,
|
|
|
|
switchInnerMarginMin: Math.ceil(switchHeight * 0.3),
|
|
|
|
switchInnerMarginMax: Math.ceil(switchHeight * 1.1),
|
|
|
|
switchPadding: 2,
|
|
|
|
switchPinSize: switchHeight - 4,
|
2022-03-22 20:02:04 +08:00
|
|
|
switchBg: token.colorBgComponent,
|
2022-03-16 15:04:47 +08:00
|
|
|
switchShadowColor: new TinyColor('#00230b').setAlpha(0.2).toRgbString(),
|
|
|
|
switchMinWidthSM: 28,
|
|
|
|
switchHeightSM,
|
|
|
|
switchInnerMarginMinSM: Math.ceil(switchHeight * 0.3),
|
|
|
|
switchInnerMarginMaxSM: Math.ceil(switchHeight * 1.1),
|
|
|
|
switchPinSizeSM: switchHeightSM - 4,
|
2022-04-11 16:04:00 +08:00
|
|
|
});
|
2022-03-16 15:04:47 +08:00
|
|
|
|
2022-04-08 14:36:26 +08:00
|
|
|
return [genSwitchStyle(switchToken)];
|
|
|
|
});
|