Skip to content

Commit 0c8fc06

Browse files
onesineonesine
committed
Code refactoring
1 parent 55569d8 commit 0c8fc06

File tree

10 files changed

+75
-58
lines changed

10 files changed

+75
-58
lines changed

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 Onesine
3+
Copyright (c) 2023 Onesine
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎pages/index.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,19 @@ export default function Playground() {
5555
useRange={useRange}
5656
showFooter={showFooter}
5757
showShortcuts={showShortcuts}
58-
configs={configs}
58+
configs={{
59+
shortcuts: {
60+
today: "TText",
61+
yesterday: "YText",
62+
past: period => `P-${period} Text`,
63+
currentMonth: "CMText",
64+
pastMonth: "PMText",
65+
},
66+
footer: {
67+
cancel: "CText",
68+
apply: "AText"
69+
}
70+
}}
5971
asSingle={asSingle}
6072
placeholder={placeholder}
6173
separator={separator}

‎rollup.config.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@ module.exports = {
1212
file: packageJson.main,
1313
format: "cjs",
1414
exports: "auto",
15-
sourcemap: true
15+
sourcemap: true,
16+
inlineDynamicImports: true
1617
},
1718
{
1819
file: packageJson.module,
1920
format: "esm",
2021
exports: "auto",
21-
sourcemap: true
22+
sourcemap: true,
23+
inlineDynamicImports: true
2224
}
2325
],
2426
external: ["react", "dayjs"],

‎src/components/Datepicker.tsx

