Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: calendarcard adaptation #2732

Merged
merged 3 commits into from
Nov 11, 2024
Merged

feat: calendarcard adaptation #2732

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
177f626
feat: calendarcard adaption
oasis-cloud Nov 11, 2024
20db501
fix: review
oasis-cloud Nov 11, 2024
7668b38
fix: review
oasis-cloud Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@
"author": "szg2008"
},
{
"version": "2.0.0",
"version": "3.0.0",
"name": "CalendarCard",
"type": "component",
"cName": "日历卡片",
Expand Down
29 changes: 25 additions & 4 deletions src/packages/calendarcard/calendarcard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@

&-top,
&-bottom {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 12px;
font-size: 12px;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions src/packages/calendarcard/calendarcard.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect, ReactNode } from 'react'
import React, { ReactNode, useEffect, useState } from 'react'
import classNames from 'classnames'
import { View } from '@tarojs/components'
import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon.taro'
Expand Down Expand Up @@ -35,6 +35,7 @@ export interface CalendarCardProps extends BasicComponent {
onPageChange: (data: CalendarCardMonth) => void
onChange: (value: CalendarCardValue) => void
}

const defaultProps = {
...ComponentDefaults,
type: 'single',
Expand Down Expand Up @@ -149,7 +150,7 @@ export const CalendarCard = React.forwardRef<
const newDays = getDays(month)
setDays(newDays)
onPageChange?.(month)
}, [month])
}, [month, getDays, onPageChange])

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

优化 useEffect 依赖数组

添加 getDays 和 onPageChange 到依赖数组是一个重要的改进：

  • 确保当这些依赖项发生变化时重新执行副作用
  • 防止由于闭包导致的过期数据问题
  • 符合 React Hooks 的使用规范

建议进一步优化：

- }, [month, getDays, onPageChange])
+ }, [month, getDays, onPageChange, firstDayOfWeek])

因为 getDays 函数内部使用了 firstDayOfWeek，将其添加到依赖数组可以确保在 firstDayOfWeek 改变时正确更新日历视图。

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
}, [month, getDays, onPageChange])
}, [month, getDays, onPageChange, firstDayOfWeek])

const isSameDay = (day1: CalendarCardDay, day2: CalendarCardDay) => {
return (
Expand Down
28 changes: 21 additions & 7 deletions src/packages/calendarcard/icon.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />
}
Expand Down
Loading