WuJi/gantt-task-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: optimization getLocaleDate performances

Browse Source
This commit is contained in:
janlay 2021-08-13 17:24:18 +08:00
parent 898487c81f
commit 894ab6b9c3
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/task-list/task-list-table.tsx
View File

@ -1,7 +1,18 @@
import React from "react"; import React, { useMemo } from "react";
import styles from "./task-list-table.module.css"; import styles from "./task-list-table.module.css";
import { Task } from "../../types/public-types"; import { Task } from "../../types/public-types";
const localeDateStringCache = {};
const toLocaleDateStringFactory = (locale: string) => (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => {
const key = date.toString();
let lds = localeDateStringCache[key];
if (!lds) {
lds = date.toLocaleDateString(locale, dateTimeOptions);
localeDateStringCache[key] = lds;
}
return lds;
};
export const TaskListTableDefault: React.FC<{ export const TaskListTableDefault: React.FC<{
rowHeight: number; rowHeight: number;
rowWidth: string; rowWidth: string;
@ -27,6 +38,8 @@ export const TaskListTableDefault: React.FC<{
month: "long", month: "long",
day: "numeric", day: "numeric",
}; };
const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [locale]);
return ( return (
<div <div
className={styles.taskListWrapper} className={styles.taskListWrapper}
@ -78,7 +91,7 @@ export const TaskListTableDefault: React.FC<{
maxWidth: rowWidth, maxWidth: rowWidth,
}} }}
> >
&nbsp;{t.start.toLocaleDateString(locale, dateTimeOptions)} &nbsp;{toLocaleDateString(t.start, dateTimeOptions)}
</div> </div>
<div <div
className={styles.taskListCell} className={styles.taskListCell}
@ -87,8 +100,7 @@ export const TaskListTableDefault: React.FC<{
maxWidth: rowWidth, maxWidth: rowWidth,
}} }}
> >
&nbsp; &nbsp;{toLocaleDateString(t.end, dateTimeOptions)}
{t.end.toLocaleDateString(locale, dateTimeOptions)}
</div> </div>
</div> </div>
); );
@ -96,3 +108,4 @@ export const TaskListTableDefault: React.FC<{
</div> </div>
); );
}; };

17
src/helpers/date-helper.ts
View File

@ -1,4 +1,6 @@
import { Task, ViewMode } from "../types/public-types"; import { Task, ViewMode } from "../types/public-types";
import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
import DateTimeFormat = Intl.DateTimeFormat;
type DateHelperScales = type DateHelperScales =
| "year" | "year"
@ -9,6 +11,18 @@ type DateHelperScales =
| "second" | "second"
| "millisecond"; | "millisecond";
const intlDTCache = {};
const getCachedDateTimeFormat = (locString: string | string[], opts: DateTimeFormatOptions = {}): DateTimeFormat => {
const key = JSON.stringify([locString, opts]);
let dtf = intlDTCache[key];
if (!dtf) {
dtf = new Intl.DateTimeFormat(locString, opts);
intlDTCache[key] = dtf;
}
return dtf;
};
export const addToDate = ( export const addToDate = (
date: Date, date: Date,
quantity: number, quantity: number,
@ -130,7 +144,7 @@ export const seedDates = (
}; };
export const getLocaleMonth = (date: Date, locale: string) => { export const getLocaleMonth = (date: Date, locale: string) => {
let bottomValue = new Intl.DateTimeFormat(locale, { let bottomValue = getCachedDateTimeFormat(locale, {
month: "long", month: "long",
}).format(date); }).format(date);
bottomValue = bottomValue.replace( bottomValue = bottomValue.replace(
@ -173,3 +187,4 @@ export const getWeekNumberISO8601 = (date: Date) => {
export const getDaysInMonth = (month: number, year: number) => { export const getDaysInMonth = (month: number, year: number) => {
return new Date(year, month + 1, 0).getDate(); return new Date(year, month + 1, 0).getDate();
}; };