diff --git a/CHANGELOG.md b/CHANGELOG.md index 3128add..f489e21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ * Add `OverlayView` component and extend JobLogs API. UIDEXP-18. * Extend `SortAndSearchPane` to accept `excludedSortColumns` and `shouldSetInitialSortOnMount` prop. UIDEXP-142. * Update `react-intl` to v5.7.0. STDTC-15. +* Fix date and time display in Safari. UIDEXP-175. ## [2.0.1](https://github.com/folio-org/stripes-data-transfer-components/tree/v2.0.1) (2020-07-09) [Full Changelog](https://github.com/folio-org/stripes-data-transfer-components/tree/v2.0.0...v2.0.1) diff --git a/lib/JobLogs/useJobLogsListFormatter.js b/lib/JobLogs/useJobLogsListFormatter.js index 6216119..c5cb6c0 100644 --- a/lib/JobLogs/useJobLogsListFormatter.js +++ b/lib/JobLogs/useJobLogsListFormatter.js @@ -1,5 +1,5 @@ -import { useIntl } from 'react-intl'; import { useListFormatter } from '../ListFormatter'; +import { useTimeFormatter } from '../utils'; const runBy = record => { if (!record.runBy) { @@ -32,11 +32,11 @@ const totalRecords = record => { const fileName = record => record.fileName; const hrId = record => record.hrId; -const getCompletedDateFormatter = intl => { +const getCompletedDateFormatter = formatTime => { return record => { const { completedDate } = record; - return intl.formatTime( + return formatTime( completedDate, { day: 'numeric', @@ -48,7 +48,7 @@ const getCompletedDateFormatter = intl => { }; export const useJobLogsListFormatter = (customFormatters = {}) => { - const intl = useIntl(); + const formatTime = useTimeFormatter(); const jobLogsFormatters = { runBy, @@ -56,7 +56,7 @@ export const useJobLogsListFormatter = (customFormatters = {}) => { totalRecords, fileName, hrId, - completedDate: getCompletedDateFormatter(intl), + completedDate: getCompletedDateFormatter(formatTime), }; return useListFormatter({ diff --git a/lib/ListFormatter/useListFormatter.js b/lib/ListFormatter/useListFormatter.js index 0115129..7189e75 100644 --- a/lib/ListFormatter/useListFormatter.js +++ b/lib/ListFormatter/useListFormatter.js @@ -1,14 +1,14 @@ -import { useIntl } from 'react-intl'; +import { useDateFormatter } from '../utils'; export const useListFormatter = (customFormatters = {}) => { - const intl = useIntl(); + const formatDate = useDateFormatter(); return { name: record => record.name, updated: record => { const { metadata: { updatedDate } } = record; - return intl.formatDate(updatedDate); + return formatDate(updatedDate); }, updatedBy: record => { if (!record.userInfo) { diff --git a/lib/utils/index.js b/lib/utils/index.js index b06fceb..177b1a7 100644 --- a/lib/utils/index.js +++ b/lib/utils/index.js @@ -10,3 +10,5 @@ export * from './constants'; export * from './folioRecordTypes'; export * from './useFormattedMCLProps'; export * from './formatTranslationChunks'; +export * from './useTimeFormatter'; +export * from './useDateFormatter'; diff --git a/lib/utils/iso8601Timestamp.js b/lib/utils/iso8601Timestamp.js new file mode 100644 index 0000000..c96b8ec --- /dev/null +++ b/lib/utils/iso8601Timestamp.js @@ -0,0 +1,18 @@ +/** + This is temp solution because stripes-components was released. + TODO: Update solution during the next release: Move useDateFormatter + and useTimeFormatter to stripes-components and remove them here. + */ +export const iso8601Timestamp = value => { + let tweakedValue = value; + + if (typeof value !== 'string') { + return tweakedValue; + } + + if (value.length === 28 && (value[23] === '+' || value[23] === '-')) { + tweakedValue = `${value.substring(0, 26)}:${value.substring(26, 28)}`; + } + + return tweakedValue; +}; diff --git a/lib/utils/useDateFormatter.js b/lib/utils/useDateFormatter.js new file mode 100644 index 0000000..5fe3747 --- /dev/null +++ b/lib/utils/useDateFormatter.js @@ -0,0 +1,9 @@ +import { useIntl } from 'react-intl'; + +import { iso8601Timestamp } from './iso8601Timestamp'; + +export const useDateFormatter = () => { + const intl = useIntl(); + + return date => intl.formatDate(iso8601Timestamp(date)); +}; diff --git a/lib/utils/useTimeFormatter.js b/lib/utils/useTimeFormatter.js new file mode 100644 index 0000000..aaba6c1 --- /dev/null +++ b/lib/utils/useTimeFormatter.js @@ -0,0 +1,9 @@ +import { useIntl } from 'react-intl'; + +import { iso8601Timestamp } from './iso8601Timestamp'; + +export const useTimeFormatter = () => { + const intl = useIntl(); + + return (time, options) => intl.formatTime(iso8601Timestamp(time), options); +};