antd
Version:
An enterprise-class UI design language and React components implementation
746 lines (736 loc) • 37.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { TinyColor } from '@ctrl/tinycolor';
import { genActiveStyle, genBasicInputStyle, genHoverStyle, initInputToken } from '../../input/style';
import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent, roundedArrow } from '../../style';
var genPikerPadding = function genPikerPadding(token, inputHeight, fontSize, paddingHorizontal) {
var fontHeight = Math.floor(fontSize * token.lineHeight) + 2;
var paddingTop = Math.max((inputHeight - fontHeight) / 2, 0);
var paddingBottom = Math.max(inputHeight - fontHeight - paddingTop, 0);
return {
padding: "".concat(paddingTop, "px ").concat(paddingHorizontal, "px ").concat(paddingBottom, "px")
};
};
var genPickerCellInnerStyle = function genPickerCellInnerStyle(token) {
var _disabled, _ref;
var componentCls = token.componentCls,
pickerCellInnerCls = token.pickerCellInnerCls;
return _ref = {
'&::before': {
position: 'absolute',
top: '50%',
insetInlineStart: 0,
insetInlineEnd: 0,
zIndex: 1,
height: token.pickerPanelCellHeight,
transform: 'translateY(-50%)',
transition: "all ".concat(token.motionDurationSlow),
content: '""'
}
}, _defineProperty(_ref, pickerCellInnerCls, {
position: 'relative',
zIndex: 2,
display: 'inline-block',
minWidth: token.pickerPanelCellHeight,
height: token.pickerPanelCellHeight,
lineHeight: "".concat(token.pickerPanelCellHeight, "px"),
borderRadius: token.controlRadiusSM,
transition: "background ".concat(token.motionDurationFast, ", border ").concat(token.motionDurationFast)
}), _defineProperty(_ref, "&:hover:not(&-in-view),\n &:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)", _defineProperty({}, pickerCellInnerCls, {
background: token.controlItemBgHover
})), _defineProperty(_ref, "&-in-view:is(&-today) ".concat(pickerCellInnerCls), {
'&::before': {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
zIndex: 1,
border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorPrimary),
borderRadius: token.controlRadiusSM,
content: '""'
}
}), _defineProperty(_ref, '&-in-view:is(&-in-range)', {
position: 'relative',
'&::before': {
background: token.controlItemBgActive
}
}), _defineProperty(_ref, "&-in-view:is(&-selected) ".concat(pickerCellInnerCls, ",\n &-in-view:is(&-range-start) ").concat(pickerCellInnerCls, ",\n &-in-view:is(&-range-end) ").concat(pickerCellInnerCls), {
color: token.colorTextLightSolid,
background: token.colorPrimary
}), _defineProperty(_ref, "&-in-view:is(&-range-start):not(&-range-start-single),\n &-in-view:is(&-range-end):not(&-range-end-single)", {
'&::before': {
background: token.controlItemBgActive
}
}), _defineProperty(_ref, '&-in-view:is(&-range-start)::before', {
insetInlineStart: '50%'
}), _defineProperty(_ref, '&-in-view:is(&-range-end)::before', {
insetInlineEnd: '50%'
}), _defineProperty(_ref, "&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end),\n &-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end),\n &-in-view:is(&-range-hover-start):is(&-range-start-single),\n &-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover),\n &-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover),\n &-in-view:is(&-range-hover-end):is(&-range-end-single),\n &-in-view:is(&-range-hover):not(&-in-range)", {
'&::after': {
position: 'absolute',
top: '50%',
zIndex: 0,
height: token.controlHeightSM,
borderTop: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderBottom: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
transform: 'translateY(-50%)',
transition: "all ".concat(token.motionDurationSlow),
content: '""'
}
}), _defineProperty(_ref, "&-range-hover-start::after,\n &-range-hover-end::after,\n &-range-hover::after", {
insetInlineEnd: 0,
insetInlineStart: token.pickerCellBorderGap
}), _defineProperty(_ref, "&-in-view:is(&-in-range):is(&-range-hover)::before,\n &-in-view:is(&-range-start):is(&-range-hover)::before,\n &-in-view:is(&-range-end):is(&-range-hover)::before,\n &-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before,\n &-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before,\n ".concat(componentCls, "-panel\n > :not(").concat(componentCls, "-date-panel)\n &-in-view:is(&-in-range):is(&-range-hover-start)::before,\n ").concat(componentCls, "-panel\n > :not(").concat(componentCls, "-date-panel)\n &-in-view:is(&-in-range):is(&-range-hover-end)::before"), {
background: token.pickerBasicCellHoverWithRangeColor
}), _defineProperty(_ref, "&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ".concat(pickerCellInnerCls), {
borderStartStartRadius: token.controlRadiusSM,
borderEndStartRadius: token.controlRadiusSM,
borderStartEndRadius: 0,
borderEndEndRadius: 0
}), _defineProperty(_ref, "&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) ".concat(pickerCellInnerCls), {
borderStartStartRadius: 0,
borderEndStartRadius: 0,
borderStartEndRadius: token.controlRadiusSM,
borderEndEndRadius: token.controlRadiusSM
}), _defineProperty(_ref, '&-range-hover:is(&-range-end)::after', {
insetInlineStart: '50%'
}), _defineProperty(_ref, "tr > &-in-view:is(&-range-hover):first-child::after,\n tr > &-in-view:is(&-range-hover-end):first-child::after,\n &-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after,\n &-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,\n &-in-view:is(&-range-hover-start)::after", {
insetInlineStart: (token.pickerPanelCellWidth - token.pickerPanelCellHeight) / 2,
borderInlineStart: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderStartStartRadius: token.controlLineWidth,
borderEndStartRadius: token.controlLineWidth
}), _defineProperty(_ref, "tr > &-in-view:is(&-range-hover):last-child::after,\n tr > &-in-view:is(&-range-hover-start):last-child::after,\n &-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after,\n &-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,\n &-in-view:is(&-range-hover-end)::after", {
insetInlineEnd: (token.pickerPanelCellWidth - token.pickerPanelCellHeight) / 2,
borderInlineEnd: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderStartEndRadius: token.controlLineWidth,
borderEndEndRadius: token.controlLineWidth
}), _defineProperty(_ref, '&-disabled', (_disabled = {
color: token.colorTextDisabled,
pointerEvents: 'none'
}, _defineProperty(_disabled, pickerCellInnerCls, {
background: 'transparent'
}), _defineProperty(_disabled, '&::before', {
background: token.colorBgContainerDisabled
}), _disabled)), _defineProperty(_ref, "&-disabled:is(&-today) ".concat(pickerCellInnerCls, "::before"), {
borderColor: token.colorTextDisabled
}), _ref;
};
export var genPanelStyle = function genPanelStyle(token) {
var _rtl, _decadePanel, _decadePanel2, _yearPanel, _selectedTd, _weekPanel, _datePanel, _datetimePanel, _$concat4, _timePanel, _componentCls;
var componentCls = token.componentCls,
pickerCellInnerCls = token.pickerCellInnerCls,
pickerYearMonthCellWidth = token.pickerYearMonthCellWidth,
pickerControlIconSize = token.pickerControlIconSize;
var pickerPanelWidth = token.pickerPanelCellWidth * 7 + token.paddingSM * 2 + 4;
var hoverCellFixedDistance = (pickerPanelWidth - token.paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2;
return _defineProperty({}, componentCls, (_componentCls = {
'&-panel': {
display: 'inline-flex',
flexDirection: 'column',
textAlign: 'center',
background: token.colorBgContainer,
border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder),
borderRadius: token.controlRadiusLG,
outline: 'none',
'&-focused': {
borderColor: token.colorPrimary
},
'&-rtl': (_rtl = {
direction: 'rtl'
}, _defineProperty(_rtl, "".concat(componentCls, "-prev-icon,\n ").concat(componentCls, "-super-prev-icon"), {
transform: 'rotate(135deg)'
}), _defineProperty(_rtl, "".concat(componentCls, "-next-icon,\n ").concat(componentCls, "-super-next-icon"), {
transform: 'rotate(-45deg)'
}), _rtl)
}
}, _defineProperty(_componentCls, "&-decade-panel,\n &-year-panel,\n &-quarter-panel,\n &-month-panel,\n &-week-panel,\n &-date-panel,\n &-time-panel", {
display: 'flex',
flexDirection: 'column',
width: pickerPanelWidth
}), _defineProperty(_componentCls, '&-header', {
display: 'flex',
padding: "0 ".concat(token.paddingXS, "px"),
color: token.colorTextHeading,
borderBottom: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorSplit),
'> *': {
flex: 'none'
},
button: {
padding: 0,
color: token.colorIcon,
lineHeight: "".concat(token.pickerTextHeight, "px"),
background: 'transparent',
border: 0,
cursor: 'pointer',
transition: "color ".concat(token.motionDurationFast)
},
'> button': {
minWidth: '1.6em',
fontSize: token.fontSize,
'&:hover': {
color: token.colorIconHover
}
},
'&-view': {
flex: 'auto',
fontWeight: token.fontWeightStrong,
lineHeight: "".concat(token.pickerTextHeight, "px"),
button: {
color: 'inherit',
fontWeight: 'inherit',
'&:not(:first-child)': {
marginInlineStart: token.paddingXS
},
'&:hover': {
color: token.colorPrimary
}
}
}
}), _defineProperty(_componentCls, "&-prev-icon,\n &-next-icon,\n &-super-prev-icon,\n &-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: token.pickerControlIconBorderWidth,
borderBlockEndWidth: 0,
borderInlineStartWidth: token.pickerControlIconBorderWidth,
borderInlineEndWidth: 0,
content: '""'
}
}), _defineProperty(_componentCls, "&-super-prev-icon,\n &-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: token.pickerControlIconBorderWidth,
borderBlockEndWidth: 0,
borderInlineStartWidth: token.pickerControlIconBorderWidth,
borderInlineEndWidth: 0,
content: '""'
}
}), _defineProperty(_componentCls, "&-prev-icon,\n &-super-prev-icon", {
transform: 'rotate(-45deg)'
}), _defineProperty(_componentCls, "&-next-icon,\n &-super-next-icon", {
transform: 'rotate(135deg)'
}), _defineProperty(_componentCls, '&-content', {
width: '100%',
tableLayout: 'fixed',
borderCollapse: 'collapse',
'th, td': {
position: 'relative',
minWidth: token.pickerPanelCellHeight,
fontWeight: 'normal'
},
th: {
height: token.pickerPanelCellHeight + token.pickerCellPaddingVertical * 2,
color: token.colorText,
verticalAlign: 'middle'
}
}), _defineProperty(_componentCls, '&-cell', _extends({
padding: "".concat(token.pickerCellPaddingVertical, "px 0"),
color: token.colorTextDisabled,
cursor: 'pointer',
// In view
'&-in-view': {
color: token.colorText
}
}, genPickerCellInnerStyle(token))), _defineProperty(_componentCls, "&-date-panel ".concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-start ").concat(pickerCellInnerCls, ",\n &-date-panel ").concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-end ").concat(pickerCellInnerCls), {
'&::after': {
position: 'absolute',
top: 0,
bottom: 0,
zIndex: -1,
background: token.pickerBasicCellHoverWithRangeColor,
transition: "all ".concat(token.motionDurationSlow),
content: '""'
}
}), _defineProperty(_componentCls, "&-date-panel\n ".concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-start\n ").concat(pickerCellInnerCls, "::after"), {
insetInlineEnd: (token.pickerPanelCellWidth - token.pickerPanelCellHeight) / 2,
insetInlineStart: 0
}), _defineProperty(_componentCls, "&-date-panel ".concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-end ").concat(pickerCellInnerCls, "::after"), {
insetInlineEnd: 0,
insetInlineStart: (token.pickerPanelCellWidth - token.pickerPanelCellHeight) / 2
}), _defineProperty(_componentCls, '&-range-hover:is(&-range-start)::after', {
insetInlineEnd: '50%'
}), _defineProperty(_componentCls, "&-decade-panel,\n &-year-panel,\n &-quarter-panel,\n &-month-panel", (_decadePanel = {}, _defineProperty(_decadePanel, "".concat(componentCls, "-content"), {
height: token.pickerPanelWithoutTimeCellHeight * 4
}), _defineProperty(_decadePanel, pickerCellInnerCls, {
padding: "0 ".concat(token.paddingXS, "px")
}), _decadePanel)), _defineProperty(_componentCls, '&-quarter-panel', _defineProperty({}, "".concat(componentCls, "-content"), {
height: token.pickerQuarterPanelContentHeight
})), _defineProperty(_componentCls, "&-panel ".concat(componentCls, "-footer"), {
borderTop: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorSplit)
}), _defineProperty(_componentCls, '&-footer', {
width: 'min-content',
minWidth: '100%',
lineHeight: "".concat(token.pickerTextHeight - 2 * token.controlLineWidth, "px"),
textAlign: 'center',
borderBottom: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorSplit),
'&-extra': {
padding: "0 ".concat(token.paddingSM),
lineHeight: "".concat(token.pickerTextHeight - 2 * token.controlLineWidth, "px"),
textAlign: 'start',
'&:not(:last-child)': {
borderBottom: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder)
}
}
}), _defineProperty(_componentCls, '&-now', {
textAlign: 'start'
}), _defineProperty(_componentCls, '&-today-btn', {
color: token.colorLink,
'&:hover': {
color: token.colorLinkHover
},
'&:active': {
color: token.colorLinkActive
},
'&:is(&-disabled)': {
color: token.colorTextDisabled,
cursor: 'not-allowed'
}
}), _defineProperty(_componentCls, '&-decade-panel', (_decadePanel2 = {}, _defineProperty(_decadePanel2, pickerCellInnerCls, {
padding: "0 ".concat(token.paddingXS / 2, "px")
}), _defineProperty(_decadePanel2, "".concat(componentCls, "-cell::before"), {
display: 'none'
}), _decadePanel2)), _defineProperty(_componentCls, "&-year-panel,\n &-quarter-panel,\n &-month-panel", (_yearPanel = {}, _defineProperty(_yearPanel, "".concat(componentCls, "-body"), {
padding: "0 ".concat(token.paddingXS, "px")
}), _defineProperty(_yearPanel, pickerCellInnerCls, {
width: pickerYearMonthCellWidth
}), _defineProperty(_yearPanel, "".concat(componentCls, "-cell-range-hover-start::after"), _defineProperty({
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderStartStartRadius: token.controlRadiusSM,
borderBottomStartRadius: token.controlRadiusSM,
borderStartEndRadius: 0,
borderBottomEndRadius: 0
}, "".concat(componentCls, "-panel-rtl &"), {
insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderStartStartRadius: 0,
borderBottomStartRadius: 0,
borderStartEndRadius: token.controlRadiusSM,
borderBottomEndRadius: token.controlRadiusSM
})), _defineProperty(_yearPanel, "".concat(componentCls, "-cell-range-hover-end::after"), _defineProperty({
insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderStartStartRadius: 0,
borderBottomStartRadius: 0,
borderStartEndRadius: token.controlRadius,
borderBottomEndRadius: token.controlRadius
}, "".concat(componentCls, "-panel-rtl &"), {
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: "".concat(token.controlLineWidth, "px dashed ").concat(token.pickerDateHoverRangeBorderColor),
borderStartStartRadius: token.controlRadius,
borderBottomStartRadius: token.controlRadius,
borderStartEndRadius: 0,
borderBottomEndRadius: 0
})), _yearPanel)), _defineProperty(_componentCls, '&-week-panel', (_weekPanel = {}, _defineProperty(_weekPanel, "".concat(componentCls, "-body"), {
padding: "".concat(token.paddingXS, "px ").concat(token.paddingSM, "px")
}), _defineProperty(_weekPanel, "".concat(componentCls, "-cell"), _defineProperty({}, "&:hover ".concat(pickerCellInnerCls, ",\n &-selected ").concat(pickerCellInnerCls, ",\n ").concat(pickerCellInnerCls), {
background: 'transparent !important'
})), _defineProperty(_weekPanel, '&-row', _defineProperty({
td: {
transition: "background ".concat(token.motionDurationFast),
'&:first-child': {
borderStartStartRadius: token.radiusSM,
borderEndStartRadius: token.radiusSM
},
'&:last-child': {
borderStartEndRadius: token.radiusSM,
borderEndEndRadius: token.radiusSM
}
},
'&:hover td': {
background: token.controlItemBgHover
}
}, "&-selected td,\n &-selected:hover td", (_selectedTd = {
background: token.colorPrimary
}, _defineProperty(_selectedTd, "&".concat(componentCls, "-cell-week"), {
color: new TinyColor(token.colorTextLightSolid).setAlpha(0.5).toHexString()
}), _defineProperty(_selectedTd, "&".concat(componentCls, "-cell-today ").concat(pickerCellInnerCls, "::before"), {
borderColor: token.colorTextLightSolid
}), _defineProperty(_selectedTd, pickerCellInnerCls, {
color: token.colorTextLightSolid
}), _selectedTd))), _weekPanel)), _defineProperty(_componentCls, '&-date-panel', (_datePanel = {}, _defineProperty(_datePanel, "".concat(componentCls, "-body"), {
padding: "".concat(token.paddingXS, "px ").concat(token.paddingSM, "px")
}), _defineProperty(_datePanel, "".concat(componentCls, "-content"), {
width: token.pickerPanelCellWidth * 7,
th: {
width: token.pickerPanelCellWidth
}
}), _datePanel)), _defineProperty(_componentCls, '&-datetime-panel', (_datetimePanel = {
display: 'flex'
}, _defineProperty(_datetimePanel, "".concat(componentCls, "-time-panel"), {
borderInlineStart: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder)
}), _defineProperty(_datetimePanel, "".concat(componentCls, "-date-panel,\n ").concat(componentCls, "-time-panel"), {
transition: "opacity ".concat(token.motionDurationSlow)
}), _defineProperty(_datetimePanel, '&-active', _defineProperty({}, "".concat(componentCls, "-date-panel,\n ").concat(componentCls, "-time-panel"), {
opacity: 0.3,
'&-active': {
opacity: 1
}
})), _datetimePanel)), _defineProperty(_componentCls, '&-time-panel', (_timePanel = {
width: 'auto',
minWidth: 'auto',
direction: 'ltr'
}, _defineProperty(_timePanel, "".concat(componentCls, "-content"), {
display: 'flex',
flex: 'auto',
height: token.pickerTimePanelColumnHeight
}), _defineProperty(_timePanel, '&-column', {
flex: '1 0 auto',
width: token.pickerTimePanelColumnWidth,
margin: 0,
padding: 0,
overflowY: 'hidden',
textAlign: 'start',
listStyle: 'none',
transition: "background ".concat(token.motionDurationFast),
overflowX: 'hidden',
'&::after': _defineProperty({
display: 'block',
height: token.pickerTimePanelColumnHeight - token.pickerTimePanelCellHeight,
content: '""'
}, "".concat(componentCls, "-datetime-panel &"), {
height: token.pickerTimePanelColumnHeight - token.pickerPanelWithoutTimeCellHeight + 2 * token.controlLineWidth
}),
'&:not(:first-child)': {
borderInlineStart: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorSplit)
},
'&-active': {
background: new TinyColor(token.controlItemBgActive).setAlpha(0.2).toHexString()
},
'&:hover': {
overflowY: 'auto'
},
'> li': _defineProperty({
margin: 0,
padding: 0
}, "&".concat(componentCls, "-time-panel-cell"), (_$concat4 = {
marginInline: token.marginXXS
}, _defineProperty(_$concat4, "".concat(componentCls, "-time-panel-cell-inner"), {
display: 'block',
width: token.pickerTimePanelColumnWidth - 2 * token.marginXXS,
height: token.pickerTimePanelCellHeight,
margin: 0,
paddingBlock: 0,
paddingInlineEnd: 0,
paddingInlineStart: (token.pickerTimePanelColumnWidth - token.pickerTimePanelCellHeight) / 2,
color: token.colorText,
lineHeight: "".concat(token.pickerTimePanelCellHeight, "px"),
borderRadius: token.controlRadiusSM,
cursor: 'pointer',
transition: "background ".concat(token.motionDurationFast),
'&:hover': {
background: token.controlItemBgHover
}
}), _defineProperty(_$concat4, '&-selected', _defineProperty({}, "".concat(componentCls, "-time-panel-cell-inner"), {
background: token.controlItemBgActive
})), _defineProperty(_$concat4, '&-disabled', _defineProperty({}, "".concat(componentCls, "-time-panel-cell-inner"), {
color: token.colorTextDisabled,
background: 'transparent',
cursor: 'not-allowed'
})), _$concat4))
}), _timePanel)), _componentCls));
};
var genPickerStatusStyle = function genPickerStatusStyle(token) {
var componentCls = token.componentCls;
return _defineProperty({}, componentCls, {
'&-status-error&': _defineProperty({
'&, &:not([disabled]):hover': {
backgroundColor: token.colorBgContainer,
borderColor: token.colorError
},
'&-focused, &:focus': _extends({}, genActiveStyle(mergeToken(token, {
inputBorderActiveColor: token.colorError,
inputBorderHoverColor: token.colorError,
controlOutline: token.colorErrorOutline
})))
}, "".concat(componentCls, "-active-bar"), {
background: token.colorError
}),
'&-status-warning&': _defineProperty({
'&, &:not([disabled]):hover': {
backgroundColor: token.colorBgContainer,
borderColor: token.colorWarning
},
'&-focused, &:focus': _extends({}, genActiveStyle(mergeToken(token, {
inputBorderActiveColor: token.colorWarning,
inputBorderHoverColor: token.colorWarning,
controlOutline: token.colorWarningOutline
})))
}, "".concat(componentCls, "-active-bar"), {
background: token.colorWarning
})
});
};
var genPickerStyle = function genPickerStyle(token) {
var _$concat6, _$concat8, _range, _$concat9, _$concat10, _$concat11, _extends3, _rtl2, _extends4;
var componentCls = token.componentCls,
antCls = token.antCls,
boxShadowPopoverArrow = token.boxShadowPopoverArrow;
return _defineProperty({}, componentCls, _extends(_extends(_extends({}, resetComponent(token)), genPikerPadding(token, token.controlHeight, token.fontSize, token.inputPaddingHorizontal)), (_extends4 = {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
background: token.colorBgContainer,
border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder),
borderRadius: token.controlRadius,
transition: "border ".concat(token.motionDurationFast, ", box-shadow ").concat(token.motionDurationFast),
'&:hover, &-focused': _extends({}, genHoverStyle(token)),
'&-focused': _extends({}, genActiveStyle(token)),
'&&-disabled': _defineProperty({
background: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
cursor: 'not-allowed'
}, "".concat(componentCls, "-suffix"), {
color: token.colorTextDisabled
}),
'&&-borderless': {
backgroundColor: 'transparent !important',
borderColor: 'transparent !important',
boxShadow: 'none !important'
}
}, _defineProperty(_extends4, "".concat(componentCls, "-input"), {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
'> input': _extends(_extends({}, 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': _defineProperty({}, "".concat(componentCls, "-clear"), {
opacity: 1
}),
'&-placeholder': {
'> input': {
color: token.colorTextPlaceholder
}
}
}), _defineProperty(_extends4, '&-large', _extends(_extends({}, genPikerPadding(token, token.controlHeightLG, token.fontSizeLG, token.inputPaddingHorizontal)), _defineProperty({}, "".concat(componentCls, "-input > input"), {
fontSize: token.fontSizeLG
}))), _defineProperty(_extends4, '&-small', _extends({}, genPikerPadding(token, token.controlHeightSM, token.fontSize, token.inputPaddingHorizontalSM))), _defineProperty(_extends4, "".concat(componentCls, "-suffix"), {
display: 'flex',
flex: 'none',
alignSelf: 'center',
marginInlineStart: token.paddingXS / 2,
color: token.colorTextDisabled,
lineHeight: 1,
pointerEvents: 'none',
'> *': {
verticalAlign: 'top',
'&:not(:last-child)': {
marginInlineEnd: token.marginXS
}
}
}), _defineProperty(_extends4, "".concat(componentCls, "-clear"), {
position: 'absolute',
top: '50%',
insetInlineEnd: 0,
color: token.colorTextDisabled,
lineHeight: 1,
background: token.colorBgContainer,
transform: 'translateY(-50%)',
cursor: 'pointer',
opacity: 0,
transition: "opacity ".concat(token.motionDurationFast, ", color ").concat(token.motionDurationFast),
'> *': {
verticalAlign: 'top'
},
'&:hover': {
color: token.colorTextDescription
}
}), _defineProperty(_extends4, "".concat(componentCls, "-separator"), (_$concat6 = {
position: 'relative',
display: 'inline-block',
width: '1em',
height: token.fontSizeLG,
color: token.colorTextDisabled,
fontSize: token.fontSizeLG,
verticalAlign: 'top',
cursor: 'default'
}, _defineProperty(_$concat6, "".concat(componentCls, "-focused &"), {
color: token.colorTextDescription
}), _defineProperty(_$concat6, "".concat(componentCls, "-range-separator &"), _defineProperty({}, "".concat(componentCls, "-disabled &"), {
cursor: 'not-allowed'
})), _$concat6)), _defineProperty(_extends4, '&-range', (_range = {
position: 'relative',
display: 'inline-flex'
}, _defineProperty(_range, "".concat(componentCls, "-clear"), {
insetInlineEnd: token.inputPaddingHorizontal
}), _defineProperty(_range, '&:hover', _defineProperty({}, "".concat(componentCls, "-clear"), {
opacity: 1
})), _defineProperty(_range, "".concat(componentCls, "-active-bar"), {
bottom: -token.controlLineWidth,
height: token.lineWidthBold,
marginInlineStart: token.inputPaddingHorizontal,
background: token.colorPrimary,
opacity: 0,
transition: "all ".concat(token.motionDurationSlow, " ease-out"),
pointerEvents: 'none'
}), _defineProperty(_range, "&".concat(componentCls, "-focused"), _defineProperty({}, "".concat(componentCls, "-active-bar"), {
opacity: 1
})), _defineProperty(_range, "".concat(componentCls, "-range-separator"), {
alignItems: 'center',
padding: "0 ".concat(token.paddingXS, "px"),
lineHeight: 1
}), _defineProperty(_range, "&".concat(componentCls, "-small"), (_$concat8 = {}, _defineProperty(_$concat8, "".concat(componentCls, "-clear"), {
insetInlineEnd: token.inputPaddingHorizontalSM
}), _defineProperty(_$concat8, "".concat(componentCls, "-active-bar"), {
marginInlineStart: token.inputPaddingHorizontalSM
}), _$concat8)), _range)), _defineProperty(_extends4, '&-dropdown', _extends(_extends(_extends({}, resetComponent(token)), genPanelStyle(token)), (_extends3 = {
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: token.zIndexPopup,
'&&-hidden': {
display: 'none'
},
'&&-placement-bottomLeft': _defineProperty({}, "".concat(componentCls, "-range-arrow"), {
top: 0,
display: 'block',
transform: 'translateY(-100%)'
}),
'&&-placement-topLeft': _defineProperty({}, "".concat(componentCls, "-range-arrow"), {
bottom: 0,
display: 'block',
transform: 'translateY(100%) rotate(180deg)'
})
}, _defineProperty(_extends3, "&".concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active&-placement-topLeft,\n &").concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active&-placement-topRight,\n &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active&-placement-topLeft,\n &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active&-placement-topRight"), {
animationName: slideDownIn
}), _defineProperty(_extends3, "&".concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active&-placement-bottomLeft,\n &").concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active&-placement-bottomRight,\n &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active&-placement-bottomLeft,\n &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active&-placement-bottomRight"), {
animationName: slideUpIn
}), _defineProperty(_extends3, "&".concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active&-placement-topLeft,\n &").concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active&-placement-topRight"), {
animationName: slideDownOut
}), _defineProperty(_extends3, "&".concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active&-placement-bottomLeft,\n &").concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active&-placement-bottomRight"), {
animationName: slideUpOut
}), _defineProperty(_extends3, "".concat(componentCls, "-panel > ").concat(componentCls, "-time-panel"), {
paddingTop: token.paddingXXS
}), _defineProperty(_extends3, "".concat(componentCls, "-ranges"), (_$concat9 = {
marginBottom: 0,
padding: "".concat(token.paddingXXS, "px ").concat(token.paddingSM, "px"),
overflow: 'hidden',
lineHeight: "".concat(token.pickerTextHeight - 2 * token.controlLineWidth - token.paddingXS / 2, "px"),
textAlign: 'start',
listStyle: 'none',
display: 'flex',
justifyContent: 'space-between',
'> li': {
display: 'inline-block'
}
}, _defineProperty(_$concat9, "".concat(componentCls, "-preset > ").concat(antCls, "-tag-blue"), {
color: token.colorPrimary,
background: token.controlItemBgActive,
borderColor: token.colorPrimaryBorder,
cursor: 'pointer'
}), _defineProperty(_$concat9, "".concat(componentCls, "-ok"), {
marginInlineStart: 'auto'
}), _$concat9)), _defineProperty(_extends3, "".concat(componentCls, "-range-wrapper"), {
display: 'flex',
position: 'relative'
}), _defineProperty(_extends3, "".concat(componentCls, "-range-arrow"), _extends({
position: 'absolute',
zIndex: 1,
display: 'none',
marginInlineStart: token.inputPaddingHorizontal * 1.5,
transition: "left ".concat(token.motionDurationSlow, " ease-out")
}, roundedArrow(token.sizePopupArrow, token.radiusXS, token.radiusOuter, token.colorBgElevated, boxShadowPopoverArrow))), _defineProperty(_extends3, "".concat(componentCls, "-panel-container"), (_$concat11 = {
overflow: 'hidden',
verticalAlign: 'top',
background: token.colorBgElevated,
borderRadius: token.controlRadiusLG,
boxShadow: token.boxShadowSecondary,
transition: "margin ".concat(token.motionDurationSlow)
}, _defineProperty(_$concat11, "".concat(componentCls, "-panels"), {
display: 'inline-flex',
flexWrap: 'nowrap',
direction: 'ltr',
'&:last-child': _defineProperty({}, "".concat(componentCls, "-panel"), {
borderWidth: 0
})
}), _defineProperty(_$concat11, "".concat(componentCls, "-panel"), (_$concat10 = {
verticalAlign: 'top',
background: 'transparent',
borderWidth: "0 0 ".concat(token.controlLineWidth, "px"),
borderRadius: 0
}, _defineProperty(_$concat10, "".concat(componentCls, "-content,\n table"), {
textAlign: 'center'
}), _defineProperty(_$concat10, '&-focused', {
borderColor: token.colorBorder
}), _$concat10)), _$concat11)), _extends3))), _defineProperty(_extends4, '&-dropdown-range', {
padding: "".concat(token.sizePopupArrow * 2 / 3, "px 0"),
'&-hidden': {
display: 'none'
}
}), _defineProperty(_extends4, '&-rtl', (_rtl2 = {
direction: 'rtl'
}, _defineProperty(_rtl2, "".concat(componentCls, "-separator"), {
transform: 'rotate(180deg)'
}), _defineProperty(_rtl2, "".concat(componentCls, "-footer"), {
'&-extra': {
direction: 'rtl'
}
}), _rtl2)), _extends4)));
};
export var initPickerPanelToken = function initPickerPanelToken(token) {
var pickerTimePanelCellHeight = 28;
return {
pickerCellInnerCls: "".concat(token.componentCls, "-cell-inner"),
pickerTextHeight: token.controlHeightLG,
pickerPanelCellWidth: token.controlHeightSM * 1.5,
pickerPanelCellHeight: token.controlHeightSM,
pickerDateHoverRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
pickerBasicCellHoverWithRangeColor: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
pickerPanelWithoutTimeCellHeight: token.controlHeightLG * 1.65,
pickerYearMonthCellWidth: token.controlHeightLG * 1.5,
pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8,
pickerTimePanelColumnWidth: token.controlHeightLG * 1.4,
pickerTimePanelCellHeight: pickerTimePanelCellHeight,
pickerQuarterPanelContentHeight: token.controlHeightLG * 1.4,
pickerCellPaddingVertical: token.paddingXXS,
pickerCellBorderGap: 2,
pickerControlIconSize: 7,
pickerControlIconBorderWidth: 1.5
};
}; // ============================== Export ==============================
export default genComponentStyleHook('DatePicker', function (token) {
var pickerToken = mergeToken(initInputToken(token), initPickerPanelToken(token));
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
}, function (token) {
return {
zIndexPopup: token.zIndexPopupBase + 50
};
});