diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index 3b11f710a1..f29b75e723 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -7,7 +7,14 @@ import { genHoverStyle, initInputToken, } from '../../input/style'; -import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion'; +import { + initSlideMotion, + initMoveMotion, + slideDownIn, + slideDownOut, + slideUpIn, + slideUpOut, +} from '../../style/motion'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; import type { GlobalToken } from '../../theme/interface'; @@ -848,7 +855,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }; }; -const genPickerStatusStyle: GenerateStyle = token => { +const genPickerStatusStyle: GenerateStyle = (token) => { const { componentCls, colorBgContainer, @@ -905,7 +912,7 @@ const genPickerStatusStyle: GenerateStyle = token => { }; }; -const genPickerStyle: GenerateStyle = token => { +const genPickerStyle: GenerateStyle = (token) => { const { componentCls, antCls, @@ -952,428 +959,436 @@ const genPickerStyle: GenerateStyle = token => { 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 ${motionDurationFast}, box-shadow ${motionDurationFast}`, - - // Space.Compact - ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`), - - '&:hover, &-focused': { - ...genHoverStyle(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 ${motionDurationFast}, box-shadow ${motionDurationFast}`, - '&-focused': { - ...genActiveStyle(token), - }, + // Space.Compact + ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`), - '&&-disabled': { - background: colorBgContainerDisabled, - borderColor: colorBorder, - cursor: 'not-allowed', + '&:hover, &-focused': { + ...genHoverStyle(token), + }, - [`${componentCls}-suffix`]: { - color: colorTextDisabled, + '&-focused': { + ...genActiveStyle(token), }, - }, - '&&-borderless': { - backgroundColor: 'transparent !important', - borderColor: 'transparent !important', - boxShadow: 'none !important', - }, + '&&-disabled': { + background: colorBgContainerDisabled, + borderColor: colorBorder, + cursor: 'not-allowed', - // ======================== Input ========================= - [`${componentCls}-input`]: { - position: 'relative', - display: 'inline-flex', - alignItems: 'center', - width: '100%', + [`${componentCls}-suffix`]: { + color: colorTextDisabled, + }, + }, - '> input': { - ...genBasicInputStyle(token), - flex: 'auto', + '&&-borderless': { + backgroundColor: 'transparent !important', + borderColor: 'transparent !important', + boxShadow: 'none !important', + }, - // 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, + // ======================== Input ========================= + [`${componentCls}-input`]: { + position: 'relative', + display: 'inline-flex', + alignItems: 'center', + width: '100%', - '&:focus': { - boxShadow: 'none', - }, + '> input': { + ...genBasicInputStyle(token), + flex: 'auto', - '&[disabled]': { + // 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, + '&:hover': { + [`${componentCls}-clear`]: { + opacity: 1, + }, }, - }, - '&-placeholder': { - '> input': { - color: colorTextPlaceholder, + '&-placeholder': { + '> input': { + color: colorTextPlaceholder, + }, }, }, - }, - // Size - '&-large': { - ...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal), + // Size + '&-large': { + ...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal), - [`${componentCls}-input > input`]: { - fontSize: fontSizeLG, + [`${componentCls}-input > input`]: { + fontSize: fontSizeLG, + }, }, - }, - '&-small': { - ...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM), - }, + '&-small': { + ...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM), + }, - [`${componentCls}-suffix`]: { - display: 'flex', - flex: 'none', - alignSelf: 'center', - marginInlineStart: paddingXS / 2, - color: colorTextDisabled, - lineHeight: 1, - pointerEvents: 'none', + [`${componentCls}-suffix`]: { + display: 'flex', + flex: 'none', + alignSelf: 'center', + marginInlineStart: paddingXS / 2, + color: colorTextDisabled, + lineHeight: 1, + pointerEvents: 'none', - '> *': { - verticalAlign: 'top', + '> *': { + verticalAlign: 'top', - '&:not(:last-child)': { - marginInlineEnd: marginXS, + '&: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 ${motionDurationFast}, color ${motionDurationFast}`, + [`${componentCls}-clear`]: { + position: 'absolute', + top: '50%', + insetInlineEnd: 0, + color: colorTextDisabled, + lineHeight: 1, + background: colorBgContainer, + transform: 'translateY(-50%)', + cursor: 'pointer', + opacity: 0, + transition: `opacity ${motionDurationFast}, color ${motionDurationFast}`, - '> *': { - verticalAlign: 'top', - }, + '> *': { + verticalAlign: 'top', + }, - '&:hover': { - color: colorTextDescription, + '&:hover': { + color: colorTextDescription, + }, }, - }, - [`${componentCls}-separator`]: { - position: 'relative', - display: 'inline-block', - width: '1em', - height: fontSizeLG, - color: colorTextDisabled, - fontSize: fontSizeLG, - verticalAlign: 'top', - cursor: 'default', + [`${componentCls}-separator`]: { + position: 'relative', + display: 'inline-block', + width: '1em', + height: fontSizeLG, + color: colorTextDisabled, + fontSize: fontSizeLG, + verticalAlign: 'top', + cursor: 'default', - [`${componentCls}-focused &`]: { - color: colorTextDescription, - }, + [`${componentCls}-focused &`]: { + color: colorTextDescription, + }, - [`${componentCls}-range-separator &`]: { - [`${componentCls}-disabled &`]: { - cursor: 'not-allowed', + [`${componentCls}-range-separator &`]: { + [`${componentCls}-disabled &`]: { + cursor: 'not-allowed', + }, }, }, - }, - - // ======================== Range ========================= - '&-range': { - position: 'relative', - display: 'inline-flex', - // Clear - [`${componentCls}-clear`]: { - insetInlineEnd: inputPaddingHorizontal, - }, + // ======================== Range ========================= + '&-range': { + position: 'relative', + display: 'inline-flex', - '&:hover': { + // Clear [`${componentCls}-clear`]: { - opacity: 1, + insetInlineEnd: inputPaddingHorizontal, }, - }, - // Active bar - [`${componentCls}-active-bar`]: { - bottom: -lineWidth, - height: lineWidthBold, - marginInlineStart: inputPaddingHorizontal, - background: colorPrimary, - opacity: 0, - transition: `all ${motionDurationSlow} ease-out`, - pointerEvents: 'none', - }, + '&:hover': { + [`${componentCls}-clear`]: { + opacity: 1, + }, + }, - [`&${componentCls}-focused`]: { + // Active bar [`${componentCls}-active-bar`]: { - opacity: 1, + bottom: -lineWidth, + height: lineWidthBold, + marginInlineStart: inputPaddingHorizontal, + background: colorPrimary, + opacity: 0, + transition: `all ${motionDurationSlow} ease-out`, + pointerEvents: 'none', }, - }, - [`${componentCls}-range-separator`]: { - alignItems: 'center', - padding: `0 ${paddingXS}px`, - lineHeight: 1, - }, + [`&${componentCls}-focused`]: { + [`${componentCls}-active-bar`]: { + opacity: 1, + }, + }, - [`&${componentCls}-small`]: { - [`${componentCls}-clear`]: { - insetInlineEnd: inputPaddingHorizontalSM, + [`${componentCls}-range-separator`]: { + alignItems: 'center', + padding: `0 ${paddingXS}px`, + lineHeight: 1, }, - [`${componentCls}-active-bar`]: { - marginInlineStart: inputPaddingHorizontalSM, + [`&${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, + // ======================= 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', - }, + '&&-hidden': { + display: 'none', + }, - '&&-placement-bottomLeft': { - [`${componentCls}-range-arrow`]: { - top: 0, - display: 'block', - transform: 'translateY(-100%)', + '&&-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)', + '&&-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-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, - }, + animationName: slideDownIn, + }, - [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft, + [`&${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, - }, + animationName: slideUpIn, + }, - [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft, + [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft, &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: { - animationName: slideDownOut, - }, + animationName: slideDownOut, + }, - [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft, + [`&${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', + animationName: slideUpOut, }, - // https://github.com/ant-design/ant-design/issues/23687 - [`${componentCls}-preset > ${antCls}-tag-blue`]: { - color: colorPrimary, - background: controlItemBgActive, - borderColor: colorPrimaryBorder, - cursor: 'pointer', + // Time picker with additional style + [`${componentCls}-panel > ${componentCls}-time-panel`]: { + paddingTop: paddingXXS, }, - [`${componentCls}-ok`]: { - marginInlineStart: 'auto', - }, - }, + // ======================== 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', - [`${componentCls}-range-wrapper`]: { - display: 'flex', - position: 'relative', - }, + '> li': { + display: 'inline-block', + }, - [`${componentCls}-range-arrow`]: { - position: 'absolute', - zIndex: 1, - display: 'none', - marginInlineStart: inputPaddingHorizontal * 1.5, - transition: `left ${motionDurationSlow} ease-out`, - ...roundedArrow( - sizePopupArrow, - borderRadiusXS, - borderRadiusOuter, - colorBgElevated, - boxShadowPopoverArrow, - ), - }, + // https://github.com/ant-design/ant-design/issues/23687 + [`${componentCls}-preset > ${antCls}-tag-blue`]: { + color: colorPrimary, + background: controlItemBgActive, + borderColor: colorPrimaryBorder, + cursor: 'pointer', + }, - [`${componentCls}-panel-container`]: { - overflow: 'hidden', - verticalAlign: 'top', - background: colorBgElevated, - borderRadius: borderRadiusLG, - boxShadow: boxShadowSecondary, - transition: `margin ${motionDurationSlow}`, + [`${componentCls}-ok`]: { + marginInlineStart: 'auto', + }, + }, - // ======================== Layout ======================== - [`${componentCls}-panel-layout`]: { + [`${componentCls}-range-wrapper`]: { display: 'flex', - flexWrap: 'nowrap', - alignItems: 'stretch', + position: 'relative', }, - // ======================== 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}`, + [`${componentCls}-range-arrow`]: { + position: 'absolute', + zIndex: 1, + display: 'none', + marginInlineStart: inputPaddingHorizontal * 1.5, + transition: `left ${motionDurationSlow} ease-out`, + ...roundedArrow( + sizePopupArrow, + borderRadiusXS, + borderRadiusOuter, + colorBgElevated, + boxShadowPopoverArrow, + ), + }, - '+ li': { - marginTop: marginXS, - }, + [`${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', + }, - '&:hover': { - background: controlItemBgHover, + // ======================== 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`, - }, + // ======================== Panels ======================== + [`${componentCls}-panels`]: { + display: 'inline-flex', + flexWrap: 'nowrap', + direction: 'ltr', - '&:last-child': { [`${componentCls}-panel`]: { - borderWidth: 0, + borderWidth: `0 0 ${lineWidth}px`, + }, + + '&:last-child': { + [`${componentCls}-panel`]: { + borderWidth: 0, + }, }, }, - }, - [`${componentCls}-panel`]: { - verticalAlign: 'top', - background: 'transparent', - borderRadius: 0, - borderWidth: 0, + [`${componentCls}-panel`]: { + verticalAlign: 'top', + background: 'transparent', + borderRadius: 0, + borderWidth: 0, - [`${componentCls}-content, + [`${componentCls}-content, table`]: { - textAlign: 'center', - }, + textAlign: 'center', + }, - '&-focused': { - borderColor: colorBorder, + '&-focused': { + borderColor: colorBorder, + }, }, }, }, - }, - '&-dropdown-range': { - padding: `${(sizePopupArrow * 2) / 3}px 0`, + '&-dropdown-range': { + padding: `${(sizePopupArrow * 2) / 3}px 0`, - '&-hidden': { - display: 'none', + '&-hidden': { + display: 'none', + }, }, - }, - '&-rtl': { - direction: 'rtl', + '&-rtl': { + direction: 'rtl', - [`${componentCls}-separator`]: { - transform: 'rotate(180deg)', - }, + [`${componentCls}-separator`]: { + transform: 'rotate(180deg)', + }, - [`${componentCls}-footer`]: { - '&-extra': { - direction: 'rtl', + [`${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): PickerPanelToken => { @@ -1403,14 +1418,14 @@ export const initPickerPanelToken = (token: TokenWithCommonCls): Pi // ============================== Export ============================== export default genComponentStyleHook( 'DatePicker', - token => { + (token) => { const pickerToken = mergeToken( initInputToken>(token), initPickerPanelToken(token), ); return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)]; }, - token => ({ + (token) => ({ presetsWidth: 120, presetsMaxWidth: 200, zIndexPopup: token.zIndexPopupBase + 50,