From cd47a277da8b9d60409a6411e4c96a72888c9e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= Date: Fri, 17 Feb 2023 10:02:38 +0800 Subject: [PATCH] refactor:calendar (#6269) * refactor:calendar * docs:update --- components/calendar/generateCalendar.tsx | 12 +- components/calendar/index.en-US.md | 2 +- components/calendar/index.zh-CN.md | 2 +- components/calendar/style/index.less | 195 -------------------- components/calendar/style/index.tsx | 224 ++++++++++++++++++++++- components/calendar/style/rtl.less | 46 ----- components/style.ts | 3 +- components/theme/interface/components.ts | 4 +- 8 files changed, 232 insertions(+), 256 deletions(-) delete mode 100644 components/calendar/style/index.less delete mode 100644 components/calendar/style/rtl.less diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index ad7b670b5..baf3b141c 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -17,6 +17,9 @@ import { computed, defineComponent, toRef } from 'vue'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; +// CSSINJS +import useStyle from './style'; + type InjectDefaultProps = Omit< Props, 'locale' | 'generateConfig' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon' @@ -117,6 +120,10 @@ function generateCalendar< ], setup(props, { emit, slots, attrs }) { const { prefixCls, direction } = useConfigInject('picker', props); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`); const maybeToString = (date: DateType) => { return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date; @@ -273,7 +280,7 @@ function generateCalendar< ); }; - return ( + return wrapSSR(
{headerRender ? ( @@ -319,7 +327,7 @@ function generateCalendar< disabledDate={mergedDisabledDate.value} hideHeader /> -
+ , ); }; }, diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 04f6d477a..c2a148c0f 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Data Display title: Calendar -cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original --- Container for displaying data in calendar form. diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 2212dfe30..0992903e2 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -3,7 +3,7 @@ category: Components type: 数据展示 title: Calendar subtitle: 日历 -cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original --- 按照日历形式展示数据的容器。 diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less deleted file mode 100644 index 124e8d9ef..000000000 --- a/components/calendar/style/index.less +++ /dev/null @@ -1,195 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar'; -@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker'; - -.@{calendar-prefix-cls} { - .reset-component(); - background: @calendar-full-bg; - - // ========================= Header ========================= - &-header { - display: flex; - justify-content: flex-end; - padding: @padding-sm 0; - - .@{calendar-prefix-cls}-year-select { - min-width: 80px; - } - - .@{calendar-prefix-cls}-month-select { - min-width: 70px; - margin-left: @padding-xs; - } - - .@{calendar-prefix-cls}-mode-switch { - margin-left: @padding-xs; - } - } - - .@{calendar-picker-prefix-cls}-panel { - background: @calendar-full-panel-bg; - border: 0; - border-top: @border-width-base @border-style-base @border-color-split; - border-radius: 0; - - .@{calendar-picker-prefix-cls}-month-panel, - .@{calendar-picker-prefix-cls}-date-panel { - width: auto; - } - - .@{calendar-picker-prefix-cls}-body { - padding: @padding-xs 0; - } - - .@{calendar-picker-prefix-cls}-content { - width: 100%; - } - } - - // ========================== Mini ========================== - &-mini { - border-radius: @border-radius-base; - - .@{calendar-picker-prefix-cls}-calendar-header { - padding-right: @padding-xs; - padding-left: @padding-xs; - } - - .@{calendar-picker-prefix-cls}-panel { - border-radius: 0 0 @border-radius-base @border-radius-base; - } - - .@{calendar-picker-prefix-cls}-content { - height: 256px; - - th { - height: auto; - padding: 0; - line-height: 18px; - } - } - .@{calendar-picker-prefix-cls}-cell::before { - pointer-events: none; - } - } - - // ========================== Full ========================== - &-full { - .@{calendar-picker-prefix-cls}-panel { - display: block; - width: 100%; - text-align: right; - background: @calendar-full-bg; - border: 0; - - .@{calendar-picker-prefix-cls}-body { - th, - td { - padding: 0; - } - - th { - height: auto; - padding: 0 12px 5px 0; - line-height: 18px; - } - } - - // Cell - .@{calendar-picker-prefix-cls}-cell { - &::before { - display: none; - } - - &:hover { - .@{calendar-prefix-cls}-date { - background: @item-hover-bg; - } - } - - .@{calendar-prefix-cls}-date-today::before { - display: none; - } - - &-selected, - &-selected:hover { - .@{calendar-prefix-cls}-date, - .@{calendar-prefix-cls}-date-today { - background: @calendar-item-active-bg; - - .@{calendar-prefix-cls}-date-value { - color: @primary-color; - } - } - } - } - - // Cell date - .@{calendar-prefix-cls}-date { - display: block; - width: auto; - height: auto; - margin: 0 (@padding-xs / 2); - padding: (@padding-xs / 2) @padding-xs 0; - border: 0; - border-top: 2px solid @border-color-split; - border-radius: 0; - transition: background 0.3s; - - &-value { - line-height: 24px; - transition: color 0.3s; - } - - &-content { - position: static; - width: auto; - height: 86px; - overflow-y: auto; - color: @text-color; - line-height: @line-height-base; - text-align: left; - } - - &-today { - border-color: @primary-color; - - .@{calendar-prefix-cls}-date-value { - color: @text-color; - } - } - } - } - } -} - -@media only screen and (max-width: @screen-xs) { - .@{calendar-prefix-cls} { - &-header { - display: block; - - .@{calendar-prefix-cls}-year-select { - width: 50%; - } - - .@{calendar-prefix-cls}-month-select { - width: ~'calc(50% - @{padding-xs})'; - } - - .@{calendar-prefix-cls}-mode-switch { - width: 100%; - margin-top: @padding-xs; - margin-left: 0; - - > label { - width: 50%; - text-align: center; - } - } - } - } -} - -@import './rtl'; diff --git a/components/calendar/style/index.tsx b/components/calendar/style/index.tsx index 1ee59b4a6..df14efb97 100644 --- a/components/calendar/style/index.tsx +++ b/components/calendar/style/index.tsx @@ -1,8 +1,218 @@ -import '../../style/index.less'; -import './index.less'; +import type { CSSObject } from '../../_util/cssinjs'; +import { resetComponent } from '../../_style'; +import type { PickerPanelToken } from '../../date-picker/style'; +import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style'; +import type { InputToken } from '../../input/style'; +import { initInputToken } from '../../input/style'; +import type { FullToken } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -// style dependencies -// deps-lint-skip: date-picker, form -import '../../select/style'; -import '../../radio/style'; -import '../../date-picker/style'; +export interface ComponentToken { + yearControlWidth: number; + monthControlWidth: number; + miniContentHeight: number; +} + +interface CalendarToken extends InputToken>, PickerPanelToken { + calendarCls: string; + calendarFullBg: string; + calendarFullPanelBg: string; + calendarItemActiveBg: string; + dateValueHeight: number; + weekHeight: number; + dateContentHeight: number; +} + +export const genCalendarStyles = (token: CalendarToken): CSSObject => { + const { calendarCls, componentCls, calendarFullBg, calendarFullPanelBg, calendarItemActiveBg } = + token; + return { + [calendarCls]: { + ...genPanelStyle(token), + ...resetComponent(token), + background: calendarFullBg, + '&-rtl': { + direction: 'rtl', + }, + [`${calendarCls}-header`]: { + display: 'flex', + justifyContent: 'flex-end', + padding: `${token.paddingSM}px 0`, + + [`${calendarCls}-year-select`]: { + minWidth: token.yearControlWidth, + }, + [`${calendarCls}-month-select`]: { + minWidth: token.monthControlWidth, + marginInlineStart: token.marginXS, + }, + [`${calendarCls}-mode-switch`]: { + marginInlineStart: token.marginXS, + }, + }, + }, + [`${calendarCls} ${componentCls}-panel`]: { + background: calendarFullPanelBg, + border: 0, + borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, + borderRadius: 0, + [`${componentCls}-month-panel, ${componentCls}-date-panel`]: { + width: 'auto', + }, + [`${componentCls}-body`]: { + padding: `${token.paddingXS}px 0`, + }, + [`${componentCls}-content`]: { + width: '100%', + }, + }, + [`${calendarCls}-mini`]: { + borderRadius: token.borderRadiusLG, + [`${calendarCls}-header`]: { + paddingInlineEnd: token.paddingXS, + paddingInlineStart: token.paddingXS, + }, + [`${componentCls}-panel`]: { + borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`, + }, + [`${componentCls}-content`]: { + height: token.miniContentHeight, + th: { + height: 'auto', + padding: 0, + lineHeight: `${token.weekHeight}px`, + }, + }, + [`${componentCls}-cell::before`]: { + pointerEvents: 'none', + }, + }, + [`${calendarCls}${calendarCls}-full`]: { + [`${componentCls}-panel`]: { + display: 'block', + width: '100%', + textAlign: 'end', + background: calendarFullBg, + border: 0, + [`${componentCls}-body`]: { + 'th, td': { + padding: 0, + }, + th: { + height: 'auto', + paddingInlineEnd: token.paddingSM, + paddingBottom: token.paddingXXS, + lineHeight: `${token.weekHeight}px`, + }, + }, + }, + [`${componentCls}-cell`]: { + '&::before': { + display: 'none', + }, + '&:hover': { + [`${calendarCls}-date`]: { + background: token.controlItemBgHover, + }, + }, + [`${calendarCls}-date-today::before`]: { + display: 'none', + }, + // >>> Selected + [`&-in-view${componentCls}-cell-selected`]: { + [`${calendarCls}-date, ${calendarCls}-date-today`]: { + background: calendarItemActiveBg, + }, + }, + '&-selected, &-selected:hover': { + [`${calendarCls}-date, ${calendarCls}-date-today`]: { + [`${calendarCls}-date-value`]: { + color: token.colorPrimary, + }, + }, + }, + }, + [`${calendarCls}-date`]: { + display: 'block', + width: 'auto', + height: 'auto', + margin: `0 ${token.marginXS / 2}px`, + padding: `${token.paddingXS / 2}px ${token.paddingXS}px 0`, + border: 0, + borderTop: `${token.lineWidthBold}px ${token.lineType} ${token.colorSplit}`, + borderRadius: 0, + transition: `background ${token.motionDurationSlow}`, + '&-value': { + lineHeight: `${token.dateValueHeight}px`, + transition: `color ${token.motionDurationSlow}`, + }, + '&-content': { + position: 'static', + width: 'auto', + height: token.dateContentHeight, + overflowY: 'auto', + color: token.colorText, + lineHeight: token.lineHeight, + textAlign: 'start', + }, + '&-today': { + borderColor: token.colorPrimary, + [`${calendarCls}-date-value`]: { + color: token.colorText, + }, + }, + }, + }, + [`@media only screen and (max-width: ${token.screenXS}px) `]: { + [`${calendarCls}`]: { + [`${calendarCls}-header`]: { + display: 'block', + [`${calendarCls}-year-select`]: { + width: '50%', + }, + [`${calendarCls}-month-select`]: { + width: `calc(50% - ${token.paddingXS}px)`, + }, + [`${calendarCls}-mode-switch`]: { + width: '100%', + marginTop: token.marginXS, + marginInlineStart: 0, + '> label': { + width: '50%', + textAlign: 'center', + }, + }, + }, + }, + }, + }; +}; + +export default genComponentStyleHook( + 'Calendar', + token => { + const calendarCls = `${token.componentCls}-calendar`; + const calendarToken = mergeToken( + initInputToken>(token), + initPickerPanelToken(token), + { + calendarCls, + pickerCellInnerCls: `${token.componentCls}-cell-inner`, + calendarFullBg: token.colorBgContainer, + calendarFullPanelBg: token.colorBgContainer, + calendarItemActiveBg: token.controlItemBgActive, + dateValueHeight: token.controlHeightSM, + weekHeight: token.controlHeightSM * 0.75, + dateContentHeight: + (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, + }, + ); + + return [genCalendarStyles(calendarToken)]; + }, + { + yearControlWidth: 80, + monthControlWidth: 70, + miniContentHeight: 256, + }, +); diff --git a/components/calendar/style/rtl.less b/components/calendar/style/rtl.less deleted file mode 100644 index 06464daad..000000000 --- a/components/calendar/style/rtl.less +++ /dev/null @@ -1,46 +0,0 @@ -.@{calendar-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-header { - .@{calendar-prefix-cls}-month-select { - .@{calendar-prefix-cls}-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - - .@{calendar-prefix-cls}-mode-switch { - .@{calendar-prefix-cls}-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - } - - // ========================== Full ========================== - &-full { - .@{calendar-picker-prefix-cls}-panel { - .@{calendar-prefix-cls}-rtl& { - text-align: left; - } - - .@{calendar-picker-prefix-cls}-body { - th { - .@{calendar-prefix-cls}-rtl& { - padding: 0 0 5px 12px; - } - } - } - - .@{calendar-prefix-cls}-date { - &-content { - .@{calendar-prefix-cls}-rtl& { - text-align: right; - } - } - } - } - } -} diff --git a/components/style.ts b/components/style.ts index ab6240993..a7fb1bbdf 100644 --- a/components/style.ts +++ b/components/style.ts @@ -34,11 +34,10 @@ import './cascader/style'; import './time-picker/style'; // import './steps/style'; // import './breadcrumb/style'; -import './calendar/style'; +// import './calendar/style'; // import './date-picker/style'; // import './slider/style'; // import './table/style'; - // import './progress/style'; // import './timeline/style'; // import './input-number/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 667a026b9..c62e7e498 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -4,7 +4,7 @@ import type { ComponentToken as AvatarComponentToken } from '../../avatar/style' import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'; import type { ComponentToken as ButtonComponentToken } from '../../button/style'; // import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'; -// import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; +import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; import type { ComponentToken as CardComponentToken } from '../../card/style'; import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'; // import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; @@ -102,7 +102,7 @@ export interface ComponentTokenMap { Timeline?: TimelineComponentToken; Transfer?: TransferComponentToken; // Tabs?: TabsComponentToken; - // Calendar?: CalendarComponentToken; + Calendar?: CalendarComponentToken; Steps?: StepsComponentToken; Menu?: MenuComponentToken; Modal?: ModalComponentToken;