+24-21
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Calendar from "../components/Calendar";
55
import Footer from "../components/Footer";
66
import Input from "../components/Input";
77
import Shortcuts from "../components/Shortcuts";
8-
import { COLORS, DEFAULT_COLOR } from "../constants";
8+
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";
@@ -66,13 +66,13 @@ const Datepicker: React.FC<Props> = ({
6666
placeholder = null,
6767
separator = "~",
6868
startFrom = null,
69-
i18n = "en",
69+
i18n = LANGUAGE,
7070
disabled = false,
7171
inputClassName = null,
7272
containerClassName = null,
7373
toggleClassName = null,
7474
toggleIcon = undefined,
75-
displayFormat = "YYYY-MM-DD",
75+
displayFormat = DATE_FORMAT,
7676
readOnly = false,
7777
minDate = null,
7878
maxDate = null,
@@ -91,14 +91,13 @@ const Datepicker: React.FC<Props> = ({
9191
const [firstDate, setFirstDate] = useState<dayjs.Dayjs>(
9292
startFrom && dayjs(startFrom).isValid() ? dayjs(startFrom) : dayjs()
9393
);
94+
const [secondDate, setSecondDate] = useState<dayjs.Dayjs>(nextMonth(firstDate));
9495
const [period, setPeriod] = useState<Period>({
9596
start: null,
9697
end: null
9798
});
98-
const [secondDate, setSecondDate] = useState<dayjs.Dayjs>(nextMonth(firstDate));
9999
const [dayHover, setDayHover] = useState<string | null>(null);
100100
const [inputText, setInputText] = useState<string>("");
101-
102101
const [inputRef, setInputRef] = useState(React.createRef<HTMLInputElement>());
103102

104103
// Custom Hooks use
@@ -133,6 +132,7 @@ const Datepicker: React.FC<Props> = ({
133132
}
134133
}, []);
135134

135+
/* Start First */
136136
const firstGotoDate = useCallback(
137137
(date: dayjs.Dayjs) => {
138138
const newDate = dayjs(formatDate(date));
@@ -153,6 +153,22 @@ const Datepicker: React.FC<Props> = ({
153153
firstGotoDate(nextMonth(firstDate));
154154
}, [firstDate, firstGotoDate]);
155155

156+
const changeFirstMonth = useCallback(
157+
(month: number) => {
158+
firstGotoDate(dayjs(`${firstDate.year()}-${month < 10 ? "0" : ""}${month}-01`));
159+
},
160+
[firstDate, firstGotoDate]
161+
);
162+
163+
const changeFirstYear = useCallback(
164+
(year: number) => {
165+
firstGotoDate(dayjs(`${year}-${firstDate.month() + 1}-01`));
166+
},
167+
[firstDate, firstGotoDate]
168+
);
169+
/* End First */
170+
171+
/* Start Second */
156172
const secondGotoDate = useCallback(
157173
(date: dayjs.Dayjs) => {
158174
const newDate = dayjs(formatDate(date, displayFormat));
@@ -173,33 +189,20 @@ const Datepicker: React.FC<Props> = ({
173189
setSecondDate(nextMonth(secondDate));
174190
}, [secondDate]);
175191

176-
const changeFirstMonth = useCallback(
177-
(month: number) => {
178-
firstGotoDate(dayjs(`${firstDate.year()}-${month < 10 ? "0" : ""}${month}-01`));
179-
},
180-
[firstDate, firstGotoDate]
181-
);
182-
183192
const changeSecondMonth = useCallback(
184193
(month: number) => {
185194
secondGotoDate(dayjs(`${secondDate.year()}-${month < 10 ? "0" : ""}${month}-01`));
186195
},
187196
[secondDate, secondGotoDate]
188197
);
189198

190-
const changeFirstYear = useCallback(
191-
(year: number) => {
192-
firstGotoDate(dayjs(`${year}-${firstDate.month() + 1}-01`));
193-
},
194-
[firstDate, firstGotoDate]
195-
);
196-
197199
const changeSecondYear = useCallback(
198200
(year: number) => {
199201
secondGotoDate(dayjs(`${year}-${secondDate.month() + 1}-01`));
200202
},
201203
[secondDate, secondGotoDate]
202204
);
205+
/* End Second */
203206

204207
// UseEffects & UseLayoutEffect
205208
useEffect(() => {
@@ -251,7 +254,7 @@ const Datepicker: React.FC<Props> = ({
251254

252255
useEffect(() => {
253256
if (startFrom && dayjs(startFrom).isValid()) {
254-
if (value != null && value.startDate != null) {
257+
if (value?.startDate != null) {
255258
setFirstDate(dayjs(value.startDate));
256259
setSecondDate(nextMonth(dayjs(value.startDate)));
257260
} else {
@@ -261,7 +264,7 @@ const Datepicker: React.FC<Props> = ({
261264
}
262265
}, [startFrom, value]);
263266

264-
// Variable
267+
// Variables
265268
const colorPrimary = useMemo(() => {
266269
if (COLORS.includes(primaryColor)) {
267270
return primaryColor;

‎src/components/Footer.tsx

+3-10
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const Footer: React.FC = () => {
99
const { hideDatepicker, period, changeDatepickerValue, configs, classNames } =
1010
useContext(DatepickerContext);
1111

12+
// Functions
1213
const getClassName = useCallback(() => {
1314
if (typeof classNames !== "undefined" && typeof classNames?.footer === "function") {
1415
return classNames.footer();
@@ -25,11 +26,7 @@ const Footer: React.FC = () => {
2526
hideDatepicker();
2627
}}
2728
>
28-
<>
29-
{configs && configs.footer && configs.footer.cancel
30-
? configs.footer.cancel
31-
: "Cancel"}
32-
</>
29+
<>{configs?.footer?.cancel ? configs.footer.cancel : "Cancel"}</>
3330
</SecondaryButton>
3431
<PrimaryButton
3532
onClick={() => {
@@ -43,11 +40,7 @@ const Footer: React.FC = () => {
4340
}}
4441
disabled={!(period.start && period.end)}
4542
>
46-
<>
47-
{configs && configs.footer && configs.footer.cancel
48-
? configs.footer.apply
49-
: "Apply"}
50-
</>
43+
<>{configs?.footer?.apply ? configs.footer.apply : "Apply"}</>
5144
</PrimaryButton>
5245
</div>
5346
</div>

‎src/components/Input.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import dayjs from "dayjs";
22
import React, { useCallback, useContext, useEffect, useRef } from "react";
33

4-
import { BORDER_COLOR, RING_COLOR } from "../constants";
4+
import {BORDER_COLOR, DATE_FORMAT, RING_COLOR} from "../constants";
55
import DatepickerContext from "../contexts/DatepickerContext";
66
import { dateIsValid } from "../helpers";
77

@@ -90,7 +90,7 @@ const Input: React.FC<Props> = (e: Props) => {
9090
},
9191
e.target
9292
);
93-
changeDayHover(dayjs(end).add(-1, "day").format("YYYY-MM-DD"));
93+
changeDayHover(dayjs(end).add(-1, "day").format(DATE_FORMAT));
9494
hideDatepicker();
9595
if (input) {
9696
input.blur();

‎src/components/Shortcuts.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import dayjs from "dayjs";
2-
import React, { useCallback, useContext } from "react";
2+
import React, { useCallback, useContext, useMemo } from "react";
33

44
import { DEFAULT_SHORTCUTS, TEXT_COLOR } from "../constants";
55
import DatepickerContext from "../contexts/DatepickerContext";
@@ -83,26 +83,27 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
8383
);
8484
});
8585

86-
const printItemText = (item: ShortcutsItem) => {
87-
return item.text ?? null;
88-
};
89-
9086
const Shortcuts: React.FC = () => {
9187
// Contexts
9288
const { configs } = useContext(DatepickerContext);
9389

94-
const callPastFunction = (data: unknown, numberValue: number) => {
90+
const callPastFunction = useCallback((data: unknown, numberValue: number) => {
9591
return typeof data === "function" ? data(numberValue) : null;
96-
};
92+
}, []);
93+
94+
const shortcutOptions = useMemo(
95+
() =>
96+
configs
97+
? Object.entries(DEFAULT_SHORTCUTS).filter(([key]) => {
98+
return configs.shortcuts && Object.keys(configs.shortcuts).includes(key);
99+
})
100+
: Object.entries(DEFAULT_SHORTCUTS),
101+
[configs]
102+
);
97103

98-
const shortcutOptions = configs
99-
? Object.entries(DEFAULT_SHORTCUTS).filter(([key]) => {
100-
return configs.shortcuts
101-
? Object.keys(configs.shortcuts).includes(key) &&
102-
configs.shortcuts[key as keyof typeof configs.shortcuts]
103-
: true;
104-
})
105-
: Object.entries(DEFAULT_SHORTCUTS);
104+
const printItemText = useCallback((item: ShortcutsItem) => {
105+
return item?.text ?? null;
106+
}, []);
106107

107108
return (
108109
<div className="md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-gray-700 pr-1">

‎src/constants/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ export const COLORS = [
2727

2828
export const DEFAULT_COLOR = "blue";
2929

30+
export const LANGUAGE = "en";
31+
export const DATE_FORMAT = "YYYY-MM-DD";
32+
export const START_WEEK = "sun";
33+
3034
// Beware, these maps of colors cannot be replaced with functions using string interpolation such as `bg-${color}-100`
3135
// as described in Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names
3236
export const BG_COLOR = {

‎src/contexts/DatepickerContext.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import dayjs from "dayjs";
22
import React, { createContext } from "react";
33

4+
import { DATE_FORMAT, LANGUAGE, START_WEEK } from "../constants";
45
import {
56
Configs,
67
Period,
@@ -75,19 +76,19 @@ const DatepickerContext = createContext<DatepickerStore>({
7576
) => {},
7677
showFooter: false,
7778
value: null,
78-
i18n: "en",
79+
i18n: LANGUAGE,
7980
disabled: false,
8081
inputClassName: "",
8182
containerClassName: "",
8283
toggleClassName: "",
8384
readOnly: false,
84-
displayFormat: "YYYY-MM-DD",
85+
displayFormat: DATE_FORMAT,
8586
minDate: null,
8687
maxDate: null,
8788
disabledDates: null,
8889
inputId: undefined,
8990
inputName: undefined,
90-
startWeekOn: "sun",
91+
startWeekOn: START_WEEK,
9192
toggleIcon: undefined,
9293
classNames: undefined
9394
});

‎src/helpers/index.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import dayjs from "dayjs";
22
import weekday from "dayjs/plugin/weekday";
3+
import {DATE_FORMAT, LANGUAGE} from "../constants";
34

45
dayjs.extend(weekday);
56

@@ -65,7 +66,7 @@ export function ucFirst(value: string) {
6566
return `${value[0].toUpperCase()}${value.slice(1, value.length)}`;
6667
}
6768

68-
export function formatDate(date: dayjs.Dayjs, format = "YYYY-MM-DD") {
69+
export function formatDate(date: dayjs.Dayjs, format = DATE_FORMAT) {
6970
return date.format(format);
7071
}
7172

@@ -186,7 +187,7 @@ export function getFirstDaysInMonth(date: string | dayjs.Dayjs, size = 0) {
186187
return getFirstElementsInArray(getDaysInMonth(date), size);
187188
}
188189

189-
export function loadLanguageModule(language = "en") {
190+
export function loadLanguageModule(language = LANGUAGE) {
190191
switch (language) {
191192
case "af":
192193
import("dayjs/locale/af");
@@ -298,7 +299,7 @@ export function loadLanguageModule(language = "en") {
298299
case "en-tt":
299300
import("dayjs/locale/en-tt");
300301
break;
301-
case "en":
302+
case LANGUAGE:
302303
import("dayjs/locale/en");
303304
break;
304305
case "eo":

0 commit comments

Comments
 (0)