updates from main

README.md

@@ -75,6 +75,7 @@ npm start
 | onDelete\*         | (task: Task) => void/boolean/Promise<void>/Promise<boolean>                   | Specifies the function to be executed on the taskbar on Delete button press event.      |
 | onDateChange\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
 | onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
+| onExpanderClick\*  | onExpanderClick: (task: Task) => void;                                        | Specifies the function to be executed on the table expander click                       |
 | timeStep           | (task: Task) => number                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
 
 \* Chart undoes operation if method return false or error. Parameter children returns one level deep records.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/calendar/calendar.tsx

@@ -2,6 +2,7 @@ import React, { ReactChild } from "react";
 import { ViewMode } from "../../types/public-types";
 import { TopPartOfCalendar } from "./top-part-of-calendar";
 import {
+  getCachedDateTimeFormat,
   getDaysInMonth,
   getLocaleMonth,
   getWeekNumberISO8601,
@@ -177,7 +178,7 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = Intl.DateTimeFormat(locale, {
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric",
       }).format(date);
 

src/components/task-list/task-list-table.tsx

@@ -1,7 +1,27 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styles from "./task-list-table.module.css";
 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;
+};
+const dateTimeOptions: Intl.DateTimeFormatOptions = {
+  weekday: "short",
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
 export const TaskListTableDefault: React.FC<{
   rowHeight: number;
   rowWidth: string;
@@ -21,12 +41,10 @@ export const TaskListTableDefault: React.FC<{
   locale,
   onExpanderClick,
 }) => {
-  const dateTimeOptions: Intl.DateTimeFormatOptions = {
+  const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [
-    weekday: "short",
+    locale,
-    year: "numeric",
+  ]);
-    month: "long",
+
-    day: "numeric",
-  };
   return (
     <div
       className={styles.taskListWrapper}
@@ -78,7 +96,7 @@ export const TaskListTableDefault: React.FC<{
                 maxWidth: rowWidth,
               }}
             >
-              &nbsp;{t.start.toLocaleDateString(locale, dateTimeOptions)}
+              &nbsp;{toLocaleDateString(t.start, dateTimeOptions)}
             </div>
             <div
               className={styles.taskListCell}
@@ -87,8 +105,7 @@ export const TaskListTableDefault: React.FC<{
                 maxWidth: rowWidth,
               }}
             >
-              &nbsp;
+              &nbsp;{toLocaleDateString(t.end, dateTimeOptions)}
-              {t.end.toLocaleDateString(locale, dateTimeOptions)}
             </div>
           </div>
         );

src/helpers/date-helper.ts

@@ -1,4 +1,6 @@
 import { Task, ViewMode } from "../types/public-types";
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+import DateTimeFormat = Intl.DateTimeFormat;
 
 type DateHelperScales =
   | "year"
@@ -9,6 +11,21 @@ type DateHelperScales =
   | "second"
   | "millisecond";
 
+const intlDTCache = {};
+export 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 = (
   date: Date,
   quantity: number,
@@ -130,7 +147,7 @@ export const seedDates = (
 };
 
 export const getLocaleMonth = (date: Date, locale: string) => {
-  let bottomValue = new Intl.DateTimeFormat(locale, {
+  let bottomValue = getCachedDateTimeFormat(locale, {
     month: "long",
   }).format(date);
   bottomValue = bottomValue.replace(
@@ -173,3 +190,4 @@ export const getWeekNumberISO8601 = (date: Date) => {
 export const getDaysInMonth = (month: number, year: number) => {
   return new Date(year, month + 1, 0).getDate();
 };
+