diff --git a/README.md b/README.md index cc2c3bb..dd2f005 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![Build Status](https://travis-ci.org/frostney/react-intl-native.svg?branch=master)](https://travis-ci.org/frostney/react-intl-native) [![Dependency Status](https://david-dm.org/frostney/react-intl-native.svg)](https://david-dm.org/frostney/react-intl-native) [![devDependency Status](https://david-dm.org/frostney/react-intl-native/dev-status.svg)](https://david-dm.org/frostney/react-intl-native#info=devDependencies) [![codecov.io](https://codecov.io/github/frostney/react-intl-native/coverage.svg?branch=master)](https://codecov.io/github/frostney/react-intl-native?branch=master) -`react-intl` convinience components for React Native +`react-intl` convenience components for React Native While `react-intl` allows us to use `formatMessage` or passing in a function, this becomes tiresome if you have to do this for each. This module does the latter and wraps it all in a `Text` component allowing you to pass in `style` to provide custom styling. @@ -41,6 +41,7 @@ More information on date formatting options: https://github.com/yahoo/react-intl ```jsx ``` @@ -49,16 +50,19 @@ More information on date formatting options: https://github.com/yahoo/react-intl ```jsx ``` #### FormattedNumber -This is the only component that differs slightly from the original component. For the formatting style you need to use `formatStyle` instead of `style`. `style` is being reserved for the component styling. +This is one of the components that differs slightly from the original component. For the formatting style you need to use +`formatStyle` instead of `style`. `style` is reserved for the component styling. ```jsx ``` @@ -66,22 +70,28 @@ This is the only component that differs slightly from the original component. Fo More information on number formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattednumber #### FormattedPlural +This is one of the components that differs slightly from the original component. For the formatting style you need to use +`formatStyle` instead of `style`. `style` is reserved for the component styling. ```jsx ``` More information on plural formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattedplural #### FormattedRelative +This is one of the components that differs slightly from the original component. For the formatting style you need to use +`formatStyle` instead of `style`. `style` is reserved for the component styling. ```jsx ``` diff --git a/package.json b/package.json index 7e2db3f..5ca52c3 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "name": "react-intl-native", "version": "2.1.1", "description": "Convenience components for react-intl's `format*` API in React Native", - "main": "dist/react-intl-native.js", - "jsnext:main": "dist/react-intl-native.es2015.js", + "main": "src/index.js", + "jsnext:main": "src/index.js", "scripts": { "prebuild": "rimraf dist", "build": "rollup-babel-lib-bundler -f cjs,es6 src/index.js", @@ -55,6 +55,7 @@ }, "homepage": "https://github.com/frostney/react-intl-native#readme", "dependencies": { + "prop-types": "^15.6.0", "react-intl": "^2.1.2" }, "devDependencies": { @@ -77,9 +78,9 @@ "in-publish": "^2.0.0", "jsdom": "^9.12.0", "nyc": "^6.4.0", - "react": "^0.14.8", + "react": "^0.14.9", "react-addons-test-utils": "^0.14.8", - "react-dom": "^0.14.8", + "react-dom": "^0.14.9", "react-native": "^0.25.1", "rimraf": "^2.5.2", "rollup-babel-lib-bundler": "^2.5.5" diff --git a/src/FormattedDate.js b/src/FormattedDate.js index 9d3baf7..bd6575d 100644 --- a/src/FormattedDate.js +++ b/src/FormattedDate.js @@ -1,6 +1,7 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; const FormattedDate = props => ( @@ -10,6 +11,21 @@ const FormattedDate = props => ( FormattedDate.propTypes = { style: PropTypes.any, + localeMatcher: PropTypes.oneOf(['best fit', 'lookup']), + formatMatcher: PropTypes.oneOf(['basic', 'best fit']), + + timeZone: PropTypes.string, + hour12: PropTypes.bool, + + weekday: PropTypes.oneOf(['narrow', 'short', 'long']), + era: PropTypes.oneOf(['narrow', 'short', 'long']), + year: PropTypes.oneOf(['numeric', '2-digit']), + month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']), + day: PropTypes.oneOf(['numeric', '2-digit']), + hour: PropTypes.oneOf(['numeric', '2-digit']), + minute: PropTypes.oneOf(['numeric', '2-digit']), + second: PropTypes.oneOf(['numeric', '2-digit']), + timeZoneName: PropTypes.oneOf(['short', 'long']), }; export default FormattedDate; diff --git a/src/FormattedHTMLMessage.js b/src/FormattedHTMLMessage.js index 70c1e2f..4226882 100644 --- a/src/FormattedHTMLMessage.js +++ b/src/FormattedHTMLMessage.js @@ -1,6 +1,7 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; const FormattedHTMLMessage = props => ( @@ -9,7 +10,13 @@ const FormattedHTMLMessage = props => ( ); FormattedHTMLMessage.propTypes = { + id: PropTypes.string.isRequired, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + defaultMessage: PropTypes.string, style: PropTypes.any, + values: PropTypes.object, + tagName: PropTypes.string, + children: PropTypes.func, }; export default FormattedHTMLMessage; diff --git a/src/FormattedMessage.js b/src/FormattedMessage.js index 42f60e4..75abdcc 100644 --- a/src/FormattedMessage.js +++ b/src/FormattedMessage.js @@ -1,6 +1,7 @@ -import React, { PropTypes, isValidElement, createElement } from 'react'; +import React, { isValidElement, createElement } from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; const FormattedMessage = props => ( @@ -18,6 +19,12 @@ const FormattedMessage = props => ( FormattedMessage.propTypes = { style: PropTypes.any, + values: PropTypes.object, + tagName: PropTypes.string, + children: PropTypes.func, + id: PropTypes.string.isRequired, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + defaultMessage: PropTypes.string, }; export default FormattedMessage; diff --git a/src/FormattedNumber.js b/src/FormattedNumber.js index d1ae73b..32ddae8 100644 --- a/src/FormattedNumber.js +++ b/src/FormattedNumber.js @@ -1,23 +1,14 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; const FormattedNumber = props => { const style = props.style; - const formatOptions = { - localeMatcher: props.localeMatcher, - style: props.formatStyle, - currency: props.currency, - currencyDisplay: props.currencyDisplay, - useGrouping: props.useGrouping, - minimumIntegerDigits: props.minimumIntegerDigits, - minimumFractionDigits: props.minimumFractionDigits, - maximumFractionDigits: props.maximumFractionDigits, - minimumSignificantDigits: props.minimumSignificantDigits, - maximumSignificantDigits: props.maximumSignificantDigits, - value: props.value, - }; + let formatOptions = {...props}; + delete formatOptions.formatStyle + formatOptions.style=props.formatStyle return ( @@ -27,18 +18,22 @@ const FormattedNumber = props => { }; FormattedNumber.propTypes = { - style: PropTypes.any, - localeMatcher: PropTypes.any, - formatStyle: PropTypes.any, - currency: PropTypes.any, - currencyDisplay: PropTypes.any, - useGrouping: PropTypes.any, - minimumIntegerDigits: PropTypes.any, - minimumFractionDigits: PropTypes.any, - maximumFractionDigits: PropTypes.any, - minimumSignificantDigits: PropTypes.any, - maximumSignificantDigits: PropTypes.any, - value: PropTypes.any, + value: PropTypes.any.isRequired, + format: PropTypes.string, + children: PropTypes.func, + localeMatcher: PropTypes.oneOf(['best fit', 'lookup']), + + style: PropTypes.any, + formatStyle: PropTypes.oneOf(['decimal', 'currency', 'percent']), + currency: PropTypes.string, + currencyDisplay: PropTypes.oneOf(['symbol', 'code', 'name']), + useGrouping: PropTypes.bool, + + minimumIntegerDigits: PropTypes.number, + minimumFractionDigits: PropTypes.number, + maximumFractionDigits: PropTypes.number, + minimumSignificantDigits: PropTypes.number, + maximumSignificantDigits: PropTypes.number, }; export default FormattedNumber; diff --git a/src/FormattedPlural.js b/src/FormattedPlural.js index ae93681..06703e8 100644 --- a/src/FormattedPlural.js +++ b/src/FormattedPlural.js @@ -1,15 +1,33 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; -const FormattedPlural = props => ( - +const FormattedPlural = props => { + let propsCopy = {...props} + delete propsCopy.style + + if ("formatStyle" in props) { + propsCopy.style = props.formatStyle + } + + return ( + {localized => {localized}} -); +)}; FormattedPlural.propTypes = { + formatStyle: PropTypes.oneOf(['cardinal', 'ordinal']), style: PropTypes.any, + value: PropTypes.any.isRequired, + other: PropTypes.node.isRequired, + zero: PropTypes.node, + one: PropTypes.node, + two: PropTypes.node, + few: PropTypes.node, + many: PropTypes.node, + children: PropTypes.func, }; export default FormattedPlural; diff --git a/src/FormattedRelative.js b/src/FormattedRelative.js index e657e5c..67bcc57 100644 --- a/src/FormattedRelative.js +++ b/src/FormattedRelative.js @@ -1,15 +1,32 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; -const FormattedRelative = props => ( - - {localized => {localized}} - -); +const FormattedRelative = props => { + let propsCopy = {...props} + delete propsCopy.style + + if ("formatStyle" in props) { + propsCopy.style = props.formatStyle + } + + return ( + + {localized => {localized}} + + ) +}; FormattedRelative.propTypes = { style: PropTypes.any, + formatStyle: PropTypes.oneOf(['best fit', 'numeric']), + units: PropTypes.oneOf(['second', 'minute', 'hour', 'day', 'month', 'year']), + value: PropTypes.any.isRequired, + format: PropTypes.string, + updateInterval: PropTypes.number, + initialNow: PropTypes.any, + children: PropTypes.func, }; export default FormattedRelative; diff --git a/src/FormattedTime.js b/src/FormattedTime.js index 29c023e..43e1028 100644 --- a/src/FormattedTime.js +++ b/src/FormattedTime.js @@ -1,6 +1,7 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; -import Intl from 'react-intl'; +import * as Intl from 'react-intl'; const FormattedTime = props => ( @@ -10,6 +11,21 @@ const FormattedTime = props => ( FormattedTime.propTypes = { style: PropTypes.any, + localeMatcher: PropTypes.oneOf(['best fit', 'lookup']), + formatMatcher: PropTypes.oneOf(['basic', 'best fit']), + + timeZone: PropTypes.string, + hour12: PropTypes.bool, + + weekday: PropTypes.oneOf(['narrow', 'short', 'long']), + era: PropTypes.oneOf(['narrow', 'short', 'long']), + year: PropTypes.oneOf(['numeric', '2-digit']), + month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']), + day: PropTypes.oneOf(['numeric', '2-digit']), + hour: PropTypes.oneOf(['numeric', '2-digit']), + minute: PropTypes.oneOf(['numeric', '2-digit']), + second: PropTypes.oneOf(['numeric', '2-digit']), + timeZoneName: PropTypes.oneOf(['short', 'long']), }; export default FormattedTime;