-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
STCOM-1094 Supply DayJS/moment conversion utilities. (#2238)
* progress * timepicker converted * add dynamic locale hook, fix tests for datepicker, Calendar, timepicker * cleanup bugs in calendar - thanks SonarDad! * more SonarDad feedback on Calendar/Timepicker * re-export dayjs from stripes-components * remove commented code from Timepicker * remove duplicate imports in dateTimeUtils * one more time... eyes and webpack cache killing me * add Dayjs Range utility class * add tests for DayRange methods * remove only * export DayRange * semicolons * add inclusive parameter to DayRange#contains * add locale-loading utilities to stripes-components * remove only * expand testing for loadDayJSLocale * update date/time documentation * account for undefined timezone in datepicker * move array format parsing to dateTimeUtils * reset Datepicker, timepicker components to pre-conversion state. * fix formatting in timepicker tests * switch getLocalizedFormat back to falling back to moment * fix comments/naming * test timepicker with respect to provided timezones * Update CHANGELOG.md
- Loading branch information
Showing
11 changed files
with
609 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import useDynamicLocale from './useDynamicLocale'; | ||
|
|
||
| const DynamicLocaleRenderer = ({ children, onLoaded }) => { | ||
| const { localeLoaded, isEnglishLang } = useDynamicLocale(); | ||
| useEffect(() => { | ||
| if (localeLoaded) { | ||
| onLoaded({ isEnglishLang }); | ||
| } | ||
| }, [localeLoaded, onLoaded, isEnglishLang]); | ||
| return localeLoaded ? children : null; | ||
| }; | ||
|
|
||
| DynamicLocaleRenderer.propTypes = { | ||
| children: PropTypes.node, | ||
| onLoaded: PropTypes.func, | ||
| }; | ||
|
|
||
| export default DynamicLocaleRenderer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { default as useDynamicLocale } from './useDynamicLocale'; | ||
| export { default as DynamicLocaleRenderer } from './DynamicLocaleRenderer'; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import React from 'react'; | ||
| import { IntlContext } from 'react-intl'; | ||
| import { loadDayJSLocale } from '../../util/dateTimeUtils'; | ||
|
|
||
| const isEnglishLang = (locale) => { | ||
| return /^en/.test(locale); | ||
| }; | ||
|
|
||
| /** | ||
| * @typedef {Object} dynamicLocaleInfo | ||
| * @property {boolean} localeLoaded - whether the a new locale has loaded or not. | ||
| * @property {boolean} isEnglish - a boolean for whether or not the requested locale is English, DayJS' default, which is always loaded. | ||
| */ | ||
|
|
||
| /** | ||
| * useDynamicLocale - | ||
| * React hook that loads a DayJS locale. | ||
| * | ||
| * @returns {dynamicLocaleInfo} | ||
| * @param {Object} hookParams | ||
| * @param {String} hookParams.locale - locale string ex : 'en-SE' | ||
| * @returns {dynamicLocaleInfo} | ||
| */ | ||
| const useDynamicLocale = ({ locale : localeProp } = {}) => { | ||
| const { locale: localeContext } = React.useContext(IntlContext); | ||
| const [localeLoaded, setLocaleLoaded] = React.useState( | ||
| localeProp ? isEnglishLang(localeProp) : | ||
| isEnglishLang(localeContext) | ||
| ); | ||
| const [prevLocale, updatePrevLocale] = React.useState(localeProp || localeContext); | ||
| const locale = localeProp || localeContext; | ||
|
|
||
| React.useEffect(() => { | ||
| const localeCallback = (loadedLocale, err) => { | ||
| if (!err) { | ||
| setLocaleLoaded(true); | ||
| } | ||
| }; | ||
|
|
||
| loadDayJSLocale(locale, localeCallback); | ||
| }, [localeLoaded, locale, prevLocale]); | ||
|
|
||
| if (locale !== prevLocale) { | ||
| updatePrevLocale(localeProp || localeContext); | ||
| setLocaleLoaded(localeProp ? isEnglishLang(localeProp) : isEnglishLang(localeContext)); | ||
| } | ||
|
|
||
| return { | ||
| localeLoaded, | ||
| isEnglish: localeProp ? localeProp === 'en' : localeContext === 'en' | ||
| }; | ||
| }; | ||
|
|
||
| export default useDynamicLocale; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| # Date/time utilities | ||
|
|
||
| ### Pre-extended DayJS | ||
|
|
||
| To reduce overhead from repeated `extend()` calls throughout the codebase, we export a single, pre-extended dayjs. [See the Code](./dateTimeUtils.js) for the list of included extensions. | ||
|
|
||
| FOLIO ui-modules *do not* need to add dayjs to their `package.json`. | ||
|
|
||
| [See DayJS documentation for DayJS usage guidance.](https://day.js.org/docs/en/parse/parse) | ||
|
|
||
| ### DayRange Utility Class | ||
|
|
||
| convenience class for validating date ranges. | ||
|
|
||
| ``` | ||
| new DayRange(startDayJS, endDayJS); | ||
| ``` | ||
|
|
||
| | method | parameters | description | | ||
| |------- | ---------- | ----------- | | ||
| | isSame | candidate(DayRange) | Returns `true` if day ranges are the same (matching start and end days.) | | ||
| | contains | candidate(datestring, DayRange, DayJS) | Returns `true` if candidate is between the start and end days. | | ||
| | overlaps | candidate(DayRange) | Returns `true` if candidate DayRange overlaps with the owning DayRange. | | ||
|
|
||
| ### Loading DayJS locales. | ||
|
|
||
| To reduce bundle size, DayJS does not automatically bundle all static locales. UI module code should typically *NOT* have to load DayJS locale information in UI code since this is handled by `stripes-core` when a user changes the current platform locale. It will match the locale to the appropriate DayJS locale. | ||
|
|
||
| ``` | ||
| import { loadDayJSLocale } from '@folio/stripes/components'; | ||
| loadDayJSLocale(intl.locale); | ||
| or | ||
| loadDayJSLocale('ru'); | ||
| or | ||
| loadDayJSLocale('en-SE'); | ||
| ``` | ||
|
|
||
| In addition to this, hooks and react-based utilities are also provided. | ||
|
|
||
| ### Locale date time format | ||
|
|
||
| Obtaining locale-aware date/time format information can be performed via `getLocaleDateFormat()` ex: `DD.MM.YYYY`. It should be provided the `intl` object, or an object with a `locale` key. | ||
|
|
||
| It defaults to return the long date format, but can be configured to return time formats as well, sharing configuration options with [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options) | ||
|
|
||
| ``` | ||
| import { getLocaleDateFormat } from '@folio/stripes/components'; | ||
| const format = getLocaleDateFormat({ intl }); // returns 'MM/DD/YYYY' | ||
| const timeFormat = getLocaleDateFormat({ intl, config: { hour: "numeric", | ||
| minute: "numeric" }}) // returns 'h:mm A' | ||
| ``` | ||
|
|
Oops, something went wrong.