refactor:calendar (#6269)

* refactor:calendar * docs:update
2023-02-17 10:02:38 +08:00 · 2023-02-17 10:02:38 +08:00 · cd47a277da
parent adec5211f1
commit cd47a277da
8 changed files with 232 additions and 256 deletions
--- 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<Props> = 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<
            </div>
          );
        };
-        return (
+        return wrapSSR(
          <div
            {...attrs}
            class={classNames(
@ -284,6 +291,7 @@ function generateCalendar<
                [`${calendarPrefixCls.value}-rtl`]: direction.value === 'rtl',
              },
              attrs.class,
+              hashId.value,
            )}
          >
            {headerRender ? (
@ -319,7 +327,7 @@ function generateCalendar<
              disabledDate={mergedDisabledDate.value}
              hideHeader
            />
-          </div>
+          </div>,
        );
      };
    },
--- 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.
--- 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
 ---

 按照日历形式展示数据的容器。
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@ -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';
--- 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<FullToken<'Calendar'>>, 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<CalendarToken>(
+      initInputToken<FullToken<'Calendar'>>(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,
+  },
+);
--- a/components/calendar/style/rtl.less
+++ b/components/calendar/style/rtl.less
@ -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;
-          }
-        }
-      }
-    }
-  }
-}
--- 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';
--- 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;