2022-05-09 22:20:07 +08:00
|
|
|
import type { InputToken } from '../../input/style';
|
2022-03-21 10:59:42 +08:00
|
|
|
import {
|
|
|
|
genActiveStyle,
|
|
|
|
genBasicInputStyle,
|
|
|
|
genDisabledStyle,
|
|
|
|
genPlaceholderStyle,
|
2022-03-30 14:10:59 +08:00
|
|
|
genStatusStyle,
|
2022-03-21 10:59:42 +08:00
|
|
|
initInputToken,
|
|
|
|
} from '../../input/style';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook } from '../../theme/internal';
|
2022-10-28 16:44:19 +08:00
|
|
|
import { resetComponent, textEllipsis } from '../../style';
|
2019-05-17 12:05:03 +08:00
|
|
|
|
2022-03-29 15:57:39 +08:00
|
|
|
export interface ComponentToken {
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup: number;
|
2022-03-29 15:57:39 +08:00
|
|
|
dropdownHeight: number;
|
|
|
|
controlItemWidth: number;
|
|
|
|
}
|
|
|
|
|
2022-04-06 21:49:30 +08:00
|
|
|
type MentionsToken = InputToken<FullToken<'Mentions'>>;
|
2022-02-16 21:14:05 +08:00
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
2022-03-21 10:59:42 +08:00
|
|
|
const {
|
2022-04-06 21:49:30 +08:00
|
|
|
componentCls,
|
2022-03-24 14:30:48 +08:00
|
|
|
colorTextDisabled,
|
|
|
|
controlItemBgHover,
|
2022-03-21 10:59:42 +08:00
|
|
|
controlPaddingHorizontal,
|
2022-03-24 14:30:48 +08:00
|
|
|
colorText,
|
|
|
|
motionDurationSlow,
|
2022-03-21 10:59:42 +08:00
|
|
|
lineHeight,
|
|
|
|
controlHeight,
|
|
|
|
inputPaddingHorizontal,
|
|
|
|
inputPaddingVertical,
|
|
|
|
fontSize,
|
2022-07-22 20:09:26 +08:00
|
|
|
colorBgElevated,
|
2023-04-06 14:31:35 +08:00
|
|
|
paddingXXS,
|
|
|
|
borderRadius,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadiusLG,
|
2022-09-06 10:13:18 +08:00
|
|
|
boxShadowSecondary,
|
2022-03-21 10:59:42 +08:00
|
|
|
} = token;
|
|
|
|
|
2022-03-29 15:57:39 +08:00
|
|
|
const itemPaddingVertical = Math.round(
|
|
|
|
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
|
|
|
|
);
|
|
|
|
|
2022-03-21 10:59:42 +08:00
|
|
|
return {
|
2023-01-17 17:51:59 +08:00
|
|
|
[componentCls]: {
|
2022-03-21 10:59:42 +08:00
|
|
|
...resetComponent(token),
|
|
|
|
...genBasicInputStyle(token),
|
|
|
|
|
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
|
|
|
height: 'auto',
|
|
|
|
padding: 0,
|
|
|
|
overflow: 'hidden',
|
|
|
|
lineHeight,
|
|
|
|
whiteSpace: 'pre-wrap',
|
|
|
|
verticalAlign: 'bottom',
|
|
|
|
|
2023-01-17 17:51:59 +08:00
|
|
|
...genStatusStyle(token, componentCls),
|
2022-03-30 14:10:59 +08:00
|
|
|
|
2022-03-21 10:59:42 +08:00
|
|
|
'&-disabled': {
|
|
|
|
'> textarea': {
|
|
|
|
...genDisabledStyle(token),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-focused': {
|
|
|
|
...genActiveStyle(token),
|
|
|
|
},
|
|
|
|
|
2022-04-06 21:49:30 +08:00
|
|
|
[`&-affix-wrapper ${componentCls}-suffix`]: {
|
2022-03-25 20:08:05 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
insetInlineEnd: inputPaddingHorizontal,
|
|
|
|
bottom: 0,
|
|
|
|
zIndex: 1,
|
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
margin: 'auto',
|
|
|
|
},
|
|
|
|
|
2022-03-21 10:59:42 +08:00
|
|
|
// ================= Input Area =================
|
2022-04-06 21:49:30 +08:00
|
|
|
[`> textarea, ${componentCls}-measure`]: {
|
2022-10-19 10:30:22 +08:00
|
|
|
color: colorText,
|
|
|
|
boxSizing: 'border-box',
|
2022-03-21 10:59:42 +08:00
|
|
|
minHeight: controlHeight - 2,
|
|
|
|
margin: 0,
|
|
|
|
padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
|
|
|
|
overflow: 'inherit',
|
|
|
|
overflowX: 'hidden',
|
|
|
|
overflowY: 'auto',
|
|
|
|
fontWeight: 'inherit',
|
|
|
|
fontSize: 'inherit',
|
|
|
|
fontFamily: 'inherit',
|
|
|
|
fontStyle: 'inherit',
|
|
|
|
fontVariant: 'inherit',
|
|
|
|
fontSizeAdjust: 'inherit',
|
|
|
|
fontStretch: 'inherit',
|
|
|
|
lineHeight: 'inherit',
|
|
|
|
direction: 'inherit',
|
|
|
|
letterSpacing: 'inherit',
|
|
|
|
whiteSpace: 'inherit',
|
|
|
|
textAlign: 'inherit',
|
|
|
|
verticalAlign: 'top',
|
|
|
|
wordWrap: 'break-word',
|
|
|
|
wordBreak: 'inherit',
|
|
|
|
tabSize: 'inherit',
|
|
|
|
},
|
|
|
|
|
|
|
|
'> textarea': {
|
|
|
|
width: '100%',
|
|
|
|
border: 'none',
|
|
|
|
outline: 'none',
|
|
|
|
resize: 'none',
|
2022-06-17 18:47:47 +08:00
|
|
|
backgroundColor: 'inherit',
|
|
|
|
...genPlaceholderStyle(token.colorTextPlaceholder),
|
2022-03-21 10:59:42 +08:00
|
|
|
},
|
|
|
|
|
2022-04-06 21:49:30 +08:00
|
|
|
[`${componentCls}-measure`]: {
|
2022-03-21 10:59:42 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
bottom: 0,
|
|
|
|
insetInlineStart: 0,
|
|
|
|
zIndex: -1,
|
|
|
|
color: 'transparent',
|
|
|
|
pointerEvents: 'none',
|
|
|
|
|
|
|
|
'> span': {
|
|
|
|
display: 'inline-block',
|
|
|
|
minHeight: '1em',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// ================== Dropdown ==================
|
|
|
|
'&-dropdown': {
|
|
|
|
// Ref select dropdown style
|
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
top: -9999,
|
|
|
|
insetInlineStart: -9999,
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndex: token.zIndexPopup,
|
2022-03-21 10:59:42 +08:00
|
|
|
boxSizing: 'border-box',
|
|
|
|
fontSize,
|
|
|
|
fontVariant: 'initial',
|
2023-04-06 14:31:35 +08:00
|
|
|
padding: paddingXXS,
|
2022-07-22 20:09:26 +08:00
|
|
|
backgroundColor: colorBgElevated,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: borderRadiusLG,
|
2022-03-21 10:59:42 +08:00
|
|
|
outline: 'none',
|
2022-09-06 10:13:18 +08:00
|
|
|
boxShadow: boxShadowSecondary,
|
2022-03-21 10:59:42 +08:00
|
|
|
|
|
|
|
'&-hidden': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
|
2022-04-06 21:49:30 +08:00
|
|
|
[`${componentCls}-dropdown-menu`]: {
|
2022-03-29 15:57:39 +08:00
|
|
|
maxHeight: token.dropdownHeight,
|
2023-04-06 14:31:35 +08:00
|
|
|
margin: 0,
|
2022-03-21 10:59:42 +08:00
|
|
|
paddingInlineStart: 0, // Override default ul/ol
|
|
|
|
overflow: 'auto',
|
|
|
|
listStyle: 'none',
|
|
|
|
outline: 'none',
|
|
|
|
|
|
|
|
'&-item': {
|
2022-10-28 16:44:19 +08:00
|
|
|
...textEllipsis,
|
2022-03-21 10:59:42 +08:00
|
|
|
position: 'relative',
|
|
|
|
display: 'block',
|
2022-03-29 15:57:39 +08:00
|
|
|
minWidth: token.controlItemWidth,
|
|
|
|
padding: `${itemPaddingVertical}px ${controlPaddingHorizontal}px`,
|
2022-03-24 14:30:48 +08:00
|
|
|
color: colorText,
|
2023-04-06 14:31:35 +08:00
|
|
|
borderRadius,
|
2022-03-21 10:59:42 +08:00
|
|
|
fontWeight: 'normal',
|
|
|
|
lineHeight,
|
|
|
|
cursor: 'pointer',
|
2022-03-24 14:30:48 +08:00
|
|
|
transition: `background ${motionDurationSlow} ease`,
|
2022-03-21 10:59:42 +08:00
|
|
|
|
|
|
|
'&:hover': {
|
2022-03-24 14:30:48 +08:00
|
|
|
backgroundColor: controlItemBgHover,
|
2022-03-21 10:59:42 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-disabled': {
|
2022-03-24 14:30:48 +08:00
|
|
|
color: colorTextDisabled,
|
2022-03-21 10:59:42 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
|
|
|
|
'&:hover': {
|
2022-03-24 14:30:48 +08:00
|
|
|
color: colorTextDisabled,
|
|
|
|
backgroundColor: controlItemBgHover,
|
2022-03-21 10:59:42 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-selected': {
|
2022-03-24 14:30:48 +08:00
|
|
|
color: colorText,
|
2022-03-29 15:57:39 +08:00
|
|
|
fontWeight: token.fontWeightStrong,
|
2022-03-24 14:30:48 +08:00
|
|
|
backgroundColor: controlItemBgHover,
|
2022-03-21 10:59:42 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-active': {
|
2022-03-24 14:30:48 +08:00
|
|
|
backgroundColor: controlItemBgHover,
|
2022-03-21 10:59:42 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-06 21:49:30 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Mentions',
|
2022-11-19 13:47:33 +08:00
|
|
|
(token) => {
|
2022-04-06 21:49:30 +08:00
|
|
|
const mentionsToken = initInputToken<FullToken<'Mentions'>>(token);
|
|
|
|
return [genMentionsStyle(mentionsToken)];
|
|
|
|
},
|
2022-11-19 13:47:33 +08:00
|
|
|
(token) => ({
|
2022-04-06 21:49:30 +08:00
|
|
|
dropdownHeight: 250,
|
|
|
|
controlItemWidth: 100,
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup: token.zIndexPopupBase + 50,
|
2022-04-06 21:49:30 +08:00
|
|
|
}),
|
|
|
|
);
|