funda-ui 4.5.522 → 4.5.585

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/EventCalendar/index.js +37 -7
  2. package/EventCalendarTimeline/index.js +61 -45
  3. package/MasonryLayout/index.js +19 -9
  4. package/lib/cjs/EventCalendar/index.js +37 -7
  5. package/lib/cjs/EventCalendarTimeline/index.js +61 -45
  6. package/lib/cjs/MasonryLayout/index.js +19 -9
  7. package/lib/esm/EventCalendar/index.tsx +35 -7
  8. package/lib/esm/EventCalendarTimeline/index.tsx +349 -341
  9. package/lib/esm/MasonryLayout/index.tsx +21 -8
  10. package/lib/esm/ModalDialog/index.tsx +0 -1
  11. package/package.json +1 -1
  12. package/MasonryLayout/index.css +0 -6
  13. package/lib/css/MasonryLayout/index.css +0 -6
  14. package/lib/esm/MasonryLayout/index.scss +0 -13
package/lib/esm/EventCalendarTimeline/index.tsx CHANGED
@@ -242,9 +242,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
242
242
  //
243
243
  const FILL_BLANK_DATE_DISABLD = typeof forwardAndBackFillDisabled === 'undefined' ? true : forwardAndBackFillDisabled;
244
244
 
245
- // root
246
- const rootRef = useRef<any>(null);
247
- const rootWidth = useRef<number>(0);
248
245
 
249
246
  //
250
247
  const now = useMemo(() => new Date(), []);
