feat: calendarcard adaptation (#2732)

* feat: calendarcard adaption * fix: review * fix: review
jdf2e · Nov 11, 2024 · 1a61cc2 · 1a61cc2
1 parent 1222cb6
commit 1a61cc2
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 58 deletions.
diff --git a/src/config.json b/src/config.json
@@ -437,7 +437,7 @@
           "author": "szg2008"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "CalendarCard",
           "type": "component",
           "cName": "日历卡片",

diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
@@ -55,6 +55,9 @@
 
     &-top,
     &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12px;
       font-size: 12px;
@@ -67,14 +70,22 @@
 
     &.active {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
       border-radius: $calendar-day-active-border-radius;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start {
@@ -89,7 +100,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     .nut-calendar-day-info {
@@ -100,7 +115,11 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $calendar-disable-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-disable-color;
+      }
       cursor: not-allowed;
     }
   }
@@ -128,11 +147,13 @@
       }
     }
   }
+
   &-day {
     &.start,
     &.end {
       border-radius: 0;
     }
+
     &.start {
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;

diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactNode } from 'react'
+import React, { ReactNode, useCallback, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon.taro'
@@ -35,6 +35,7 @@ export interface CalendarCardProps extends BasicComponent {
   onPageChange: (data: CalendarCardMonth) => void
   onChange: (value: CalendarCardValue) => void
 }
+
 const defaultProps = {
   ...ComponentDefaults,
   type: 'single',
@@ -123,33 +124,36 @@ export const CalendarCard = React.forwardRef<
     }
   }
 
-  const getDays = (month: CalendarCardMonth) => {
-    const y = month.year
-    const m = month.month
-    const days = [
-      ...getPrevMonthDays(y, m, firstDayOfWeek),
-      ...getCurrentMonthDays(y, m),
-    ] as CalendarCardDay[]
-    const size = days.length
-    const yearOfNextMonth = month.month === 12 ? month.year + 1 : month.year
-    const monthOfNextMonth = month.month === 12 ? 1 : month.month + 1
-    // 补全 6 行 7 列视图
-    for (let i = 1; i <= 42 - size; i++) {
-      days.push({
-        type: 'next',
-        year: yearOfNextMonth,
-        month: monthOfNextMonth,
-        date: i,
-      })
-    }
-    return days
-  }
+  const getDays = useCallback(
+    (month: CalendarCardMonth) => {
+      const y = month.year
+      const m = month.month
+      const days = [
+        ...getPrevMonthDays(y, m, firstDayOfWeek),
+        ...getCurrentMonthDays(y, m),
+      ] as CalendarCardDay[]
+      const size = days.length
+      const yearOfNextMonth = month.month === 12 ? month.year + 1 : month.year
+      const monthOfNextMonth = month.month === 12 ? 1 : month.month + 1
+      // 补全 6 行 7 列视图
+      for (let i = 1; i <= 42 - size; i++) {
+        days.push({
+          type: 'next',
+          year: yearOfNextMonth,
+          month: monthOfNextMonth,
+          date: i,
+        })
+      }
+      return days
+    },
+    [firstDayOfWeek]
+  )
 
   useEffect(() => {
     const newDays = getDays(month)
     setDays(newDays)
     onPageChange?.(month)
-  }, [month])
+  }, [month, getDays, onPageChange, firstDayOfWeek])
 
   const isSameDay = (day1: CalendarCardDay, day2: CalendarCardDay) => {
     return (

diff --git a/src/packages/calendarcard/calendarcard.tsx b/src/packages/calendarcard/calendarcard.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactNode } from 'react'
+import React, { ReactNode, useEffect, useState, useCallback } from 'react'
 import classNames from 'classnames'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -34,6 +34,7 @@ export interface CalendarCardProps extends BasicComponent {
   onPageChange: (data: CalendarCardMonth) => void
   onChange: (value: CalendarCardValue) => void
 }
+
 const defaultProps = {
   ...ComponentDefaults,
   type: 'single',
@@ -122,33 +123,36 @@ export const CalendarCard = React.forwardRef<
     }
   }
 
