2022-05-11 19:35:00 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-10-28 16:44:19 +08:00
|
|
|
import { resetComponent, textEllipsis } from '../../style';
|
2022-05-11 19:35:00 +08:00
|
|
|
|
2022-07-21 17:00:42 +08:00
|
|
|
export interface ComponentToken {}
|
2022-05-11 19:35:00 +08:00
|
|
|
|
|
|
|
interface SegmentedToken extends FullToken<'Segmented'> {
|
|
|
|
segmentedPaddingHorizontal: number;
|
|
|
|
segmentedPaddingHorizontalSM: number;
|
|
|
|
segmentedContainerPadding: number;
|
2022-06-24 11:11:42 +08:00
|
|
|
labelColor: string;
|
|
|
|
labelColorHover: string;
|
2022-07-21 17:00:42 +08:00
|
|
|
bgColor: string;
|
|
|
|
bgColorHover: string;
|
|
|
|
bgColorSelected: string;
|
2022-05-11 19:35:00 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// ============================== Mixins ==============================
|
2023-01-11 22:33:17 +08:00
|
|
|
function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
|
2022-05-11 19:35:00 +08:00
|
|
|
return {
|
|
|
|
[`${cls}, ${cls}:hover, ${cls}:focus`]: {
|
|
|
|
color: token.colorTextDisabled,
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2023-01-11 22:33:17 +08:00
|
|
|
function getItemSelectedStyle(token: SegmentedToken): CSSObject {
|
2022-05-11 19:35:00 +08:00
|
|
|
return {
|
2022-06-17 18:47:47 +08:00
|
|
|
backgroundColor: token.bgColorSelected,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: token.boxShadow,
|
2022-05-11 19:35:00 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const segmentedTextEllipsisCss: CSSObject = {
|
|
|
|
overflow: 'hidden',
|
|
|
|
// handle text ellipsis
|
2022-10-28 16:44:19 +08:00
|
|
|
...textEllipsis,
|
2022-05-11 19:35:00 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Styles ==============================
|
|
|
|
const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken) => {
|
|
|
|
const { componentCls } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[componentCls]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
display: 'inline-block',
|
|
|
|
padding: token.segmentedContainerPadding,
|
2022-06-17 18:47:47 +08:00
|
|
|
color: token.labelColor,
|
|
|
|
backgroundColor: token.bgColor,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadius,
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
2022-05-11 19:35:00 +08:00
|
|
|
|
2022-05-26 09:14:09 +08:00
|
|
|
[`${componentCls}-group`]: {
|
2022-05-11 19:35:00 +08:00
|
|
|
position: 'relative',
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'stretch',
|
|
|
|
justifyItems: 'flex-start',
|
|
|
|
width: '100%',
|
|
|
|
},
|
|
|
|
|
|
|
|
// RTL styles
|
|
|
|
'&&-rtl': {
|
|
|
|
direction: 'rtl',
|
|
|
|
},
|
|
|
|
|
|
|
|
// block styles
|
|
|
|
'&&-block': {
|
|
|
|
display: 'flex',
|
|
|
|
},
|
|
|
|
|
2022-05-26 09:14:09 +08:00
|
|
|
[`&&-block ${componentCls}-item`]: {
|
2022-05-11 19:35:00 +08:00
|
|
|
flex: 1,
|
|
|
|
minWidth: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
// item styles
|
|
|
|
[`${componentCls}-item`]: {
|
|
|
|
position: 'relative',
|
|
|
|
textAlign: 'center',
|
|
|
|
cursor: 'pointer',
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `color ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-05-11 19:35:00 +08:00
|
|
|
|
|
|
|
'&-selected': {
|
2023-01-11 22:33:17 +08:00
|
|
|
...getItemSelectedStyle(token),
|
2022-06-17 18:47:47 +08:00
|
|
|
color: token.labelColorHover,
|
2022-05-11 19:35:00 +08:00
|
|
|
},
|
|
|
|
|
2022-09-20 21:50:36 +08:00
|
|
|
'&::after': {
|
|
|
|
content: '""',
|
|
|
|
position: 'absolute',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
top: 0,
|
|
|
|
insetInlineStart: 0,
|
2023-01-11 22:33:17 +08:00
|
|
|
borderRadius: 'inherit',
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `background-color ${token.motionDurationMid}`,
|
2022-09-20 21:50:36 +08:00
|
|
|
},
|
|
|
|
|
2022-09-09 17:04:15 +08:00
|
|
|
[`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
|
2022-06-17 18:47:47 +08:00
|
|
|
color: token.labelColorHover,
|
2022-09-09 17:04:15 +08:00
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
backgroundColor: token.bgColorHover,
|
|
|
|
},
|
2022-05-11 19:35:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-label': {
|
|
|
|
minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
|
|
|
|
lineHeight: `${token.controlHeight - token.segmentedContainerPadding * 2}px`,
|
|
|
|
padding: `0 ${token.segmentedPaddingHorizontal}px`,
|
|
|
|
...segmentedTextEllipsisCss,
|
|
|
|
},
|
|
|
|
|
|
|
|
// syntactic sugar to add `icon` for Segmented Item
|
|
|
|
'&-icon + *': {
|
2022-12-15 11:38:08 +08:00
|
|
|
marginInlineStart: token.marginSM / 2,
|
2022-05-11 19:35:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-input': {
|
|
|
|
position: 'absolute',
|
|
|
|
insetBlockStart: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
opacity: 0,
|
|
|
|
pointerEvents: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// size styles
|
2022-08-19 10:10:51 +08:00
|
|
|
'&&-lg': {
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusLG,
|
2022-08-19 10:10:51 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
|
|
|
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
|
|
|
|
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
|
|
|
|
padding: `0 ${token.segmentedPaddingHorizontal}px`,
|
|
|
|
fontSize: token.fontSizeLG,
|
|
|
|
},
|
2023-01-11 22:33:17 +08:00
|
|
|
[`${componentCls}-item`]: {
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadius,
|
2022-08-19 10:10:51 +08:00
|
|
|
},
|
2022-05-11 19:35:00 +08:00
|
|
|
},
|
|
|
|
|
2022-08-19 10:10:51 +08:00
|
|
|
'&&-sm': {
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-09-21 10:35:14 +08:00
|
|
|
[`${componentCls}-item-label`]: {
|
2022-08-19 10:10:51 +08:00
|
|
|
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
|
|
|
|
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
|
|
|
|
padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
|
|
|
|
},
|
2023-01-11 22:33:17 +08:00
|
|
|
[`${componentCls}-item`]: {
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusXS,
|
2022-08-19 10:10:51 +08:00
|
|
|
},
|
2022-05-11 19:35:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// disabled styles
|
2023-01-11 22:33:17 +08:00
|
|
|
...getItemDisabledStyle(`&-disabled ${componentCls}-item`, token),
|
|
|
|
...getItemDisabledStyle(`${componentCls}-item-disabled`, token),
|
2022-05-11 19:35:00 +08:00
|
|
|
|
|
|
|
// thumb styles
|
|
|
|
[`${componentCls}-thumb`]: {
|
2023-01-11 22:33:17 +08:00
|
|
|
...getItemSelectedStyle(token),
|
2022-05-11 19:35:00 +08:00
|
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
insetBlockStart: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
width: 0,
|
|
|
|
height: '100%',
|
|
|
|
padding: `${token.paddingXXS}px 0`,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-09-20 21:50:36 +08:00
|
|
|
|
|
|
|
[`& ~ ${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)::after`]:
|
|
|
|
{
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
},
|
2022-05-11 19:35:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// transition effect when `appear-active`
|
|
|
|
[`${componentCls}-thumb-motion-appear-active`]: {
|
|
|
|
transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOut}, width ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
|
|
|
willChange: 'transform, width',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-11-15 22:22:04 +08:00
|
|
|
export default genComponentStyleHook('Segmented', (token) => {
|
2022-07-21 17:00:42 +08:00
|
|
|
const {
|
|
|
|
lineWidthBold,
|
2022-11-01 15:06:38 +08:00
|
|
|
lineWidth,
|
2022-07-21 17:00:42 +08:00
|
|
|
colorTextLabel,
|
|
|
|
colorText,
|
|
|
|
colorFillSecondary,
|
2022-11-15 22:22:04 +08:00
|
|
|
colorBgLayout,
|
|
|
|
colorBgElevated,
|
2022-07-21 17:00:42 +08:00
|
|
|
} = token;
|
|
|
|
|
|
|
|
const segmentedToken = mergeToken<SegmentedToken>(token, {
|
2022-11-01 15:06:38 +08:00
|
|
|
segmentedPaddingHorizontal: token.controlPaddingHorizontal - lineWidth,
|
|
|
|
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - lineWidth,
|
2022-07-21 17:00:42 +08:00
|
|
|
segmentedContainerPadding: lineWidthBold,
|
|
|
|
labelColor: colorTextLabel,
|
|
|
|
labelColorHover: colorText,
|
2022-11-15 22:22:04 +08:00
|
|
|
bgColor: colorBgLayout,
|
2022-09-07 12:00:00 +08:00
|
|
|
bgColorHover: colorFillSecondary,
|
2022-11-15 22:22:04 +08:00
|
|
|
bgColorSelected: colorBgElevated,
|
2022-07-21 17:00:42 +08:00
|
|
|
});
|
|
|
|
return [genSegmentedStyle(segmentedToken)];
|
|
|
|
});
|