From 17d78083187e18c8b9c9386ea3785673f75f3029 Mon Sep 17 00:00:00 2001 From: Dustin Savery Date: Tue, 7 Nov 2017 12:01:46 -0800 Subject: [PATCH 1/5] Adding new prop-types library --- package.json | 5 +++-- src/FormattedDate.js | 3 ++- src/FormattedHTMLMessage.js | 3 ++- src/FormattedMessage.js | 3 ++- src/FormattedNumber.js | 3 ++- src/FormattedPlural.js | 3 ++- src/FormattedRelative.js | 3 ++- src/FormattedTime.js | 3 ++- 8 files changed, 17 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 7e2db3f..0b75570 100644 --- a/package.json +++ b/package.json @@ -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..4f98fe8 100644 --- a/src/FormattedDate.js +++ b/src/FormattedDate.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; import Intl from 'react-intl'; diff --git a/src/FormattedHTMLMessage.js b/src/FormattedHTMLMessage.js index 70c1e2f..66adccd 100644 --- a/src/FormattedHTMLMessage.js +++ b/src/FormattedHTMLMessage.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; import Intl from 'react-intl'; diff --git a/src/FormattedMessage.js b/src/FormattedMessage.js index 42f60e4..236c89b 100644 --- a/src/FormattedMessage.js +++ b/src/FormattedMessage.js @@ -1,4 +1,5 @@ -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'; diff --git a/src/FormattedNumber.js b/src/FormattedNumber.js index d1ae73b..45d7ea7 100644 --- a/src/FormattedNumber.js +++ b/src/FormattedNumber.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; import Intl from 'react-intl'; diff --git a/src/FormattedPlural.js b/src/FormattedPlural.js index ae93681..b853b0d 100644 --- a/src/FormattedPlural.js +++ b/src/FormattedPlural.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; import Intl from 'react-intl'; diff --git a/src/FormattedRelative.js b/src/FormattedRelative.js index e657e5c..06a3c80 100644 --- a/src/FormattedRelative.js +++ b/src/FormattedRelative.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; import Intl from 'react-intl'; diff --git a/src/FormattedTime.js b/src/FormattedTime.js index 29c023e..a45ffa8 100644 --- a/src/FormattedTime.js +++ b/src/FormattedTime.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { Text } from 'react-native'; import Intl from 'react-intl'; From 92bc57f08e83e2263424f4cd2b0883569532e2af Mon Sep 17 00:00:00 2001 From: "Howard, Chang" Date: Wed, 15 Nov 2017 15:19:05 +0100 Subject: [PATCH 2/5] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7e2db3f..a88f918 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/react-intl-native.js", + "jsnext:main": "src/react-intl-native.es2015.js", "scripts": { "prebuild": "rimraf dist", "build": "rollup-babel-lib-bundler -f cjs,es6 src/index.js", From 1eaf3f6c136ac684b9dd7b49ef52f1252df6f9c0 Mon Sep 17 00:00:00 2001 From: "Howard, Chang" Date: Wed, 15 Nov 2017 15:23:38 +0100 Subject: [PATCH 3/5] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0b75570..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", From 08ab8a4c509b109d1edf57469acb74125fa4823c Mon Sep 17 00:00:00 2001 From: Edward Akerboom Date: Tue, 9 Jan 2018 13:40:19 +0100 Subject: [PATCH 4/5] =?UTF-8?q?Added=20real=20PropTypes,=20added=20?= =?UTF-8?q?=E2=80=98formatStyle=E2=80=99=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/FormattedDate.js | 17 +++++++++++++- src/FormattedHTMLMessage.js | 8 ++++++- src/FormattedMessage.js | 8 ++++++- src/FormattedNumber.js | 46 ++++++++++++++++--------------------- src/FormattedPlural.js | 25 ++++++++++++++++---- src/FormattedRelative.js | 28 +++++++++++++++++----- src/FormattedTime.js | 17 +++++++++++++- 7 files changed, 109 insertions(+), 40 deletions(-) diff --git a/src/FormattedDate.js b/src/FormattedDate.js index 4f98fe8..bd6575d 100644 --- a/src/FormattedDate.js +++ b/src/FormattedDate.js @@ -1,7 +1,7 @@ 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 => ( @@ -11,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 66adccd..4226882 100644 --- a/src/FormattedHTMLMessage.js +++ b/src/FormattedHTMLMessage.js @@ -1,7 +1,7 @@ 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 => ( @@ -10,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 236c89b..75abdcc 100644 --- a/src/FormattedMessage.js +++ b/src/FormattedMessage.js @@ -1,7 +1,7 @@ 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 => ( @@ -19,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 45d7ea7..32ddae8 100644 --- a/src/FormattedNumber.js +++ b/src/FormattedNumber.js @@ -1,24 +1,14 @@ 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 ( @@ -28,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 b853b0d..06703e8 100644 --- a/src/FormattedPlural.js +++ b/src/FormattedPlural.js @@ -1,16 +1,33 @@ 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 06a3c80..67bcc57 100644 --- a/src/FormattedRelative.js +++ b/src/FormattedRelative.js @@ -1,16 +1,32 @@ 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 a45ffa8..43e1028 100644 --- a/src/FormattedTime.js +++ b/src/FormattedTime.js @@ -1,7 +1,7 @@ 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 => ( @@ -11,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; From cc56db0cc36f397046dbc32c74ff617b86813a40 Mon Sep 17 00:00:00 2001 From: Edward Akerboom Date: Tue, 9 Jan 2018 13:46:04 +0100 Subject: [PATCH 5/5] Updated documentation --- README.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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 ```