mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
refactor: change Select into CSSINJS (#34339)
* chore: init * chore: init single * chore: merge next * chore: select single base * chore: basic all style of select * chore: speed of dropdown * chore: move size in single * chore: single size * chore: lg style * chore: left & right * chore: rtl * chore: auto rtl * chore: rtl * fix: height cal * chore: clean up * chore: status color
This commit is contained in:
二货机器人
GitHub
parent
465c30f8fc
commit
068584b76c
@ -42,5 +42,6 @@ const getTransitionName = (rootPrefixCls: string, motion: string, transitionName
|
||||
}
|
||||
return `${rootPrefixCls}-${motion}`;
|
||||
};
|
||||
|
||||
export { getTransitionName, getTransitionDirection };
|
||||
export default collapseMotion;
|
||||
|
||||
@ -15,16 +15,26 @@ const defaultDesignToken: DesignToken = {
|
||||
borderStyle: 'solid',
|
||||
borderRadius: 2,
|
||||
borderColor: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
|
||||
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
||||
|
||||
easeInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
easeInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
||||
easeOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
||||
easeInQuint: `cubic-bezier(0.755, 0.05, 0.855, 0.06)`,
|
||||
easeOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
||||
|
||||
outlineWidth: 2,
|
||||
outlineBlurSize: 0,
|
||||
|
||||
fontSize: 14,
|
||||
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji'`,
|
||||
textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
textColorInverse: '#fff',
|
||||
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
|
||||
@ -32,7 +42,7 @@ const defaultDesignToken: DesignToken = {
|
||||
|
||||
itemHoverBackground: '#f5f5f5',
|
||||
|
||||
height: 32,
|
||||
controlHeight: 32,
|
||||
|
||||
padding: 16,
|
||||
margin: 16,
|
||||
@ -47,6 +57,8 @@ const defaultDesignToken: DesignToken = {
|
||||
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
duration: 0.3,
|
||||
|
||||
zIndexDropdown: 1050,
|
||||
};
|
||||
|
||||
export default defaultDesignToken;
|
||||
|
||||
@ -1,11 +1,35 @@
|
||||
import React from 'react';
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { CSSObject, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
|
||||
import defaultDesignToken from './default';
|
||||
import version from '../../version';
|
||||
import { resetComponent } from './util';
|
||||
import { resetComponent, resetIcon } from './util';
|
||||
import {
|
||||
initSlideMotion,
|
||||
slideUpIn,
|
||||
slideUpOut,
|
||||
slideDownIn,
|
||||
slideDownOut,
|
||||
slideLeftIn,
|
||||
slideLeftOut,
|
||||
slideRightIn,
|
||||
slideRightOut,
|
||||
} from './util/slide';
|
||||
|
||||
export { resetComponent };
|
||||
export {
|
||||
resetComponent,
|
||||
resetIcon,
|
||||
initSlideMotion,
|
||||
slideUpIn,
|
||||
slideUpOut,
|
||||
slideDownIn,
|
||||
slideDownOut,
|
||||
slideLeftIn,
|
||||
slideLeftOut,
|
||||
slideRightIn,
|
||||
slideRightOut,
|
||||
};
|
||||
|
||||
export interface DesignToken {
|
||||
primaryColor: string;
|
||||
@ -19,24 +43,32 @@ export interface DesignToken {
|
||||
borderStyle: string;
|
||||
borderRadius: number;
|
||||
borderColor: string;
|
||||
borderColorSplit: string;
|
||||
|
||||
easeInOut: string;
|
||||
easeInOutCirc: string;
|
||||
easeOutBack: string;
|
||||
easeInQuint: string;
|
||||
easeOutQuint: string;
|
||||
|
||||
outlineWidth: number;
|
||||
outlineBlurSize: number;
|
||||
|
||||
fontSize: number;
|
||||
fontFamily: string;
|
||||
textColor: string;
|
||||
textColorSecondary: string;
|
||||
textColorDisabled: string;
|
||||
textColorInverse: string;
|
||||
|
||||
headingColor: string;
|
||||
placeholderColor: string;
|
||||
|
||||
iconColorHover: string;
|
||||
|
||||
headingColor: string;
|
||||
|
||||
itemHoverBackground: string;
|
||||
|
||||
height: number;
|
||||
controlHeight: number;
|
||||
|
||||
padding: number;
|
||||
margin: number;
|
||||
@ -48,25 +80,40 @@ export interface DesignToken {
|
||||
componentBackgroundDisabled: string;
|
||||
|
||||
duration: number;
|
||||
|
||||
zIndexDropdown: number;
|
||||
|
||||
boxShadow?: string;
|
||||
}
|
||||
|
||||
/** This is temporary token definition since final token definition is not ready yet. */
|
||||
export interface DerivativeToken extends Omit<DesignToken, 'duration'> {
|
||||
primaryHoverColor: string;
|
||||
primaryActiveColor: string;
|
||||
primaryOutlineColor: string;
|
||||
errorHoverColor: string;
|
||||
errorActiveColor: string;
|
||||
errorOutlineColor: string;
|
||||
warningHoverColor: string;
|
||||
warningOutlineColor: string;
|
||||
itemActiveBackground: string;
|
||||
|
||||
linkColor: string;
|
||||
fontSizeSM: number;
|
||||
fontSizeLG: number;
|
||||
heightSM: number;
|
||||
heightLG: number;
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
controlHeightLG: number;
|
||||
controlPaddingHorizontal: number;
|
||||
controlPaddingHorizontalSM: number;
|
||||
paddingSM: number;
|
||||
paddingXS: number;
|
||||
paddingXXS: number;
|
||||
marginXS: number;
|
||||
|
||||
duration: string;
|
||||
durationMid: string;
|
||||
durationFast: string;
|
||||
|
||||
// TMP
|
||||
@ -77,30 +124,53 @@ export { useStyleRegister };
|
||||
|
||||
// =============================== Derivative ===============================
|
||||
function derivative(designToken: DesignToken): DerivativeToken {
|
||||
const primaryColors = generate(designToken.primaryColor);
|
||||
const errorColors = generate(designToken.errorColor);
|
||||
const { primaryColor, errorColor, warningColor } = designToken;
|
||||
|
||||
const primaryColors = generate(primaryColor);
|
||||
const errorColors = generate(errorColor);
|
||||
const warningColors = generate(warningColor);
|
||||
|
||||
const paddingSM = (designToken.padding / 4) * 3;
|
||||
const paddingXS = designToken.padding * 0.5;
|
||||
|
||||
return {
|
||||
// FIXME: Need design token
|
||||
boxShadow: `
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
|
||||
|
||||
...designToken,
|
||||
|
||||
tmpPrimaryHoverColorWeak: primaryColors[0],
|
||||
primaryHoverColor: primaryColors[4],
|
||||
primaryActiveColor: primaryColors[6],
|
||||
primaryOutlineColor: new TinyColor(primaryColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
errorHoverColor: errorColors[4],
|
||||
errorActiveColor: errorColors[6],
|
||||
errorOutlineColor: new TinyColor(errorColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
itemActiveBackground: primaryColors[1],
|
||||
warningHoverColor: warningColors[4],
|
||||
warningOutlineColor: new TinyColor(warningColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
linkColor: designToken.primaryColor,
|
||||
itemActiveBackground: primaryColors[0],
|
||||
|
||||
linkColor: primaryColor,
|
||||
fontSizeSM: designToken.fontSize - 2,
|
||||
fontSizeLG: designToken.fontSize + 2,
|
||||
heightSM: designToken.height * 0.75,
|
||||
heightLG: designToken.height * 1.25,
|
||||
paddingXS: designToken.padding * 0.5,
|
||||
controlHeightXS: designToken.controlHeight / 2,
|
||||
controlHeightSM: designToken.controlHeight * 0.75,
|
||||
controlHeightLG: designToken.controlHeight * 1.25,
|
||||
controlPaddingHorizontal: paddingSM,
|
||||
controlPaddingHorizontalSM: paddingXS,
|
||||
paddingSM,
|
||||
paddingXS,
|
||||
paddingXXS: designToken.padding * 0.25,
|
||||
marginXS: designToken.margin * 0.5,
|
||||
|
||||
duration: `${designToken.duration}s`,
|
||||
durationMid: `${(designToken.duration / 3) * 2}s`,
|
||||
durationFast: `${designToken.duration / 3}s`,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken } from '.';
|
||||
|
||||
export const resetComponent = (token: DerivativeToken): CSSObject => ({
|
||||
boxSizing: 'border-box',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
color: token.textColor,
|
||||
fontSize: token.fontSize,
|
||||
// font-variant: @font-variant-base;
|
||||
lineHeight: token.lineHeight,
|
||||
listStyle: 'none',
|
||||
// font-feature-settings: @font-feature-settings-base;
|
||||
});
|
||||
41
components/_util/theme/util/index.tsx
Normal file
41
components/_util/theme/util/index.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken } from '..';
|
||||
|
||||
export const resetComponent = (token: DerivativeToken): CSSObject => ({
|
||||
boxSizing: 'border-box',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
color: token.textColor,
|
||||
fontSize: token.fontSize,
|
||||
// font-variant: @font-variant-base;
|
||||
lineHeight: token.lineHeight,
|
||||
listStyle: 'none',
|
||||
// font-feature-settings: @font-feature-settings-base;
|
||||
});
|
||||
|
||||
export const resetIcon = (): CSSObject => ({
|
||||
display: 'inline-block',
|
||||
color: 'inherit',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
textTransform: 'none',
|
||||
// for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
||||
verticalAlign: '-0.125em',
|
||||
textRendering: 'optimizeLegibility',
|
||||
'-webkit-font-smoothing': 'antialiased',
|
||||
'-moz-osx-font-smoothing': 'grayscale',
|
||||
|
||||
'> *': {
|
||||
lineHeight: 1,
|
||||
},
|
||||
|
||||
svg: {
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
'& &-icon': {
|
||||
display: 'block',
|
||||
},
|
||||
});
|
||||
52
components/_util/theme/util/motion.tsx
Normal file
52
components/_util/theme/util/motion.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { CSSObject, Keyframes } from '@ant-design/cssinjs';
|
||||
|
||||
const initMotionCommon = (duration: string): CSSObject => ({
|
||||
animationDuration: duration,
|
||||
animationFillMode: 'both',
|
||||
});
|
||||
|
||||
// FIXME: origin less code seems same as initMotionCommon. Maybe we can safe remove
|
||||
const initMotionCommonLeave = (duration: string): CSSObject => ({
|
||||
animationDuration: duration,
|
||||
animationFillMode: 'both',
|
||||
});
|
||||
|
||||
export const initMotion = (
|
||||
hashId: string,
|
||||
motionName: string,
|
||||
inKeyframes: Keyframes,
|
||||
outKeyframes: Keyframes,
|
||||
duration: string,
|
||||
): CSSObject => {
|
||||
const motionCls = `.${motionName}`;
|
||||
|
||||
return {
|
||||
[`
|
||||
${motionCls}-enter,
|
||||
${motionCls}-appear
|
||||
`]: {
|
||||
...initMotionCommon(duration),
|
||||
animationPlayState: 'paused',
|
||||
},
|
||||
|
||||
[`${motionCls}-leave`]: {
|
||||
...initMotionCommonLeave(duration),
|
||||
animationPlayState: 'paused',
|
||||
},
|
||||
|
||||
[`
|
||||
${motionCls}-enter${motionCls}-enter-active,
|
||||
${motionCls}-appear${motionCls}-appear-active
|
||||
`]: {
|
||||
animationName: inKeyframes.getName(hashId),
|
||||
animationPlayState: 'running',
|
||||
},
|
||||
|
||||
[`${motionCls}-leave${motionCls}-leave-active`]: {
|
||||
animationName: outKeyframes.getName(hashId),
|
||||
animationPlayState: 'running',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
};
|
||||
};
|
||||
145
components/_util/theme/util/slide.tsx
Normal file
145
components/_util/theme/util/slide.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken } from '..';
|
||||
import { initMotion } from './motion';
|
||||
|
||||
export const initSlideMotion = (
|
||||
hashId: string,
|
||||
rootPrefixCls: string,
|
||||
motionName: string,
|
||||
inKeyframes: Keyframes,
|
||||
outKeyframes: Keyframes,
|
||||
token: DerivativeToken,
|
||||
): CSSInterpolation => {
|
||||
const rootMotionName = `${rootPrefixCls}-${motionName}`;
|
||||
const motionCls = `.${rootMotionName}`;
|
||||
|
||||
return [
|
||||
initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.durationMid),
|
||||
|
||||
{
|
||||
[`
|
||||
${motionCls}-enter,
|
||||
${motionCls}-appear
|
||||
`]: {
|
||||
opacity: 0,
|
||||
animationTimingFunction: token.easeOutQuint,
|
||||
},
|
||||
|
||||
[`${motionCls}-leave`]: {
|
||||
animationTimingFunction: token.easeInQuint,
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export const slideUpIn = new Keyframes('antSlideUpIn', {
|
||||
'0%': {
|
||||
transform: 'scaleY(0.8)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleY(1)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideUpOut = new Keyframes('antSlideUpOut', {
|
||||
'0%': {
|
||||
transform: 'scaleY(1)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleY(0.8)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideDownIn = new Keyframes('antSlideDownIn', {
|
||||
'0%': {
|
||||
transform: 'scaleY(0.8)',
|
||||
transformOrigin: '100% 100%',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleY(1)',
|
||||
transformOrigin: '100% 100%',
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideDownOut = new Keyframes('antSlideDownOut', {
|
||||
'0%': {
|
||||
transform: 'scaleY(1)',
|
||||
transformOrigin: '100% 100%',
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleY(0.8)',
|
||||
transformOrigin: '100% 100%',
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideLeftIn = new Keyframes('antSlideLeftIn', {
|
||||
'0%': {
|
||||
transform: 'scaleX(0.8)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleX(1)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideLeftOut = new Keyframes('antSlideLeftOut', {
|
||||
'0%': {
|
||||
transform: 'scaleX(1)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleX(0.8)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideRightIn = new Keyframes('antSlideRightIn', {
|
||||
'0%': {
|
||||
transform: 'scaleX(0.8)',
|
||||
transformOrigin: '100% 0%',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleX(1)',
|
||||
transformOrigin: '100% 0%',
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export const slideRightOut = new Keyframes('antSlideRightOut', {
|
||||
'0%': {
|
||||
transform: 'scaleX(1)',
|
||||
transformOrigin: '100% 0%',
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'scaleX(0.8)',
|
||||
transformOrigin: '100% 0%',
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
@ -15,33 +15,39 @@ import {
|
||||
|
||||
// FIXME: missing token
|
||||
type AlertToken = DerivativeToken & {
|
||||
alertMessageColor: string,
|
||||
alertCloseColor: string,
|
||||
alertCloseHoverColor: string,
|
||||
alertMessageColor: string;
|
||||
alertCloseColor: string;
|
||||
alertCloseHoverColor: string;
|
||||
|
||||
alertInfoBgColor: string,
|
||||
alertInfoIconColor: string,
|
||||
alertInfoBorderColor: string,
|
||||
alertInfoBgColor: string;
|
||||
alertInfoIconColor: string;
|
||||
alertInfoBorderColor: string;
|
||||
|
||||
alertSuccessBgColor: string,
|
||||
alertSuccessIconColor: string,
|
||||
alertSuccessBorderColor: string,
|
||||
alertSuccessBgColor: string;
|
||||
alertSuccessIconColor: string;
|
||||
alertSuccessBorderColor: string;
|
||||
|
||||
alertWarningBgColor: string,
|
||||
alertWarningIconColor: string,
|
||||
alertWarningBorderColor: string,
|
||||
alertWarningBgColor: string;
|
||||
alertWarningIconColor: string;
|
||||
alertWarningBorderColor: string;
|
||||
|
||||
alertErrorBgColor: string,
|
||||
alertErrorIconColor: string,
|
||||
alertErrorBorderColor: string,
|
||||
alertErrorBgColor: string;
|
||||
alertErrorIconColor: string;
|
||||
alertErrorBorderColor: string;
|
||||
|
||||
alertWithDescriptionIconSize: number,
|
||||
alertWithDescriptionPadding: string,
|
||||
alertWithDescriptionPaddingVertical: number,
|
||||
alertWithDescriptionNoIconPaddingVertical: number,
|
||||
}
|
||||
alertWithDescriptionIconSize: number;
|
||||
alertWithDescriptionPadding: string;
|
||||
alertWithDescriptionPaddingVertical: number;
|
||||
alertWithDescriptionNoIconPaddingVertical: number;
|
||||
};
|
||||
|
||||
const genAlertTypeStyle = (bgColor: string, borderColor: string, iconColor: string, token: AlertToken, alertCls: string): CSSObject => ({
|
||||
const genAlertTypeStyle = (
|
||||
bgColor: string,
|
||||
borderColor: string,
|
||||
iconColor: string,
|
||||
token: AlertToken,
|
||||
alertCls: string,
|
||||
): CSSObject => ({
|
||||
backgroundColor: bgColor,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${borderColor}`,
|
||||
[`${alertCls}-icon`]: {
|
||||
@ -164,11 +170,35 @@ export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject =>
|
||||
|
||||
return {
|
||||
[alertCls]: {
|
||||
'&-success': genAlertTypeStyle(alertSuccessBgColor, alertSuccessBorderColor, alertSuccessIconColor, token, alertCls),
|
||||
'&-info': genAlertTypeStyle(alertInfoBgColor, alertInfoBorderColor, alertInfoIconColor, token, alertCls),
|
||||
'&-warning': genAlertTypeStyle(alertWarningBgColor, alertWarningBorderColor, alertWarningIconColor, token, alertCls),
|
||||
'&-success': genAlertTypeStyle(
|
||||
alertSuccessBgColor,
|
||||
alertSuccessBorderColor,
|
||||
alertSuccessIconColor,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
'&-info': genAlertTypeStyle(
|
||||
alertInfoBgColor,
|
||||
alertInfoBorderColor,
|
||||
alertInfoIconColor,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
'&-warning': genAlertTypeStyle(
|
||||
alertWarningBgColor,
|
||||
alertWarningBorderColor,
|
||||
alertWarningIconColor,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
'&-error': {
|
||||
...genAlertTypeStyle(alertErrorBgColor, alertErrorBorderColor, alertErrorIconColor, token, alertCls),
|
||||
...genAlertTypeStyle(
|
||||
alertErrorBgColor,
|
||||
alertErrorBorderColor,
|
||||
alertErrorIconColor,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
[`${alertCls}-description > pre`]: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
@ -178,14 +208,12 @@ export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject =>
|
||||
};
|
||||
};
|
||||
|
||||
export const genActionStyle = (alertCls: string, iconPrefixCls: string, token: AlertToken): CSSObject => {
|
||||
const {
|
||||
duration,
|
||||
marginXS,
|
||||
fontSizeSM,
|
||||
alertCloseColor,
|
||||
alertCloseHoverColor,
|
||||
} = token;
|
||||
export const genActionStyle = (
|
||||
alertCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: AlertToken,
|
||||
): CSSObject => {
|
||||
const { duration, marginXS, fontSizeSM, alertCloseColor, alertCloseHoverColor } = token;
|
||||
|
||||
return {
|
||||
[alertCls]: {
|
||||
@ -225,10 +253,7 @@ export const genActionStyle = (alertCls: string, iconPrefixCls: string, token: A
|
||||
};
|
||||
|
||||
export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => {
|
||||
const {
|
||||
alertWithDescriptionIconSize,
|
||||
alertWithDescriptionPaddingVertical,
|
||||
} = token;
|
||||
const { alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token;
|
||||
|
||||
return {
|
||||
[alertCls]: {
|
||||
@ -314,7 +339,10 @@ export const genAlertStyle = (
|
||||
];
|
||||
};
|
||||
|
||||
export default function useStyle(prefixCls: string, iconPrefixCls: string): UseComponentStyleResult {
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
|
||||
@ -54,16 +54,16 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
|
||||
|
||||
// ============================== Shape ===============================
|
||||
const genCircleButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
minWidth: token.height,
|
||||
minWidth: token.controlHeight,
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
borderRadius: '50%',
|
||||
});
|
||||
|
||||
const genRoundButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
borderRadius: token.height,
|
||||
paddingLeft: token.height / 2,
|
||||
paddingRight: token.height / 2,
|
||||
borderRadius: token.controlHeight,
|
||||
paddingLeft: token.controlHeight / 2,
|
||||
paddingRight: token.controlHeight / 2,
|
||||
width: 'auto',
|
||||
});
|
||||
|
||||
@ -296,7 +296,7 @@ const genSizeButtonStyle = (
|
||||
): CSSInterpolation => {
|
||||
const paddingVertical = Math.max(
|
||||
0,
|
||||
(token.height - token.fontSize * token.lineHeight) / 2 - token.borderWidth,
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.borderWidth,
|
||||
);
|
||||
const paddingHorizontal = token.padding - token.borderWidth;
|
||||
|
||||
@ -307,11 +307,11 @@ const genSizeButtonStyle = (
|
||||
withPrefix(
|
||||
{
|
||||
fontSize: token.fontSize,
|
||||
height: token.height,
|
||||
height: token.controlHeight,
|
||||
padding: `${paddingVertical}px ${paddingHorizontal}px`,
|
||||
|
||||
[`&${iconOnlyCls}`]: {
|
||||
width: token.height,
|
||||
width: token.controlHeight,
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
|
||||
@ -357,7 +357,7 @@ const genSizeSmallButtonStyle = (
|
||||
): CSSInterpolation => {
|
||||
const largeToken: DerivativeToken = {
|
||||
...token,
|
||||
height: token.heightSM,
|
||||
controlHeight: token.controlHeightSM,
|
||||
padding: token.paddingXS,
|
||||
};
|
||||
|
||||
@ -371,7 +371,7 @@ const genSizeLargeButtonStyle = (
|
||||
): CSSInterpolation => {
|
||||
const largeToken: DerivativeToken = {
|
||||
...token,
|
||||
height: token.heightLG,
|
||||
controlHeight: token.controlHeightLG,
|
||||
fontSize: token.fontSizeLG,
|
||||
};
|
||||
|
||||
|
||||
@ -14,6 +14,8 @@ import { FormItemStatusContext } from '../form/context';
|
||||
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
|
||||
import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
|
||||
|
||||
import useStyle from './style';
|
||||
|
||||
type RawValue = string | number;
|
||||
|
||||
export { OptionProps, BaseSelectRef as RefSelectProps, BaseOptionType, DefaultOptionType };
|
||||
@ -71,6 +73,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
const {
|
||||
getPopupContainer: getContextPopupContainer,
|
||||
getPrefixCls,
|
||||
iconPrefixCls,
|
||||
renderEmpty,
|
||||
direction,
|
||||
virtual,
|
||||
@ -81,6 +84,8 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
const [wrapSSR, hashId] = useStyle(rootPrefixCls, prefixCls, iconPrefixCls);
|
||||
|
||||
const mode = React.useMemo(() => {
|
||||
const { mode: m } = props as InternalSelectProps<OptionType>;
|
||||
|
||||
@ -125,9 +130,13 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
|
||||
const selectProps = omit(props as typeof props & { itemIcon: any }, ['suffixIcon', 'itemIcon']);
|
||||
|
||||
const rcSelectRtlDropDownClassName = classNames(dropdownClassName, {
|
||||
[`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
|
||||
});
|
||||
const rcSelectRtlDropDownClassName = classNames(
|
||||
dropdownClassName,
|
||||
{
|
||||
[`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
|
||||
},
|
||||
hashId,
|
||||
);
|
||||
|
||||
const mergedSize = customizeSize || size;
|
||||
const mergedClassName = classNames(
|
||||
@ -139,6 +148,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
},
|
||||
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
|
||||
// ===================== Placement =====================
|
||||
@ -151,7 +161,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
: ('bottomLeft' as SelectCommonPlacement);
|
||||
};
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<RcSelect<any, any>
|
||||
ref={ref as any}
|
||||
virtual={virtual}
|
||||
@ -177,7 +187,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
||||
dropdownClassName={rcSelectRtlDropDownClassName}
|
||||
showArrow={hasFeedback || showArrow}
|
||||
/>
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
162
components/select/style/dropdown.tsx
Normal file
162
components/select/style/dropdown.tsx
Normal file
@ -0,0 +1,162 @@
|
||||
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
resetComponent,
|
||||
initSlideMotion,
|
||||
slideUpIn,
|
||||
slideUpOut,
|
||||
slideDownIn,
|
||||
slideDownOut,
|
||||
} from '../../_util/theme';
|
||||
import type { SelectToken } from '.';
|
||||
|
||||
const genItemStyle = (token: SelectToken): CSSObject => {
|
||||
const { controlPaddingHorizontal } = token;
|
||||
|
||||
return {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
minHeight: token.controlHeight,
|
||||
padding: `${
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2
|
||||
}px ${controlPaddingHorizontal}px`,
|
||||
color: token.textColor,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
};
|
||||
};
|
||||
|
||||
export default function genSingleStyle(token: SelectToken, hashId: string): CSSInterpolation {
|
||||
const { rootPrefixCls, antCls, selectCls } = token;
|
||||
|
||||
const selectItemCls = `${selectCls}-item`;
|
||||
|
||||
return [
|
||||
{
|
||||
[`${selectCls}-dropdown`]: {
|
||||
// ========================== Popup ==========================
|
||||
...resetComponent(token),
|
||||
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
zIndex: token.zIndexDropdown,
|
||||
boxSizing: 'border-box',
|
||||
padding: `${token.paddingXXS}px 0`,
|
||||
overflow: 'hidden',
|
||||
fontSize: token.fontSize,
|
||||
// Fix select render lag of long text in chrome
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: token.componentBackground,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadow,
|
||||
|
||||
[`
|
||||
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
|
||||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft
|
||||
`]: {
|
||||
animationName: slideUpIn.getName(hashId),
|
||||
},
|
||||
|
||||
[`
|
||||
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
|
||||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft
|
||||
`]: {
|
||||
animationName: slideDownIn.getName(hashId),
|
||||
},
|
||||
|
||||
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft`]: {
|
||||
animationName: slideUpOut.getName(hashId),
|
||||
},
|
||||
|
||||
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft`]: {
|
||||
animationName: slideDownOut.getName(hashId),
|
||||
},
|
||||
|
||||
'&-hidden': {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
'&-empty': {
|
||||
color: token.textColorDisabled,
|
||||
},
|
||||
|
||||
// ========================= Options =========================
|
||||
[`${selectItemCls}-empty`]: {
|
||||
...genItemStyle(token),
|
||||
color: token.textColorDisabled,
|
||||
},
|
||||
|
||||
[`${selectItemCls}`]: {
|
||||
...genItemStyle(token),
|
||||
cursor: 'pointer',
|
||||
transition: `background ${token.duration} ease`,
|
||||
|
||||
// =========== Group ============
|
||||
'&-group': {
|
||||
color: token.textColorSecondary,
|
||||
fontSize: token.fontSizeSM,
|
||||
cursor: 'default',
|
||||
},
|
||||
|
||||
// =========== Option ===========
|
||||
'&-option': {
|
||||
display: 'flex',
|
||||
|
||||
'&-content': {
|
||||
flex: 'auto',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
|
||||
'&-state': {
|
||||
flex: 'none',
|
||||
},
|
||||
|
||||
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
||||
backgroundColor: token.itemHoverBackground,
|
||||
},
|
||||
|
||||
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
||||
color: token.textColor,
|
||||
fontWeight: 600, // FIXME: Need design token?
|
||||
backgroundColor: token.itemActiveBackground,
|
||||
|
||||
[`${selectItemCls}-option-state`]: {
|
||||
color: token.primaryColor,
|
||||
},
|
||||
},
|
||||
'&-disabled': {
|
||||
[`&${selectItemCls}-option-selected`]: {
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
},
|
||||
|
||||
color: token.textColorDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
'&-grouped': {
|
||||
paddingInlineStart: token.controlPaddingHorizontal * 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// =========================== RTL ===========================
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Follow code may reuse in other components
|
||||
initSlideMotion(hashId, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
|
||||
initSlideMotion(hashId, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
|
||||
slideUpIn,
|
||||
slideUpOut,
|
||||
slideDownIn,
|
||||
slideDownOut,
|
||||
];
|
||||
}
|
||||
@ -1,322 +1,322 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
@import './single';
|
||||
@import './multiple';
|
||||
@import './status';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import '../../input/style/mixin';
|
||||
// @import './single';
|
||||
// @import './multiple';
|
||||
// @import './status';
|
||||
|
||||
@select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
@select-height-without-border: @input-height-base - 2 * @border-width-base;
|
||||
@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
|
||||
// @select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
// @select-height-without-border: @input-height-base - 2 * @border-width-base;
|
||||
// @select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
|
||||
|
||||
.select-selector() {
|
||||
position: relative;
|
||||
background-color: @select-background;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
// .select-selector() {
|
||||
// position: relative;
|
||||
// background-color: @select-background;
|
||||
// border: @border-width-base @border-style-base @select-border-color;
|
||||
// border-radius: @border-radius-base;
|
||||
// transition: all 0.3s @ease-in-out;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
// input {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
.@{select-prefix-cls}-show-search& {
|
||||
cursor: text;
|
||||
// .@{select-prefix-cls}-show-search& {
|
||||
// cursor: text;
|
||||
|
||||
input {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
// input {
|
||||
// cursor: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
|
||||
.active();
|
||||
}
|
||||
// .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
|
||||
// .active();
|
||||
// }
|
||||
|
||||
.@{select-prefix-cls}-disabled& {
|
||||
color: @disabled-color;
|
||||
background: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
// .@{select-prefix-cls}-disabled& {
|
||||
// color: @disabled-color;
|
||||
// background: @input-disabled-bg;
|
||||
// cursor: not-allowed;
|
||||
|
||||
.@{select-prefix-cls}-multiple& {
|
||||
background: @select-multiple-disabled-background;
|
||||
}
|
||||
// .@{select-prefix-cls}-multiple& {
|
||||
// background: @select-multiple-disabled-background;
|
||||
// }
|
||||
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
// input {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
/* Reset search input style */
|
||||
.select-search-input-without-border() {
|
||||
.@{select-prefix-cls}-selection-search-input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
// /* Reset search input style */
|
||||
// .select-search-input-without-border() {
|
||||
// .@{select-prefix-cls}-selection-search-input {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// background: transparent;
|
||||
// border: none;
|
||||
// outline: none;
|
||||
// appearance: none;
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &::-webkit-search-cancel-button {
|
||||
// display: none;
|
||||
// /* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
// -webkit-appearance: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{select-prefix-cls} {
|
||||
.reset-component();
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
// .@{select-prefix-cls} {
|
||||
// .reset-component();
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// cursor: pointer;
|
||||
|
||||
&:not(&-customize-input) &-selector {
|
||||
.select-selector();
|
||||
.select-search-input-without-border();
|
||||
}
|
||||
// &:not(&-customize-input) &-selector {
|
||||
// .select-selector();
|
||||
// .select-search-input-without-border();
|
||||
// }
|
||||
|
||||
&:not(&-disabled):hover &-selector {
|
||||
.hover();
|
||||
}
|
||||
// &:not(&-disabled):hover &-selector {
|
||||
// .hover();
|
||||
// }
|
||||
|
||||
// ======================== Selection ========================
|
||||
&-selection-item {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
// // ======================== Selection ========================
|
||||
// &-selection-item {
|
||||
// flex: 1;
|
||||
// overflow: hidden;
|
||||
// font-weight: normal;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
|
||||
// IE11 css hack. `*::-ms-backdrop,` is a must have
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
& {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // IE11 css hack. `*::-ms-backdrop,` is a must have
|
||||
// @media all and (-ms-high-contrast: none) {
|
||||
// *::-ms-backdrop,
|
||||
// & {
|
||||
// flex: auto;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ======================= Placeholder =======================
|
||||
&-selection-placeholder {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: @input-placeholder-color;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
// // ======================= Placeholder =======================
|
||||
// &-selection-placeholder {
|
||||
// flex: 1;
|
||||
// overflow: hidden;
|
||||
// color: @input-placeholder-color;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// pointer-events: none;
|
||||
|
||||
// IE11 css hack. `*::-ms-backdrop,` is a must have
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
& {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // IE11 css hack. `*::-ms-backdrop,` is a must have
|
||||
// @media all and (-ms-high-contrast: none) {
|
||||
// *::-ms-backdrop,
|
||||
// & {
|
||||
// flex: auto;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================== Arrow ==========================
|
||||
&-arrow {
|
||||
.iconfont-mixin();
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: @font-size-sm;
|
||||
margin-top: (-@font-size-sm / 2);
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
// // ========================== Arrow ==========================
|
||||
// &-arrow {
|
||||
// .iconfont-mixin();
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// right: @control-padding-horizontal - 1px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// height: @font-size-sm;
|
||||
// margin-top: (-@font-size-sm / 2);
|
||||
// color: @disabled-color;
|
||||
// font-size: @font-size-sm;
|
||||
// line-height: 1;
|
||||
// text-align: center;
|
||||
// pointer-events: none;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
vertical-align: top;
|
||||
transition: transform 0.3s;
|
||||
// .@{iconfont-css-prefix} {
|
||||
// vertical-align: top;
|
||||
// transition: transform 0.3s;
|
||||
|
||||
> svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
// > svg {
|
||||
// vertical-align: top;
|
||||
// }
|
||||
|
||||
&:not(.@{select-prefix-cls}-suffix) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
// &:not(.@{select-prefix-cls}-suffix) {
|
||||
// pointer-events: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{select-prefix-cls}-disabled & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// .@{select-prefix-cls}-disabled & {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================== Clear ==========================
|
||||
&-clear {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: @font-size-sm;
|
||||
height: @font-size-sm;
|
||||
margin-top: (-@font-size-sm / 2);
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
background: @select-clear-background;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: color 0.3s ease, opacity 0.15s ease;
|
||||
text-rendering: auto;
|
||||
// // ========================== Clear ==========================
|
||||
// &-clear {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// right: @control-padding-horizontal - 1px;
|
||||
// z-index: 1;
|
||||
// display: inline-block;
|
||||
// width: @font-size-sm;
|
||||
// height: @font-size-sm;
|
||||
// margin-top: (-@font-size-sm / 2);
|
||||
// color: @disabled-color;
|
||||
// font-size: @font-size-sm;
|
||||
// font-style: normal;
|
||||
// line-height: 1;
|
||||
// text-align: center;
|
||||
// text-transform: none;
|
||||
// background: @select-clear-background;
|
||||
// cursor: pointer;
|
||||
// opacity: 0;
|
||||
// transition: color 0.3s ease, opacity 0.15s ease;
|
||||
// text-rendering: auto;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
// &::before {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
// &:hover {
|
||||
// color: @text-color-secondary;
|
||||
// }
|
||||
|
||||
.@{select-prefix-cls}:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// .@{select-prefix-cls}:hover & {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================== Popup ==========================
|
||||
&-dropdown {
|
||||
.reset-component();
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
box-sizing: border-box;
|
||||
padding: @select-dropdown-edge-child-vertical-padding 0;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-base;
|
||||
// Fix select render lag of long text in chrome
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
font-variant: initial;
|
||||
background-color: @select-dropdown-bg;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
// // ========================== Popup ==========================
|
||||
// &-dropdown {
|
||||
// .reset-component();
|
||||
// position: absolute;
|
||||
// top: -9999px;
|
||||
// left: -9999px;
|
||||
// z-index: @zindex-dropdown;
|
||||
// box-sizing: border-box;
|
||||
// padding: @select-dropdown-edge-child-vertical-padding 0;
|
||||
// overflow: hidden;
|
||||
// font-size: @font-size-base;
|
||||
// // Fix select render lag of long text in chrome
|
||||
// // https://github.com/ant-design/ant-design/issues/11456
|
||||
// // https://github.com/ant-design/ant-design/issues/11843
|
||||
// font-variant: initial;
|
||||
// background-color: @select-dropdown-bg;
|
||||
// border-radius: @border-radius-base;
|
||||
// outline: none;
|
||||
// box-shadow: @box-shadow-base;
|
||||
|
||||
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
|
||||
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpIn;
|
||||
}
|
||||
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
|
||||
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
|
||||
// animation-name: antSlideUpIn;
|
||||
// }
|
||||
|
||||
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
|
||||
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
|
||||
animation-name: antSlideDownIn;
|
||||
}
|
||||
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
|
||||
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
|
||||
// animation-name: antSlideDownIn;
|
||||
// }
|
||||
|
||||
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpOut;
|
||||
}
|
||||
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
|
||||
// animation-name: antSlideUpOut;
|
||||
// }
|
||||
|
||||
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
|
||||
animation-name: antSlideDownOut;
|
||||
}
|
||||
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
|
||||
// animation-name: antSlideDownOut;
|
||||
// }
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
// &-hidden {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&-empty {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
// &-empty {
|
||||
// color: @disabled-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================= Options =========================
|
||||
.item() {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: @select-dropdown-height;
|
||||
padding: @select-dropdown-vertical-padding @control-padding-horizontal;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @select-dropdown-font-size;
|
||||
line-height: @select-dropdown-line-height;
|
||||
}
|
||||
// // ========================= Options =========================
|
||||
// .item() {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// min-height: @select-dropdown-height;
|
||||
// padding: @select-dropdown-vertical-padding @control-padding-horizontal;
|
||||
// color: @text-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @select-dropdown-font-size;
|
||||
// line-height: @select-dropdown-line-height;
|
||||
// }
|
||||
|
||||
&-item-empty {
|
||||
.item();
|
||||
color: @disabled-color;
|
||||
}
|
||||
// &-item-empty {
|
||||
// .item();
|
||||
// color: @disabled-color;
|
||||
// }
|
||||
|
||||
&-item {
|
||||
.item();
|
||||
// &-item {
|
||||
// .item();
|
||||
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
// cursor: pointer;
|
||||
// transition: background 0.3s ease;
|
||||
|
||||
// =========== Group ============
|
||||
&-group {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
cursor: default;
|
||||
}
|
||||
// // =========== Group ============
|
||||
// &-group {
|
||||
// color: @text-color-secondary;
|
||||
// font-size: @font-size-sm;
|
||||
// cursor: default;
|
||||
// }
|
||||
|
||||
// =========== Option ===========
|
||||
&-option {
|
||||
display: flex;
|
||||
// // =========== Option ===========
|
||||
// &-option {
|
||||
// display: flex;
|
||||
|
||||
&-content {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// &-content {
|
||||
// flex: auto;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
&-state {
|
||||
flex: none;
|
||||
}
|
||||
// &-state {
|
||||
// flex: none;
|
||||
// }
|
||||
|
||||
&-active:not(&-disabled) {
|
||||
background-color: @select-item-active-bg;
|
||||
}
|
||||
// &-active:not(&-disabled) {
|
||||
// background-color: @select-item-active-bg;
|
||||
// }
|
||||
|
||||
&-selected:not(&-disabled) {
|
||||
color: @select-item-selected-color;
|
||||
font-weight: @select-item-selected-font-weight;
|
||||
background-color: @select-item-selected-bg;
|
||||
// &-selected:not(&-disabled) {
|
||||
// color: @select-item-selected-color;
|
||||
// font-weight: @select-item-selected-font-weight;
|
||||
// background-color: @select-item-selected-bg;
|
||||
|
||||
.@{select-prefix-cls}-item-option-state {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
// .@{select-prefix-cls}-item-option-state {
|
||||
// color: @primary-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-disabled {
|
||||
&.@{select-prefix-cls}-item-option-selected {
|
||||
background-color: @select-multiple-disabled-background;
|
||||
}
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
// &-disabled {
|
||||
// &.@{select-prefix-cls}-item-option-selected {
|
||||
// background-color: @select-multiple-disabled-background;
|
||||
// }
|
||||
// color: @disabled-color;
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
|
||||
&-grouped {
|
||||
padding-left: @control-padding-horizontal * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-grouped {
|
||||
// padding-left: @control-padding-horizontal * 2;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ============================================================
|
||||
// == Size ==
|
||||
// ============================================================
|
||||
&-lg {
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
// // ============================================================
|
||||
// // == Size ==
|
||||
// // ============================================================
|
||||
// &-lg {
|
||||
// font-size: @font-size-lg;
|
||||
// }
|
||||
|
||||
// no border style
|
||||
&-borderless &-selector {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
// // no border style
|
||||
// &-borderless &-selector {
|
||||
// background-color: transparent !important;
|
||||
// border-color: transparent !important;
|
||||
// box-shadow: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,7 +1,372 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../empty/style';
|
||||
|
||||
// deps-lint-skip: form
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject, CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import {
|
||||
DerivativeToken,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
resetComponent,
|
||||
resetIcon,
|
||||
UseComponentStyleResult,
|
||||
} from '../../_util/theme';
|
||||
import genSingleStyle from './single';
|
||||
import genMultipleStyle from './multiple';
|
||||
import genDropdownStyle from './dropdown';
|
||||
|
||||
export type SelectToken = DerivativeToken & {
|
||||
rootPrefixCls: string;
|
||||
antCls: string;
|
||||
selectCls: string;
|
||||
iconPrefixCls: string;
|
||||
inputPaddingHorizontalBase: number;
|
||||
};
|
||||
|
||||
// ============================= Selector =============================
|
||||
const genSelectorStyle = (token: SelectToken): CSSObject => {
|
||||
const { selectCls } = token;
|
||||
|
||||
return {
|
||||
position: 'relative',
|
||||
backgroundColor: token.componentBackground,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.duration} ${token.easeInOut}`,
|
||||
|
||||
input: {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
[`${selectCls}-show-search&`]: {
|
||||
cursor: 'text',
|
||||
|
||||
input: {
|
||||
cursor: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
color: token.textColorDisabled,
|
||||
background: token.componentBackgroundDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${selectCls}-multiple&`]: {
|
||||
background: token.componentBackgroundDisabled,
|
||||
},
|
||||
|
||||
input: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Status ==============================
|
||||
const genStatusStyle = (
|
||||
rootSelectCls: string,
|
||||
token: {
|
||||
selectCls: string;
|
||||
borderHoverColor: string;
|
||||
outlineColor: string;
|
||||
outlineWidth: number;
|
||||
outlineBlurSize: number;
|
||||
borderWidth: number;
|
||||
},
|
||||
overwriteDefaultBorder: boolean = false,
|
||||
): CSSObject => {
|
||||
const { selectCls, borderHoverColor, outlineColor } = token;
|
||||
|
||||
const overwriteStyle: CSSObject = overwriteDefaultBorder
|
||||
? {
|
||||
[`${selectCls}-selector`]: {
|
||||
borderColor: borderHoverColor,
|
||||
},
|
||||
}
|
||||
: {};
|
||||
|
||||
return {
|
||||
[rootSelectCls]: {
|
||||
[`&:not(${selectCls}-disabled):not(${selectCls}-customize-input)`]: {
|
||||
...overwriteStyle,
|
||||
|
||||
[`${selectCls}-focused& ${selectCls}-selector`]: {
|
||||
borderColor: borderHoverColor,
|
||||
// FIXME: missing variable of `@input-outline-offset`
|
||||
boxShadow: `0 0 ${token.outlineBlurSize}px ${token.outlineWidth}px ${outlineColor}`,
|
||||
borderRightWidth: `${token.borderWidth}px !important`,
|
||||
outline: 0,
|
||||
},
|
||||
|
||||
[`&:hover ${selectCls}-selector`]: {
|
||||
borderColor: borderHoverColor,
|
||||
borderRightWidth: `${token.borderWidth}px !important`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Styles ==============================
|
||||
// /* Reset search input style */
|
||||
const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => {
|
||||
const { selectCls } = token;
|
||||
|
||||
return {
|
||||
[`${selectCls}-selection-search-input`]: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
appearance: 'none',
|
||||
|
||||
'&::-webkit-search-cancel-button': {
|
||||
display: 'none',
|
||||
'-webkit-appearance': 'none',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle = (token: SelectToken): CSSObject => {
|
||||
const { selectCls, iconPrefixCls, inputPaddingHorizontalBase } = token;
|
||||
|
||||
return {
|
||||
[selectCls]: {
|
||||
...resetComponent(token),
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
|
||||
[`&:not(&-customize-input) ${selectCls}-selector`]: {
|
||||
...genSelectorStyle(token),
|
||||
...getSearchInputWithoutBorderStyle(token),
|
||||
},
|
||||
|
||||
// [`&:not(&-disabled):hover ${selectCls}-selector`]: {
|
||||
// ...genHoverStyle(token),
|
||||
// },
|
||||
|
||||
// ======================== Selection ========================
|
||||
[`${selectCls}-selection-item`]: {
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
fontWeight: 'normal',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
|
||||
// ======================= Placeholder =======================
|
||||
[`${selectCls}-selection-placeholder`]: {
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
color: token.placeholderColor,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
// ========================== Arrow ==========================
|
||||
[`${selectCls}-arrow`]: {
|
||||
...resetIcon(),
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: inputPaddingHorizontalBase,
|
||||
width: token.fontSizeSM,
|
||||
height: token.fontSizeSM,
|
||||
marginTop: -token.fontSizeSM / 2,
|
||||
color: token.textColorDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
pointerEvents: 'none',
|
||||
|
||||
[`.${iconPrefixCls}`]: {
|
||||
verticalAlign: 'top',
|
||||
transition: `transform ${token.duration}`,
|
||||
|
||||
'> svg': {
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
|
||||
[`&:not(${selectCls}-suffix)`]: {
|
||||
pointerEvents: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
[`${selectCls}-disabled &`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Clear ==========================
|
||||
[`${selectCls}-clear`]: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: inputPaddingHorizontalBase,
|
||||
zIndex: 1,
|
||||
display: 'inline-block',
|
||||
width: token.fontSizeSM,
|
||||
height: token.fontSizeSM,
|
||||
marginTop: -token.fontSizeSM / 2,
|
||||
color: token.textColorDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
textTransform: 'none',
|
||||
background: token.componentBackground,
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: `color ${token.duration} ease, opacity ${token.duration} ease`,
|
||||
textRendering: 'auto',
|
||||
|
||||
'&:before': {
|
||||
display: 'block',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
color: token.textColorSecondary,
|
||||
},
|
||||
|
||||
[`${selectCls}:hover &`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ========================= Feedback ==========================
|
||||
[`${selectCls}-has-feedback`]: {
|
||||
[`${selectCls}-clear`]: {
|
||||
insetInlineEnd: token.padding * 2,
|
||||
},
|
||||
|
||||
// FIXME: what's this? @MadCcc
|
||||
[`${selectCls}-selection-selected-value`]: {
|
||||
paddingInlineEnd: 42,
|
||||
},
|
||||
|
||||
[`${selectCls}-feedback-icon`]: {
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
visibility: 'visible',
|
||||
animation: `zoomIn ${token.duration} ${token.easeOutBack}`,
|
||||
pointerEvents: 'none',
|
||||
|
||||
'&:not(:first-child)': {
|
||||
marginInlineStart: token.marginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Styles ==============================
|
||||
export const genSelectStyle = (
|
||||
rootPrefixCls: string,
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: DerivativeToken,
|
||||
hashId: string,
|
||||
): CSSInterpolation => {
|
||||
const antCls = `.${rootPrefixCls}`;
|
||||
const selectCls = `.${prefixCls}`;
|
||||
|
||||
const inputPaddingHorizontalBase = token.controlPaddingHorizontal - 1;
|
||||
|
||||
const selectToken: SelectToken = {
|
||||
...token,
|
||||
rootPrefixCls,
|
||||
antCls,
|
||||
selectCls,
|
||||
iconPrefixCls,
|
||||
inputPaddingHorizontalBase,
|
||||
};
|
||||
|
||||
return [
|
||||
// ==================== BorderLess ====================
|
||||
{
|
||||
[selectCls]: {
|
||||
[`&-borderless ${selectCls}-selector`]: {
|
||||
backgroundColor: `transparent !important`,
|
||||
borderColor: `transparent !important`,
|
||||
boxShadow: `none !important`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// =====================================================
|
||||
// == LTR ==
|
||||
// =====================================================
|
||||
// Base
|
||||
genBaseStyle(selectToken),
|
||||
|
||||
// Single
|
||||
genSingleStyle(selectToken),
|
||||
|
||||
// Multiple
|
||||
genMultipleStyle(selectToken),
|
||||
|
||||
// Dropdown
|
||||
genDropdownStyle(selectToken, hashId),
|
||||
|
||||
// =====================================================
|
||||
// == RTL ==
|
||||
// =====================================================
|
||||
{
|
||||
[`${selectCls}-rtl`]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
|
||||
// =====================================================
|
||||
// == Status ==
|
||||
// =====================================================
|
||||
genStatusStyle(selectCls, {
|
||||
...selectToken,
|
||||
borderHoverColor: token.primaryHoverColor,
|
||||
outlineColor: token.primaryOutlineColor,
|
||||
}),
|
||||
genStatusStyle(
|
||||
`${selectCls}-status-error`,
|
||||
{
|
||||
...selectToken,
|
||||
borderHoverColor: token.errorHoverColor,
|
||||
outlineColor: token.errorOutlineColor,
|
||||
},
|
||||
true,
|
||||
),
|
||||
genStatusStyle(
|
||||
`${selectCls}-status-warning`,
|
||||
{
|
||||
...selectToken,
|
||||
borderHoverColor: token.warningHoverColor,
|
||||
outlineColor: token.warningOutlineColor,
|
||||
},
|
||||
true,
|
||||
),
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
rootPrefixCls: string,
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genSelectStyle(rootPrefixCls, prefixCls, iconPrefixCls, token, hashId),
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
232
components/select/style/multiple.tsx
Normal file
232
components/select/style/multiple.tsx
Normal file
@ -0,0 +1,232 @@
|
||||
import { CSSObject, CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import type { SelectToken } from '.';
|
||||
import { resetIcon } from '../../_util/theme';
|
||||
|
||||
const FIXED_ITEM_MARGIN = 2;
|
||||
|
||||
function getSelectItemStyle({ controlHeightSM, controlHeight, borderWidth }: SelectToken) {
|
||||
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
|
||||
const selectItemMargin = Math.ceil(selectItemDist / 2);
|
||||
return [selectItemDist, selectItemMargin];
|
||||
}
|
||||
|
||||
function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
const { selectCls, iconPrefixCls } = token;
|
||||
|
||||
const selectOverflowPrefixCls = `${selectCls}-selection-overflow`;
|
||||
|
||||
const selectItemHeight = token.controlHeightSM;
|
||||
const [selectItemDist] = getSelectItemStyle(token);
|
||||
|
||||
const suffixCls = suffix ? `${selectCls}-${suffix}` : '';
|
||||
|
||||
return {
|
||||
[`${selectCls}-multiple${suffixCls}`]: {
|
||||
fontSize: token.fontSize,
|
||||
|
||||
/**
|
||||
* Do not merge `height` & `line-height` under style with `selection` & `search`, since chrome
|
||||
* may update to redesign with its align logic.
|
||||
*/
|
||||
// =========================== Overflow ===========================
|
||||
[selectOverflowPrefixCls]: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flex: 'auto',
|
||||
flexWrap: 'wrap',
|
||||
maxWidth: '100%',
|
||||
|
||||
'&-item': {
|
||||
flex: 'none',
|
||||
alignSelf: 'center',
|
||||
maxWidth: '100%',
|
||||
display: 'inline-flex',
|
||||
},
|
||||
},
|
||||
|
||||
// ========================= Selector =========================
|
||||
[`${selectCls}-selector`]: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
// Multiple is little different that horizontal is follow the vertical
|
||||
padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
|
||||
|
||||
[`${selectCls}-show-search&`]: {
|
||||
cursor: 'text',
|
||||
},
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
background: token.componentBackgroundDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
'&:after': {
|
||||
display: 'inline-block',
|
||||
width: 0,
|
||||
margin: `${FIXED_ITEM_MARGIN}px 0`,
|
||||
lineHeight: `${selectItemHeight}px`,
|
||||
content: '"\\a0"',
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
&${selectCls}-show-arrow ${selectCls}-selector,
|
||||
&${selectCls}-allow-clear ${selectCls}-selector
|
||||
`]: {
|
||||
paddingInlineEnd: token.fontSizeSM + token.controlPaddingHorizontal,
|
||||
},
|
||||
|
||||
// ======================== Selections ========================
|
||||
[`${selectCls}-selection-item`]: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flex: 'none',
|
||||
boxSizing: 'border-box',
|
||||
maxWidth: '100%',
|
||||
height: selectItemHeight,
|
||||
marginTop: FIXED_ITEM_MARGIN,
|
||||
marginBottom: FIXED_ITEM_MARGIN,
|
||||
lineHeight: `${selectItemHeight - token.borderWidth * 2}px`,
|
||||
background: token.background,
|
||||
border: `${token.borderWidth}px solid ${token.borderColorSplit}`,
|
||||
borderRadius: token.borderRadius,
|
||||
cursor: 'default',
|
||||
transition: `font-size ${token.duration}, line-height ${token.duration}, height ${token.duration}`,
|
||||
userSelect: 'none',
|
||||
marginInlineEnd: FIXED_ITEM_MARGIN * 2,
|
||||
paddingInlineStart: token.paddingXS,
|
||||
paddingInlineEnd: token.paddingXS / 2,
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
color: token.textColorDisabled,
|
||||
borderColor: token.borderColor,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
||||
'&-content': {
|
||||
display: 'inline-block',
|
||||
marginInlineEnd: token.paddingXS / 2,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'pre', // fix whitespace wrapping. custom tags display all whitespace within.
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
|
||||
'&-remove': {
|
||||
...resetIcon(),
|
||||
|
||||
display: 'inline-block',
|
||||
color: token.textColorSecondary,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 10,
|
||||
lineHeight: 'inherit',
|
||||
cursor: 'pointer',
|
||||
|
||||
[`> .${iconPrefixCls}`]: {
|
||||
verticalAlign: '-0.2em',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
color: token.iconColorHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Input ==========================
|
||||
[`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
|
||||
[`${selectCls}-selection-search`]: {
|
||||
marginInlineStart: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`${selectCls}-selection-search`]: {
|
||||
display: 'inline-flex',
|
||||
position: 'relative',
|
||||
maxWidth: '100%',
|
||||
// FIXME: no sure this style
|
||||
marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist,
|
||||
|
||||
[`
|
||||
&-input,
|
||||
&-mirror
|
||||
`]: {
|
||||
height: selectItemHeight,
|
||||
fontFamily: token.fontFamily,
|
||||
lineHeight: `${selectItemHeight}px`,
|
||||
transition: `all ${token.duration}`,
|
||||
},
|
||||
|
||||
'&-input': {
|
||||
width: '100%',
|
||||
minWidth: 4.1, // fix search cursor missing
|
||||
},
|
||||
|
||||
'&-mirror': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
insetInlineEnd: 'auto',
|
||||
zIndex: 999,
|
||||
whiteSpace: 'pre', // fix whitespace wrapping caused width calculation bug
|
||||
visibility: 'hidden',
|
||||
},
|
||||
},
|
||||
|
||||
// ======================= Placeholder =======================
|
||||
[`${selectCls}-selection-placeholder `]: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: token.inputPaddingHorizontalBase,
|
||||
insetInlineEnd: token.inputPaddingHorizontalBase,
|
||||
transform: 'translateY(-50%)',
|
||||
transition: `all ${token.duration}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
|
||||
const { selectCls } = token;
|
||||
|
||||
const smallToken: SelectToken = {
|
||||
...token,
|
||||
controlHeight: token.controlHeightSM,
|
||||
controlHeightSM: token.controlHeightXS,
|
||||
};
|
||||
const [, smSelectItemMargin] = getSelectItemStyle(token);
|
||||
|
||||
return [
|
||||
genSizeStyle(token),
|
||||
// ======================== Small ========================
|
||||
// Shared
|
||||
genSizeStyle(smallToken, 'sm'),
|
||||
|
||||
// Padding
|
||||
{
|
||||
[`${selectCls}-multiple${selectCls}-sm`]: {
|
||||
[`${selectCls}-selection-placeholder`]: {
|
||||
insetInlineStart: token.controlPaddingHorizontalSM - token.borderWidth,
|
||||
insetInlineEnd: 'auto',
|
||||
},
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/29559
|
||||
[`${selectCls}-selection-search`]: {
|
||||
marginInlineStart: smSelectItemMargin,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ======================== Large ========================
|
||||
// Shared
|
||||
genSizeStyle(
|
||||
{
|
||||
...token,
|
||||
fontSize: token.fontSizeLG,
|
||||
controlHeight: token.controlHeightLG,
|
||||
controlHeightSM: token.controlHeight,
|
||||
},
|
||||
'lg',
|
||||
),
|
||||
];
|
||||
}
|
||||
187
components/select/style/single.tsx
Normal file
187
components/select/style/single.tsx
Normal file
@ -0,0 +1,187 @@
|
||||
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import type { SelectToken } from '.';
|
||||
|
||||
function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
const { selectCls, inputPaddingHorizontalBase } = token;
|
||||
|
||||
const selectHeightWithoutBorder = token.controlHeight - token.borderWidth * 2;
|
||||
|
||||
const selectionItemPadding = Math.ceil(token.fontSize * 1.25);
|
||||
|
||||
const suffixCls = suffix ? `${selectCls}-${suffix}` : '';
|
||||
|
||||
return {
|
||||
[`${selectCls}-single${suffixCls}`]: {
|
||||
fontSize: token.fontSize,
|
||||
|
||||
// ========================= Selector =========================
|
||||
[`${selectCls}-selector`]: {
|
||||
display: 'flex',
|
||||
[`${selectCls}-selection-search`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: inputPaddingHorizontalBase,
|
||||
right: inputPaddingHorizontalBase,
|
||||
bottom: 0,
|
||||
|
||||
'&-input': {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
${selectCls}-selection-item,
|
||||
${selectCls}-selection-placeholder
|
||||
`]: {
|
||||
padding: 0,
|
||||
lineHeight: `${selectHeightWithoutBorder}px`,
|
||||
transition: `all ${token.duration}`,
|
||||
|
||||
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
|
||||
'@supports (-moz-appearance: meterbar) &': {
|
||||
lineHeight: `${selectHeightWithoutBorder}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${selectCls}-selection-item`]: {
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
[`${selectCls}-selection-placeholder`]: {
|
||||
transition: 'none',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
// For common baseline align
|
||||
[[
|
||||
'&:after',
|
||||
/* For '' value baseline align */
|
||||
`${selectCls}-selection-item:after`,
|
||||
/* For undefined value baseline align */
|
||||
`${selectCls}-selection-placeholder:after`,
|
||||
].join(',')]: {
|
||||
display: 'inline-block',
|
||||
width: 0,
|
||||
visibility: 'hidden',
|
||||
content: '"\\a0"',
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
&${selectCls}-show-arrow ${selectCls}-selection-item,
|
||||
&${selectCls}-show-arrow ${selectCls}-selection-placeholder
|
||||
`]: {
|
||||
paddingInlineEnd: selectionItemPadding,
|
||||
},
|
||||
|
||||
// Opacity selection if open
|
||||
[`&${selectCls}-open ${selectCls}-selection-item`]: {
|
||||
color: token.placeholderColor,
|
||||
},
|
||||
|
||||
// ========================== Input ==========================
|
||||
// We only change the style of non-customize input which is only support by `combobox` mode.
|
||||
// Not customize
|
||||
[`&:not(${selectCls}-customize-input)`]: {
|
||||
[`${selectCls}-selector`]: {
|
||||
width: '100%',
|
||||
height: token.controlHeight,
|
||||
padding: `0 ${inputPaddingHorizontalBase}px`,
|
||||
|
||||
[`${selectCls}-selection-search-input`]: {
|
||||
height: selectHeightWithoutBorder,
|
||||
},
|
||||
|
||||
'&:after': {
|
||||
lineHeight: `${selectHeightWithoutBorder}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${selectCls}-customize-input`]: {
|
||||
[`${selectCls}-selector`]: {
|
||||
'&:after': {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
[`${selectCls}-selection-search`]: {
|
||||
position: 'static',
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
[`${selectCls}-selection-placeholder`]: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: `0 ${inputPaddingHorizontalBase}px`,
|
||||
|
||||
'&:after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default function genSingleStyle(token: SelectToken): CSSInterpolation {
|
||||
const { selectCls } = token;
|
||||
|
||||
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.borderWidth;
|
||||
|
||||
return [
|
||||
genSizeStyle(token),
|
||||
|
||||
// ======================== Small ========================
|
||||
// Shared
|
||||
genSizeStyle(
|
||||
{
|
||||
...token,
|
||||
controlHeight: token.controlHeightSM,
|
||||
},
|
||||
'sm',
|
||||
),
|
||||
|
||||
// padding
|
||||
{
|
||||
[`${selectCls}-single${selectCls}-sm`]: {
|
||||
[`&:not(${selectCls}-customize-input)`]: {
|
||||
[`${selectCls}-selection-search`]: {
|
||||
left: inputPaddingHorizontalSM,
|
||||
right: inputPaddingHorizontalSM,
|
||||
},
|
||||
|
||||
[`${selectCls}-selector`]: {
|
||||
padding: `0 ${inputPaddingHorizontalSM}px`,
|
||||
},
|
||||
|
||||
// With arrow should provides `padding-right` to show the arrow
|
||||
[`&${selectCls}-show-arrow ${selectCls}-selection-search`]: {
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5,
|
||||
},
|
||||
|
||||
[`
|
||||
&${selectCls}-show-arrow ${selectCls}-selection-item,
|
||||
&${selectCls}-show-arrow ${selectCls}-selection-placeholder
|
||||
`]: {
|
||||
paddingInlineEnd: token.fontSize * 1.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ======================== Large ========================
|
||||
// Shared
|
||||
genSizeStyle(
|
||||
{
|
||||
...token,
|
||||
controlHeight: token.controlHeightLG,
|
||||
fontSize: token.fontSizeLG,
|
||||
},
|
||||
'lg',
|
||||
),
|
||||
];
|
||||
}
|
||||
@ -1,129 +1,129 @@
|
||||
.slide-motion(@className, @keyframeName) {
|
||||
@name: ~'@{ant-prefix}-@{className}';
|
||||
.make-motion(@name, @keyframeName);
|
||||
.@{name}-enter,
|
||||
.@{name}-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: @ease-out-quint;
|
||||
}
|
||||
.@{name}-leave {
|
||||
animation-timing-function: @ease-in-quint;
|
||||
}
|
||||
}
|
||||
// .slide-motion(@className, @keyframeName) {
|
||||
// @name: ~'@{ant-prefix}-@{className}';
|
||||
// .make-motion(@name, @keyframeName);
|
||||
// .@{name}-enter,
|
||||
// .@{name}-appear {
|
||||
// opacity: 0;
|
||||
// animation-timing-function: @ease-out-quint;
|
||||
// }
|
||||
// .@{name}-leave {
|
||||
// animation-timing-function: @ease-in-quint;
|
||||
// }
|
||||
// }
|
||||
|
||||
.slide-motion(slide-up, antSlideUp);
|
||||
.slide-motion(slide-down, antSlideDown);
|
||||
.slide-motion(slide-left, antSlideLeft);
|
||||
.slide-motion(slide-right, antSlideRight);
|
||||
// .slide-motion(slide-up, antSlideUp);
|
||||
// .slide-motion(slide-down, antSlideDown);
|
||||
// .slide-motion(slide-left, antSlideLeft);
|
||||
// .slide-motion(slide-right, antSlideRight);
|
||||
|
||||
@keyframes antSlideUpIn {
|
||||
0% {
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes antSlideUpIn {
|
||||
// 0% {
|
||||
// transform: scaleY(0.8);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleY(1);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideUpOut {
|
||||
0% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
// @keyframes antSlideUpOut {
|
||||
// 0% {
|
||||
// transform: scaleY(1);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleY(0.8);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideDownIn {
|
||||
0% {
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes antSlideDownIn {
|
||||
// 0% {
|
||||
// transform: scaleY(0.8);
|
||||
// transform-origin: 100% 100%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleY(1);
|
||||
// transform-origin: 100% 100%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideDownOut {
|
||||
0% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
// @keyframes antSlideDownOut {
|
||||
// 0% {
|
||||
// transform: scaleY(1);
|
||||
// transform-origin: 100% 100%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleY(0.8);
|
||||
// transform-origin: 100% 100%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideLeftIn {
|
||||
0% {
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes antSlideLeftIn {
|
||||
// 0% {
|
||||
// transform: scaleX(0.8);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleX(1);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideLeftOut {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
// @keyframes antSlideLeftOut {
|
||||
// 0% {
|
||||
// transform: scaleX(1);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleX(0.8);
|
||||
// transform-origin: 0% 0%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideRightIn {
|
||||
0% {
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
// @keyframes antSlideRightIn {
|
||||
// 0% {
|
||||
// transform: scaleX(0.8);
|
||||
// transform-origin: 100% 0%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleX(1);
|
||||
// transform-origin: 100% 0%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes antSlideRightOut {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
// @keyframes antSlideRightOut {
|
||||
// 0% {
|
||||
// transform: scaleX(1);
|
||||
// transform-origin: 100% 0%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
100% {
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
// 100% {
|
||||
// transform: scaleX(0.8);
|
||||
// transform-origin: 100% 0%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1964,7 +1964,11 @@ describe('Table.filter', () => {
|
||||
expect(wrapper.find('.ant-tree-checkbox').at(0).hasClass('ant-tree-checkbox-checked')).toBe(
|
||||
true,
|
||||
);
|
||||
expect(wrapper.find('.ant-table-filter-dropdown-checkall .ant-checkbox').hasClass('ant-checkbox-indeterminate')).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-table-filter-dropdown-checkall .ant-checkbox')
|
||||
.hasClass('ant-checkbox-indeterminate'),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it('select-all checkbox should change when all items are selected', () => {
|
||||
@ -1991,7 +1995,11 @@ describe('Table.filter', () => {
|
||||
});
|
||||
wrapper.find('.ant-tree-node-content-wrapper').at(0).simulate('click');
|
||||
wrapper.find('.ant-tree-node-content-wrapper').at(1).simulate('click');
|
||||
expect(wrapper.find('.ant-table-filter-dropdown-checkall .ant-checkbox').hasClass('ant-checkbox-checked')).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-table-filter-dropdown-checkall .ant-checkbox')
|
||||
.hasClass('ant-checkbox-checked'),
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -492,7 +492,7 @@ export const genTreeStyle = (
|
||||
const treeNodeCls = `${treeCls}-treenode`;
|
||||
|
||||
const treeNodePadding = token.paddingXS / 2;
|
||||
const treeTitleHeight = token.heightSM;
|
||||
const treeTitleHeight = token.controlHeightSM;
|
||||
|
||||
const treeToken = {
|
||||
...token,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user