From 4d1e520ab1a51659d8332f5d60bfb77be2b65de1 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Fri, 26 Apr 2024 15:07:57 +0300 Subject: [PATCH 01/11] allow input keep not fully formated date --- components/lib/calendar/Calendar.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 520629b63f..126e9d6cd7 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -144,7 +144,9 @@ export const Calendar = React.memo( const updateValueOnInput = (event, rawValue, invalidCallback) => { try { + const value = parseValueFromString(rawValue); + console.log('parsed',value) if (isValidSelection(value)) { updateModel(event, value); @@ -1778,10 +1780,15 @@ export const Calendar = React.memo( const updateModel = (event, value) => { if (props.onChange) { + + const originInputValue = event.target.value + const newValue = cloneDate(value); viewStateChanged.current = true; + console.log(newValue, typeof newValue) + onChangeRef.current({ originalEvent: event, value: newValue, @@ -1797,6 +1804,8 @@ export const Calendar = React.memo( value: newValue } }); + + event.target.value = originInputValue } }; @@ -2418,7 +2427,8 @@ export const Calendar = React.memo( return true; }; - const updateInputfield = (value) => { + const updateInputfield = (value,formatAlways) => { + console.log('updateInputfield', ) if (!inputRef.current) { return; } @@ -2457,6 +2467,10 @@ export const Calendar = React.memo( } } + if (inputRef.current.value.length === formattedValue.length - 1 && !formatAlways) { + return + } + inputRef.current.value = formattedValue; }; @@ -2997,6 +3011,7 @@ export const Calendar = React.memo( }, [currentView]); useUpdateEffect(() => { + if (!props.onViewDateChange && !viewStateChanged.current) { setValue(props.value); } @@ -3004,6 +3019,7 @@ export const Calendar = React.memo( if (props.viewDate) { updateViewDate(null, getViewDate(props.viewDate)); } + }, [props.onViewDateChange, props.value, props.viewDate]); useUpdateEffect(() => { @@ -3018,6 +3034,9 @@ export const Calendar = React.memo( useUpdateEffect(() => { const newDate = props.value; + console.log('newDate',props.value) + console.log('previous',previousValue) + if (previousValue !== newDate) { updateInputfield(newDate); From dc1028596f8f00f63e4ac0c18c739c0e4f39b6d3 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Fri, 26 Apr 2024 15:24:18 +0300 Subject: [PATCH 02/11] feat: apply standart format on blur --- components/lib/calendar/Calendar.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 126e9d6cd7..c70042745a 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -96,7 +96,7 @@ export const Calendar = React.memo( }; const onInputBlur = (event) => { - !props.keepInvalid && updateInputfield(props.value); + updateInputfield(props.value,true) props.onBlur && props.onBlur(event); setFocusedState(false); }; @@ -3034,9 +3034,6 @@ export const Calendar = React.memo( useUpdateEffect(() => { const newDate = props.value; - console.log('newDate',props.value) - console.log('previous',previousValue) - if (previousValue !== newDate) { updateInputfield(newDate); From d0fb66fb9f577908e6f627324c2d6f19cb767e73 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Fri, 26 Apr 2024 15:26:08 +0300 Subject: [PATCH 03/11] fix: remove logs --- components/lib/calendar/Calendar.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index c70042745a..b5825ca9fb 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -146,7 +146,6 @@ export const Calendar = React.memo( try { const value = parseValueFromString(rawValue); - console.log('parsed',value) if (isValidSelection(value)) { updateModel(event, value); @@ -1787,8 +1786,6 @@ export const Calendar = React.memo( viewStateChanged.current = true; - console.log(newValue, typeof newValue) - onChangeRef.current({ originalEvent: event, value: newValue, @@ -2428,7 +2425,6 @@ export const Calendar = React.memo( }; const updateInputfield = (value,formatAlways) => { - console.log('updateInputfield', ) if (!inputRef.current) { return; } From 71e7d64b1728f11d48ae1b10c1519ba364e85be0 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Fri, 26 Apr 2024 15:26:48 +0300 Subject: [PATCH 04/11] fix: format code --- components/lib/calendar/Calendar.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index b5825ca9fb..4c7afcc321 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -96,7 +96,7 @@ export const Calendar = React.memo( }; const onInputBlur = (event) => { - updateInputfield(props.value,true) + updateInputfield(props.value, true); props.onBlur && props.onBlur(event); setFocusedState(false); }; @@ -144,7 +144,6 @@ export const Calendar = React.memo( const updateValueOnInput = (event, rawValue, invalidCallback) => { try { - const value = parseValueFromString(rawValue); if (isValidSelection(value)) { @@ -1779,8 +1778,7 @@ export const Calendar = React.memo( const updateModel = (event, value) => { if (props.onChange) { - - const originInputValue = event.target.value + const originInputValue = event.target.value; const newValue = cloneDate(value); @@ -1802,7 +1800,7 @@ export const Calendar = React.memo( } }); - event.target.value = originInputValue + event.target.value = originInputValue; } }; @@ -2424,7 +2422,7 @@ export const Calendar = React.memo( return true; }; - const updateInputfield = (value,formatAlways) => { + const updateInputfield = (value, formatAlways) => { if (!inputRef.current) { return; } @@ -2464,7 +2462,7 @@ export const Calendar = React.memo( } if (inputRef.current.value.length === formattedValue.length - 1 && !formatAlways) { - return + return; } inputRef.current.value = formattedValue; @@ -3007,7 +3005,6 @@ export const Calendar = React.memo( }, [currentView]); useUpdateEffect(() => { - if (!props.onViewDateChange && !viewStateChanged.current) { setValue(props.value); } @@ -3015,7 +3012,6 @@ export const Calendar = React.memo( if (props.viewDate) { updateViewDate(null, getViewDate(props.viewDate)); } - }, [props.onViewDateChange, props.value, props.viewDate]); useUpdateEffect(() => { From b3528bca5a291fd01f0d67c849e8d5a637270e6a Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Fri, 26 Apr 2024 16:20:46 +0300 Subject: [PATCH 05/11] fix: timeOnly time validation --- components/lib/calendar/Calendar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 4c7afcc321..6e81c2f453 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -144,9 +144,10 @@ export const Calendar = React.memo( const updateValueOnInput = (event, rawValue, invalidCallback) => { try { - const value = parseValueFromString(rawValue); + const value = parseValueFromString(props.timeOnly ? rawValue.replace('_','') : rawValue); if (isValidSelection(value)) { + console.log('valid') updateModel(event, value); updateViewDate(event, value.length ? value[0] : value); } @@ -2464,7 +2465,8 @@ export const Calendar = React.memo( if (inputRef.current.value.length === formattedValue.length - 1 && !formatAlways) { return; } - + console.log(inputRef.current.value, formattedValue) + inputRef.current.value = formattedValue; }; From 1cbec5b642b1f63281542a8e4cccb1effa5ddb13 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Sat, 27 Apr 2024 12:57:00 +0300 Subject: [PATCH 06/11] fix: remove extra code --- components/lib/calendar/Calendar.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 6e81c2f453..bf41869f26 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -147,7 +147,6 @@ export const Calendar = React.memo( const value = parseValueFromString(props.timeOnly ? rawValue.replace('_','') : rawValue); if (isValidSelection(value)) { - console.log('valid') updateModel(event, value); updateViewDate(event, value.length ? value[0] : value); } @@ -1779,8 +1778,6 @@ export const Calendar = React.memo( const updateModel = (event, value) => { if (props.onChange) { - const originInputValue = event.target.value; - const newValue = cloneDate(value); viewStateChanged.current = true; @@ -1800,8 +1797,6 @@ export const Calendar = React.memo( value: newValue } }); - - event.target.value = originInputValue; } }; @@ -2465,7 +2460,6 @@ export const Calendar = React.memo( if (inputRef.current.value.length === formattedValue.length - 1 && !formatAlways) { return; } - console.log(inputRef.current.value, formattedValue) inputRef.current.value = formattedValue; }; From f5cd7dca54a835ce08a8eee82a6d0592d6209941 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Sat, 27 Apr 2024 12:58:12 +0300 Subject: [PATCH 07/11] code format --- components/lib/calendar/Calendar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index bf41869f26..595cbe16bd 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -144,7 +144,7 @@ export const Calendar = React.memo( const updateValueOnInput = (event, rawValue, invalidCallback) => { try { - const value = parseValueFromString(props.timeOnly ? rawValue.replace('_','') : rawValue); + const value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue); if (isValidSelection(value)) { updateModel(event, value); @@ -2460,7 +2460,7 @@ export const Calendar = React.memo( if (inputRef.current.value.length === formattedValue.length - 1 && !formatAlways) { return; } - + inputRef.current.value = formattedValue; }; From 4d3a9f369ab66820fc9db14d4fa4970c04a41b3f Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Sat, 27 Apr 2024 15:12:31 +0300 Subject: [PATCH 08/11] fix: use 'typeUpdate' to properly control input value --- components/lib/calendar/Calendar.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 595cbe16bd..bf28642adc 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -24,6 +24,7 @@ export const Calendar = React.memo( const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [viewDateState, setViewDateState] = React.useState(null); const [idState, setIdState] = React.useState(props.id); + const typeUpdate = React.useRef(null) const metaData = { props, @@ -147,6 +148,7 @@ export const Calendar = React.memo( const value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue); if (isValidSelection(value)) { + typeUpdate.current = true updateModel(event, value); updateViewDate(event, value.length ? value[0] : value); } @@ -2457,10 +2459,6 @@ export const Calendar = React.memo( } } - if (inputRef.current.value.length === formattedValue.length - 1 && !formatAlways) { - return; - } - inputRef.current.value = formattedValue; }; @@ -3023,7 +3021,11 @@ export const Calendar = React.memo( const newDate = props.value; if (previousValue !== newDate) { - updateInputfield(newDate); + if (!typeUpdate.current) { + updateInputfield(newDate); + } + + typeUpdate.current = false // #3516 view date not updated when value set programatically if (!visible && newDate) { From 1d0b14047dd43d2128a417095ad3573302dabf4e Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Sat, 27 Apr 2024 15:48:39 +0300 Subject: [PATCH 09/11] fix: remove extra code --- components/lib/calendar/Calendar.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index bf28642adc..d64a34124a 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -24,7 +24,7 @@ export const Calendar = React.memo( const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [viewDateState, setViewDateState] = React.useState(null); const [idState, setIdState] = React.useState(props.id); - const typeUpdate = React.useRef(null) + const typeUpdate = React.useRef(null); const metaData = { props, @@ -97,7 +97,7 @@ export const Calendar = React.memo( }; const onInputBlur = (event) => { - updateInputfield(props.value, true); + updateInputfield(props.value); props.onBlur && props.onBlur(event); setFocusedState(false); }; @@ -148,7 +148,7 @@ export const Calendar = React.memo( const value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue); if (isValidSelection(value)) { - typeUpdate.current = true + typeUpdate.current = true; updateModel(event, value); updateViewDate(event, value.length ? value[0] : value); } @@ -2420,7 +2420,7 @@ export const Calendar = React.memo( return true; }; - const updateInputfield = (value, formatAlways) => { + const updateInputfield = (value) => { if (!inputRef.current) { return; } @@ -3024,8 +3024,8 @@ export const Calendar = React.memo( if (!typeUpdate.current) { updateInputfield(newDate); } - - typeUpdate.current = false + + typeUpdate.current = false; // #3516 view date not updated when value set programatically if (!visible && newDate) { From 117f69f538b821704c034b851162579198dea6e4 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Sat, 27 Apr 2024 19:52:45 +0300 Subject: [PATCH 10/11] fix: change ref name --- components/lib/calendar/Calendar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index d64a34124a..bbc24b1a99 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -24,7 +24,7 @@ export const Calendar = React.memo( const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [viewDateState, setViewDateState] = React.useState(null); const [idState, setIdState] = React.useState(props.id); - const typeUpdate = React.useRef(null); + const isTypingRef = React.useRef(null); const metaData = { props, @@ -148,7 +148,7 @@ export const Calendar = React.memo( const value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue); if (isValidSelection(value)) { - typeUpdate.current = true; + isTypingRef.current = true; updateModel(event, value); updateViewDate(event, value.length ? value[0] : value); } @@ -3021,11 +3021,11 @@ export const Calendar = React.memo( const newDate = props.value; if (previousValue !== newDate) { - if (!typeUpdate.current) { + if (!isTypingRef.current) { updateInputfield(newDate); } - typeUpdate.current = false; + isTypingRef.current = false; // #3516 view date not updated when value set programatically if (!visible && newDate) { From 90b50cf4d4a669bb243144390b3d072f06214fa7 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Sat, 27 Apr 2024 19:53:14 +0300 Subject: [PATCH 11/11] fix: put false value to ref --- components/lib/calendar/Calendar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index bbc24b1a99..eca754bdd1 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -24,7 +24,7 @@ export const Calendar = React.memo( const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [viewDateState, setViewDateState] = React.useState(null); const [idState, setIdState] = React.useState(props.id); - const isTypingRef = React.useRef(null); + const isTypingRef = React.useRef(false); const metaData = { props,