Rename Intl so you can use normal react-intl interface but only use our module
This commit is contained in:
parent
093852b9a5
commit
9a02e56800
7 changed files with 38 additions and 39 deletions
|
@ -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 <HoudiniIntlProvider locale="en">
|
||||
|
||||
return <IntlProvider locale="en">
|
||||
<Formik initialValues={{ value }} onSubmit={() => { console.log("submitted");}} enableReinitialize={true}>
|
||||
<FormikInner {...innerFormikProps} />
|
||||
</Formik>
|
||||
</HoudiniIntlProvider>;
|
||||
</IntlProvider>;
|
||||
}
|
||||
|
||||
FormikHandler.defaultProps = {
|
||||
|
|
|
@ -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<Types.UseI18nCurrencyInputP
|
|||
* @param setOutputAmount used for passing up output of the Hook
|
||||
*/
|
||||
export function useSerializeMoney(props:UseSerializeMoneyProps) : ReturnType<typeof useI18nCurrencyInput> {
|
||||
const intl = useHoudiniIntl();
|
||||
const intl = useIntl();
|
||||
const {locale} = intl;
|
||||
const {value, ...other} = props;
|
||||
const {amount, currency} = value;
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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<typeof IntlProvider>[0]} props
|
||||
* @param {ConstructorParameters<typeof IntlProviderParent>[0]} props
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
export default function HoudiniIntlProvider(props:ConstructorParameters<typeof IntlProvider>[0]) : JSX.Element {
|
||||
return <IntlProvider {...props}>
|
||||
export default function IntlProvider(props:ConstructorParameters<typeof IntlProviderParent>[0]) : JSX.Element {
|
||||
return <IntlProviderParent {...props}>
|
||||
<InnerProvider>
|
||||
{props.children}
|
||||
</InnerProvider>
|
||||
</IntlProvider>;
|
||||
</IntlProviderParent>;
|
||||
}
|
||||
|
||||
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 <HoudiniIntlContext.Provider value={houdiniIntl}>
|
||||
return <IntlContext.Provider value={houdiniIntl}>
|
||||
{children}
|
||||
</HoudiniIntlContext.Provider>;
|
||||
</IntlContext.Provider>;
|
||||
}
|
||||
|
||||
export function createHoudiniIntl(...props:Parameters<typeof createIntl>) : HoudiniIntlShape {
|
||||
const intl = createIntl(...props);
|
||||
export function createIntl(...props:Parameters<typeof createIntlParent>) : IntlShape {
|
||||
const intl = createIntlParent(...props);
|
||||
const formatMoney = (amount:Money, opts?:FormatMoneyOptions) => rawFormatMoney(intl, amount, opts);
|
||||
|
||||
return {...intl, formatMoney};
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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<any,any> {
|
|||
}
|
||||
|
||||
return (
|
||||
<HoudiniIntlProvider {...intlConfig} {...customProps}>
|
||||
<IntlProvider {...intlConfig} {...customProps}>
|
||||
{children}
|
||||
</HoudiniIntlProvider>
|
||||
</IntlProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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<FormatNumberOptions,'style'|'unit'|'unitDisplay'|'currency'>;
|
||||
export type FormatMoneyOptions = Omit<FormatNumberOptions,'style'|'unit'|'unitDisplay'|'currency'>;
|
||||
|
||||
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<HoudiniIntlShape>(null as HoudiniIntlShape);
|
||||
export const IntlContext = React.createContext<IntlShape>(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;
|
||||
}
|
Loading…
Reference in a new issue