@deviceinsight/ng-ui-components 6.23.0 → 6.24.0

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 (16) hide show
  1. package/lib/cjs/components/input/DateTimeInput.d.ts.map +1 -1
  2. package/lib/cjs/components/input/DateTimeInput.js +35 -5
  3. package/lib/cjs/components/input/__tests__/DateTimeInput.spec.js +21 -0
  4. package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
  5. package/lib/cjs/components/reactable/helpers/ReactableTable.js +22 -10
  6. package/lib/esm/components/input/DateTimeInput.d.ts.map +1 -1
  7. package/lib/esm/components/input/DateTimeInput.js +35 -5
  8. package/lib/esm/components/input/__tests__/DateTimeInput.spec.js +22 -1
  9. package/lib/esm/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
  10. package/lib/esm/components/reactable/helpers/ReactableTable.js +22 -10
  11. package/lib/esm/src/components/input/DateTimeInput.d.ts.map +1 -1
  12. package/lib/esm/src/components/input/DateTimeInput.js +35 -5
  13. package/lib/esm/src/components/input/__tests__/DateTimeInput.spec.js +22 -1
  14. package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
  15. package/lib/esm/src/components/reactable/helpers/ReactableTable.js +22 -10
  16. package/package.json +1 -1
package/lib/cjs/components/input/DateTimeInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
1
+ {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}
package/lib/cjs/components/input/DateTimeInput.js CHANGED
@@ -26,10 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
+ const dayjs_1 = __importDefault(require("dayjs"));
29
30
  const react_1 = __importStar(require("react"));
30
31
  const periods_1 = require("../periodpicker/periods");
31
32
  const DateInput_1 = __importDefault(require("./DateInput"));
32
33
  const ValidatedTextInput_1 = __importDefault(require("./ValidatedTextInput"));
