antd
Version:
An enterprise-class UI design language and React components implementation
429 lines (428 loc) • 12.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _style = require("../../style");
var _internal = require("../../theme/internal");
// ============================== Styles ==============================
// styles from RadioGroup only
const getGroupRadioStyle = token => {
const {
componentCls,
antCls
} = token;
const groupPrefixCls = `${componentCls}-group`;
return {
[groupPrefixCls]: {
...(0, _style.resetComponent)(token),
display: 'inline-block',
fontSize: 0,
// RTL
[`&${groupPrefixCls}-rtl`]: {
direction: 'rtl'
},
[`&${groupPrefixCls}-block`]: {
display: 'flex'
},
[`${antCls}-badge ${antCls}-badge-count`]: {
zIndex: 1
},
[`> ${antCls}-badge:not(:first-child) > ${antCls}-button-wrapper`]: {
borderInlineStart: 'none'
},
'&-vertical': {
display: 'flex',
flexDirection: 'column',
rowGap: token.marginXS,
[`${componentCls}-wrapper`]: {
marginInlineEnd: 0
}
}
}
};
};
// Styles from radio-wrapper
const getRadioBasicStyle = token => {
const {
componentCls,
wrapperMarginInlineEnd,
colorPrimary,
colorPrimaryHover,
radioSize,
motionDurationSlow,
motionDurationMid,
motionEaseInOutCirc,
colorBgContainer,
colorBorder,
lineWidth,
colorBgContainerDisabled,
colorTextDisabled,
paddingXS,
dotColorDisabled,
dotSize,
lineType,
radioColor,
radioBgColor
} = token;
return {
[`${componentCls}-wrapper`]: {
...(0, _style.resetComponent)(token),
display: 'inline-flex',
alignItems: 'baseline',
marginInlineStart: 0,
marginInlineEnd: wrapperMarginInlineEnd,
cursor: 'pointer',
'&:last-child': {
marginInlineEnd: 0
},
// RTL
[`&${componentCls}-wrapper-rtl`]: {
direction: 'rtl'
},
'&-disabled': {
cursor: 'not-allowed',
color: token.colorTextDisabled
},
'&::after': {
display: 'inline-block',
width: 0,
overflow: 'hidden',
content: '"\\a0"'
},
'&-block': {
flex: 1,
justifyContent: 'center'
},
// ===================== Radio =====================
[componentCls]: {
...(0, _style.resetComponent)(token),
position: 'relative',
whiteSpace: 'nowrap',
lineHeight: 1,
cursor: 'pointer',
alignSelf: 'center',
// Styles moved from inner
boxSizing: 'border-box',
display: 'block',
width: `calc(${radioSize} * 1px)`,
height: `calc(${radioSize} * 1px)`,
backgroundColor: colorBgContainer,
border: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorBorder}`,
borderRadius: '50%',
transition: `all ${motionDurationMid}`,
// Dot
'&:after': {
content: '""',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%) scale(0)',
width: `calc(${dotSize} * 1px)`,
height: `calc(${dotSize} * 1px)`,
backgroundColor: radioColor,
borderRadius: '50%',
transformOrigin: '50% 50%',
opacity: 0,
transition: `all ${motionDurationSlow} ${motionEaseInOutCirc}`
},
// Wrapper > Radio > input
[`${componentCls}-input`]: {
position: 'absolute',
inset: 0,
zIndex: 1,
cursor: 'pointer',
opacity: 0,
margin: 0
},
// Focus outline on radio when input is focus-visible
[`&:has(${componentCls}-input:focus-visible)`]: (0, _style.genFocusOutline)(token)
},
// ===================== Hover =====================
[`&:hover ${componentCls}`]: {
borderColor: colorPrimary
},
[`&:hover ${componentCls}-checked:not(${componentCls}-disabled)`]: {
backgroundColor: colorPrimaryHover,
borderColor: 'transparent'
},
// ==================== Checked ====================
[`${componentCls}-checked`]: {
backgroundColor: radioBgColor,
borderColor: colorPrimary,
'&::after': {
transform: `translate(-50%, -50%)`,
opacity: 1
}
},
// ==================== Disable ====================
[`${componentCls}-disabled`]: {
// Wrapper > Radio > input
[`&, ${componentCls}-input`]: {
cursor: 'not-allowed',
// Disabled for native input to enable Tooltip event handler
pointerEvents: 'none'
},
// Disabled radio styles
background: colorBgContainerDisabled,
borderColor: colorBorder,
'&::after': {
backgroundColor: dotColorDisabled
}
},
[`${componentCls}-disabled + span`]: {
color: colorTextDisabled,
cursor: 'not-allowed'
},
[`span${componentCls} + *`]: {
paddingInlineStart: paddingXS,
paddingInlineEnd: paddingXS
}
}
};
};
// Styles from radio-button
const getRadioButtonStyle = token => {
const {
buttonColor,
controlHeight,
componentCls,
lineWidth,
lineType,
colorBorder,
motionDurationMid,
buttonPaddingInline,
fontSize,
buttonBg,
fontSizeLG,
controlHeightLG,
controlHeightSM,
paddingXS,
borderRadius,
borderRadiusSM,
borderRadiusLG,
buttonCheckedBg,
buttonSolidCheckedColor,
colorTextDisabled,
colorBgContainerDisabled,
buttonCheckedBgDisabled,
buttonCheckedColorDisabled,
colorPrimary,
colorPrimaryHover,
colorPrimaryActive,
buttonSolidCheckedBg,
buttonSolidCheckedHoverBg,
buttonSolidCheckedActiveBg,
calc
} = token;
return {
[`${componentCls}-button-wrapper`]: {
position: 'relative',
display: 'inline-block',
height: controlHeight,
margin: 0,
paddingInline: buttonPaddingInline,
paddingBlock: 0,
color: buttonColor,
fontSize,
lineHeight: (0, _cssinjs.unit)(calc(controlHeight).sub(calc(lineWidth).mul(2)).equal()),
background: buttonBg,
border: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorBorder}`,
// strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
borderBlockStartWidth: calc(lineWidth).add(0.02).equal(),
borderInlineEndWidth: lineWidth,
cursor: 'pointer',
transition: [`color`, `background-color`, `box-shadow`].map(prop => `${prop} ${motionDurationMid}`).join(','),
a: {
color: buttonColor
},
[`> ${componentCls}-button`]: {
position: 'absolute',
insetBlockStart: 0,
insetInlineStart: 0,
zIndex: -1,
width: '100%',
height: '100%'
},
'&:not(:last-child)': {
marginInlineEnd: calc(lineWidth).mul(-1).equal()
},
'&:first-child': {
borderInlineStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorBorder}`,
borderStartStartRadius: borderRadius,
borderEndStartRadius: borderRadius
},
'&:last-child': {
borderStartEndRadius: borderRadius,
borderEndEndRadius: borderRadius
},
'&:first-child:last-child': {
borderRadius
},
[`${componentCls}-group-large &`]: {
height: controlHeightLG,
fontSize: fontSizeLG,
lineHeight: (0, _cssinjs.unit)(calc(controlHeightLG).sub(calc(lineWidth).mul(2)).equal()),
'&:first-child': {
borderStartStartRadius: borderRadiusLG,
borderEndStartRadius: borderRadiusLG
},
'&:last-child': {
borderStartEndRadius: borderRadiusLG,
borderEndEndRadius: borderRadiusLG
}
},
[`${componentCls}-group-small &`]: {
height: controlHeightSM,
paddingInline: calc(paddingXS).sub(lineWidth).equal(),
paddingBlock: 0,
lineHeight: (0, _cssinjs.unit)(calc(controlHeightSM).sub(calc(lineWidth).mul(2)).equal()),
'&:first-child': {
borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: borderRadiusSM
},
'&:last-child': {
borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: borderRadiusSM
}
},
'&:hover': {
position: 'relative',
color: colorPrimary
},
'&:has(:focus-visible)': (0, _style.genFocusOutline)(token),
[`${componentCls}, input[type='checkbox'], input[type='radio']`]: {
width: 0,
height: 0,
opacity: 0,
pointerEvents: 'none'
},
[`&-checked:not(${componentCls}-button-wrapper-disabled)`]: {
zIndex: 1,
color: colorPrimary,
background: buttonCheckedBg,
borderColor: colorPrimary,
'&::before': {
backgroundColor: colorPrimary
},
'&:first-child': {
borderColor: colorPrimary
},
'&:hover': {
color: colorPrimaryHover,
borderColor: colorPrimaryHover,
'&::before': {
backgroundColor: colorPrimaryHover
}
},
'&:active': {
color: colorPrimaryActive,
borderColor: colorPrimaryActive,
'&::before': {
backgroundColor: colorPrimaryActive
}
}
},
[`${componentCls}-group-solid &-checked:not(${componentCls}-button-wrapper-disabled)`]: {
color: buttonSolidCheckedColor,
background: buttonSolidCheckedBg,
borderColor: buttonSolidCheckedBg,
'&:hover': {
color: buttonSolidCheckedColor,
background: buttonSolidCheckedHoverBg,
borderColor: buttonSolidCheckedHoverBg
},
'&:active': {
color: buttonSolidCheckedColor,
background: buttonSolidCheckedActiveBg,
borderColor: buttonSolidCheckedActiveBg
}
},
'&-disabled': {
color: colorTextDisabled,
backgroundColor: colorBgContainerDisabled,
borderColor: colorBorder,
cursor: 'not-allowed',
'&:first-child, &:hover': {
color: colorTextDisabled,
backgroundColor: colorBgContainerDisabled,
borderColor: colorBorder
}
},
[`&-disabled${componentCls}-button-wrapper-checked`]: {
color: buttonCheckedColorDisabled,
backgroundColor: buttonCheckedBgDisabled,
borderColor: colorBorder,
boxShadow: 'none'
},
'&-block': {
flex: 1,
textAlign: 'center'
}
}
};
};
// ============================== Export ==============================
const prepareComponentToken = token => {
const {
wireframe,
padding,
marginXS,
lineWidth,
fontSizeLG,
colorText,
colorBgContainer,
colorTextDisabled,
controlItemBgActiveDisabled,
colorTextLightSolid,
colorPrimary,
colorPrimaryHover,
colorPrimaryActive,
colorWhite
} = token;
const dotPadding = 4; // Fixed value
const radioSize = fontSizeLG;
const radioDotSize = wireframe ? radioSize - dotPadding * 2 : radioSize - (dotPadding + lineWidth) * 2;
return {
// Radio
radioSize,
dotSize: radioDotSize,
dotColorDisabled: colorTextDisabled,
// Radio buttons
buttonSolidCheckedColor: colorTextLightSolid,
buttonSolidCheckedBg: colorPrimary,
buttonSolidCheckedHoverBg: colorPrimaryHover,
buttonSolidCheckedActiveBg: colorPrimaryActive,
buttonBg: colorBgContainer,
buttonCheckedBg: colorBgContainer,
buttonColor: colorText,
buttonCheckedBgDisabled: controlItemBgActiveDisabled,
buttonCheckedColorDisabled: colorTextDisabled,
buttonPaddingInline: padding - lineWidth,
wrapperMarginInlineEnd: marginXS,
// internal
radioColor: wireframe ? colorPrimary : colorWhite,
radioBgColor: wireframe ? colorBgContainer : colorPrimary
};
};
exports.prepareComponentToken = prepareComponentToken;
var _default = exports.default = (0, _internal.genStyleHooks)('Radio', token => {
const {
controlOutline,
controlOutlineWidth
} = token;
const radioFocusShadow = `0 0 0 ${(0, _cssinjs.unit)(controlOutlineWidth)} ${controlOutline}`;
const radioButtonFocusShadow = radioFocusShadow;
const radioToken = (0, _internal.mergeToken)(token, {
radioFocusShadow,
radioButtonFocusShadow
});
return [getGroupRadioStyle(radioToken), getRadioBasicStyle(radioToken), getRadioButtonStyle(radioToken)];
}, prepareComponentToken, {
unitless: {
radioSize: true,
dotSize: true
}
});