From 532612b46b087be5578b6da93d505304eb4324e4 Mon Sep 17 00:00:00 2001 From: Fabio Colajanni Date: Fri, 24 May 2024 20:16:52 +0200 Subject: [PATCH 1/6] fix default date issue --- src/plugins/date-picker/index.tsx | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/plugins/date-picker/index.tsx b/src/plugins/date-picker/index.tsx index 8f5be01d..cf043ab5 100644 --- a/src/plugins/date-picker/index.tsx +++ b/src/plugins/date-picker/index.tsx @@ -203,11 +203,15 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { }; handleAbort = () => { - const { message } = this.props; - this.props.onDismissFullscreen(); } + handleOnChange = (_, selectedString) => { + if (selectedString) { + this.setState({ msg: selectedString }) + } + } + onKeyDown = (event) => { const webchatWindow = document.getElementById("webchatWindow"); const calenderElements = webchatWindow?.getElementsByClassName("flatpickr-calendar"); @@ -297,7 +301,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { static getOptionsFromMessage(message: IMessage) { const { data } = message.data._plugin; - const dateFormat = data.dateFormat || 'YYYY-MM-DD'; + const dateFormat = data.dateFormat || 'Y-m-d'; const defaultDate = DatePicker.transformNamedDate(data.defaultDate) || DatePicker.transformNamedDate(data.minDate) || undefined; @@ -307,9 +311,13 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { const flatpickrLocaleId = getFlatpickrLocaleId(localeId); let locale = l10n[flatpickrLocaleId]; const enableTime = !!data.enableTime; - const timeTemp = data.time_24hr ? 'H:i' : 'h:i'; //12-hour format without AM/PM - const timeWithSeconds = data.enableSeconds ? `${timeTemp}:S` : timeTemp; - const timeFormat = data.time_24hr ? timeWithSeconds :`${timeWithSeconds} K` //12-hour format with AM/PM + + const timeFormat = `${data.time_24hr ? "H" : "h"}:i${ + data.enableSeconds ? ":S" : "" + }${data.time_24hr ? "" : " K"}`; + + const dateFormatString = enableTime ? `${dateFormat} ${timeFormat}` : dateFormat; + const dateFormatLocalString = `L${enableTime ? " LT" : ""}${data.enableSeconds ? " S" : ""}`; if ( localeId === 'gb' ) locale = { ...locale, firstDayOfWeek: 1 }; const options = { @@ -320,7 +328,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { minuteIncrement: data.minuteIncrement || 5, noCalendar: data.noCalendar || false, weekNumbers: data.weekNumbers || false, - dateFormat: enableTime ? `${dateFormat} ${timeFormat}` : dateFormat, + dateFormat: dateFormatString, defaultDate, disable: [] as any[], enable: [] as any[], @@ -336,7 +344,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { parseDate: dateString => moment(dateString).toDate(), // if no custom formatting is defined, apply default formatting formatDate: !data.dateFormat - ? date => moment(date).locale(momentLocaleId).format(enableTime ? 'L LT' : 'L') + ? date => moment(date).locale(momentLocaleId).format(dateFormatLocalString) : undefined }; @@ -415,7 +423,8 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { { this.setState({ msg }) }} + onChange={this.handleOnChange} + onReady={this.handleOnChange} // we need it to store defaultDate in state options={ options } From c492a64142da3074a6c5df533e903e1f81c19869 Mon Sep 17 00:00:00 2001 From: Fabio Colajanni Date: Mon, 27 May 2024 10:04:12 +0200 Subject: [PATCH 2/6] fix formatting --- src/plugins/date-picker/index.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/plugins/date-picker/index.tsx b/src/plugins/date-picker/index.tsx index cf043ab5..94d99875 100644 --- a/src/plugins/date-picker/index.tsx +++ b/src/plugins/date-picker/index.tsx @@ -109,11 +109,11 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { borderColor: theme.greyColor, color: theme.greyColor, cursor: 'default' - }, - '&:focus':{ - outline: 'none', - boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}` - } + }, + '&:focus':{ + outline: 'none', + boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}` + } })); const Padding = styled.div(({ theme }) => ({ @@ -312,12 +312,12 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { let locale = l10n[flatpickrLocaleId]; const enableTime = !!data.enableTime; - const timeFormat = `${data.time_24hr ? "H" : "h"}:i${ - data.enableSeconds ? ":S" : "" - }${data.time_24hr ? "" : " K"}`; + const timeFormat = `${data.time_24hr ? "H" : "h"}:i${data.enableSeconds ? ":S" : ""}${ + data.time_24hr ? "" : " K" + }`; const dateFormatString = enableTime ? `${dateFormat} ${timeFormat}` : dateFormat; - const dateFormatLocalString = `L${enableTime ? " LT" : ""}${data.enableSeconds ? " S" : ""}`; + const dateFormatLocalString = `L${enableTime ? " LT" : ""}${data.enableSeconds ? "S" : ""}`; if ( localeId === 'gb' ) locale = { ...locale, firstDayOfWeek: 1 }; const options = { @@ -359,7 +359,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { // resolve relative date names like today, tomorrow or yesterday .map(DatePicker.transformNamedDate); - // the code in function_enable_disable was executed in a vm to check that its return value is from type boolean + // the code in function_enable_disable was executed in a vm to check that its return value is from type boolean if (data?.function_enable_disable?.length > 0) { try { const flatpickrFn = new Function(`"use strict"; return ${data.function_enable_disable}`)(); From c506fb9def75cbb0ce7c77c07fc900d21f13f0f4 Mon Sep 17 00:00:00 2001 From: Fabio Colajanni Date: Mon, 27 May 2024 10:08:02 +0200 Subject: [PATCH 3/6] fix time format tokens --- src/plugins/date-picker/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/date-picker/index.tsx b/src/plugins/date-picker/index.tsx index 94d99875..406e7423 100644 --- a/src/plugins/date-picker/index.tsx +++ b/src/plugins/date-picker/index.tsx @@ -312,9 +312,9 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { let locale = l10n[flatpickrLocaleId]; const enableTime = !!data.enableTime; - const timeFormat = `${data.time_24hr ? "H" : "h"}:i${data.enableSeconds ? ":S" : ""}${ - data.time_24hr ? "" : " K" - }`; + const timeTemp = data.time_24hr ? 'H:i' : 'h:i'; //12-hour format without AM/PM + const timeWithSeconds = data.enableSeconds ? `${timeTemp}:S` : timeTemp; + const timeFormat = data.time_24hr ? timeWithSeconds :`${timeWithSeconds} K` //12-hour format with AM/PM const dateFormatString = enableTime ? `${dateFormat} ${timeFormat}` : dateFormat; const dateFormatLocalString = `L${enableTime ? " LT" : ""}${data.enableSeconds ? "S" : ""}`; From 2ef14c8e73f98f5b7104c69c8c4f2f3556ac6cda Mon Sep 17 00:00:00 2001 From: Fabio Colajanni Date: Mon, 27 May 2024 10:25:13 +0200 Subject: [PATCH 4/6] fix indentation --- src/plugins/date-picker/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/plugins/date-picker/index.tsx b/src/plugins/date-picker/index.tsx index 406e7423..7d233ca4 100644 --- a/src/plugins/date-picker/index.tsx +++ b/src/plugins/date-picker/index.tsx @@ -109,11 +109,11 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { borderColor: theme.greyColor, color: theme.greyColor, cursor: 'default' - }, - '&:focus':{ - outline: 'none', - boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}` - } + }, + '&:focus':{ + outline: 'none', + boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}` + } })); const Padding = styled.div(({ theme }) => ({ @@ -359,7 +359,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { // resolve relative date names like today, tomorrow or yesterday .map(DatePicker.transformNamedDate); - // the code in function_enable_disable was executed in a vm to check that its return value is from type boolean + // the code in function_enable_disable was executed in a vm to check that its return value is from type boolean if (data?.function_enable_disable?.length > 0) { try { const flatpickrFn = new Function(`"use strict"; return ${data.function_enable_disable}`)(); From 8ffbcba261fffe82147da8a8f9f8a00b019cdc94 Mon Sep 17 00:00:00 2001 From: Fabio Colajanni Date: Tue, 28 May 2024 10:16:59 +0200 Subject: [PATCH 5/6] fix time with second local format --- src/plugins/date-picker/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/date-picker/index.tsx b/src/plugins/date-picker/index.tsx index 7d233ca4..807c4fa8 100644 --- a/src/plugins/date-picker/index.tsx +++ b/src/plugins/date-picker/index.tsx @@ -314,10 +314,11 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { const timeTemp = data.time_24hr ? 'H:i' : 'h:i'; //12-hour format without AM/PM const timeWithSeconds = data.enableSeconds ? `${timeTemp}:S` : timeTemp; - const timeFormat = data.time_24hr ? timeWithSeconds :`${timeWithSeconds} K` //12-hour format with AM/PM + const timeFormat = data.time_24hr ? timeWithSeconds : `${timeWithSeconds} K`; //12-hour format with AM/PM + const timeLocalFormat = ` LT${data.enableSeconds ? "S" : ""}`; const dateFormatString = enableTime ? `${dateFormat} ${timeFormat}` : dateFormat; - const dateFormatLocalString = `L${enableTime ? " LT" : ""}${data.enableSeconds ? "S" : ""}`; + const dateFormatLocalString = `L${enableTime ? timeLocalFormat : ""}`; if ( localeId === 'gb' ) locale = { ...locale, firstDayOfWeek: 1 }; const options = { From f040544c262de5f685c2f7545659f5c56d09f41a Mon Sep 17 00:00:00 2001 From: Fabio Colajanni Date: Tue, 28 May 2024 13:06:16 +0200 Subject: [PATCH 6/6] reverting seconds fix on format date --- src/plugins/date-picker/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/plugins/date-picker/index.tsx b/src/plugins/date-picker/index.tsx index 807c4fa8..8d8c4c1f 100644 --- a/src/plugins/date-picker/index.tsx +++ b/src/plugins/date-picker/index.tsx @@ -311,14 +311,9 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { const flatpickrLocaleId = getFlatpickrLocaleId(localeId); let locale = l10n[flatpickrLocaleId]; const enableTime = !!data.enableTime; - const timeTemp = data.time_24hr ? 'H:i' : 'h:i'; //12-hour format without AM/PM const timeWithSeconds = data.enableSeconds ? `${timeTemp}:S` : timeTemp; const timeFormat = data.time_24hr ? timeWithSeconds : `${timeWithSeconds} K`; //12-hour format with AM/PM - const timeLocalFormat = ` LT${data.enableSeconds ? "S" : ""}`; - - const dateFormatString = enableTime ? `${dateFormat} ${timeFormat}` : dateFormat; - const dateFormatLocalString = `L${enableTime ? timeLocalFormat : ""}`; if ( localeId === 'gb' ) locale = { ...locale, firstDayOfWeek: 1 }; const options = { @@ -329,7 +324,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { minuteIncrement: data.minuteIncrement || 5, noCalendar: data.noCalendar || false, weekNumbers: data.weekNumbers || false, - dateFormat: dateFormatString, + dateFormat: enableTime ? `${dateFormat} ${timeFormat}` : dateFormat, defaultDate, disable: [] as any[], enable: [] as any[], @@ -345,7 +340,7 @@ const datePickerPlugin: MessagePluginFactory = ({ styled }) => { parseDate: dateString => moment(dateString).toDate(), // if no custom formatting is defined, apply default formatting formatDate: !data.dateFormat - ? date => moment(date).locale(momentLocaleId).format(dateFormatLocalString) + ? date => moment(date).locale(momentLocaleId).format(enableTime ? 'L LT' : 'L') : undefined };