34
+ const lodash_1 = require("lodash");
33
35
  const extractTime = (timezone, date) => {
34
36
  try {
35
37
  return (0, periods_1.dayjsTz)(timezone, date).format('HH:mm');
@@ -39,6 +41,15 @@ const extractTime = (timezone, date) => {
39
41
  return '00:00';
40
42
  }
41
43
  };
44
+ const extractDate = (timezone, date) => {
45
+ try {
46
+ return (0, dayjs_1.default)((0, periods_1.dayjsTz)(timezone, date).format('YYYY-MM-DD'));
47
+ }
48
+ catch (error) {
49
+ console.error('DateTimeInput: Error while extracting time from date', error);
50
+ return (0, dayjs_1.default)(new Date());
51
+ }
52
+ };
42
53
  /**
43
54
  * Extends DateInput but also displaying the current time.
44
55
  * Usually the user's locale is used for displaying the correct date format.
@@ -51,17 +62,36 @@ function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChang
51
62
  }, [timezone, timestamp]);
52
63
  function handleChangeDate(date, fromTextField) {
53
64
  const oldDate = (0, periods_1.dayjsTz)(timezone, timestamp);
54
- onChange((0, periods_1.dayjsTz)(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
65
+ const dateFix = (0, dayjs_1.default)(date);
66
+ let newDate = (0, periods_1.dayjsTz)(timezone, date)
67
+ .set('day', dateFix.day())
68
+ .set('month', dateFix.month())
69
+ .set('year', dateFix.year())
70
+ .set('hour', (0, lodash_1.toInteger)(oldDate.hour()))
71
+ .set('minute', (0, lodash_1.toInteger)(oldDate.minute()));
72
+ const dstOffset = getLocalDstOffset(newDate);
73
+ newDate = newDate.subtract(dstOffset, 'minutes');
74
+ onChange(newDate.valueOf(), fromTextField);
75
+ }
76
+ function getMaxUtcOffset(year) {
77
+ const jan = new Date(`${year}-01-01`).getTimezoneOffset();
78
+ const jul = new Date(`${year}-07-01`).getTimezoneOffset();
79
+ return Math.min(jan, jul);
80
+ }
81
+ function getLocalDstOffset(newDate) {
82
+ return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
55
83
  }
56
84
  function handleChangeTime(time, valid) {
57
85
  if (valid) {
58
86
  const [hours, minutes] = time.split(':');
59
- onChange((0, periods_1.dayjsTz)(timezone, timestamp)
87
+ const date = extractDate(timezone, timestamp);
88
+ const dateTime = (0, periods_1.dayjsTz)(timezone, timestamp)
89
+ .set('date', date.date())
60
90
  .set('hour', parseInt(hours, 10))
61
91
  .set('minute', parseInt(minutes, 10))
62
92
  .set('second', 0)
63
- .set('millisecond', 0)
64
- .valueOf());
93
+ .set('millisecond', 0);
94
+ onChange(dateTime.valueOf());
65
95
  }
66
96
  setTime(time);
67
97
  }
@@ -71,7 +101,7 @@ function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChang
71
101
  }
72
102
  }
73
103
  return (react_1.default.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
74
- react_1.default.createElement(DateInput_1.default, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
104
+ react_1.default.createElement(DateInput_1.default, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
75
105
  react_1.default.createElement(ValidatedTextInput_1.default, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
76
106
  borderColor: 'red'
77
107
  }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));
package/lib/cjs/components/input/__tests__/DateTimeInput.spec.js CHANGED
@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
7
7
  const vitest_1 = require("vitest");
8
8
  const DateTimeInput_1 = __importDefault(require("../DateTimeInput"));
9
9
  const react_2 = require("@testing-library/react");
10
+ const testing_library_1 = require("@storybook/testing-library");
10
11
  (0, vitest_1.describe)('DateTimeInput.js', () => {
11
12
  (0, vitest_1.it)('should update time when timestamp has changed', () => {
12
13
  const { rerender } = (0, react_2.render)(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -15,4 +16,24 @@ const react_2 = require("@testing-library/react");
15
16
  rerender(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
16
17
  (0, vitest_1.expect)(timeElement).toHaveDisplayValue('03:24');
17
18
  });
19
+ (0, vitest_1.it)('should display the time and date as timezone date', async () => {
20
+ const { rerender } = (0, react_2.render)(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
21
+ const timeElementUtm = react_2.screen.queryByDisplayValue('11:11');
22
+ (0, vitest_1.expect)(timeElementUtm).not.toBeInTheDocument();
23
+ const timeElement = react_2.screen.queryByDisplayValue('03:11');
24
+ (0, vitest_1.expect)(timeElement).toBeInTheDocument();
25
+ const dateElement = react_2.screen.queryByDisplayValue('01.02.2019');
26
+ (0, vitest_1.expect)(dateElement).toBeInTheDocument();
27
+ rerender(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
28
+ (0, vitest_1.expect)(timeElement).toHaveDisplayValue('19:24');
29
+ (0, vitest_1.expect)(dateElement).toHaveDisplayValue('01.02.2019');
30
+ await (0, react_2.act)(async () => {
31
+ dateElement?.click();
32
+ timeElement?.click();
33
+ testing_library_1.userEvent.clear(timeElement);
34
+ testing_library_1.userEvent.type(timeElement, '10:24');
35
+ });
36
+ (0, vitest_1.expect)(timeElement).toHaveDisplayValue('10:24');
37
+ (0, vitest_1.expect)(dateElement).toHaveDisplayValue('01.02.2019');
38
+ });
18
39
  });
package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAwHd"}
1
+ {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}
package/lib/cjs/components/reactable/helpers/ReactableTable.js CHANGED
@@ -38,7 +38,8 @@ function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort,
38
38
  const containerRef = (0, react_1.useRef)(null);
39
39
  const tableRef = (0, react_1.useRef)(null);
40
40
  const [showScrollingAdvice, setShowScrollingAdvice] = (0, react_1.useState)(false);
41
- const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = (0, react_1.useState)(false);
41
+ const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = (0, react_1.useState)(true);
42
+ const [hasInitialized, setHasInitialized] = (0, react_1.useState)(false);
42
43
  const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
43
44
  const neverShowScrollingAdviceRef = (0, react_1.useRef)(neverShowScrollingAdvice);
44
45
  (0, react_1.useEffect)(() => {
@@ -50,14 +51,25 @@ function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort,
50
51
  }
51
52
  };
52
53
  (0, react_1.useEffect)(() => {
53
- (0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
54
- const neverShow = value === undefined ? false : value;
55
- setNeverShowScrollingAdvice(neverShow);
56
- neverShowScrollingAdviceRef.current = neverShow;
57
- if (containerRef.current && tableRef.current) {
58
- updateScrollingAdvice();
59
- }
60
- });
54
+ setTimeout(() => {
55
+ (async () => {
56
+ try {
57
+ const value = await (0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH);
58
+ const neverShow = value === true;
59
+ setNeverShowScrollingAdvice(neverShow);
60
+ neverShowScrollingAdviceRef.current = neverShow;
61
+ if (!neverShow) {
62
+ updateScrollingAdvice();
63
+ }
64
+ }
65
+ catch (error) {
66
+ setNeverShowScrollingAdvice(false);
67
+ neverShowScrollingAdviceRef.current = false;
68
+ updateScrollingAdvice();
69
+ }
70
+ setHasInitialized(true);
71
+ })();
72
+ }, 0);
61
73
  }, []);
62
74
  (0, react_1.useEffect)(() => {
63
75
  updateScrollingAdvice();
@@ -67,7 +79,7 @@ function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort,
67
79
  const showFilterRow = columnDefs.some((col) => col.filterable);
68
80
  return (react_1.default.createElement(ng_ui_basic_components_1.SpinnerContainer, { show: isLoading },
69
81
  react_1.default.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
70
- showScrollingAdvice && !isLoading && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", content: react_1.default.createElement("div", null,
82
+ hasInitialized && showScrollingAdvice && !isLoading && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", content: react_1.default.createElement("div", null,
71
83
  react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
72
84
  react_1.default.createElement("div", { className: "scroll-horizontally-advice-buttons" },
73
85
  react_1.default.createElement(ng_ui_basic_components_1.Button, { primary: true, onClick: async () => {
package/lib/esm/components/input/DateTimeInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
1
+ {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}
package/lib/esm/components/input/DateTimeInput.js CHANGED
@@ -1,7 +1,9 @@
1
+ import dayjs from 'dayjs';
1
2
  import React, { useEffect, useState } from 'react';
2
3
  import { dayjsTz } from '../periodpicker/periods';
3
4
  import DateInput from './DateInput';
4
5
  import ValidatedTextInput from './ValidatedTextInput';
6
+ import { toInteger } from 'lodash';
5
7
  const extractTime = (timezone, date) => {
6
8
  try {
7
9
  return dayjsTz(timezone, date).format('HH:mm');
@@ -11,6 +13,15 @@ const extractTime = (timezone, date) => {
11
13
  return '00:00';
12
14
  }
13
15
  };
16
+ const extractDate = (timezone, date) => {
17
+ try {
18
+ return dayjs(dayjsTz(timezone, date).format('YYYY-MM-DD'));
19
+ }
20
+ catch (error) {
21
+ console.error('DateTimeInput: Error while extracting time from date', error);
22
+ return dayjs(new Date());
23
+ }
24
+ };
14
25
  /**
15
26
  * Extends DateInput but also displaying the current time.
16
27
  * Usually the user's locale is used for displaying the correct date format.
@@ -23,17 +34,36 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
23
34
  }, [timezone, timestamp]);
24
35
  function handleChangeDate(date, fromTextField) {
25
36
  const oldDate = dayjsTz(timezone, timestamp);
26
- onChange(dayjsTz(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
37
+ const dateFix = dayjs(date);
38
+ let newDate = dayjsTz(timezone, date)
39
+ .set('day', dateFix.day())
40
+ .set('month', dateFix.month())
41
+ .set('year', dateFix.year())
42
+ .set('hour', toInteger(oldDate.hour()))
43
+ .set('minute', toInteger(oldDate.minute()));
44
+ const dstOffset = getLocalDstOffset(newDate);
45
+ newDate = newDate.subtract(dstOffset, 'minutes');
46
+ onChange(newDate.valueOf(), fromTextField);
47
+ }
48
+ function getMaxUtcOffset(year) {
49
+ const jan = new Date(`${year}-01-01`).getTimezoneOffset();
50
+ const jul = new Date(`${year}-07-01`).getTimezoneOffset();
51
+ return Math.min(jan, jul);
52
+ }
53
+ function getLocalDstOffset(newDate) {
54
+ return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
27
55
  }
28
56
  function handleChangeTime(time, valid) {
29
57
  if (valid) {
30
58
  const [hours, minutes] = time.split(':');
31
- onChange(dayjsTz(timezone, timestamp)
59
+ const date = extractDate(timezone, timestamp);
60
+ const dateTime = dayjsTz(timezone, timestamp)
61
+ .set('date', date.date())
32
62
  .set('hour', parseInt(hours, 10))
33
63
  .set('minute', parseInt(minutes, 10))
34
64
  .set('second', 0)
35
- .set('millisecond', 0)
36
- .valueOf());
65
+ .set('millisecond', 0);
66
+ onChange(dateTime.valueOf());
37
67
  }
38
68
  setTime(time);
39
69
  }
@@ -43,7 +73,7 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
43
73
  }
44
74
  }
45
75
  return (React.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
46
- React.createElement(DateInput, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
76
+ React.createElement(DateInput, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
47
77
  React.createElement(ValidatedTextInput, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
48
78
  borderColor: 'red'
49
79
  }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));
package/lib/esm/components/input/__tests__/DateTimeInput.spec.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { describe, expect, it } from 'vitest';
3
3
  import DateTimeInput from '../DateTimeInput';
4
- import { render, screen } from '@testing-library/react';
4
+ import { act, render, screen } from '@testing-library/react';
5
+ import { userEvent } from '@storybook/testing-library';
5
6
  describe('DateTimeInput.js', () => {
6
7
  it('should update time when timestamp has changed', () => {
7
8
  const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -10,4 +11,24 @@ describe('DateTimeInput.js', () => {
10
11
  rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
11
12
  expect(timeElement).toHaveDisplayValue('03:24');
12
13
  });
14
+ it('should display the time and date as timezone date', async () => {
15
+ const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
16
+ const timeElementUtm = screen.queryByDisplayValue('11:11');
17
+ expect(timeElementUtm).not.toBeInTheDocument();
18
+ const timeElement = screen.queryByDisplayValue('03:11');
19
+ expect(timeElement).toBeInTheDocument();
20
+ const dateElement = screen.queryByDisplayValue('01.02.2019');
21
+ expect(dateElement).toBeInTheDocument();
22
+ rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
23
+ expect(timeElement).toHaveDisplayValue('19:24');
24
+ expect(dateElement).toHaveDisplayValue('01.02.2019');
25
+ await act(async () => {
26
+ dateElement?.click();
27
+ timeElement?.click();
28
+ userEvent.clear(timeElement);
29
+ userEvent.type(timeElement, '10:24');
30
+ });
31
+ expect(timeElement).toHaveDisplayValue('10:24');
32
+ expect(dateElement).toHaveDisplayValue('01.02.2019');
33
+ });
13
34
  });
package/lib/esm/components/reactable/helpers/ReactableTable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAwHd"}
1
+ {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}
package/lib/esm/components/reactable/helpers/ReactableTable.js CHANGED
@@ -10,7 +10,8 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
10
10
  const containerRef = useRef(null);
11
11
  const tableRef = useRef(null);
12
12
  const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
13
- const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
13
+ const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(true);
14
+ const [hasInitialized, setHasInitialized] = useState(false);
14
15
  const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
15
16
  const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
16
17
  useEffect(() => {
@@ -22,14 +23,25 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
22
23
  }
23
24
  };
24
25
  useEffect(() => {
25
- readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
26
- const neverShow = value === undefined ? false : value;
27
- setNeverShowScrollingAdvice(neverShow);
28
- neverShowScrollingAdviceRef.current = neverShow;
29
- if (containerRef.current && tableRef.current) {
30
- updateScrollingAdvice();
31
- }
32
- });
26
+ setTimeout(() => {
27
+ (async () => {
28
+ try {
29
+ const value = await readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
30
+ const neverShow = value === true;
31
+ setNeverShowScrollingAdvice(neverShow);
32
+ neverShowScrollingAdviceRef.current = neverShow;
33
+ if (!neverShow) {
34
+ updateScrollingAdvice();
35
+ }
36
+ }
37
+ catch (error) {
38
+ setNeverShowScrollingAdvice(false);
39
+ neverShowScrollingAdviceRef.current = false;
40
+ updateScrollingAdvice();
41
+ }
42
+ setHasInitialized(true);
43
+ })();
44
+ }, 0);
33
45
  }, []);
34
46
  useEffect(() => {
35
47
  updateScrollingAdvice();
@@ -39,7 +51,7 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
39
51
  const showFilterRow = columnDefs.some((col) => col.filterable);
40
52
  return (React.createElement(SpinnerContainer, { show: isLoading },
41
53
  React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
42
- showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
54
+ hasInitialized && showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
43
55
  React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
44
56
  React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
45
57
  React.createElement(Button, { primary: true, onClick: async () => {
package/lib/esm/src/components/input/DateTimeInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
1
+ {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}
package/lib/esm/src/components/input/DateTimeInput.js CHANGED
@@ -1,7 +1,9 @@
1
+ import dayjs from 'dayjs';
1
2
  import React, { useEffect, useState } from 'react';
2
3
  import { dayjsTz } from '../periodpicker/periods';
3
4
  import DateInput from './DateInput';
4
5
  import ValidatedTextInput from './ValidatedTextInput';
6
+ import { toInteger } from 'lodash';
5
7
  const extractTime = (timezone, date) => {
6
8
  try {
7
9
  return dayjsTz(timezone, date).format('HH:mm');
@@ -11,6 +13,15 @@ const extractTime = (timezone, date) => {
11
13
  return '00:00';
12
14
  }
13
15
  };
16
+ const extractDate = (timezone, date) => {
17
+ try {
18
+ return dayjs(dayjsTz(timezone, date).format('YYYY-MM-DD'));
19
+ }
20
+ catch (error) {
21
+ console.error('DateTimeInput: Error while extracting time from date', error);
22
+ return dayjs(new Date());
23
+ }
24
+ };
14
25
  /**
15
26
  * Extends DateInput but also displaying the current time.
16
27
  * Usually the user's locale is used for displaying the correct date format.
@@ -23,17 +34,36 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
23
34
  }, [timezone, timestamp]);
24
35
  function handleChangeDate(date, fromTextField) {
25
36
  const oldDate = dayjsTz(timezone, timestamp);
26
- onChange(dayjsTz(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
37
+ const dateFix = dayjs(date);
38
+ let newDate = dayjsTz(timezone, date)
39
+ .set('day', dateFix.day())
40
+ .set('month', dateFix.month())
41
+ .set('year', dateFix.year())
42
+ .set('hour', toInteger(oldDate.hour()))
43
+ .set('minute', toInteger(oldDate.minute()));
44
+ const dstOffset = getLocalDstOffset(newDate);
45
+ newDate = newDate.subtract(dstOffset, 'minutes');
46
+ onChange(newDate.valueOf(), fromTextField);
47
+ }
48
+ function getMaxUtcOffset(year) {
49
+ const jan = new Date(`${year}-01-01`).getTimezoneOffset();
50
+ const jul = new Date(`${year}-07-01`).getTimezoneOffset();
51
+ return Math.min(jan, jul);
52
+ }
53
+ function getLocalDstOffset(newDate) {
54
+ return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
27
55
  }
28
56
  function handleChangeTime(time, valid) {
29
57
  if (valid) {
30
58
  const [hours, minutes] = time.split(':');
31
- onChange(dayjsTz(timezone, timestamp)
59
+ const date = extractDate(timezone, timestamp);
60
+ const dateTime = dayjsTz(timezone, timestamp)
61
+ .set('date', date.date())
32
62
  .set('hour', parseInt(hours, 10))
33
63
  .set('minute', parseInt(minutes, 10))
34
64
  .set('second', 0)
35
- .set('millisecond', 0)
36
- .valueOf());
65
+ .set('millisecond', 0);
66
+ onChange(dateTime.valueOf());
37
67
  }
38
68
  setTime(time);
39
69
  }
@@ -43,7 +73,7 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
43
73
  }
44
74
  }
45
75
  return (React.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
46
- React.createElement(DateInput, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
76
+ React.createElement(DateInput, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
47
77
  React.createElement(ValidatedTextInput, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
48
78
  borderColor: 'red'
49
79
  }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));
package/lib/esm/src/components/input/__tests__/DateTimeInput.spec.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { describe, expect, it } from 'vitest';
3
3
  import DateTimeInput from '../DateTimeInput';
4
- import { render, screen } from '@testing-library/react';
4
+ import { act, render, screen } from '@testing-library/react';
5
+ import { userEvent } from '@storybook/testing-library';
5
6
  describe('DateTimeInput.js', () => {
6
7
  it('should update time when timestamp has changed', () => {
7
8
  const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -10,4 +11,24 @@ describe('DateTimeInput.js', () => {
10
11
  rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
11
12
  expect(timeElement).toHaveDisplayValue('03:24');
12
13
  });
14
+ it('should display the time and date as timezone date', async () => {
15
+ const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
16
+ const timeElementUtm = screen.queryByDisplayValue('11:11');
17
+ expect(timeElementUtm).not.toBeInTheDocument();
18
+ const timeElement = screen.queryByDisplayValue('03:11');
19
+ expect(timeElement).toBeInTheDocument();
20
+ const dateElement = screen.queryByDisplayValue('01.02.2019');
21
+ expect(dateElement).toBeInTheDocument();
22
+ rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
23
+ expect(timeElement).toHaveDisplayValue('19:24');
24
+ expect(dateElement).toHaveDisplayValue('01.02.2019');
25
+ await act(async () => {
26
+ dateElement?.click();
27
+ timeElement?.click();
28
+ userEvent.clear(timeElement);
29
+ userEvent.type(timeElement, '10:24');
30
+ });
31
+ expect(timeElement).toHaveDisplayValue('10:24');
32
+ expect(dateElement).toHaveDisplayValue('01.02.2019');
33
+ });
13
34
  });
package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAwHd"}
1
+ {"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}
package/lib/esm/src/components/reactable/helpers/ReactableTable.js CHANGED
@@ -10,7 +10,8 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
10
10
  const containerRef = useRef(null);
11
11
  const tableRef = useRef(null);
12
12
  const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
13
- const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
13
+ const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(true);
14
+ const [hasInitialized, setHasInitialized] = useState(false);
14
15
  const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
15
16
  const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
16
17
  useEffect(() => {
@@ -22,14 +23,25 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
22
23
  }
23
24
  };
24
25
  useEffect(() => {
25
- readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
26
- const neverShow = value === undefined ? false : value;
27
- setNeverShowScrollingAdvice(neverShow);
28
- neverShowScrollingAdviceRef.current = neverShow;
29
- if (containerRef.current && tableRef.current) {
30
- updateScrollingAdvice();
31
- }
32
- });
26
+ setTimeout(() => {
27
+ (async () => {
28
+ try {
29
+ const value = await readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
30
+ const neverShow = value === true;
31
+ setNeverShowScrollingAdvice(neverShow);
32
+ neverShowScrollingAdviceRef.current = neverShow;
33
+ if (!neverShow) {
34
+ updateScrollingAdvice();
35
+ }
36
+ }
37
+ catch (error) {
38
+ setNeverShowScrollingAdvice(false);
39
+ neverShowScrollingAdviceRef.current = false;
40
+ updateScrollingAdvice();
41
+ }
42
+ setHasInitialized(true);
43
+ })();
44
+ }, 0);
33
45
  }, []);
34
46
  useEffect(() => {
35
47
  updateScrollingAdvice();
@@ -39,7 +51,7 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
39
51
  const showFilterRow = columnDefs.some((col) => col.filterable);
40
52
  return (React.createElement(SpinnerContainer, { show: isLoading },
41
53
  React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
42
- showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
54
+ hasInitialized && showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
43
55
  React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
44
56
  React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
45
57
  React.createElement(Button, { primary: true, onClick: async () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deviceinsight/ng-ui-components",
3
- "version": "6.23.0",
3
+ "version": "6.24.0",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {