refactor(date-picker): week type

tusen-ai · Dec 18, 2023 · 7826ad8 · 7826ad8
1 parent 4f309aa
commit 7826ad8
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 64 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,7 @@
 - `n-data-table` supports RTL.
 - `n-dialog` supports RTL.
 - `n-date-picker` adds `on-prev-month` `on-next-month` `on-prev-year` `on-next-year` prop, closes [#5350](https://github.com/tusen-ai/naive-ui/issues/5350)
+- `n-date-picker`'s `type` prop supports `'week'`.
 
 ## 2.36.0
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -17,6 +17,7 @@
 - `n-dialog` 支持 RTL
 - `n-select` 新增 `header` 插槽，关闭 [#5448](https://github.com/tusen-ai/naive-ui/issues/5448)
 - `n-date-picker` 新增 `on-prev-month` `on-next-month` `on-prev-year` `on-next-year` 属性，关闭 [#5350](https://github.com/tusen-ai/naive-ui/issues/5350)
+- `n-date-picker` 的 `type` 属性支持 `'week'`
 
 ## 2.36.0
 

diff --git a/src/date-picker/src/panel/date.tsx b/src/date-picker/src/panel/date.tsx
@@ -23,7 +23,7 @@ export default defineComponent({
     ...useCalendarProps,
     type: {
       type: String as PropType<'date' | 'week'>,
-      required: false
+      required: true
     }
   },
   setup (props) {
@@ -37,18 +37,19 @@ export default defineComponent({
         }
       })
     }
-    return useCalendar(props, props.type ?? 'date')
+    return useCalendar(props, props.type)
   },
   render () {
-    const { mergedClsPrefix, mergedTheme, shortcuts, onRender, $slots } = this
+    const { mergedClsPrefix, mergedTheme, shortcuts, onRender, $slots, type } =
+      this
     onRender?.()
     return (
       <div
         ref="selfRef"
         tabindex={0}
         class={[
           `${mergedClsPrefix}-date-panel`,
-          `${mergedClsPrefix}-date-panel--date`,
+          `${mergedClsPrefix}-date-panel--${type}`,
           !this.panel && `${mergedClsPrefix}-date-panel--shadow`,
           this.themeClass
         ]}
@@ -116,10 +117,10 @@ export default defineComponent({
                       !dateItem.inCurrentMonth,
                     [`${mergedClsPrefix}-date-panel-date--disabled`]:
                       this.mergedIsDateDisabled(dateItem.ts),
-                    [`${mergedClsPrefix}-date-panel-date--slightly-covered`]:
-                      this.isSlightlyCovered(dateItem),
-                    [`${mergedClsPrefix}-date-panel-date--heavily-covered`]:
-                      dateItem.inHeavySpan
+                    [`${mergedClsPrefix}-date-panel-date--week-hovered`]:
+                      this.isWeekHovered(dateItem),
+                    [`${mergedClsPrefix}-date-panel-date--week-selected`]:
+                      dateItem.inSelectedWeek
                   }
                 ]}
                 onClick={() => {

diff --git a/src/date-picker/src/panel/use-calendar.ts b/src/date-picker/src/panel/use-calendar.ts
@@ -191,8 +191,6 @@ function useCalendar (
         localeRef.value.firstDayOfWeek) +
         1) %
         7) as FirstDayOfWeek
-      console.log(firstDayOfWeekRef.value, localeRef.value.firstDayOfWeek)
-
       return getTime(
         startOfWeek(value, {
           weekStartsOn
@@ -288,7 +286,7 @@ function useCalendar (
       hoveredWeekRef.value = sanitizeValue(getTime(dateItem.ts))
     }
   }
-  function isSlightlyCovered (
+  function isWeekHovered (
     dateItem: DateItem | MonthItem | YearItem | QuarterItem
   ): boolean {
     if (dateItem.type === 'date' && type === 'week') {
@@ -501,7 +499,7 @@ function useCalendar (
     handleDateInputBlur,
     handleDateInput,
     handleDateMouseEnter,
-    isSlightlyCovered,
+    isWeekHovered,
     handleTimePickerChange,
     clearSelectedDateTime,
     virtualListContainer,

diff --git a/src/date-picker/src/styles/index.cssr.ts b/src/date-picker/src/styles/index.cssr.ts
@@ -184,6 +184,13 @@ export default c([
         "action"
       `
     }),
+    cM('week', {
+      gridTemplateAreas: `
+        "left-calendar"
+        "footer"
+        "action"
+      `
+    }),
     cM('daterange', {
       gridTemplateAreas: `
         "left-calendar divider right-calendar"
@@ -339,17 +346,6 @@ export default c([
           width:  var(--n-item-cell-width);
           height:  var(--n-item-cell-height);
         `),
-        cNotM('disabled', [
-          cNotM('selected', [
-            cNotM('slightly-covered', [
-              cNotM('heavily-covered', [
-                c('&:hover', {
-                  backgroundColor: 'var(--n-item-color-hover)'
-                })
-              ])
-            ])
-          ])
-        ]),
         cM('current', [
           cE('sup', `
             position: absolute;
@@ -375,7 +371,6 @@ export default c([
           border-radius: inherit;
           transition: background-color .3s var(--n-bezier);
         `),
-
         cM('covered, start, end', [
           cNotM('excluded', [
             c('&::before', `
@@ -445,30 +440,52 @@ export default c([
             })
           ])
         ]),
-        cM('slightly-covered', [
+        cM('week-hovered', [
           c('&::before', `
-            content: "";
-            z-index: -2;
-            position: absolute;
-            left: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2);
-            right: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2);
-            top: 0;
-            bottom: 0;
             background-color: var(--n-item-color-included);
           `),
-          c('&:nth-child(7n + 1)::before', {
-            borderTopLeftRadius: 'var(--n-item-border-radius)',
-            borderBottomLeftRadius: 'var(--n-item-border-radius)'
-          }),
-          c('&:nth-child(7n + 7)::before', {
-            borderTopRightRadius: 'var(--n-item-border-radius)',
-            borderBottomRightRadius: 'var(--n-item-border-radius)'
-          })
+          c('&:nth-child(7n + 1)::before', `
+            border-top-left-radius: var(--n-item-border-radius);
+            border-bottom-left-radius: var(--n-item-border-radius);
+          `),
+          c('&:nth-child(7n + 7)::before', `
+            border-top-right-radius: var(--n-item-border-radius);
+            border-bottom-right-radius: var(--n-item-border-radius);
+          `)
         ]),
-        cM('heavily-covered', [
-          c('&', `
-              color: var(--n-item-text-color-active)
+        cM('week-selected', `
+          color: var(--n-item-text-color-active)
+        `, [
+          c('&::before', `
+            background-color: var(--n-item-color-active);
           `),
+          c('&:nth-child(7n + 1)::before', `
+            border-top-left-radius: var(--n-item-border-radius);
+            border-bottom-left-radius: var(--n-item-border-radius);
+          `),
+          c('&:nth-child(7n + 7)::before', `
+            border-top-right-radius: var(--n-item-border-radius);
+            border-bottom-right-radius: var(--n-item-border-radius);
+          `)
+        ])
+      ])
+    ]),
+    cNotM('week', [
+      cB('date-panel-dates', [
+        cB('date-panel-date', [
+          cNotM('disabled', [
+            cNotM('selected', [
+              c('&:hover', `
+                background-color: var(--n-item-color-hover);
+              `)
+            ])
+          ])
+        ])
+      ])
+    ]),
+    cM('week', [
+      cB('date-panel-dates', [
+        cB('date-panel-date', [
           c('&::before', `
             content: "";
             z-index: -2;
@@ -477,16 +494,8 @@ export default c([
             right: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2);
             top: 0;
             bottom: 0;
-            background-color: var(--n-item-color-active);
-          `),
-          c('&:nth-child(7n + 1)::before', {
-            borderTopLeftRadius: 'var(--n-item-border-radius)',
-            borderBottomLeftRadius: 'var(--n-item-border-radius)'
-          }),
-          c('&:nth-child(7n + 7)::before', {
-            borderTopRightRadius: 'var(--n-item-border-radius)',
-            borderBottomRightRadius: 'var(--n-item-border-radius)'
-          })
+            transition: background-color .3s var(--n-bezier);
+          `)
         ])
       ])
     ]),
@@ -496,10 +505,10 @@ export default c([
       width: 1px;
       background-color: var(--n-calendar-divider-color);
     `),
-    cB('date-panel-footer', {
-      borderTop: '1px solid var(--n-panel-action-divider-color)',
-      padding: 'var(--n-panel-extra-footer-padding)'
-    }),
+    cB('date-panel-footer', `
+      border-top: 1px solid var(--n-panel-action-divider-color);
+      padding: var(--n-panel-extra-footer-padding);
+    `),
     cB('date-panel-actions', `
       flex: 1;
       padding: var(--n-panel-action-padding);

diff --git a/src/date-picker/src/utils.ts b/src/date-picker/src/utils.ts
@@ -59,6 +59,17 @@ function makeWeekMatcher (firstDayOfWeek: FirstDayOfWeek) {
   }
 }
 
+function matchDate (
+  sourceTime: number,
+  patternTime: number | Date,
+  type: 'date' | 'month' | 'year' | 'quarter'
+): boolean
+function matchDate (
+  sourceTime: number,
+  patternTime: number | Date,
+  type: 'week',
+  firstDayOfWeek: FirstDayOfWeek
+): boolean
 function matchDate (
   sourceTime: number,
   patternTime: number | Date,
@@ -67,7 +78,7 @@ function matchDate (
 ): boolean {
   const matcher =
     type === 'week' ? makeWeekMatcher(firstDayOfWeek) : matcherMap[type]
-    return matcher(sourceTime, patternTime)
+  return matcher(sourceTime, patternTime)
 }
 
 export interface DateItem {
@@ -83,7 +94,7 @@ export interface DateItem {
   startOfSpan: boolean
   endOfSpan: boolean
   selected: boolean
-  inHeavySpan: boolean
+  inSelectedWeek: boolean
   ts: number
 }
 
@@ -168,7 +179,7 @@ function dateItem (
     inCurrentMonth: isSameMonth(time, monthTs),
     isCurrentDate: matchDate(currentTs, time, 'date'),
     inSpan,
-    inHeavySpan: false,
+    inSelectedWeek: false,
     startOfSpan,
     endOfSpan,
     selected,
@@ -193,7 +204,7 @@ function weekItem (
     if (matchDate(valueTs[0], time, 'week', firstDayOfWeek)) startOfSpan = true
     if (matchDate(valueTs[1], time, 'week', firstDayOfWeek)) endOfSpan = true
   }
-  const inHeavySpan =
+  const inSelectedWeek =
     valueTs !== null &&
     (Array.isArray(valueTs)
       ? matchDate(valueTs[0], time, 'week', firstDayOfWeek) ||
@@ -212,7 +223,7 @@ function weekItem (
     startOfSpan,
     endOfSpan,
     selected: false,
-    inHeavySpan,
+    inSelectedWeek,
     ts: getTime(time)
   }
 }

diff --git a/src/date-picker/styles/_common.ts b/src/date-picker/styles/_common.ts
@@ -23,7 +23,7 @@ export default {
   calendarLeftPaddingMonthrange: '0',
   calendarLeftPaddingQuarterrange: '0',
   calendarLeftPaddingYearrange: '0',
-  calendarLeftPaddingWeek: '0',
+  calendarLeftPaddingWeek: '6px 12px 4px 12px',
   calendarRightPaddingDate: '6px 12px 4px 12px',
   calendarRightPaddingDatetime: '4px 12px',
   calendarRightPaddingDaterange: '6px 12px 4px 12px',

diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx
@@ -464,7 +464,7 @@ export default defineComponent({
         returnFocus: true
       })
     }
-    // 清除选中时间
+    // clear selected time
     function clearSelectedValue (): void {
       doUpdateValue(null)
       deriveInputValue(null)