From 8bb986da95de77ab8360ac34d993229110d3bbd9 Mon Sep 17 00:00:00 2001 From: Autumn Arcand <147088921+arcanda3@users.noreply.github.com> Date: Thu, 22 May 2025 13:06:53 -0700 Subject: [PATCH 1/3] Fix playgroundScreen.tsx typo --- example/src/screens/playgroundScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/src/screens/playgroundScreen.tsx b/example/src/screens/playgroundScreen.tsx index 4f8447385f..7abf79742b 100644 --- a/example/src/screens/playgroundScreen.tsx +++ b/example/src/screens/playgroundScreen.tsx @@ -54,7 +54,7 @@ export default function PlaygroundScreen() { ); }; - const renderExpendableCalendar = () => { + const renderExpandableCalendar = () => { return ( Date: Fri, 30 May 2025 17:45:13 -0700 Subject: [PATCH 2/3] add plus option for multi-dot marking type --- src/calendar/day/basic/index.tsx | 8 ++++++++ src/calendar/day/marking/index.tsx | 20 +++++++++++++++++++- src/calendar/day/plus/index.tsx | 29 +++++++++++++++++++++++++++++ src/calendar/day/plus/style.ts | 25 +++++++++++++++++++++++++ src/componentUpdater.ts | 4 ++++ src/style.ts | 3 +++ 6 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 src/calendar/day/plus/index.tsx create mode 100644 src/calendar/day/plus/style.ts diff --git a/src/calendar/day/basic/index.tsx b/src/calendar/day/basic/index.tsx index ae251e40b9..4b36997c0b 100644 --- a/src/calendar/day/basic/index.tsx +++ b/src/calendar/day/basic/index.tsx @@ -15,6 +15,10 @@ export interface BasicDayProps extends ViewProps { marking?: MarkingProps; /** Date marking style ('dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom'). Default = 'dot' */ markingType?: MarkingTypes; + /** Show plus sign for multi-dot marking type */ + showPlus?: boolean; + /** Plus sign color */ + plusColor?: string; /** onPress callback */ onPress?: (date?: DateData) => void; /** onLongPress callback */ @@ -39,6 +43,8 @@ const BasicDay = (props: BasicDayProps) => { onLongPress, markingType, marking, + showPlus, + plusColor, state, disableAllTouchEventsForDisabledDays, disableAllTouchEventsForInactiveDays, @@ -144,6 +150,8 @@ const BasicDay = (props: BasicDayProps) => { dotColor={dotColor} dots={dots} periods={periods} + showPlus={showPlus} + plusColor={plusColor} /> ); }; diff --git a/src/calendar/day/marking/index.tsx b/src/calendar/day/marking/index.tsx index 4d98a561e3..098550d4da 100644 --- a/src/calendar/day/marking/index.tsx +++ b/src/calendar/day/marking/index.tsx @@ -6,6 +6,7 @@ import {Theme, MarkingTypes} from '../../../types'; import {extractDotProps} from '../../../componentUpdater'; import styleConstructor from './style'; import Dot, {DotProps} from '../dot'; +import Plus from '../plus'; export enum Markings { DOT = 'dot', @@ -50,6 +51,8 @@ export interface MarkingProps extends DotProps { dotColor?: string; //multi-dot dots?: DOT[]; + showPlus?: boolean; + plusColor?: string; //multi-period periods?: PERIOD[]; startingDay?: boolean; @@ -59,7 +62,7 @@ export interface MarkingProps extends DotProps { } const Marking = (props: MarkingProps) => { - const {theme, type, dots, periods, selected, dotColor} = props; + const {theme, type, dots, periods, selected, dotColor, showPlus, plusColor} = props; const style = useRef(styleConstructor(theme)); const getItems = (items?: DOT[] | PERIOD[]) => { @@ -69,6 +72,17 @@ const Marking = (props: MarkingProps) => { return o.color; }); + if (type === Markings.MULTI_DOT && showPlus) { + const maxDots = 3; + const displayDots = validItems.slice(0, maxDots); + const hasExtraDots = validItems.length > maxDots; + const rendered = displayDots.map((item, index) => renderDot(index, item)) + if (hasExtraDots) { + rendered.push(renderDot(undefined, { extra: true, key: 'extra' })); + } + return rendered; + } + return validItems.map((item, index) => { return type === Markings.MULTI_DOT ? renderDot(index, item) : renderPeriod(index, item); }); @@ -111,6 +125,7 @@ const Marking = (props: MarkingProps) => { const dotProps = extractDotProps(props); let key = index; let color = dotColor; + let plusSignColor = plusColor; if (item) { if (item.key) { @@ -118,6 +133,9 @@ const Marking = (props: MarkingProps) => { } color = selected && item.selectedDotColor ? item.selectedDotColor : item.color; } + if (item && item.extra && showPlus) { + return ; + } return ; }; diff --git a/src/calendar/day/plus/index.tsx b/src/calendar/day/plus/index.tsx new file mode 100644 index 0000000000..009d80a2e3 --- /dev/null +++ b/src/calendar/day/plus/index.tsx @@ -0,0 +1,29 @@ +import React, {useRef} from 'react'; +import {View, Text} from 'react-native'; +import styleConstructor from './style'; +import {Theme} from '../../../types'; + +export interface PlusProps { + theme?: Theme; + color?: string; + marked?: boolean; +} + +const Plus = ({ theme, marked, color}) => { + const style = useRef(styleConstructor(theme)); + const plusStyle = [style.current.plus]; + const plusTextStyle = [style.current.plusText]; + + if (marked) { + if (color) { + plusTextStyle.push({ color }); + } + } + return ( + + + + + ); +}; + +export default Plus; diff --git a/src/calendar/day/plus/style.ts b/src/calendar/day/plus/style.ts new file mode 100644 index 0000000000..ba9dc3ee58 --- /dev/null +++ b/src/calendar/day/plus/style.ts @@ -0,0 +1,25 @@ +import {StyleSheet} from 'react-native'; +import * as defaultStyle from '../../../style'; +import {Theme} from '../../../types'; + +export default function styleConstructor(theme: Theme = {}) { + const appStyle = {...defaultStyle, ...theme}; + return StyleSheet.create({ + plus: { + width: 5, + height: 5, + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + }, + plusText: { + fontSize: 7, + lineHeight: 6.25, + fontWeight: 'bold', + color: appStyle.plusColor, + textAlign: 'center', + ...appStyle.textDayStyle //textStyle? + }, + ...(theme['stylesheet.plus'] || {}) + }); +} diff --git a/src/componentUpdater.ts b/src/componentUpdater.ts index a66c5faee8..0ec0c60003 100644 --- a/src/componentUpdater.ts +++ b/src/componentUpdater.ts @@ -64,6 +64,8 @@ export function extractDayProps(props: CalendarProps) { state, marking, markingType, + showPlus, + plusColor, theme, onPress, onLongPress, @@ -78,6 +80,8 @@ export function extractDayProps(props: CalendarProps) { state, marking, markingType, + showPlus, + plusColor, theme, onPress, onLongPress, diff --git a/src/style.ts b/src/style.ts index a874d42482..8ff829cf56 100644 --- a/src/style.ts +++ b/src/style.ts @@ -24,6 +24,8 @@ export const todayButtonFontSize = 14; export const textDayStyle = undefined; export const dotStyle = undefined; export const arrowStyle = undefined; +export const plusStyle = undefined; +export const plusTextStyle = undefined; export const calendarBackground = FOREGROUND_COLOR; @@ -41,6 +43,7 @@ export const selectedDotColor = FOREGROUND_COLOR; export const disabledDotColor = DISABLED_COLOR; export const inactiveDotColor = DISABLED_COLOR; export const todayDotColor = SECONDARY_TEXT_COLOR; +export const plusColor = "#808080" export const arrowColor = SECONDARY_TEXT_COLOR; export const disabledArrowColor = DISABLED_COLOR; export const monthTextColor = DEFAULT_TEXT_COLOR; From deabb7abdfd5b5cbc41db455b72c3f945ecaf6fb Mon Sep 17 00:00:00 2001 From: arcanda3 Date: Sat, 31 May 2025 19:07:38 -0700 Subject: [PATCH 3/3] formatting check --- src/calendar/day/marking/index.tsx | 6 ++--- src/calendar/day/plus/index.tsx | 32 +++++++++++++------------- src/calendar/day/plus/style.ts | 37 +++++++++++++++--------------- src/style.ts | 2 +- 4 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/calendar/day/marking/index.tsx b/src/calendar/day/marking/index.tsx index 098550d4da..0269683fa3 100644 --- a/src/calendar/day/marking/index.tsx +++ b/src/calendar/day/marking/index.tsx @@ -76,7 +76,7 @@ const Marking = (props: MarkingProps) => { const maxDots = 3; const displayDots = validItems.slice(0, maxDots); const hasExtraDots = validItems.length > maxDots; - const rendered = displayDots.map((item, index) => renderDot(index, item)) + const rendered = displayDots.map((item, index) => renderDot(index, item)); if (hasExtraDots) { rendered.push(renderDot(undefined, { extra: true, key: 'extra' })); } @@ -125,7 +125,7 @@ const Marking = (props: MarkingProps) => { const dotProps = extractDotProps(props); let key = index; let color = dotColor; - let plusSignColor = plusColor; + const plusSignColor = plusColor; if (item) { if (item.key) { @@ -134,7 +134,7 @@ const Marking = (props: MarkingProps) => { color = selected && item.selectedDotColor ? item.selectedDotColor : item.color; } if (item && item.extra && showPlus) { - return ; + return ; } return ; diff --git a/src/calendar/day/plus/index.tsx b/src/calendar/day/plus/index.tsx index 009d80a2e3..cd62ca7055 100644 --- a/src/calendar/day/plus/index.tsx +++ b/src/calendar/day/plus/index.tsx @@ -4,26 +4,26 @@ import styleConstructor from './style'; import {Theme} from '../../../types'; export interface PlusProps { - theme?: Theme; - color?: string; - marked?: boolean; + theme?: Theme; + color?: string; + marked?: boolean; } -const Plus = ({ theme, marked, color}) => { - const style = useRef(styleConstructor(theme)); - const plusStyle = [style.current.plus]; - const plusTextStyle = [style.current.plusText]; +const Plus = ({theme, marked, color}) => { + const style = useRef(styleConstructor(theme)); + const plusStyle = [style.current.plus]; + const plusTextStyle = [style.current.plusText]; - if (marked) { - if (color) { - plusTextStyle.push({ color }); - } + if (marked) { + if (color) { + plusTextStyle.push({color}); } - return ( - - + - - ); + } + return ( + + + + + ); }; export default Plus; diff --git a/src/calendar/day/plus/style.ts b/src/calendar/day/plus/style.ts index ba9dc3ee58..6523efb107 100644 --- a/src/calendar/day/plus/style.ts +++ b/src/calendar/day/plus/style.ts @@ -3,23 +3,22 @@ import * as defaultStyle from '../../../style'; import {Theme} from '../../../types'; export default function styleConstructor(theme: Theme = {}) { - const appStyle = {...defaultStyle, ...theme}; - return StyleSheet.create({ - plus: { - width: 5, - height: 5, - justifyContent: 'center', - alignItems: 'center', - position: 'relative', - }, - plusText: { - fontSize: 7, - lineHeight: 6.25, - fontWeight: 'bold', - color: appStyle.plusColor, - textAlign: 'center', - ...appStyle.textDayStyle //textStyle? - }, - ...(theme['stylesheet.plus'] || {}) - }); + const appStyle = {...defaultStyle, ...theme}; + return StyleSheet.create({ + plus: { + width: 5, + height: 5, + justifyContent: 'center', + alignItems: 'center', + position: 'relative' + }, + plusText: { + fontSize: 7, + lineHeight: 6.25, + fontWeight: 'bold', + color: appStyle.plusColor, + textAlign: 'center' + }, + ...(theme['stylesheet.plus'] || {}) + }); } diff --git a/src/style.ts b/src/style.ts index 8ff829cf56..bdb707b442 100644 --- a/src/style.ts +++ b/src/style.ts @@ -43,7 +43,7 @@ export const selectedDotColor = FOREGROUND_COLOR; export const disabledDotColor = DISABLED_COLOR; export const inactiveDotColor = DISABLED_COLOR; export const todayDotColor = SECONDARY_TEXT_COLOR; -export const plusColor = "#808080" +export const plusColor = '#808080'; export const arrowColor = SECONDARY_TEXT_COLOR; export const disabledArrowColor = DISABLED_COLOR; export const monthTextColor = DEFAULT_TEXT_COLOR;