-  const getDays = (month: CalendarCardMonth) => {
-    const y = month.year
-    const m = month.month
-    const days = [
-      ...getPrevMonthDays(y, m, firstDayOfWeek),
-      ...getCurrentMonthDays(y, m),
-    ] as CalendarCardDay[]
-    const size = days.length
-    const yearOfNextMonth = month.month === 12 ? month.year + 1 : month.year
-    const monthOfNextMonth = month.month === 12 ? 1 : month.month + 1
-    // 补全 6 行 7 列视图
-    for (let i = 1; i <= 42 - size; i++) {
-      days.push({
-        type: 'next',
-        year: yearOfNextMonth,
-        month: monthOfNextMonth,
-        date: i,
-      })
-    }
-    return days
-  }
+  const getDays = useCallback(
+    (month: CalendarCardMonth) => {
+      const y = month.year
+      const m = month.month
+      const days = [
+        ...getPrevMonthDays(y, m, firstDayOfWeek),
+        ...getCurrentMonthDays(y, m),
+      ] as CalendarCardDay[]
+      const size = days.length
+      const yearOfNextMonth = month.month === 12 ? month.year + 1 : month.year
+      const monthOfNextMonth = month.month === 12 ? 1 : month.month + 1
+      // 补全 6 行 7 列视图
+      for (let i = 1; i <= 42 - size; i++) {
+        days.push({
+          type: 'next',
+          year: yearOfNextMonth,
+          month: monthOfNextMonth,
+          date: i,
+        })
+      }
+      return days
+    },
+    [firstDayOfWeek]
+  )
 
   useEffect(() => {
     const newDays = getDays(month)
     setDays(newDays)
     onPageChange?.(month)
-  }, [month])
+  }, [month, getDays, onPageChange, firstDayOfWeek])
 
   const isSameDay = (day1: CalendarCardDay, day2: CalendarCardDay) => {
     return (

diff --git a/src/packages/calendarcard/icon.taro.tsx b/src/packages/calendarcard/icon.taro.tsx
@@ -1,28 +1,42 @@
 import React, { FC } from 'react'
-import { View } from '@tarojs/components'
+import { Image, View } from '@tarojs/components'
 
-const left =
+let left =
   'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg=='
 
-const right =
+let right =
   'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTEuMzk2IDkuNDlhLjc3MS43NzEgMCAwIDAgMC0uOThsLTMuNi00LjM3MmEuNzcxLjc3MSAwIDAgMC0xLjE5MS45ODFMOS44IDlsLTMuMTk2IDMuODgxYS43NzEuNzcxIDAgMCAwIDEuMTkuOThsMy42LTQuMzd6Ii8+PC9zdmc+'
 
-const doubleLeft =
+let doubleLeft =
   'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuODUzIDQuMDI2YS43NzEuNzcxIDAgMCAxIC4xMiAxLjA4NUwxMC44NjQgOWwzLjExIDMuODg5YS43NzEuNzcxIDAgMSAxLTEuMjA0Ljk2M2wtMy40OTgtNC4zN2EuNzcxLjc3MSAwIDAgMSAwLS45NjRsMy40OTctNC4zNzFhLjc3MS43NzEgMCAwIDEgMS4wODQtLjEyem0tNS4yNDUgMGEuNzcxLjc3MSAwIDAgMSAuMTIgMS4wODVMNS42MTcgOWwzLjExMSAzLjg4OWEuNzcxLjc3MSAwIDAgMS0xLjIwNS45NjNsLTMuNDk3LTQuMzdhLjc3MS43NzEgMCAwIDEgMC0uOTY0bDMuNDk3LTQuMzcxYS43NzEuNzcxIDAgMCAxIDEuMDg1LS4xMnoiLz48L3N2Zz4='
 
-const doubleRight =
+let doubleRight =
   'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNC4xNDcgMTMuOTc0YS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUw3LjEzNiA5IDQuMDI4IDUuMTFhLjc3MS43NzEgMCAxIDEgMS4yMDQtLjk2M2wzLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMSAwIC45NjRsLTMuNDk3IDQuMzcxYS43NzEuNzcxIDAgMCAxLTEuMDg0LjEyem01LjI0NSAwYS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUwxMi4zODMgOSA5LjI3MiA1LjExYS43NzEuNzcxIDAgMSAxIDEuMjA1LS45NjNsMy40OTcgNC4zNzFhLjc3MS43NzEgMCAwIDEgMCAuOTY0bC0zLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMS0xLjA4NS4xMnoiLz48L3N2Zz4='
 
 interface IconProps {
   url: string
 }
 
+if (process.env.TARO_ENV === 'jdharmony_cpp') {
+  left =
+    'https://img11.360buyimg.com/imagetools/jfs/t1/187031/35/51586/196/6731c464F9b9f8f00/5506e32bf15e29dc.png'
+  right =
+    'https://img12.360buyimg.com/imagetools/jfs/t1/181006/25/51824/185/6731c452F9e252322/7493147dd6b4a88d.png'
+  doubleLeft =
+    'https://img13.360buyimg.com/imagetools/jfs/t1/221244/29/45876/259/6731c6bdF515df0a2/624e8eee3c8494a2.png'
+  doubleRight =
+    'https://img11.360buyimg.com/imagetools/jfs/t1/238382/25/24000/235/6731c6bdF0153286c/4a57e60b6e889af3.png'
+}
+
 const Icon: FC<IconProps> = ({ url }) => {
   const style = {
     background: `url('${url}') no-repeat center`,
     backgroundSize: '100% 100%',
-    width: '18px',
-    height: '18px',
+    width: 18,
+    height: 18,
+  }
+  if (process.env.TARO_ENV === 'jdharmony_cpp') {
+    return <Image src={url} style={style} />
   }
   return <View style={style} />
 }