@@ -325,6 +322,18 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
325
322
  useImperativeHandle(
326
323
  contentRef,
327
324
  () => ({
325
+ today: () => {
326
+ handleTodayChange();
327
+ },
328
+ next: () => {
329
+ handleNextChange();
330
+ },
331
+ prev: () => {
332
+ handlePrevChange();
333
+ },
334
+ bodyScrollbarInit: () => {
335
+ bodyScrollbarInit();
336
+ },
328
337
  gridInit: () => {
329
338
  tableGridInit();
330
339
  },
@@ -994,7 +1003,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
994
1003
  // ================================================================
995
1004
  // Calendar
996
1005
  // ================================================================
997
- function setTodayDate(inputDate: Date) {
1006
+ function updateTodayDate(inputDate: Date) {
998
1007
  setDay(inputDate.getDate());
999
1008
  setMonth(inputDate.getMonth());
1000
1009
  setYear(inputDate.getFullYear());
@@ -1004,11 +1013,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1004
1013
  setSelectedMonth(inputDate.getMonth());
1005
1014
  setSelectedYear(inputDate.getFullYear());
1006
1015
 
1007
- // initialize table grid
1016
+
1008
1017
  setTimeout(() => {
1018
+ // initialize table grid
1009
1019
  tableGridInit();
1010
- }, 500);
1011
1020
 
1021
+ // The scrollbar position is horizontal
1022
+ bodyScrollbarInit();
1023
+ }, 500);
1012
1024
 
1013
1025
  }
1014
1026
 
@@ -1151,7 +1163,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1151
1163
  function handleTodayChange() {
1152
1164
  setSelectedMonth(now.getMonth());
1153
1165
  setSelectedYear(now.getFullYear());
1154
- setTodayDate(now);
1166
+ updateTodayDate(now);
1155
1167
 
1156
1168
  //
1157
1169
  const _now = getTodayDate().split('-');
@@ -1259,7 +1271,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1259
1271
  {
1260
1272
  'empty': !isInteractive,
1261
1273
  'today': d === now.getDate(),
1262
- 'selected': d === day,
1274
+ 'selected': `${year}-${padZero(month + 1)}-${padZero(day)}` === `${year}-${padZero(month + 1)}-${padZero(d)}`,
1263
1275
  'last-cell': isLastCol
1264
1276
  }
1265
1277
  )}
@@ -1294,10 +1306,15 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1294
1306
  if (isInteractive) {
1295
1307
  handleDayChange(e, d); // update current day
1296
1308
 
1309
+ //
1310
+ const _now = _dateShow.split('-');
1297
1311
  onChangeDate?.(e, _currentData.length === 0 ? {
1298
1312
  rowData: listSectionData,
1299
1313
  id: 0,
1300
- date: _dateShow
1314
+ date: _dateShow,
1315
+ day: _now[2],
1316
+ month: _now[1],
1317
+ year: _now[0]
1301
1318
  } : _currentData[0]);
1302
1319
 
1303
1320
  if (EVENTS_ENABLED) {
@@ -1320,8 +1337,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1320
1337
  onCellMouseUp?.(e, selectedCells);
1321
1338
  }}
1322
1339
  >
1323
-
1324
-
1325
1340
  {/* forward fill & day & back fill */}
1326
1341
  <div
1327
1342
  className={combinedCls(
@@ -1332,6 +1347,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1332
1347
  )}
1333
1348
  style={{ width: (CELL_MIN_W - 1) + 'px' }}
1334
1349
  >
1350
+
1335
1351
  {d}
1336
1352
  {_weekDayStr}
1337
1353
  </div>
@@ -1435,8 +1451,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1435
1451
  if (isInteractive) {
1436
1452
  handleDayChange(e, d); // update current day
1437
1453
 
1438
-
1439
- onChangeDate?.(e, cellItem);
1454
+ //
1455
+ const _now = cellItem.date.split('-');
1456
+ onChangeDate?.(e, {
1457
+ ...cellItem,
1458
+ day: _now[2],
1459
+ month: _now[1],
1460
+ year: _now[0]
1461
+ });
1440
1462
 
1441
1463
  if (EVENTS_ENABLED) {
1442
1464
  onModalEditOpen?.(cellItem, () => setShowEdit(true), 'normal');
@@ -1494,10 +1516,15 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1494
1516
  if (isInteractive) {
1495
1517
  handleDayChange(e, d); // update current day
1496
1518
 
1519
+ //
1520
+ const _now = _dateShow.split('-');
1497
1521
  onChangeDate?.(e, {
1498
1522
  rowData: listSectionData,
1499
1523
  id: 0,
1500
- date: _dateShow
1524
+ date: _dateShow,
1525
+ day: _now[2],
1526
+ month: _now[1],
1527
+ year: _now[0]
1501
1528
  });
1502
1529
 
1503
1530
  if (EVENTS_DELETE_ENABLED) {
@@ -1628,10 +1655,15 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1628
1655
  if (isInteractive) {
1629
1656
  handleDayChange(e, d); // update current day
1630
1657
 
1658
+ //
1659
+ const _now = _dateShow.split('-');
1631
1660
  onChangeDate?.(e, {
1632
1661
  rowData: listSectionData,
1633
1662
  id: 0,
1634
- date: _dateShow
1663
+ date: _dateShow,
1664
+ day: _now[2],
1665
+ month: _now[1],
1666
+ year: _now[0]
1635
1667
  });
1636
1668
 
1637
1669
  if (EVENTS_ENABLED) {
@@ -1801,6 +1833,19 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1801
1833
  }
1802
1834
 
1803
1835
 
1836
+ function bodyScrollbarInit() {
1837
+ if (scrollBodyRef.current === null || tableGridRef.current === null) return;
1838
+
1839
+ // The scrollbar position is horizontal
1840
+ const targetPos = tableGridRef.current.querySelector('.custom-event-tl-table__datagrid-header__content tbody .today.selected');
1841
+ if (targetPos !== null) {
1842
+ (scrollBodyRef.current as any).scrollLeft = targetPos.offsetLeft;
1843
+ }
1844
+
1845
+
1846
+ }
1847
+
1848
+
1804
1849
  function tableGridInitHeadertitle() {
1805
1850
  //
1806
1851
  if (tableGridRef.current === null) return;
@@ -1822,31 +1867,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
1822
1867
 
1823
1868
  }
1824
1869
 
1825
-
1826
- function outerWrapperInit() {
1827
- if (rootRef.current === null) return;
1828
-
1829
- const hasInlineHeightOrMaxHeight = (element: HTMLElement) => {
1830
- if (!element) return false;
1831
- return element.style.height !== '' || element.style.maxHeight !== '';
1832
- };
1833
-
1834
- // calculate wrapper width & height
1835
- const wrapperWidth = rootRef.current.parentElement?.offsetWidth || 0;
1836
- if (rootRef.current && wrapperWidth > 0 && rootWidth.current === 0) {
1837
- rootWidth.current = wrapperWidth;
1838
- rootRef.current.style.width = wrapperWidth + 'px';
1839
-
1840
- // height
1841
- const wrapperHeight = rootRef.current.parentElement?.offsetHeight || 0;
1842
- if (hasInlineHeightOrMaxHeight(rootRef.current.parentElement) && wrapperHeight > 0) {
1843
- rootRef.current.style.height = wrapperHeight + 'px';
1844
- }
1845
-
1846
- }
1847
- }
1848
-
1849
-
1850
1870
  function tableGridInit() {
1851
1871
 
1852
1872
  //
@@ -2132,7 +2152,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
2132
2152
 
2133
2153
 
2134
2154
  useEffect(() => {
2135
- setTodayDate(date);
2155
+ updateTodayDate(date);
2136
2156
  }, [date]);
2137
2157
 
2138
2158
 
@@ -2165,7 +2185,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
2165
2185
  // update current today
2166
2186
  if (typeof customTodayDate !== 'undefined' && isValidDate(customTodayDate)) {
2167
2187
  const _customNow = new Date(customTodayDate);
2168
- setTodayDate(_customNow);
2188
+ updateTodayDate(_customNow);
2169
2189
  }
2170
2190
 
2171
2191
  // Call a function when the list has been rendered completely
@@ -2177,11 +2197,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
2177
2197
 
2178
2198
  useEffect(() => {
2179
2199
 
2180
-
2181
- // calculate wrapper width (!!!FIRST!!!)
2182
- //--------------
2183
- outerWrapperInit();
2184
-
2185
2200
  // !!!Please do not use dependencies
2186
2201
  //--------------
2187
2202
  return () => {
@@ -2198,364 +2213,357 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
2198
2213
  return (
2199
2214
  <>
2200
2215
 
2201
- <div
2202
- ref={rootRef}
2203
- className="custom-event-tl__outerwrapper"
2204
- >
2205
-
2206
- {/*/////////////////////////////////////////////////// */}
2207
- {/*//////////////////// Calendar //////////////////// */}
2208
- {/*////////////////////////////////////////////////// */}
2209
-
2210
- <div className={combinedCls(
2211
- `custom-event-tl__wrapper custom-event-tl__wrapper--${appearanceMode}`,
2212
- calendarWrapperClassName
2213
- )}>
2214
-
2215
- {/*++++++++++++++++ MAIN ++++++++++++++++*/}
2216
- <div className="custom-event-tl__header bg-body-tertiary">
2217
- <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--prev" onClick={handlePrevChange}>
2218
- <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
2219
- <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
2220
- </svg>
2221
- </button>
2216
+ {/*/////////////////////////////////////////////////// */}
2217
+ {/*//////////////////// Calendar //////////////////// */}
2218
+ {/*////////////////////////////////////////////////// */}
2222
2219
 
2223
- {/* //########## MODE: WEEK ############# */}
2224
- {appearanceMode === 'week' ? <>
2225
- <div className="custom-event-tl__header__info">
2226
- {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
2227
- </div>
2228
- </> : null}
2229
- {/* //########## /MODE: WEEK ############# */}
2230
-
2231
-
2232
- {/* //########## MODE: MONTH ############# */}
2233
- {appearanceMode === 'month' ? <>
2234
- <div className="custom-event-tl__header__btns">
2235
- <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
2236
- {MONTHS[month]}
2237
- <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
2238
- </button>
2239
- <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
2240
- {year}
2241
- <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
2242
- </button>
2243
- </div>
2244
- </> : null}
2245
- {/* //########## /MODE: MONTH ############# */}
2220
+ <div className={combinedCls(
2221
+ `custom-event-tl__wrapper custom-event-tl__wrapper--${appearanceMode}`,
2222
+ calendarWrapperClassName
2223
+ )}>
2224
+
2225
+ {/*++++++++++++++++ MAIN ++++++++++++++++*/}
2226
+ <div className="custom-event-tl__header bg-body-tertiary">
2227
+ <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--prev" onClick={handlePrevChange}>
2228
+ <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
2229
+ <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
2230
+ </svg>
2231
+ </button>
2232
+
2233
+ {/* //########## MODE: WEEK ############# */}
2234
+ {appearanceMode === 'week' ? <>
2235
+ <div className="custom-event-tl__header__info">
2236
+ {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
2237
+ </div>
2238
+ </> : null}
2239
+ {/* //########## /MODE: WEEK ############# */}
2246
2240
 
2247
2241
 
2242
+ {/* //########## MODE: MONTH ############# */}
2243
+ {appearanceMode === 'month' ? <>
2244
+ <div className="custom-event-tl__header__btns">
2245
+ <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
2246
+ {MONTHS[month]}
2247
+ <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
2248
+ </button>
2249
+ <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
2250
+ {year}
2251
+ <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
2252
+ </button>
2253
+ </div>
2254
+ </> : null}
2255
+ {/* //########## /MODE: MONTH ############# */}
2248
2256
 
2249
- <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--next" onClick={handleNextChange}>
2250
- <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
2251
- <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
2252
- </svg>
2253
- </button>
2254
- </div>
2255
2257
 
2256
2258
 
2259
+ <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--next" onClick={handleNextChange}>
2260
+ <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
2261
+ <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
2262
+ </svg>
2263
+ </button>
2264
+ </div>
2257
2265
 
2258
- <div className="custom-event-tl__body">
2259
2266
 
2260
2267
 
2261
- <div className="custom-event-tl__row">
2262
- {/* day */}
2268
+ <div className="custom-event-tl__body">
2263
2269
 
2264
- {/* /day */}
2265
- </div>
2266
2270
 
2271
+ <div className="custom-event-tl__row">
2272
+ {/* day */}
2273
+
2274
+ {/* /day */}
2267
2275
  </div>
2268
- {/*++++++++++++++++ /MAIN ++++++++++++++++*/}
2269
-
2270
-
2271
- {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
2272
- <div className={`custom-event-tl__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
2273
- <div className="custom-event-tl__month-container">
2274
- {MONTHS_FULL.map((month, index) => {
2275
- return <div
2276
- data-month={padZero(index + 1)}
2277
- className={`custom-event-tl__month ${selectedMonth === index ? ' selected' : ''}`}
2278
- key={month + index}
2279
- onClick={() => { handleMonthChange(index) }}
2280
- >{month}</div>
2281
- })}
2282
- </div>
2276
+
2277
+ </div>
2278
+ {/*++++++++++++++++ /MAIN ++++++++++++++++*/}
2279
+
2280
+
2281
+ {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
2282
+ <div className={`custom-event-tl__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
2283
+ <div className="custom-event-tl__month-container">
2284
+ {MONTHS_FULL.map((month, index) => {
2285
+ return <div
2286
+ data-month={padZero(index + 1)}
2287
+ className={`custom-event-tl__month ${selectedMonth === index ? ' selected' : ''}`}
2288
+ key={month + index}
2289
+ onClick={() => { handleMonthChange(index) }}
2290
+ >{month}</div>
2291
+ })}
2283
2292
  </div>
2284
- {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}
2285
-
2286
- {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
2287
- <div className={`custom-event-tl__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
2288
- <div className="custom-event-tl__year-container bg-body-tertiary">
2289
- {yearsArray.map((year, index) => {
2290
- return <div
2291
- data-year={year}
2292
- className={`custom-event-tl__year ${selectedYear === year ? ' selected' : ''}`}
2293
- key={year + index}
2294
- onClick={() => { handleYearChange(year) }}
2295
- >{year}</div>
2296
- })}
2297
- </div>
2293
+ </div>
2294
+ {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}
2298
2295
 
2296
+ {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
2297
+ <div className={`custom-event-tl__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
2298
+ <div className="custom-event-tl__year-container bg-body-tertiary">
2299
+ {yearsArray.map((year, index) => {
2300
+ return <div
2301
+ data-year={year}
2302
+ className={`custom-event-tl__year ${selectedYear === year ? ' selected' : ''}`}
2303
+ key={year + index}
2304
+ onClick={() => { handleYearChange(year) }}
2305
+ >{year}</div>
2306
+ })}
2299
2307
  </div>
2300
- {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}
2308
+
2309
+ </div>
2310
+ {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}
2301
2311
 
2302
2312
 
2303
2313
 
2304
- {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
2305
- <div className="custom-event-tl__today-wrapper p-2">
2314
+ {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
2315
+ <div className="custom-event-tl__today-wrapper p-2">
2316
+ <button
2317
+ tabIndex={-1}
2318
+ type="button"
2319
+ className="custom-event-tl__btn custom-event-tl__btn--today"
2320
+ onClick={handleTodayChange}
2321
+ >
2322
+ {langToday || 'Today'}
2323
+ </button>
2324
+
2325
+ {appearanceToggle ? <>
2306
2326
  <button
2307
2327
  tabIndex={-1}
2308
2328
  type="button"
2309
- className="custom-event-tl__btn custom-event-tl__btn--today"
2310
- onClick={handleTodayChange}
2329
+ className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'month' ? 'active' : ''}`}
2330
+ data-mode="month"
2331
+ onClick={handleAppearanceChange}
2311
2332
  >
2312
- {langToday || 'Today'}
2333
+ {langAppearanceLabelMonth || 'Month'}
2313
2334
  </button>
2335
+ <button
2336
+ tabIndex={-1}
2337
+ type="button"
2338
+ className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'week' ? 'active' : ''}`}
2339
+ data-mode="week"
2340
+ onClick={handleAppearanceChange}
2341
+ >
2342
+ {langAppearanceLabelWeek || 'Week'}
2343
+ </button>
2344
+ </> : null}
2314
2345
 
2315
- {appearanceToggle ? <>
2316
- <button
2317
- tabIndex={-1}
2318
- type="button"
2319
- className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'month' ? 'active' : ''}`}
2320
- data-mode="month"
2321
- onClick={handleAppearanceChange}
2322
- >
2323
- {langAppearanceLabelMonth || 'Month'}
2324
- </button>
2325
- <button
2326
- tabIndex={-1}
2327
- type="button"
2328
- className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'week' ? 'active' : ''}`}
2329
- data-mode="week"
2330
- onClick={handleAppearanceChange}
2331
- >
2332
- {langAppearanceLabelWeek || 'Week'}
2333
- </button>
2334
- </> : null}
2335
-
2336
- </div>
2337
- {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}
2346
+ </div>
2347
+ {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}
2338
2348
 
2339
2349
 
2340
- </div>{/* /.custom-event-tl__wrapper */}
2350
+ </div>{/* /.custom-event-tl__wrapper */}
2341
2351
 
2342
2352
 
2343
2353
 
2344
- {/*/////////////////////////////////////////////////// */}
2345
- {/*//////////////////// Table Grid //////////////////// */}
2346
- {/*////////////////////////////////////////////////// */}
2347
- {orginalData.length === 0 ? null : <>
2348
- <div
2349
- ref={tableGridRef}
2350
- className={combinedCls(
2351
- `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode} invisible`,
2352
- tableWrapperClassName
2354
+ {/*/////////////////////////////////////////////////// */}
2355
+ {/*//////////////////// Table Grid //////////////////// */}
2356
+ {/*////////////////////////////////////////////////// */}
2357
+ {orginalData.length === 0 ? null : <>
2358
+ <div
2359
+ ref={tableGridRef}
2360
+ className={combinedCls(
2361
+ `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode} invisible`,
2362
+ tableWrapperClassName
2363
+ )}
2364
+ onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
2365
+ onKeyPressed?.(e, selectedCells);
2366
+
2367
+ // Copy & Paste
2368
+ handleWrapperKeyDown(e);
2369
+ }}
2370
+ tabIndex={-1} // require "tabIndex" attribute
2371
+ >
2372
+ <table role="grid" className={combinedCls(
2373
+ "custom-event-tl-table__timeline-table",
2374
+ tableClassName
2375
+ )}>
2376
+ <colgroup>
2377
+ <col className="custom-event-tl-table__datagrid-header" />
2378
+ <col />
2379
+ <col />
2380
+ </colgroup>
2381
+
2382
+ <thead className={combinedCls(
2383
+ tableHeadClassName
2353
2384
  )}
2354
- onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
2355
- onKeyPressed?.(e, selectedCells);
2385
+ ref={tableGridHeaderRef}
2386
+ role="rowgroup"
2387
+ >
2388
+ <tr role="presentation">
2389
+ <th role="presentation">
2390
+ {/*<!--///// HEADER LEFT //////-->*/}
2391
+ <div className="custom-event-tl-table__timeline-header custom-event-tl-table__timeline-headertitle">
2392
+
2393
+ <table role="presentation" className="custom-event-tl-table__datagrid-header__title">
2394
+ <colgroup>
2395
+ <col />
2396
+ </colgroup>
2397
+ <thead role="presentation">
2398
+ <tr role="row">
2399
+ <th role="columnheader">
2400
+ <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
2401
+ {tableListSectionTitle || ''}
2402
+ </div>
2403
+ </th>
2404
+ </tr>
2405
+ </thead>
2406
+ </table>
2356
2407
 
2357
- // Copy & Paste
2358
- handleWrapperKeyDown(e);
2359
- }}
2360
- tabIndex={-1} // require "tabIndex" attribute
2361
- >
2362
- <table role="grid" className={combinedCls(
2363
- "custom-event-tl-table__timeline-table",
2364
- tableClassName
2365
- )}>
2366
- <colgroup>
2367
- <col className="custom-event-tl-table__datagrid-header" />
2368
- <col />
2369
- <col />
2370
- </colgroup>
2371
-
2372
- <thead className={combinedCls(
2373
- tableHeadClassName
2374
- )}
2375
- ref={tableGridHeaderRef}
2376
- role="rowgroup"
2377
- >
2378
- <tr role="presentation">
2379
- <th role="presentation">
2380
- {/*<!--///// HEADER LEFT //////-->*/}
2381
- <div className="custom-event-tl-table__timeline-header custom-event-tl-table__timeline-headertitle">
2408
+ </div>
2409
+ {/*<!--///// /HEADER LEFT //////-->*/}
2382
2410
 
2383
- <table role="presentation" className="custom-event-tl-table__datagrid-header__title">
2384
- <colgroup>
2385
- <col />
2386
- </colgroup>
2387
- <thead role="presentation">
2388
- <tr role="row">
2389
- <th role="columnheader">
2390
- <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
2391
- {tableListSectionTitle || ''}
2392
- </div>
2393
- </th>
2394
- </tr>
2395
- </thead>
2396
- </table>
2397
2411
 
2398
- </div>
2399
- {/*<!--///// /HEADER LEFT //////-->*/}
2400
2412
 
2413
+ </th>
2414
+ <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
2415
+ <th role="presentation">
2416
+ <div
2417
+ ref={scrollHeaderRef}
2418
+ className="custom-event-tl-table__scroller-harness custom-event-tl-table__scroller-harness--hide"
2419
+ data-scroll="header"
2420
+ onScroll={syncTableScrollHeader}
2421
+ >
2422
+ <div className="custom-event-tl-table__scroller">
2401
2423
 
2424
+ {/*<!--///// HEADER RIGHT //////-->*/}
2425
+ <div className="custom-event-tl-table__timeline-header">
2402
2426
 
2403
- </th>
2404
- <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
2405
- <th role="presentation">
2406
- <div
2407
- ref={scrollHeaderRef}
2408
- className="custom-event-tl-table__scroller-harness custom-event-tl-table__scroller-harness--hide"
2409
- data-scroll="header"
2410
- onScroll={syncTableScrollHeader}
2411
- >
2412
- <div className="custom-event-tl-table__scroller">
2413
-
2414
- {/*<!--///// HEADER RIGHT //////-->*/}
2415
- <div className="custom-event-tl-table__timeline-header">
2416
-
2417
- <table className="custom-event-tl-table__datagrid-header__content custom-event-tl-table__scrollgrid-sync-table" >
2418
- <tbody>
2419
- <tr>
2420
- {generateDaysUi()}
2421
- </tr>
2422
- </tbody>
2423
- </table>
2424
- </div>
2425
- {/*<!--///// /HEADER RIGHT //////-->*/}
2427
+ <table className="custom-event-tl-table__datagrid-header__content custom-event-tl-table__scrollgrid-sync-table" >
2428
+ <tbody>
2429
+ <tr>
2430
+ {generateDaysUi()}
2431
+ </tr>
2432
+ </tbody>
2433
+ </table>
2426
2434
  </div>
2435
+ {/*<!--///// /HEADER RIGHT //////-->*/}
2427
2436
  </div>
2428
- </th>
2429
- </tr>
2430
- </thead>
2437
+ </div>
2438
+ </th>
2439
+ </tr>
2440
+ </thead>
2431
2441
 
2432
2442
 
2433
2443
 
2434
- <tbody className={combinedCls(
2435
- tableBodyClassName
2436
- )}
2437
- role="rowgroup"
2438
- >
2439
- <tr role="presentation" className="custom-event-tl-table__list-section">
2440
- <td
2441
- role="presentation"
2444
+ <tbody className={combinedCls(
2445
+ tableBodyClassName
2446
+ )}
2447
+ role="rowgroup"
2448
+ >
2449
+ <tr role="presentation" className="custom-event-tl-table__list-section">
2450
+ <td
2451
+ role="presentation"
2452
+ className={combinedCls(
2453
+ tableListStartClassName
2454
+ )}
2455
+
2456
+ >
2457
+
2458
+ <div
2459
+ ref={scrollListRef}
2442
2460
  className={combinedCls(
2443
- tableListStartClassName
2461
+ 'custom-event-tl-table__scroller-harness',
2462
+ {
2463
+ 'autoscroll': AUTO_SCROLL
2464
+ }
2444
2465
  )}
2445
-
2466
+ data-scroll="list"
2467
+ onScroll={syncTableScrollList}
2446
2468
  >
2469
+ <div className="custom-event-tl-table__scroller">
2447
2470
 
2448
- <div
2449
- ref={scrollListRef}
2450
- className={combinedCls(
2451
- 'custom-event-tl-table__scroller-harness',
2452
- {
2453
- 'autoscroll': AUTO_SCROLL
2454
- }
2455
- )}
2456
- data-scroll="list"
2457
- onScroll={syncTableScrollList}
2458
- >
2459
- <div className="custom-event-tl-table__scroller">
2460
-
2461
- {/*<!--///// RESOURCE LEFT //////-->*/}
2462
- <table role="presentation" className="custom-event-tl-table__datagrid-body__title custom-event-tl-table__scrollgrid-sync-table">
2463
- <colgroup>
2464
- <col />
2465
- </colgroup>
2466
- <tbody role="presentation">
2471
+ {/*<!--///// RESOURCE LEFT //////-->*/}
2472
+ <table role="presentation" className="custom-event-tl-table__datagrid-body__title custom-event-tl-table__scrollgrid-sync-table">
2473
+ <colgroup>
2474
+ <col />
2475
+ </colgroup>
2476
+ <tbody role="presentation">
2467
2477
 
2468
- {/*<!-- per row -->*/}
2469
- {generateListSectionUi()}
2470
- {/*<!-- /per row -->*/}
2478
+ {/*<!-- per row -->*/}
2479
+ {generateListSectionUi()}
2480
+ {/*<!-- /per row -->*/}
2471
2481
 
2472
- </tbody>
2473
- </table>
2474
- {/*<!--///// /RESOURCE LEFT //////-->*/}
2475
- </div>
2482
+ </tbody>
2483
+ </table>
2484
+ {/*<!--///// /RESOURCE LEFT //////-->*/}
2476
2485
  </div>
2486
+ </div>
2477
2487
 
2478
2488
 
2479
- </td>
2480
- <td
2481
- role="presentation"
2482
- className={combinedCls(
2483
- 'custom-event-tl-table__timeline-divider',
2484
- tableListDividerClassName
2485
- )}
2486
- >
2487
- <div></div>
2488
- </td>
2489
- <td
2490
- role="presentation"
2489
+ </td>
2490
+ <td
2491
+ role="presentation"
2492
+ className={combinedCls(
2493
+ 'custom-event-tl-table__timeline-divider',
2494
+ tableListDividerClassName
2495
+ )}
2496
+ >
2497
+ <div></div>
2498
+ </td>
2499
+ <td
2500
+ role="presentation"
2501
+ className={combinedCls(
2502
+ tableListEndClassName
2503
+ )}
2504
+ >
2505
+
2506
+
2507
+ <div
2508
+ ref={scrollBodyRef}
2491
2509
  className={combinedCls(
2492
- tableListEndClassName
2510
+ 'custom-event-tl-table__scroller-harness',
2511
+ {
2512
+ 'autoscroll': AUTO_SCROLL
2513
+ }
2493
2514
  )}
2515
+ data-scroll="body"
2516
+ onScroll={syncTableScrollBody}
2517
+ onMouseMove={BODY_DRAG ? handleTableMove : () => { }}
2518
+ onMouseDown={BODY_DRAG ? handleTableDragStart : () => { }}
2519
+ onMouseUp={BODY_DRAG ? handleTableDragEnd : () => { }}
2520
+ onMouseLeave={BODY_DRAG ? handleTableDragEnd : () => { }}
2494
2521
  >
2522
+ <div className="custom-event-tl-table__scroller">
2523
+ {/*<!--///// RESOURCE RIGHT //////-->*/}
2524
+ <div className="custom-event-tl-table__timeline-body">
2525
+ <table
2526
+ className="custom-event-tl-table__datagrid-body__content custom-event-tl-table__scrollgrid-sync-table"
2527
+ /* Drag to activate the selection area */
2528
+ onMouseLeave={multipleCells ? handleTableMainMouseUp : undefined}
2529
+ onMouseUp={multipleCells ? handleTableMainMouseUp : undefined}
2530
+
2531
+ >
2532
+ <colgroup>
2533
+ {generateColUi()}
2534
+ </colgroup>
2535
+ <tbody>
2536
+ {/*<!-- per row -->*/}
2537
+ {orginalData.map((item: any, i: number) => {
2495
2538
 
2539
+ return (
2540
+ <tr key={i}>
2541
+ {generateDaysUi(item.eventSources, item.listSection, i, true)}
2542
+ </tr>
2543
+ )
2496
2544
 
2497
- <div
2498
- ref={scrollBodyRef}
2499
- className={combinedCls(
2500
- 'custom-event-tl-table__scroller-harness',
2501
- {
2502
- 'autoscroll': AUTO_SCROLL
2503
- }
2504
- )}
2505
- data-scroll="body"
2506
- onScroll={syncTableScrollBody}
2507
- onMouseMove={BODY_DRAG ? handleTableMove : () => { }}
2508
- onMouseDown={BODY_DRAG ? handleTableDragStart : () => { }}
2509
- onMouseUp={BODY_DRAG ? handleTableDragEnd : () => { }}
2510
- onMouseLeave={BODY_DRAG ? handleTableDragEnd : () => { }}
2511
- >
2512
- <div className="custom-event-tl-table__scroller">
2513
- {/*<!--///// RESOURCE RIGHT //////-->*/}
2514
- <div className="custom-event-tl-table__timeline-body">
2515
- <table
2516
- className="custom-event-tl-table__datagrid-body__content custom-event-tl-table__scrollgrid-sync-table"
2517
- /* Drag to activate the selection area */
2518
- onMouseLeave={multipleCells ? handleTableMainMouseUp : undefined}
2519
- onMouseUp={multipleCells ? handleTableMainMouseUp : undefined}
2520
-
2521
- >
2522
- <colgroup>
2523
- {generateColUi()}
2524
- </colgroup>
2525
- <tbody>
2526
- {/*<!-- per row -->*/}
2527
- {orginalData.map((item: any, i: number) => {
2528
-
2529
- return (
2530
- <tr key={i}>
2531
- {generateDaysUi(item.eventSources, item.listSection, i, true)}
2532
- </tr>
2533
- )
2534
-
2535
- })}
2536
-
2537
- </tbody>
2538
- </table>
2539
-
2540
- </div>
2541
- {/*<!--///// /RESOURCE RIGHT //////-->*/}
2545
+ })}
2542
2546
 
2547
+ </tbody>
2548
+ </table>
2543
2549
 
2544
2550
  </div>
2545
- </div>
2551
+ {/*<!--///// /RESOURCE RIGHT //////-->*/}
2552
+
2546
2553
 
2554
+ </div>
2555
+ </div>
2547
2556
 
2548
- </td>
2549
- </tr>
2550
- </tbody>
2551
- </table>
2552
2557
 
2553
- </div>{/* /.custom-event-tl-table__timeline-table__wrapper */}
2558
+ </td>
2559
+ </tr>
2560
+ </tbody>
2561
+ </table>
2554
2562
 
2563
+ </div>{/* /.custom-event-tl-table__timeline-table__wrapper */}
2555
2564
 
2556
- </>}
2557
- </div>
2558
2565
 
2566
+ </>}
2559
2567
 
2560
2568
 
2561
2569
  {/*/////////////////////////////////////////////////// */}