@headless-adminapp/fluent 0.0.17-alpha.47 → 0.0.17-alpha.48

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 (5) hide show
  1. package/App/AppHeaderContianer.js +1 -1
  2. package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts +2 -2
  3. package/form/controls/DateTimeControl.d.ts +1 -1
  4. package/form/controls/DateTimeControl.js +26 -17
  5. package/package.json +2 -2
package/App/AppHeaderContianer.js CHANGED
@@ -34,7 +34,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
34
34
  background: react_components_1.tokens.colorBrandBackground,
35
35
  paddingInline: 8,
36
36
  gap: 8,
37
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { style: {
37
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { role: "button", style: {
38
38
  cursor: 'pointer',
39
39
  }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
40
40
  display: 'flex',
package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  interface CustomizeColumnsProps {
2
- opened: boolean;
3
- onClose: () => void;
2
+ readonly opened: boolean;
3
+ readonly onClose: () => void;
4
4
  }
5
5
  export declare function CustomizeColumns({ onClose, opened }: CustomizeColumnsProps): import("react/jsx-runtime").JSX.Element;
6
6
  export {};
package/form/controls/DateTimeControl.d.ts CHANGED
@@ -3,4 +3,4 @@ export interface DateTimeControlProps extends ControlProps<string> {
3
3
  maxDate?: Date;
4
4
  minDate?: Date;
5
5
  }
6
- export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateTimeControlProps>): import("react/jsx-runtime").JSX.Element;
package/form/controls/DateTimeControl.js CHANGED
@@ -8,37 +8,45 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const react_components_1 = require("@fluentui/react-components");
9
9
  const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
10
10
  const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
11
+ const locale_1 = require("@headless-adminapp/app/locale");
11
12
  const icons_1 = require("@headless-adminapp/icons");
12
13
  const dayjs_1 = __importDefault(require("dayjs"));
13
14
  const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
15
+ const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
16
+ const utc_1 = __importDefault(require("dayjs/plugin/utc"));
14
17
  const react_1 = require("react");
15
18
  dayjs_1.default.extend(customParseFormat_1.default);
19
+ dayjs_1.default.extend(utc_1.default);
20
+ dayjs_1.default.extend(timezone_1.default);
16
21
  function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
17
- // const { shortDate: dateFormat } = useLocale();
18
- const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).format('hh:mm A') : '');
22
+ const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
23
+ const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
19
24
  const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
20
25
  internalTimeValueRef.current = internalTimeValue;
21
26
  (0, react_1.useEffect)(() => {
22
- const updatedValue = value ? (0, dayjs_1.default)(value).format('hh:mm A') : '';
27
+ const updatedValue = value
28
+ ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat)
29
+ : '';
23
30
  if (internalTimeValueRef.current !== updatedValue) {
24
31
  setInternalTimeValue(updatedValue);
25
32
  }
26
- }, [value]);
33
+ }, [value, timezone, timeFormat]);
27
34
  return ((0, jsx_runtime_1.jsxs)("div", { style: {
28
35
  display: 'flex',
29
36
  alignItems: 'center',
30
37
  gap: react_components_1.tokens.spacingHorizontalS,
31
- }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => (date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : ''), disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
38
+ }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
32
39
  if (!date) {
33
40
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
34
41
  }
35
42
  else if (!value) {
36
- onChange === null || onChange === void 0 ? void 0 : onChange(date.toISOString());
43
+ onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
37
44
  }
38
45
  else {
39
46
  onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date)
40
- .set('hour', (0, dayjs_1.default)(value).hour())
41
- .set('minute', (0, dayjs_1.default)(value).minute())
47
+ .tz(timezone, true)
48
+ .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
49
+ .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
42
50
  .toISOString());
43
51
  }
44
52
  },
@@ -54,27 +62,29 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
54
62
  } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
55
63
  style: { minWidth: 0 },
56
64
  }, readOnly: readOnly || disabled || !value, selectedTime: value ? new Date(value) : null, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
57
- const dateValue = value ? new Date(value) : new Date();
65
+ const dateValue = value
66
+ ? (0, dayjs_1.default)(value).tz(timezone)
67
+ : (0, dayjs_1.default)().tz(timezone);
58
68
  if (data.selectedTime) {
59
- onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(dateValue)
69
+ onChange === null || onChange === void 0 ? void 0 : onChange(dateValue
60
70
  .set('hour', data.selectedTime.getHours())
61
71
  .set('minute', data.selectedTime.getMinutes())
62
72
  .toISOString());
63
73
  }
64
74
  else if (data.selectedTimeText) {
65
- let resolvedTime = resolveTimeValue(data.selectedTimeText);
75
+ let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
66
76
  if (!resolvedTime) {
67
- setInternalTimeValue(value ? (0, dayjs_1.default)(value).format('hh:mm A') : '');
77
+ setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
68
78
  return;
69
79
  }
70
- const newValue = (0, dayjs_1.default)(dateValue)
80
+ const newValue = dateValue
71
81
  .set('hour', resolvedTime.getHours())
72
82
  .set('minute', resolvedTime.getMinutes())
73
83
  .toISOString();
74
84
  if (newValue !== value) {
75
85
  onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
76
86
  }
77
- setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).format('hh:mm A') : '');
87
+ setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
78
88
  }
79
89
  }, onInput: (e) => {
80
90
  setInternalTimeValue(e.currentTarget.value);
@@ -88,12 +98,11 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
88
98
  color: react_components_1.tokens.colorNeutralForeground2,
89
99
  }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) })] }));
90
100
  }
91
- function resolveTimeValue(value) {
101
+ function resolveTimeValue(value, timeFormat) {
92
102
  if (!value) {
93
103
  return;
94
104
  }
95
- const time = (0, dayjs_1.default)(value, 'hh:mm A');
96
- console.log('resolveTimeValue', time);
105
+ const time = (0, dayjs_1.default)(value, timeFormat);
97
106
  if (!time.isValid()) {
98
107
  return;
99
108
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@headless-adminapp/fluent",
3
- "version": "0.0.17-alpha.47",
3
+ "version": "0.0.17-alpha.48",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -49,5 +49,5 @@
49
49
  "uuid": "11.0.3",
50
50
  "yup": "^1.4.0"
51
51
  },
52
- "gitHead": "749a69f512d51c82f33fe27f8bbe5046fdeab4c5"
52
+ "gitHead": "e8887232802a525648c316b2b8526b2571bc8b8c"
53
53
  }