Skip to content

Commit 61d3085

Browse files
author
ricwilson
committed
refactor: convert color variables to state and add useEffect for updates
1 parent bfbf6eb commit 61d3085

File tree

1 file changed

+85
-20
lines changed

1 file changed

+85
-20
lines changed

‎Calendar/Calendar/hooks/useCalendarColors.ts

Lines changed: 85 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,45 @@ import cssVars from "css-vars-ponyfill";
66
import { IInputs } from "../generated/ManifestTypes";
77

88
export function useCalendarColors(pcfContext: ComponentFramework.Context<IInputs>, eventHeaderFormat: string) {
9-
const eventDefaultBackgroundColor = Color(
10-
isHexColor(pcfContext.parameters.eventDefaultColor?.raw || "")
11-
? (pcfContext.parameters.eventDefaultColor.raw as string)
12-
: CalendarUtils.DEFAULT_EVENT_COLOR
9+
10+
const [eventDefaultBackgroundColor, setEventDefaultBackgroundColor] = useState<Color>(
11+
Color(
12+
isHexColor(pcfContext.parameters.eventDefaultColor?.raw || "")
13+
? (pcfContext.parameters.eventDefaultColor.raw as string)
14+
: CalendarUtils.DEFAULT_EVENT_COLOR
15+
)
1316
);
14-
const calendarTodayBackgroundColor = Color(
15-
isHexColor(pcfContext.parameters.calendarTodayBackgroundColor?.raw || "")
16-
? (pcfContext.parameters.calendarTodayBackgroundColor.raw as string)
17-
: CalendarUtils.DEFAULT_TODAY_BACKGROUND_COLOR
17+
18+
const [calendarTodayBackgroundColor, setCalendarTodayBackgroundColor] = useState<Color>(
19+
Color(
20+
isHexColor(pcfContext.parameters.calendarTodayBackgroundColor?.raw || "")
21+
? (pcfContext.parameters.calendarTodayBackgroundColor.raw as string)
22+
: CalendarUtils.DEFAULT_TODAY_BACKGROUND_COLOR
23+
)
1824
);
19-
const calendarTextColor = Color(
20-
isHexColor(pcfContext.parameters.calendarTextColor?.raw || "")
21-
? (pcfContext.parameters.calendarTextColor.raw as string)
22-
: CalendarUtils.DEFAULT_TEXT_COLOR
25+
26+
const [calendarTextColor, setCalendarTextColor] = useState<Color>(
27+
Color(
28+
isHexColor(pcfContext.parameters.calendarTextColor?.raw || "")
29+
? (pcfContext.parameters.calendarTextColor.raw as string)
30+
: CalendarUtils.DEFAULT_TEXT_COLOR
31+
)
2332
);
24-
const calendarBorderColor = Color(
25-
isHexColor(pcfContext.parameters.calendarBorderColor?.raw || "")
26-
? (pcfContext.parameters.calendarBorderColor.raw as string)
27-
: CalendarUtils.DEFAULT_BORDER_COLOR
33+
34+
const [calendarBorderColor, setCalendarBorderColor] = useState<Color>(
35+
Color(
36+
isHexColor(pcfContext.parameters.calendarBorderColor?.raw || "")
37+
? (pcfContext.parameters.calendarBorderColor.raw as string)
38+
: CalendarUtils.DEFAULT_BORDER_COLOR
39+
)
2840
);
29-
const calendarTimeBarBackgroundColor = Color(
30-
isHexColor(pcfContext.parameters.calendarTimeBarBackgroundColor?.raw || "")
31-
? (pcfContext.parameters.calendarTimeBarBackgroundColor.raw as string)
32-
: CalendarUtils.DEFAULT_TIMEBAR_BACKGROUND_COLOR
41+
42+
const [calendarTimeBarBackgroundColor, setCalendarTimeBarBackgroundColor] = useState<Color>(
43+
Color(
44+
isHexColor(pcfContext.parameters.calendarTimeBarBackgroundColor?.raw || "")
45+
? (pcfContext.parameters.calendarTimeBarBackgroundColor.raw as string)
46+
: CalendarUtils.DEFAULT_TIMEBAR_BACKGROUND_COLOR
47+
)
3348
);
3449

3550
const [weekendColor, setWeekendColor] = useState<string>(
@@ -38,6 +53,56 @@ export function useCalendarColors(pcfContext: ComponentFramework.Context<IInputs
3853
: CalendarUtils.DEFAULT_WEEKEND_BACKGROUND_COLOR
3954
);
4055

56+
useEffect(() => {
57+
setEventDefaultBackgroundColor(
58+
Color(
59+
isHexColor(pcfContext.parameters.eventDefaultColor?.raw || "")
60+
? (pcfContext.parameters.eventDefaultColor.raw as string)
61+
: CalendarUtils.DEFAULT_EVENT_COLOR
62+
)
63+
);
64+
}, [pcfContext.parameters.eventDefaultColor?.raw]);
65+
66+
useEffect(() => {
67+
setCalendarTodayBackgroundColor(
68+
Color(
69+
isHexColor(pcfContext.parameters.calendarTodayBackgroundColor?.raw || "")
70+
? (pcfContext.parameters.calendarTodayBackgroundColor.raw as string)
71+
: CalendarUtils.DEFAULT_TODAY_BACKGROUND_COLOR
72+
)
73+
);
74+
}, [pcfContext.parameters.calendarTodayBackgroundColor?.raw]);
75+
76+
useEffect(() => {
77+
setCalendarTextColor(
78+
Color(
79+
isHexColor(pcfContext.parameters.calendarTextColor?.raw || "")
80+
? (pcfContext.parameters.calendarTextColor.raw as string)
81+
: CalendarUtils.DEFAULT_TEXT_COLOR
82+
)
83+
);
84+
}, [pcfContext.parameters.calendarTextColor?.raw]);
85+
86+
useEffect(() => {
87+
setCalendarBorderColor(
88+
Color(
89+
isHexColor(pcfContext.parameters.calendarBorderColor?.raw || "")
90+
? (pcfContext.parameters.calendarBorderColor.raw as string)
91+
: CalendarUtils.DEFAULT_BORDER_COLOR
92+
)
93+
);
94+
}, [pcfContext.parameters.calendarBorderColor?.raw]);
95+
96+
useEffect(() => {
97+
setCalendarTimeBarBackgroundColor(
98+
Color(
99+
isHexColor(pcfContext.parameters.calendarTimeBarBackgroundColor?.raw || "")
100+
? (pcfContext.parameters.calendarTimeBarBackgroundColor.raw as string)
101+
: CalendarUtils.DEFAULT_TIMEBAR_BACKGROUND_COLOR
102+
)
103+
);
104+
}, [pcfContext.parameters.calendarTimeBarBackgroundColor?.raw]);
105+
41106
useEffect(() => {
42107
const color = isHexColor(pcfContext.parameters.weekendBackgroundColor?.raw || "")
43108
? pcfContext.parameters.weekendBackgroundColor.raw!

0 commit comments

Comments
 (0)