Skip to content

Commit 4919fdb

Browse files
t0m3kt0m3k
committed
Fix primary color type enforcement using typescript
1 parent 03e009e commit 4919fdb

File tree

5 files changed

+33
-43
lines changed

5 files changed

+33
-43
lines changed

‎src/components/Calendar/Days.tsx‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -60,20 +60,14 @@ const Days: React.FC<Props> = ({
6060
let className = "";
6161

6262
if (dayjs(fullDay).isSame(period.start) && dayjs(fullDay).isSame(period.end)) {
63-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
64-
// @ts-ignore
6563
className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium rounded-full`;
6664
} else if (dayjs(fullDay).isSame(period.start)) {
67-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
68-
// @ts-ignore
6965
className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${
7066
dayjs(fullDay).isSame(dayHover) && !period.end
7167
? "rounded-full"
7268
: "rounded-l-full"
7369
}`;
7470
} else if (dayjs(fullDay).isSame(period.end)) {
75-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
76-
// @ts-ignore
7771
className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${
7872
dayjs(fullDay).isSame(dayHover) && !period.start
7973
? "rounded-full"
@@ -97,46 +91,30 @@ const Days: React.FC<Props> = ({
9791
}`;
9892

9993
if (period.start && period.end) {
100-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
101-
// @ts-ignore
10294
if (dayjs(fullDay).isBetween(period.start, period.end, "day", "[)")) {
103-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
104-
// @ts-ignore
10595
return ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
10696
day
10797
)} dark:bg-white/10`;
10898
}
10999
}
110100

111101
if (!dayHover) {
112-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
113-
// @ts-ignore
114102
return className;
115103
}
116104

117-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
118-
// @ts-ignore
119105
if (period.start && dayjs(fullDay).isBetween(period.start, dayHover, "day", "[)")) {
120-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
121-
// @ts-ignore
122106
className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
123107
day
124108
)} dark:bg-white/10`;
125109
}
126110

127-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
128-
// @ts-ignore
129111
if (period.end && dayjs(fullDay).isBetween(dayHover, period.end, "day", "[)")) {
130-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
131-
// @ts-ignore
132112
className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
133113
day
134114
)} dark:bg-white/10`;
135115
}
136116

137117
if (dayHover === fullDay) {
138-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
139-
// @ts-ignore
140118
const bgColor = BG_COLOR["500"][primaryColor];
141119
className = ` transition-all duration-500 text-white font-medium ${bgColor} ${
142120
period.start ? "rounded-r-full" : "rounded-l-full"

‎src/components/Datepicker.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
99
import DatepickerContext from "../contexts/DatepickerContext";
1010
import { formatDate, nextMonth, previousMonth } from "../helpers";
1111
import useOnClickOutside from "../hooks";
12-
import { Period, DatepickerType } from "../types";
12+
import { Period, DatepickerType, ColorKeys } from "../types";
1313

1414
import { Arrow, VerticalDash } from "./utils";
1515

@@ -225,16 +225,16 @@ const Datepicker: React.FC<DatepickerType> = ({
225225
}, [startFrom, value]);
226226

227227
// Variables
228-
const colorPrimary = useMemo(() => {
228+
const safePrimaryColor = useMemo(() => {
229229
if (COLORS.includes(primaryColor)) {
230-
return primaryColor;
230+
return primaryColor as ColorKeys;
231231
}
232232
return DEFAULT_COLOR;
233233
}, [primaryColor]);
234234
const contextValues = useMemo(() => {
235235
return {
236236
asSingle,
237-
primaryColor: colorPrimary,
237+
primaryColor: safePrimaryColor,
238238
configs,
239239
calendarContainer: calendarContainerRef,
240240
arrowContainer: arrowRef,
@@ -272,7 +272,7 @@ const Datepicker: React.FC<DatepickerType> = ({
272272
};
273273
}, [
274274
asSingle,
275-
colorPrimary,
275+
safePrimaryColor,
276276
configs,
277277
hideDatepicker,
278278
period,
@@ -291,7 +291,6 @@ const Datepicker: React.FC<DatepickerType> = ({
291291
toggleIcon,
292292
readOnly,
293293
displayFormat,
294-
firstGotoDate,
295294
minDate,
296295
maxDate,
297296
disabledDates,
@@ -300,7 +299,8 @@ const Datepicker: React.FC<DatepickerType> = ({
300299
startWeekOn,
301300
classNames,
302301
inputRef,
303-
popoverDirection
302+
popoverDirection,
303+
firstGotoDate
304304
]);
305305

306306
const containerClassNameOverload = useMemo(() => {

‎src/constants/index.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ColorKeys, Colors } from "types";
2+
13
export const COLORS = [
24
"blue",
35
"orange",
@@ -17,9 +19,9 @@ export const COLORS = [
1719
"fuchsia",
1820
"pink",
1921
"rose"
20-
];
22+
] as const;
2123

22-
export const DEFAULT_COLOR = "blue";
24+
export const DEFAULT_COLOR: ColorKeys = "blue";
2325

2426
export const LANGUAGE = "en";
2527

@@ -35,7 +37,7 @@ export const CALENDAR_SIZE = 42;
3537

3638
// Beware, these maps of colors cannot be replaced with functions using string interpolation such as `bg-${color}-100`
3739
// as described in Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names
38-
export const BG_COLOR = {
40+
export const BG_COLOR: Colors = {
3941
100: {
4042
blue: "bg-blue-100",
4143
orange: "bg-orange-100",
@@ -114,7 +116,7 @@ export const BG_COLOR = {
114116
}
115117
};
116118

117-
export const TEXT_COLOR = {
119+
export const TEXT_COLOR: Colors = {
118120
500: {
119121
blue: "text-blue-500",
120122
orange: "text-orange-500",
@@ -174,7 +176,7 @@ export const TEXT_COLOR = {
174176
}
175177
};
176178

177-
export const BORDER_COLOR = {
179+
export const BORDER_COLOR: Colors = {
178180
500: {
179181
blue: "border-blue-500",
180182
orange: "border-orange-500",
@@ -215,7 +217,7 @@ export const BORDER_COLOR = {
215217
}
216218
};
217219

218-
export const RING_COLOR = {
220+
export const RING_COLOR: Colors = {
219221
focus: {
220222
blue: "focus:ring-blue-500",
221223
orange: "focus:ring-orange-500",
@@ -256,7 +258,7 @@ export const RING_COLOR = {
256258
}
257259
};
258260

259-
export const BUTTON_COLOR = {
261+
export const BUTTON_COLOR: Colors = {
260262
focus: {
261263
blue: "focus:ring-blue-500/50 focus:bg-blue-100/50",
262264
orange: "focus:ring-orange-500/50 focus:bg-orange-100/50",

‎src/contexts/DatepickerContext.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import {
99
DateType,
1010
DateRangeType,
1111
ClassNamesTypeProp,
12-
PopoverDirectionType
12+
PopoverDirectionType,
13+
ColorKeys
1314
} from "../types";
1415

1516
interface DatepickerStore {
1617
input?: React.RefObject<HTMLInputElement>;
1718
asSingle?: boolean;
18-
primaryColor: string;
19+
primaryColor: ColorKeys;
1920
configs?: Configs;
2021
calendarContainer: React.RefObject<HTMLDivElement> | null;
2122
arrowContainer: React.RefObject<HTMLDivElement> | null;
@@ -56,8 +57,7 @@ const DatepickerContext = createContext<DatepickerStore>({
5657
configs: undefined,
5758
calendarContainer: null,
5859
arrowContainer: null,
59-
// eslint-disable-next-line @typescript-eslint/no-empty-function
60-
hideDatepicker: () => {},
60+
hideDatepicker: () => null,
6161
period: { start: null, end: null },
6262
// eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
6363
changePeriod: period => {},

‎src/types/index.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
22

3+
import { COLORS } from "../constants";
4+
35
export interface Period {
46
start: string | null;
57
end: string | null;
@@ -47,7 +49,7 @@ export type ClassNamesTypeProp = {
4749
export type PopoverDirectionType = "up" | "down";
4850

4951
export interface DatepickerType {
50-
primaryColor?: string;
52+
primaryColor?: ColorKeys;
5153
value: DateValueType;
5254
onChange: (value: DateValueType, e?: HTMLInputElement | null | undefined) => void;
5355
useRange?: boolean;
@@ -69,9 +71,17 @@ export interface DatepickerType {
6971
inputName?: string;
7072
displayFormat?: string;
7173
readOnly?: boolean;
72-
minDate?: DateType | null;
73-
maxDate?: DateType | null;
74+
minDate?: Date | null;
75+
maxDate?: Date | null;
7476
disabledDates?: DateRangeType[] | null;
7577
startWeekOn?: string | null;
7678
popoverDirection?: PopoverDirectionType;
7779
}
80+
81+
export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"
82+
83+
export interface Colors {
84+
[key: string]: {
85+
[K in ColorKeys]: string;
86+
};
87+
}

0 commit comments

Comments
 (0)