diff --git a/app/javascript/components/formik/MoneyTextField.spec.tsx b/app/javascript/components/formik/MoneyTextField.spec.tsx index f9cfdef3..edecb188 100644 --- a/app/javascript/components/formik/MoneyTextField.spec.tsx +++ b/app/javascript/components/formik/MoneyTextField.spec.tsx @@ -9,9 +9,7 @@ import '@testing-library/jest-dom/extend-expect'; import {MoneyTextField} from './index'; import { Field, Formik, useFormikContext } from 'formik'; import { Money } from '../../common/money'; -import { HoudiniIntlProvider } from '../intl'; - - +import { IntlProvider } from '../intl'; function FormikInner(props: { onChange:(args:{value:Money})=> void}) { @@ -29,12 +27,11 @@ function FormikInner(props: { onChange:(args:{value:Money})=> void}) { function FormikHandler(props: { onChange:(args:{value:Money})=> void, value: Money}) { const {value, ...innerFormikProps} = props; - return - + return { console.log("submitted");}} enableReinitialize={true}> - ; + ; } FormikHandler.defaultProps = { diff --git a/app/javascript/components/formik/MoneyTextField.tsx b/app/javascript/components/formik/MoneyTextField.tsx index 8f5d247b..e82277ad 100644 --- a/app/javascript/components/formik/MoneyTextField.tsx +++ b/app/javascript/components/formik/MoneyTextField.tsx @@ -5,7 +5,7 @@ import * as React from "react"; import MuiTextField from '@material-ui/core/TextField'; import { fieldToTextField, TextFieldProps } from 'formik-material-ui'; import { Money } from "../../common/money"; -import { useHoudiniIntl } from "../intl"; +import { useIntl } from "../intl"; import { useEffect, useRef } from "react"; import {useI18nCurrencyInput, Types} from '@houdiniproject/react-i18n-currency-input'; @@ -28,7 +28,7 @@ export interface UseSerializeMoneyProps extends Omit { - const intl = useHoudiniIntl(); + const intl = useIntl(); const {locale} = intl; const {value, ...other} = props; const {amount, currency} = value; diff --git a/app/javascript/components/intl/HoudiniIntl.spec.tsx b/app/javascript/components/intl/HoudiniIntl.spec.tsx index 4601349e..7b5f363a 100644 --- a/app/javascript/components/intl/HoudiniIntl.spec.tsx +++ b/app/javascript/components/intl/HoudiniIntl.spec.tsx @@ -1,5 +1,5 @@ // License: LGPL-3.0-or-later -import { createHoudiniIntl, FormatMoneyOptions } from "./"; +import { createIntl, FormatMoneyOptions } from "./"; import { Money } from "../../common/money"; const NBSP = '\xa0'; @@ -7,7 +7,7 @@ let tests:Array<[Money, FormatMoneyOptions, string]>; describe('formatMoney', () => { describe('en', () => { - const intl = createHoudiniIntl({locale: 'en'}); + const intl = createIntl({locale: 'en'}); const oneDollar = Money.fromCents(100, 'usd'); const oneThousandDollars = Money.fromCents(100000, 'usd'); const oneThousandDollarsTenCents = Money.fromCents(100010, 'usd'); diff --git a/app/javascript/components/intl/HoudiniIntl.tsx b/app/javascript/components/intl/HoudiniIntl.tsx index feb63319..2823ce1f 100644 --- a/app/javascript/components/intl/HoudiniIntl.tsx +++ b/app/javascript/components/intl/HoudiniIntl.tsx @@ -1,12 +1,16 @@ // License: LGPL-3.0-or-later import * as React from "react"; -import { useIntl, IntlShape, IntlProvider, createIntl} from "react-intl"; +import { useIntl as useIntlParent, + IntlShape as IntlShapeParent, + IntlProvider as IntlProviderParent, + createIntl as createIntlParent} from "react-intl"; import { Money } from "../../common/money"; -import { HoudiniIntlContext } from "../../hooks/useHoudiniIntl"; -import type {HoudiniIntlShape, FormatMoneyOptions} from '../../hooks/useHoudiniIntl'; +import { IntlContext } from "../../hooks/useIntl"; +import type {IntlShape, FormatMoneyOptions} from '../../hooks/useIntl'; -function rawFormatMoney(intl:IntlShape, amount:Money, opts?:FormatMoneyOptions) : string { + +function rawFormatMoney(intl:IntlShapeParent, amount:Money, opts?:FormatMoneyOptions) : string { const formatter = intl.formatters.getNumberFormat(intl.locale, {...opts, style: 'currency', currency: amount.currency.toUpperCase(), @@ -22,31 +26,31 @@ function rawFormatMoney(intl:IntlShape, amount:Money, opts?:FormatMoneyOptions) * But includes support for formatting money based on the current locale. * * @export - * @param {ConstructorParameters[0]} props + * @param {ConstructorParameters[0]} props * @returns {JSX.Element} */ -export default function HoudiniIntlProvider(props:ConstructorParameters[0]) : JSX.Element { - return +export default function IntlProvider(props:ConstructorParameters[0]) : JSX.Element { + return {props.children} - ; + ; } function InnerProvider({children}:{children:React.ReactNode}) : JSX.Element { - const intl = useIntl(); + const intl = useIntlParent(); const formatMoney = React.useCallback((amount:Money, opts?:FormatMoneyOptions) => { return rawFormatMoney(intl, amount, opts); }, [intl]); const houdiniIntl = { ...intl, formatMoney}; - return + return {children} - ; + ; } -export function createHoudiniIntl(...props:Parameters) : HoudiniIntlShape { - const intl = createIntl(...props); +export function createIntl(...props:Parameters) : IntlShape { + const intl = createIntlParent(...props); const formatMoney = (amount:Money, opts?:FormatMoneyOptions) => rawFormatMoney(intl, amount, opts); return {...intl, formatMoney}; diff --git a/app/javascript/components/intl/index.ts b/app/javascript/components/intl/index.ts index c9d8292b..a82e543b 100644 --- a/app/javascript/components/intl/index.ts +++ b/app/javascript/components/intl/index.ts @@ -1,7 +1,5 @@ // License: LGPL-3.0-or-later -import useHoudiniIntlDefault from '../../hooks/useHoudiniIntl'; -import HoudiniIntlProviderDefault from './HoudiniIntl'; -export const useHoudiniIntl = useHoudiniIntlDefault; -export const HoudiniIntlProvider = HoudiniIntlProviderDefault; -export type {HoudiniIntlShape, FormatMoneyOptions} from '../../hooks/useHoudiniIntl'; -export {createHoudiniIntl} from './HoudiniIntl'; +export * from 'react-intl'; +export {default as useIntl} from '../../hooks/useIntl'; +export type {IntlShape, FormatMoneyOptions} from '../../hooks/useIntl'; +export {default as IntlProvider, createIntl} from './HoudiniIntl'; diff --git a/app/javascript/components/tests/intl/index.tsx b/app/javascript/components/tests/intl/index.tsx index f7098f85..8d7580b4 100644 --- a/app/javascript/components/tests/intl/index.tsx +++ b/app/javascript/components/tests/intl/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import addons from '@storybook/addons'; import omit from 'lodash/omit'; -import { HoudiniIntlProvider} from '../../intl'; +import { IntlProvider} from '../../intl'; export let _config:any = null; const EVENT_SET_CONFIG_ID = "intl/set_config"; @@ -59,9 +59,9 @@ class WithIntl extends React.Component { } return ( - + {children} - + ); } diff --git a/app/javascript/hooks/useHoudiniIntl.ts b/app/javascript/hooks/useIntl.ts similarity index 53% rename from app/javascript/hooks/useHoudiniIntl.ts rename to app/javascript/hooks/useIntl.ts index 0bd91bb4..6fbeb19f 100644 --- a/app/javascript/hooks/useHoudiniIntl.ts +++ b/app/javascript/hooks/useIntl.ts @@ -1,11 +1,11 @@ // License: LGPL-3.0-or-later import * as React from "react"; -import type { FormatNumberOptions, IntlShape } from "react-intl"; +import type { FormatNumberOptions, IntlShape as ParentIntlShape } from "react-intl"; import { Money } from "../common/money"; -export declare type FormatMoneyOptions = Omit; +export type FormatMoneyOptions = Omit; -export declare type HoudiniIntlShape = IntlShape & { +export type IntlShape = ParentIntlShape & { /** * Format a monetary value as a string given the locale * @@ -16,15 +16,15 @@ export declare type HoudiniIntlShape = IntlShape & { formatMoney(amount: Money, opts?: FormatMoneyOptions): string; }; -export const HoudiniIntlContext = React.createContext(null as HoudiniIntlShape); +export const IntlContext = React.createContext(null as IntlShape); /** * Use just like `useIntl` for getting strings for the current locale. * * @export - * @returns {HoudiniIntlShape} + * @returns {IntlShape} */ -export default function useHoudiniIntl() : HoudiniIntlShape { - const context = React.useContext(HoudiniIntlContext); +export default function useIntl() : IntlShape { + const context = React.useContext(IntlContext); return context; } \ No newline at end of file