@kwiz/fluentui 1.0.52 → 1.0.53

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 (4) hide show
  1. package/dist/controls/date.js +13 -7
  2. package/dist/controls/date.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/controls/date.tsx +13 -8
package/dist/controls/date.js CHANGED
@@ -5,14 +5,16 @@ import { CalendarCancelRegular } from '@fluentui/react-icons';
5
5
  import { isDate } from '@kwiz/common';
6
6
  import * as React from 'react';
7
7
  import { useKWIZFluentContext } from '../helpers/context';
8
+ import { useStateEX } from '../helpers/hooks';
8
9
  import { Horizontal } from './horizontal';
9
10
  export const DatePickerEx = (props) => {
10
11
  const ctx = useKWIZFluentContext();
11
- const { showClear, dateValue, timeValue } = React.useMemo(() => {
12
+ //time value will always have a value even when clearing the date
13
+ const [timeValue, setTimeValue] = useStateEX(isDate(props.value) ? props.value : new Date());
14
+ const { showClear, dateValue } = React.useMemo(() => {
12
15
  const showClear = isDate(props.value);
13
16
  const dateValue = props.value;
14
- const timeValue = props.value;
15
- return { showClear, dateValue, timeValue };
17
+ return { showClear, dateValue };
16
18
  }, [props.value]);
17
19
  function reset() {
18
20
  props.onDateChange(null);
@@ -20,19 +22,23 @@ export const DatePickerEx = (props) => {
20
22
  const changeDateHandler = React.useCallback((newDateValue) => {
21
23
  const newDate = new Date(newDateValue);
22
24
  // Use the old time values.
23
- newDate.setHours(timeValue.getHours(), timeValue.getMinutes(), 0, 0);
25
+ newDate.setHours(timeValue ? timeValue.getHours() : 0, timeValue ? timeValue.getMinutes() : 0, 0, 0);
24
26
  props.onDateChange(newDate);
25
27
  }, [timeValue]);
26
28
  const changeTimeHandler = React.useCallback((newTimeValue) => {
29
+ //update our state
30
+ setTimeValue(newTimeValue);
27
31
  // Use the old date value.
28
- const newDate = new Date(dateValue);
32
+ const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
29
33
  newDate.setHours(newTimeValue.getHours(), newTimeValue.getMinutes(), 0, 0);
30
34
  props.onDateChange(newDate);
31
35
  }, [dateValue]);
32
- const DatePickerControl = _jsx(DatePicker, Object.assign({}, (props.datePickerProps || {}), { appearance: ctx.inputAppearance, mountNode: ctx.mountNode, value: dateValue, onSelectDate: (newDate) => {
36
+ const DatePickerControl = _jsx(DatePicker, Object.assign({}, (props.datePickerProps || {}), { appearance: ctx.inputAppearance, mountNode: ctx.mountNode, value: isDate(dateValue) ? dateValue : null, onSelectDate: (newDate) => {
33
37
  changeDateHandler(newDate);
34
38
  }, contentBefore: showClear && _jsx(CalendarCancelRegular, { title: 'Clear', onClick: () => reset() }) }));
35
- const TimePickerControl = _jsx(TimePicker, Object.assign({ appearance: ctx.inputAppearance, mountNode: ctx.mountNode }, props.timePickerProps, { value: timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }), onTimeChange: (e, date) => {
39
+ const TimePickerControl = _jsx(TimePicker, Object.assign({ appearance: ctx.inputAppearance, mountNode: ctx.mountNode }, props.timePickerProps, {
40
+ //only show time value when there is a selected date. timeValue will never be null.
41
+ value: isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : "", onTimeChange: (e, date) => {
36
42
  const newDate = date.selectedTime;
37
43
  changeTimeHandler(newDate);
38
44
  } }));
package/dist/controls/date.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/controls/date.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/controls/date.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kwiz/fluentui",
3
- "version": "1.0.52",
3
+ "version": "1.0.53",
4
4
  "description": "KWIZ common controls for FluentUI",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/controls/date.tsx CHANGED
@@ -5,6 +5,7 @@ import { CalendarCancelRegular } from '@fluentui/react-icons';
5
5
  import { isDate } from '@kwiz/common';
6
6
  import * as React from 'react';
7
7
  import { useKWIZFluentContext } from '../helpers/context';
8
+ import { useStateEX } from '../helpers/hooks';
8
9
  import { Horizontal } from './horizontal';
9
10
 
10
11
  interface IProps {
@@ -17,11 +18,12 @@ interface IProps {
17
18
  export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
18
19
  const ctx = useKWIZFluentContext();
19
20
 
20
- const { showClear, dateValue, timeValue } = React.useMemo(() => {
21
+ //time value will always have a value even when clearing the date
22
+ const [timeValue, setTimeValue] = useStateEX<Date>(isDate(props.value) ? props.value : new Date());
23
+ const { showClear, dateValue } = React.useMemo(() => {
21
24
  const showClear = isDate(props.value);
22
25
  const dateValue = props.value;
23
- const timeValue = props.value;
24
- return { showClear, dateValue, timeValue };
26
+ return { showClear, dateValue };
25
27
  }, [props.value]);
26
28
 
27
29
  function reset() {
@@ -32,15 +34,17 @@ export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProp
32
34
  const newDate = new Date(newDateValue);
33
35
  // Use the old time values.
34
36
  newDate.setHours(
35
- timeValue.getHours(),
36
- timeValue.getMinutes(), 0, 0
37
+ timeValue ? timeValue.getHours() : 0,
38
+ timeValue ? timeValue.getMinutes() : 0, 0, 0
37
39
  );
38
40
  props.onDateChange(newDate);
39
41
  }, [timeValue]);
40
42
 
41
43
  const changeTimeHandler = React.useCallback((newTimeValue: Date): void => {
44
+ //update our state
45
+ setTimeValue(newTimeValue);
42
46
  // Use the old date value.
43
- const newDate = new Date(dateValue);
47
+ const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
44
48
  newDate.setHours(
45
49
  newTimeValue.getHours(),
46
50
  newTimeValue.getMinutes(), 0, 0
@@ -52,7 +56,7 @@ export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProp
52
56
  {...(props.datePickerProps || {})}
53
57
  appearance={ctx.inputAppearance}
54
58
  mountNode={ctx.mountNode}
55
- value={dateValue}
59
+ value={isDate(dateValue) ? dateValue : null}
56
60
  onSelectDate={(newDate) => {
57
61
  changeDateHandler(newDate);
58
62
  }}
@@ -63,7 +67,8 @@ export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProp
63
67
  appearance={ctx.inputAppearance}
64
68
  mountNode={ctx.mountNode}
65
69
  {...props.timePickerProps}
66
- value={timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true })}
70
+ //only show time value when there is a selected date. timeValue will never be null.
71
+ value={isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : ""}
67
72
  onTimeChange={(e, date) => {
68
73
  const newDate = date.selectedTime;
69
74
  changeTimeHandler(newDate);