ant-design/components/date-picker/style/index.tsx

1435 lines
41 KiB
TypeScript

import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import type { InputToken } from '../../input/style';
import {
genActiveStyle,
genBasicInputStyle,
genHoverStyle,
initInputToken,
} from '../../input/style';
import {
initSlideMotion,
initMoveMotion,
slideDownIn,
slideDownOut,
slideUpIn,
slideUpOut,
} from '../../style/motion';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import type { GlobalToken } from '../../theme/interface';
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
import { resetComponent, roundedArrow, textEllipsis } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
export interface ComponentToken {
presetsWidth: number;
presetsMaxWidth: number;
zIndexPopup: number;
}
export type PickerPanelToken = {
pickerCellInnerCls: string;
pickerTextHeight: number;
pickerPanelCellWidth: number;
pickerPanelCellHeight: number;
pickerDateHoverRangeBorderColor: string;
pickerBasicCellHoverWithRangeColor: string;
pickerPanelWithoutTimeCellHeight: number;
pickerYearMonthCellWidth: number;
pickerTimePanelColumnHeight: number;
pickerTimePanelColumnWidth: number;
pickerTimePanelCellHeight: number;
pickerCellPaddingVertical: number;
pickerQuarterPanelContentHeight: number;
pickerCellBorderGap: number;
pickerControlIconSize: number;
pickerControlIconBorderWidth: number;
};
type PickerToken = InputToken<FullToken<'DatePicker'>> & PickerPanelToken;
type SharedPickerToken = Omit<PickerToken, 'zIndexPopup' | 'presetsWidth' | 'presetsMaxWidth'>;
const genPikerPadding = (
token: PickerToken,
inputHeight: number,
fontSize: number,
paddingHorizontal: number,
): CSSObject => {
const { lineHeight } = token;
const fontHeight = Math.floor(fontSize * lineHeight) + 2;
const paddingTop = Math.max((inputHeight - fontHeight) / 2, 0);
const paddingBottom = Math.max(inputHeight - fontHeight - paddingTop, 0);
return {
padding: `${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px`,
};
};
const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
const {
componentCls,
pickerCellInnerCls,
pickerPanelCellHeight,
motionDurationSlow,
borderRadiusSM,
motionDurationMid,
controlItemBgHover,
lineWidth,
lineType,
colorPrimary,
controlItemBgActive,
colorTextLightSolid,
controlHeightSM,
pickerDateHoverRangeBorderColor,
pickerCellBorderGap,
pickerBasicCellHoverWithRangeColor,
pickerPanelCellWidth,
colorTextDisabled,
colorBgContainerDisabled,
} = token;
return {
'&::before': {
position: 'absolute',
top: '50%',
insetInlineStart: 0,
insetInlineEnd: 0,
zIndex: 1,
height: pickerPanelCellHeight,
transform: 'translateY(-50%)',
transition: `all ${motionDurationSlow}`,
content: '""',
},
// >>> Default
[pickerCellInnerCls]: {
position: 'relative',
zIndex: 2,
display: 'inline-block',
minWidth: pickerPanelCellHeight,
height: pickerPanelCellHeight,
lineHeight: `${pickerPanelCellHeight}px`,
borderRadius: borderRadiusSM,
transition: `background ${motionDurationMid}, border ${motionDurationMid}`,
},
// >>> Hover
[`&:hover:not(&-in-view),
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)`]:
{
[pickerCellInnerCls]: {
background: controlItemBgHover,
},
},
// >>> Today
[`&-in-view:is(&-today) ${pickerCellInnerCls}`]: {
'&::before': {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
zIndex: 1,
border: `${lineWidth}px ${lineType} ${colorPrimary}`,
borderRadius: borderRadiusSM,
content: '""',
},
},
// >>> In Range
'&-in-view:is(&-in-range)': {
position: 'relative',
'&::before': {
background: controlItemBgActive,
},
},
// >>> Selected
[`&-in-view:is(&-selected) ${pickerCellInnerCls},
&-in-view:is(&-range-start) ${pickerCellInnerCls},
&-in-view:is(&-range-end) ${pickerCellInnerCls}`]: {
color: colorTextLightSolid,
background: colorPrimary,
},
[`&-in-view:is(&-range-start):not(&-range-start-single),
&-in-view:is(&-range-end):not(&-range-end-single)`]: {
'&::before': {
background: controlItemBgActive,
},
},
'&-in-view:is(&-range-start)::before': {
insetInlineStart: '50%',
},
'&-in-view:is(&-range-end)::before': {
insetInlineEnd: '50%',
},
// >>> Range Hover
[`&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end),
&-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end),
&-in-view:is(&-range-hover-start):is(&-range-start-single),
&-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover),
&-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover),
&-in-view:is(&-range-hover-end):is(&-range-end-single),
&-in-view:is(&-range-hover):not(&-in-range)`]: {
'&::after': {
position: 'absolute',
top: '50%',
zIndex: 0,
height: controlHeightSM,
borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
transform: 'translateY(-50%)',
transition: `all ${motionDurationSlow}`,
content: '""',
},
},
// Add space for stash
[`&-range-hover-start::after,
&-range-hover-end::after,
&-range-hover::after`]: {
insetInlineEnd: 0,
insetInlineStart: pickerCellBorderGap,
},
// Hover with in range
[`&-in-view:is(&-in-range):is(&-range-hover)::before,
&-in-view:is(&-range-start):is(&-range-hover)::before,
&-in-view:is(&-range-end):is(&-range-hover)::before,
&-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before,
&-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before,
${componentCls}-panel
> :not(${componentCls}-date-panel)
&-in-view:is(&-in-range):is(&-range-hover-start)::before,
${componentCls}-panel
> :not(${componentCls}-date-panel)
&-in-view:is(&-in-range):is(&-range-hover-end)::before`]: {
background: pickerBasicCellHoverWithRangeColor,
},
// range start border-radius
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
{
borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: borderRadiusSM,
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
// range end border-radius
[`&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) ${pickerCellInnerCls}`]:
{
borderStartStartRadius: 0,
borderEndStartRadius: 0,
borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: borderRadiusSM,
},
'&-range-hover:is(&-range-end)::after': {
insetInlineStart: '50%',
},
// Edge start
[`tr > &-in-view:is(&-range-hover):first-child::after,
tr > &-in-view:is(&-range-hover-end):first-child::after,
&-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after,
&-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,
&-in-view:is(&-range-hover-start)::after`]: {
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: lineWidth,
borderEndStartRadius: lineWidth,
},
// Edge end
[`tr > &-in-view:is(&-range-hover):last-child::after,
tr > &-in-view:is(&-range-hover-start):last-child::after,
&-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after,
&-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,
&-in-view:is(&-range-hover-end)::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartEndRadius: lineWidth,
borderEndEndRadius: lineWidth,
},
// >>> Disabled
'&-disabled': {
color: colorTextDisabled,
pointerEvents: 'none',
[pickerCellInnerCls]: {
background: 'transparent',
},
'&::before': {
background: colorBgContainerDisabled,
},
},
[`&-disabled:is(&-today) ${pickerCellInnerCls}::before`]: {
borderColor: colorTextDisabled,
},
};
};
export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
const {
componentCls,
pickerCellInnerCls,
pickerYearMonthCellWidth,
pickerControlIconSize,
pickerPanelCellWidth,
paddingSM,
paddingXS,
paddingXXS,
colorBgContainer,
lineWidth,
lineType,
borderRadiusLG,
colorPrimary,
colorTextHeading,
colorSplit,
pickerControlIconBorderWidth,
colorIcon,
pickerTextHeight,
motionDurationMid,
colorIconHover,
fontWeightStrong,
pickerPanelCellHeight,
pickerCellPaddingVertical,
colorTextDisabled,
colorText,
fontSize,
pickerBasicCellHoverWithRangeColor,
motionDurationSlow,
pickerPanelWithoutTimeCellHeight,
pickerQuarterPanelContentHeight,
colorLink,
colorLinkActive,
colorLinkHover,
pickerDateHoverRangeBorderColor,
borderRadiusSM,
colorTextLightSolid,
borderRadius,
controlItemBgHover,
pickerTimePanelColumnHeight,
pickerTimePanelColumnWidth,
pickerTimePanelCellHeight,
controlItemBgActive,
marginXXS,
} = token;
const pickerPanelWidth = pickerPanelCellWidth * 7 + paddingSM * 2 + 4;
const hoverCellFixedDistance =
(pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2;
return {
[componentCls]: {
'&-panel': {
display: 'inline-flex',
flexDirection: 'column',
textAlign: 'center',
background: colorBgContainer,
border: `${lineWidth}px ${lineType} ${colorSplit}`,
borderRadius: borderRadiusLG,
outline: 'none',
'&-focused': {
borderColor: colorPrimary,
},
'&-rtl': {
direction: 'rtl',
[`${componentCls}-prev-icon,
${componentCls}-super-prev-icon`]: {
transform: 'rotate(135deg)',
},
[`${componentCls}-next-icon,
${componentCls}-super-next-icon`]: {
transform: 'rotate(-45deg)',
},
},
},
// ========================================================
// = Shared Panel =
// ========================================================
[`&-decade-panel,
&-year-panel,
&-quarter-panel,
&-month-panel,
&-week-panel,
&-date-panel,
&-time-panel`]: {
display: 'flex',
flexDirection: 'column',
width: pickerPanelWidth,
},
// ======================= Header =======================
'&-header': {
display: 'flex',
padding: `0 ${paddingXS}px`,
color: colorTextHeading,
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
'> *': {
flex: 'none',
},
button: {
padding: 0,
color: colorIcon,
lineHeight: `${pickerTextHeight}px`,
background: 'transparent',
border: 0,
cursor: 'pointer',
transition: `color ${motionDurationMid}`,
},
'> button': {
minWidth: '1.6em',
fontSize,
'&:hover': {
color: colorIconHover,
},
},
'&-view': {
flex: 'auto',
fontWeight: fontWeightStrong,
lineHeight: `${pickerTextHeight}px`,
button: {
color: 'inherit',
fontWeight: 'inherit',
verticalAlign: 'top',
'&:not(:first-child)': {
marginInlineStart: paddingXS,
},
'&:hover': {
color: colorPrimary,
},
},
},
},
// Arrow button
[`&-prev-icon,
&-next-icon,
&-super-prev-icon,
&-super-next-icon`]: {
position: 'relative',
display: 'inline-block',
width: pickerControlIconSize,
height: pickerControlIconSize,
'&::before': {
position: 'absolute',
top: 0,
insetInlineStart: 0,
display: 'inline-block',
width: pickerControlIconSize,
height: pickerControlIconSize,
border: `0 solid currentcolor`,
borderBlockStartWidth: pickerControlIconBorderWidth,
borderBlockEndWidth: 0,
borderInlineStartWidth: pickerControlIconBorderWidth,
borderInlineEndWidth: 0,
content: '""',
},
},
[`&-super-prev-icon,
&-super-next-icon`]: {
'&::after': {
position: 'absolute',
top: Math.ceil(pickerControlIconSize / 2),
insetInlineStart: Math.ceil(pickerControlIconSize / 2),
display: 'inline-block',
width: pickerControlIconSize,
height: pickerControlIconSize,
border: '0 solid currentcolor',
borderBlockStartWidth: pickerControlIconBorderWidth,
borderBlockEndWidth: 0,
borderInlineStartWidth: pickerControlIconBorderWidth,
borderInlineEndWidth: 0,
content: '""',
},
},
[`&-prev-icon,
&-super-prev-icon`]: {
transform: 'rotate(-45deg)',
},
[`&-next-icon,
&-super-next-icon`]: {
transform: 'rotate(135deg)',
},
// ======================== Body ========================
'&-content': {
width: '100%',
tableLayout: 'fixed',
borderCollapse: 'collapse',
'th, td': {
position: 'relative',
minWidth: pickerPanelCellHeight,
fontWeight: 'normal',
},
th: {
height: pickerPanelCellHeight + pickerCellPaddingVertical * 2,
color: colorText,
verticalAlign: 'middle',
},
},
'&-cell': {
padding: `${pickerCellPaddingVertical}px 0`,
color: colorTextDisabled,
cursor: 'pointer',
// In view
'&-in-view': {
color: colorText,
},
...genPickerCellInnerStyle(token),
},
// DatePanel only
[`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start ${pickerCellInnerCls},
&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}`]:
{
'&::after': {
position: 'absolute',
top: 0,
bottom: 0,
zIndex: -1,
background: pickerBasicCellHoverWithRangeColor,
transition: `all ${motionDurationSlow}`,
content: '""',
},
},
[`&-date-panel
${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start
${pickerCellInnerCls}::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
insetInlineStart: 0,
},
[`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]:
{
insetInlineEnd: 0,
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
},
// Hover with range start & end
'&-range-hover:is(&-range-start)::after': {
insetInlineEnd: '50%',
},
[`&-decade-panel,
&-year-panel,
&-quarter-panel,
&-month-panel`]: {
[`${componentCls}-content`]: {
height: pickerPanelWithoutTimeCellHeight * 4,
},
[pickerCellInnerCls]: {
padding: `0 ${paddingXS}px`,
},
},
'&-quarter-panel': {
[`${componentCls}-content`]: {
height: pickerQuarterPanelContentHeight,
},
},
// ======================== Footer ========================
[`&-panel ${componentCls}-footer`]: {
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
},
'&-footer': {
width: 'min-content',
minWidth: '100%',
lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
textAlign: 'center',
'&-extra': {
padding: `0 ${paddingSM}`,
lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
textAlign: 'start',
'&:not(:last-child)': {
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
},
},
},
'&-now': {
textAlign: 'start',
},
'&-today-btn': {
color: colorLink,
'&:hover': {
color: colorLinkHover,
},
'&:active': {
color: colorLinkActive,
},
'&:is(&-disabled)': {
color: colorTextDisabled,
cursor: 'not-allowed',
},
},
// ========================================================
// = Special =
// ========================================================
// ===================== Decade Panel =====================
'&-decade-panel': {
[pickerCellInnerCls]: {
padding: `0 ${paddingXS / 2}px`,
},
[`${componentCls}-cell::before`]: {
display: 'none',
},
},
// ============= Year & Quarter & Month Panel =============
[`&-year-panel,
&-quarter-panel,
&-month-panel`]: {
[`${componentCls}-body`]: {
padding: `0 ${paddingXS}px`,
},
[pickerCellInnerCls]: {
width: pickerYearMonthCellWidth,
},
[`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: borderRadiusSM,
borderBottomStartRadius: borderRadiusSM,
borderStartEndRadius: 0,
borderBottomEndRadius: 0,
[`${componentCls}-panel-rtl &`]: {
insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0,
borderBottomStartRadius: 0,
borderStartEndRadius: borderRadiusSM,
borderBottomEndRadius: borderRadiusSM,
},
},
[`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0,
borderBottomStartRadius: 0,
borderStartEndRadius: borderRadius,
borderBottomEndRadius: borderRadius,
[`${componentCls}-panel-rtl &`]: {
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: borderRadius,
borderBottomStartRadius: borderRadius,
borderStartEndRadius: 0,
borderBottomEndRadius: 0,
},
},
},
// ====================== Week Panel ======================
'&-week-panel': {
[`${componentCls}-body`]: {
padding: `${paddingXS}px ${paddingSM}px`,
},
// Clear cell style
[`${componentCls}-cell`]: {
[`&:hover ${pickerCellInnerCls},
&-selected ${pickerCellInnerCls},
${pickerCellInnerCls}`]: {
background: 'transparent !important',
},
},
'&-row': {
td: {
transition: `background ${motionDurationMid}`,
'&:first-child': {
borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: borderRadiusSM,
},
'&:last-child': {
borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: borderRadiusSM,
},
},
'&:hover td': {
background: controlItemBgHover,
},
[`&-selected td,
&-selected:hover td`]: {
background: colorPrimary,
[`&${componentCls}-cell-week`]: {
color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(),
},
[`&${componentCls}-cell-today ${pickerCellInnerCls}::before`]: {
borderColor: colorTextLightSolid,
},
[pickerCellInnerCls]: {
color: colorTextLightSolid,
},
},
},
},
// ====================== Date Panel ======================
'&-date-panel': {
[`${componentCls}-body`]: {
padding: `${paddingXS}px ${paddingSM}px`,
},
[`${componentCls}-content`]: {
width: pickerPanelCellWidth * 7,
th: {
width: pickerPanelCellWidth,
},
},
},
// ==================== Datetime Panel ====================
'&-datetime-panel': {
display: 'flex',
[`${componentCls}-time-panel`]: {
borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`,
},
[`${componentCls}-date-panel,
${componentCls}-time-panel`]: {
transition: `opacity ${motionDurationSlow}`,
},
// Keyboard
'&-active': {
[`${componentCls}-date-panel,
${componentCls}-time-panel`]: {
opacity: 0.3,
'&-active': {
opacity: 1,
},
},
},
},
// ====================== Time Panel ======================
'&-time-panel': {
width: 'auto',
minWidth: 'auto',
direction: 'ltr',
[`${componentCls}-content`]: {
display: 'flex',
flex: 'auto',
height: pickerTimePanelColumnHeight,
},
'&-column': {
flex: '1 0 auto',
width: pickerTimePanelColumnWidth,
margin: `${paddingXXS}px 0`,
padding: 0,
overflowY: 'hidden',
textAlign: 'start',
listStyle: 'none',
transition: `background ${motionDurationMid}`,
overflowX: 'hidden',
'&::after': {
display: 'block',
height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight,
content: '""',
},
'&:not(:first-child)': {
borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`,
},
'&-active': {
background: new TinyColor(controlItemBgActive).setAlpha(0.2).toHexString(),
},
'&:hover': {
overflowY: 'auto',
},
'> li': {
margin: 0,
padding: 0,
[`&${componentCls}-time-panel-cell`]: {
marginInline: marginXXS,
[`${componentCls}-time-panel-cell-inner`]: {
display: 'block',
width: pickerTimePanelColumnWidth - 2 * marginXXS,
height: pickerTimePanelCellHeight,
margin: 0,
paddingBlock: 0,
paddingInlineEnd: 0,
paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2,
color: colorText,
lineHeight: `${pickerTimePanelCellHeight}px`,
borderRadius: borderRadiusSM,
cursor: 'pointer',
transition: `background ${motionDurationMid}`,
'&:hover': {
background: controlItemBgHover,
},
},
'&-selected': {
[`${componentCls}-time-panel-cell-inner`]: {
background: controlItemBgActive,
},
},
'&-disabled': {
[`${componentCls}-time-panel-cell-inner`]: {
color: colorTextDisabled,
background: 'transparent',
cursor: 'not-allowed',
},
},
},
},
},
},
// https://github.com/ant-design/ant-design/issues/39227
[`&-datetime-panel ${componentCls}-time-panel-column:after`]: {
height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2,
},
},
};
};
const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
const {
componentCls,
colorBgContainer,
colorError,
colorErrorOutline,
colorWarning,
colorWarningOutline,
} = token;
return {
[componentCls]: {
'&-status-error&': {
'&, &:not([disabled]):hover': {
backgroundColor: colorBgContainer,
borderColor: colorError,
},
'&-focused, &:focus': {
...genActiveStyle(
mergeToken<PickerToken>(token, {
inputBorderActiveColor: colorError,
inputBorderHoverColor: colorError,
controlOutline: colorErrorOutline,
}),
),
},
[`${componentCls}-active-bar`]: {
background: colorError,
},
},
'&-status-warning&': {
'&, &:not([disabled]):hover': {
backgroundColor: colorBgContainer,
borderColor: colorWarning,
},
'&-focused, &:focus': {
...genActiveStyle(
mergeToken<PickerToken>(token, {
inputBorderActiveColor: colorWarning,
inputBorderHoverColor: colorWarning,
controlOutline: colorWarningOutline,
}),
),
},
[`${componentCls}-active-bar`]: {
background: colorWarning,
},
},
},
};
};
const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
const {
componentCls,
antCls,
boxShadowPopoverArrow,
controlHeight,
fontSize,
inputPaddingHorizontal,
colorBgContainer,
lineWidth,
lineType,
colorBorder,
borderRadius,
motionDurationMid,
colorBgContainerDisabled,
colorTextDisabled,
colorTextPlaceholder,
controlHeightLG,
fontSizeLG,
controlHeightSM,
inputPaddingHorizontalSM,
paddingXS,
marginXS,
colorTextDescription,
lineWidthBold,
lineHeight,
colorPrimary,
motionDurationSlow,
zIndexPopup,
paddingXXS,
paddingSM,
pickerTextHeight,
controlItemBgActive,
colorPrimaryBorder,
sizePopupArrow,
borderRadiusXS,
borderRadiusOuter,
colorBgElevated,
borderRadiusLG,
boxShadowSecondary,
borderRadiusSM,
colorSplit,
controlItemBgHover,
presetsWidth,
presetsMaxWidth,
} = token;
return [
{
[componentCls]: {
...resetComponent(token),
...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal),
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
background: colorBgContainer,
border: `${lineWidth}px ${lineType} ${colorBorder}`,
borderRadius,
transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
// Space.Compact
...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
'&:hover, &-focused': {
...genHoverStyle(token),
},
'&-focused': {
...genActiveStyle(token),
},
'&&-disabled': {
background: colorBgContainerDisabled,
borderColor: colorBorder,
cursor: 'not-allowed',
[`${componentCls}-suffix`]: {
color: colorTextDisabled,
},
},
'&&-borderless': {
backgroundColor: 'transparent !important',
borderColor: 'transparent !important',
boxShadow: 'none !important',
},
// ======================== Input =========================
[`${componentCls}-input`]: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
'> input': {
...genBasicInputStyle(token),
flex: 'auto',
// Fix Firefox flex not correct:
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
minWidth: 1,
height: 'auto',
padding: 0,
background: 'transparent',
border: 0,
'&:focus': {
boxShadow: 'none',
},
'&[disabled]': {
background: 'transparent',
},
},
'&:hover': {
[`${componentCls}-clear`]: {
opacity: 1,
},
},
'&-placeholder': {
'> input': {
color: colorTextPlaceholder,
},
},
},
// Size
'&-large': {
...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal),
[`${componentCls}-input > input`]: {
fontSize: fontSizeLG,
},
},
'&-small': {
...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM),
},
[`${componentCls}-suffix`]: {
display: 'flex',
flex: 'none',
alignSelf: 'center',
marginInlineStart: paddingXS / 2,
color: colorTextDisabled,
lineHeight: 1,
pointerEvents: 'none',
'> *': {
verticalAlign: 'top',
'&:not(:last-child)': {
marginInlineEnd: marginXS,
},
},
},
[`${componentCls}-clear`]: {
position: 'absolute',
top: '50%',
insetInlineEnd: 0,
color: colorTextDisabled,
lineHeight: 1,
background: colorBgContainer,
transform: 'translateY(-50%)',
cursor: 'pointer',
opacity: 0,
transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
'> *': {
verticalAlign: 'top',
},
'&:hover': {
color: colorTextDescription,
},
},
[`${componentCls}-separator`]: {
position: 'relative',
display: 'inline-block',
width: '1em',
height: fontSizeLG,
color: colorTextDisabled,
fontSize: fontSizeLG,
verticalAlign: 'top',
cursor: 'default',
[`${componentCls}-focused &`]: {
color: colorTextDescription,
},
[`${componentCls}-range-separator &`]: {
[`${componentCls}-disabled &`]: {
cursor: 'not-allowed',
},
},
},
// ======================== Range =========================
'&-range': {
position: 'relative',
display: 'inline-flex',
// Clear
[`${componentCls}-clear`]: {
insetInlineEnd: inputPaddingHorizontal,
},
'&:hover': {
[`${componentCls}-clear`]: {
opacity: 1,
},
},
// Active bar
[`${componentCls}-active-bar`]: {
bottom: -lineWidth,
height: lineWidthBold,
marginInlineStart: inputPaddingHorizontal,
background: colorPrimary,
opacity: 0,
transition: `all ${motionDurationSlow} ease-out`,
pointerEvents: 'none',
},
[`&${componentCls}-focused`]: {
[`${componentCls}-active-bar`]: {
opacity: 1,
},
},
[`${componentCls}-range-separator`]: {
alignItems: 'center',
padding: `0 ${paddingXS}px`,
lineHeight: 1,
},
[`&${componentCls}-small`]: {
[`${componentCls}-clear`]: {
insetInlineEnd: inputPaddingHorizontalSM,
},
[`${componentCls}-active-bar`]: {
marginInlineStart: inputPaddingHorizontalSM,
},
},
},
// ======================= Dropdown =======================
'&-dropdown': {
...resetComponent(token),
...genPanelStyle(token),
position: 'absolute',
// Fix incorrect position of picker popup
// https://github.com/ant-design/ant-design/issues/35590
top: -9999,
left: {
_skip_check_: true,
value: -9999,
},
zIndex: zIndexPopup,
'&&-hidden': {
display: 'none',
},
'&&-placement-bottomLeft': {
[`${componentCls}-range-arrow`]: {
top: 0,
display: 'block',
transform: 'translateY(-100%)',
},
},
'&&-placement-topLeft': {
[`${componentCls}-range-arrow`]: {
bottom: 0,
display: 'block',
transform: 'translateY(100%) rotate(180deg)',
},
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
animationName: slideDownIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
animationName: slideUpIn,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
animationName: slideDownOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
animationName: slideUpOut,
},
// Time picker with additional style
[`${componentCls}-panel > ${componentCls}-time-panel`]: {
paddingTop: paddingXXS,
},
// ======================== Ranges ========================
[`${componentCls}-ranges`]: {
marginBottom: 0,
padding: `${paddingXXS}px ${paddingSM}px`,
overflow: 'hidden',
lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`,
textAlign: 'start',
listStyle: 'none',
display: 'flex',
justifyContent: 'space-between',
'> li': {
display: 'inline-block',
},
// https://github.com/ant-design/ant-design/issues/23687
[`${componentCls}-preset > ${antCls}-tag-blue`]: {
color: colorPrimary,
background: controlItemBgActive,
borderColor: colorPrimaryBorder,
cursor: 'pointer',
},
[`${componentCls}-ok`]: {
marginInlineStart: 'auto',
},
},
[`${componentCls}-range-wrapper`]: {
display: 'flex',
position: 'relative',
},
[`${componentCls}-range-arrow`]: {
position: 'absolute',
zIndex: 1,
display: 'none',
marginInlineStart: inputPaddingHorizontal * 1.5,
transition: `left ${motionDurationSlow} ease-out`,
...roundedArrow(
sizePopupArrow,
borderRadiusXS,
borderRadiusOuter,
colorBgElevated,
boxShadowPopoverArrow,
),
},
[`${componentCls}-panel-container`]: {
overflow: 'hidden',
verticalAlign: 'top',
background: colorBgElevated,
borderRadius: borderRadiusLG,
boxShadow: boxShadowSecondary,
transition: `margin ${motionDurationSlow}`,
// ======================== Layout ========================
[`${componentCls}-panel-layout`]: {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'stretch',
},
// ======================== Preset ========================
[`${componentCls}-presets`]: {
display: 'flex',
flexDirection: 'column',
minWidth: presetsWidth,
maxWidth: presetsMaxWidth,
ul: {
height: 0,
flex: 'auto',
listStyle: 'none',
overflow: 'auto',
margin: 0,
padding: paddingXS,
borderInlineEnd: `${lineWidth}px ${lineType} ${colorSplit}`,
li: {
...textEllipsis,
borderRadius: borderRadiusSM,
paddingInline: paddingXS,
paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2,
cursor: 'pointer',
transition: `all ${motionDurationSlow}`,
'+ li': {
marginTop: marginXS,
},
'&:hover': {
background: controlItemBgHover,
},
},
},
},
// ======================== Panels ========================
[`${componentCls}-panels`]: {
display: 'inline-flex',
flexWrap: 'nowrap',
direction: 'ltr',
[`${componentCls}-panel`]: {
borderWidth: `0 0 ${lineWidth}px`,
},
'&:last-child': {
[`${componentCls}-panel`]: {
borderWidth: 0,
},
},
},
[`${componentCls}-panel`]: {
verticalAlign: 'top',
background: 'transparent',
borderRadius: 0,
borderWidth: 0,
[`${componentCls}-content,
table`]: {
textAlign: 'center',
},
'&-focused': {
borderColor: colorBorder,
},
},
},
},
'&-dropdown-range': {
padding: `${(sizePopupArrow * 2) / 3}px 0`,
'&-hidden': {
display: 'none',
},
},
'&-rtl': {
direction: 'rtl',
[`${componentCls}-separator`]: {
transform: 'rotate(180deg)',
},
[`${componentCls}-footer`]: {
'&-extra': {
direction: 'rtl',
},
},
},
},
},
// Follow code may reuse in other components
initSlideMotion(token, 'slide-up'),
initSlideMotion(token, 'slide-down'),
initMoveMotion(token, 'move-up'),
initMoveMotion(token, 'move-down'),
];
};
export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): PickerPanelToken => {
const pickerTimePanelCellHeight = 28;
const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token;
return {
pickerCellInnerCls: `${componentCls}-cell-inner`,
pickerTextHeight: controlHeightLG,
pickerPanelCellWidth: controlHeightSM * 1.5,
pickerPanelCellHeight: controlHeightSM,
pickerDateHoverRangeBorderColor: new TinyColor(colorPrimary).lighten(20).toHexString(),
pickerBasicCellHoverWithRangeColor: new TinyColor(colorPrimary).lighten(35).toHexString(),
pickerPanelWithoutTimeCellHeight: controlHeightLG * 1.65,
pickerYearMonthCellWidth: controlHeightLG * 1.5,
pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8,
pickerTimePanelColumnWidth: controlHeightLG * 1.4,
pickerTimePanelCellHeight,
pickerQuarterPanelContentHeight: controlHeightLG * 1.4,
pickerCellPaddingVertical: paddingXXS,
pickerCellBorderGap: 2, // Magic for gap between cells
pickerControlIconSize: 7,
pickerControlIconBorderWidth: 1.5,
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'DatePicker',
(token) => {
const pickerToken = mergeToken<PickerToken>(
initInputToken<FullToken<'DatePicker'>>(token),
initPickerPanelToken(token),
);
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
},
(token) => ({
presetsWidth: 120,
presetsMaxWidth: 200,
zIndexPopup: token.zIndexPopupBase + 50,
}),
);