fix: make value required only if useDashForInvalidValues is true

src/components/currency/currency.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Number from '../number/number';
 import variables from '../../variables';
+import { valuePropType } from '../../utils';
 
 /**
   This is the `<Currency /> component`
@@ -42,7 +43,7 @@ Currency.defaultProps = {
 };
 
 Currency.propTypes = {
-  value: PropTypes.any.isRequired, // eslint-disable-line
+  value: valuePropType,
   /**
     Syntactic sugar for `suffix` (either one can be used)
   */

src/components/development/development.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import NumberComponent from '../number/number';
 import CurrencyComponent from '../currency/currency';
 import PercentComponent from '../percent/percent';
+import { valuePropType } from '../../utils';
 
 function renderSign(direction) {
   switch (direction) {
@@ -88,7 +89,7 @@ export default function Development({
 
 Development.propTypes = {
   className: PropTypes.string,
-  value: PropTypes.any.isRequired, // eslint-disable-line
+  value: valuePropType,
   decimals: PropTypes.number,
   type: PropTypes.oneOf(['number', 'currency', 'percentage']),
   direction: PropTypes.oneOf(['positive', 'negative', 'neutral']),

src/components/number/number.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import Addon from '../addon/addon';
-import { getTickDecimals, getFractionDigits } from '../../utils';
+import { getTickDecimals, getFractionDigits, valuePropType } from '../../utils';
 
 /**
   This component is not intended for public use
@@ -88,7 +88,7 @@ NumberComponent.propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   useDashForInvalidValues: PropTypes.bool,
-  value: PropTypes.any.isRequired, // eslint-disable-line
+  value: valuePropType,
   valueClass: PropTypes.string,
   valueDecimals: PropTypes.number,
   valueMaxDecimals: PropTypes.number,

src/components/percent/percent.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Number from '../number/number';
+import { valuePropType } from '../../utils';
 
 /**
   This is the `<Percent /> component`
@@ -27,7 +28,7 @@ Percent.defaultProps = {
 };
 
 Percent.propTypes = {
-  value: PropTypes.any.isRequired, // eslint-disable-line
+  value: valuePropType,
   decimals: PropTypes.number,
   /**
     Default is an empty string (`''`)

src/components/value/value.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Number from '../number/number';
+import { valuePropType } from '../../utils';
 
 /**
   This is the `<Value /> component`
@@ -16,7 +17,7 @@ Value.defaultProps = {
 };
 
 Value.propTypes = {
-  value: PropTypes.any.isRequired, // eslint-disable-line
+  value: valuePropType,
   decimals: PropTypes.number,
   maxDecimals: PropTypes.number,
   minDecimals: PropTypes.number,

src/components/value/value.md

@@ -17,7 +17,7 @@ Simple examples:
         <Value prefix="Value:" prefixSeparator=" " value={ 2.4444 } />
       </span>
       <span style={{marginRight: '2rem'}} title="Invalid value with handling">
-        <Value useDashForInvalidValues value={ Number.NEGATIVE_INFINITY } />
+        <Value useDashForInvalidValues />
       </span>
       <span style={{marginRight: '2rem'}} title="Abbreviations">
         <Value value={ 1420000 } abbreviation="million"/>

src/utils.js

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 export function numberIsFinite(value) {
   return typeof value === 'number' && isFinite(value); // eslint-disable-line
 }
@@ -22,3 +24,21 @@ export const getDevelopmentPercentage = (previous, current) => {
   }
   return (current / previous - 1) * 100;
 };
+
+const propTypeValue = {
+  value: PropTypes.any,
+};
+
+const propTypeValueRequired = {
+  value: PropTypes.any.isRequired,
+};
+
+export const valuePropType = (props, propName, componentName) => {
+  const { useDashForInvalidValues } = props;
+
+  if (useDashForInvalidValues) {
+    return PropTypes.checkPropTypes(propTypeValue, props, propName, componentName);
+  }
+
+  return PropTypes.checkPropTypes(propTypeValueRequired, props, propName, componentName);
+};