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..0269683fa3 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; + const 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..cd62ca7055 --- /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..6523efb107 --- /dev/null +++ b/src/calendar/day/plus/style.ts @@ -0,0 +1,24 @@ +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' + }, + ...(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..bdb707b442 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;