@talxis/base-controls 1.2606.6 → 1.2606.7

package/dist/components/DateTime/hooks/useDateTime.js

@@ -12,7 +12,8 @@ const useDateTime = (props, ref) => {
     const context = props.context;
     const behavior = boundValue.attributes.Behavior;
     const format = boundValue.attributes.Format ?? boundValue.type;
-    const dateFormattingInfo = context.userSettings.dateFormattingInfo;
+    //client libraries formatting contains dateFormattingInfo, fallback to user settings if it was not found (uses Power Apps formatting implementation)
+    const dateFormattingInfo = context.formatting.dateFormattingInfo ?? context.userSettings.dateFormattingInfo;
     const lastValidDateRef = useRef(undefined);
     const isDateTime = (() => {
         switch (format) {
@@ -120,7 +121,7 @@ const useDateTime = (props, ref) => {
     const { value, labels, theme, setValue, onNotifyOutputChanged: onNotifyOutputChanged } = useInputBasedControl('DateTime', props, {
         formatter: formatDate,
         valueExtractor: dateExtractor,
-        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)
+        defaultTranslations: getDefaultDateTimeTranslations(dateFormattingInfo)
     });
     useEffect(() => {
         const onBlur = () => {

package/dist/components/DateTime/hooks/useDateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters } from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"@talxis/react-components\";\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n        parseDateString: (dateString: string) => Date | string;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format ?? boundValue.type;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n\n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const parseDateString = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));\n            if (!dayJsDateNoWhiteSpace.isValid()) {\n                return value;\n            }\n            else {\n                return dayJsDateNoWhiteSpace.toDate();\n            }\n        }\n        return dayjsDate.toDate();\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        let parsedDate = parseDateString(value);\n        if (parsedDate instanceof Date && behavior === 3) {\n            //convert from \"UTC\" back to local time by setting the offset\n            parsedDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000);\n        }\n        return parsedDate;\n    }\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        //onSelectDate can trigger on initial click with empty date, do not continue in this case\n        //for clearing dates, date.clear should be used\n        if (!date && !time) {\n            return;\n        }\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if (!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    const { value, labels, theme, setValue, onNotifyOutputChanged: onNotifyOutputChanged } = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        valueExtractor: dateExtractor,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue,\n            parseDateString: (dateString: string) => parseDateString(dateString)\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters } from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"@talxis/react-components\";\nimport { IFormatting } from \"@talxis/client-libraries/dist/utils/formatting\";\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n        parseDateString: (dateString: string) => Date | string;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format ?? boundValue.type;\n    //client libraries formatting contains dateFormattingInfo, fallback to user settings if it was not found (uses Power Apps formatting implementation)\n    const dateFormattingInfo = (<IFormatting>context.formatting).dateFormattingInfo ?? context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n\n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const parseDateString = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));\n            if (!dayJsDateNoWhiteSpace.isValid()) {\n                return value;\n            }\n            else {\n                return dayJsDateNoWhiteSpace.toDate();\n            }\n        }\n        return dayjsDate.toDate();\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        let parsedDate = parseDateString(value);\n        if (parsedDate instanceof Date && behavior === 3) {\n            //convert from \"UTC\" back to local time by setting the offset\n            parsedDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000);\n        }\n        return parsedDate;\n    }\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        //onSelectDate can trigger on initial click with empty date, do not continue in this case\n        //for clearing dates, date.clear should be used\n        if (!date && !time) {\n            return;\n        }\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if (!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    const { value, labels, theme, setValue, onNotifyOutputChanged: onNotifyOutputChanged } = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        valueExtractor: dateExtractor,\n        defaultTranslations: getDefaultDateTimeTranslations(dateFormattingInfo)\n    });\n\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue,\n            parseDateString: (dateString: string) => parseDateString(dateString)\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2606.6",
+  "version": "1.2606.7",
   "description": "Set of React components that natively work with Power Apps Component Framework APIs.",
   "repository": {
     "type": "git",
@@ -84,7 +84,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fluentui/react-migration-v8-v9": "^9.6.20",
-    "@talxis/client-libraries": "^1.2606.4",
+    "@talxis/client-libraries": "^1.2606.5",
     "@talxis/client-metadata": "^0.0.4",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",