@kwiz/fluentui 1.0.52 → 1.0.53

Sign up to get free protection for your applications and to get access to all the features.
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":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAmB,MAAM,mCAAmC,CAAC;AAEhF,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,MAAM,CAAC,MAAM,YAAY,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC5F,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IAEnC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC3D,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC9B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;IAC/C,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,SAAS,KAAK;QACV,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,YAAkB,EAAQ,EAAE;QACrE,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,2BAA2B;QAC3B,OAAO,CAAC,QAAQ,CACZ,SAAS,CAAC,QAAQ,EAAE,EACpB,SAAS,CAAC,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,CAC/B,CAAC;QACF,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,YAAkB,EAAQ,EAAE;QACrE,0BAA0B;QAC1B,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,OAAO,CAAC,QAAQ,CACZ,YAAY,CAAC,QAAQ,EAAE,EACvB,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,CAClC,CAAC;QACF,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,KAAC,UAAU,oBAC7B,CAAC,KAAK,CAAC,eAAe,IAAI,EAAE,CAAC,IACjC,UAAU,EAAE,GAAG,CAAC,eAAe,EAC/B,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,CAAC,OAAO,EAAE,EAAE;YACtB,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC,EACD,aAAa,EAAE,SAAS,IAAI,KAAC,qBAAqB,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,GAAI,IAC7F,CAAA;IAEF,MAAM,iBAAiB,GAAG,KAAC,UAAU,kBACjC,UAAU,EAAE,GAAG,CAAC,eAAe,EAC/B,SAAS,EAAE,GAAG,CAAC,SAAS,IACpB,KAAK,CAAC,eAAe,IACzB,KAAK,EAAE,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAC/F,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;YAClC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC,IACH,CAAA;IAEF,OAAO,CACH,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,MAAC,UAAU,eACR,iBAAiB,EACjB,iBAAiB,IACT;QACb,CAAC,CAAC,iBAAiB,CAC1B,CAAC;AACN,CAAC,CAAA"}
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);