diff --git a/src/config.json b/src/config.json index 81ad546a66..6bd0699d17 100644 --- 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 index a6760f5177..1b3abd3a2f 100644 --- 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 index 0b1b09a056..f551bfe2f6 100644 --- 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 index f590d0f662..7b337594fd 100644 --- 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 index 5900d95cad..1223f86495 100644 --- 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 = ({ 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 } return }