Merge pull request #2653 from abrahamgnz/master

Add type check to PropType on OneOf
storybookjs · Feb 21, 2018 · acd5ab0 · acd5ab0
1 parent 250b4e8
commit acd5ab0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/addons/info/src/components/types/OneOf.js b/addons/info/src/components/types/OneOf.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import { TypeInfo, getPropTypes } from './proptypes';
 
-const OneOf = ({ propType }) => (
-  <span>
-    {getPropTypes(propType)
-      .map(({ value }) => value)
-      .join(' | ')}
-  </span>
-);
+const joinValues = propTypes => propTypes.map(({ value }) => value).join(' | ');
+
+const OneOf = ({ propType }) => {
+  const propTypes = getPropTypes(propType);
+  return <span>{`oneOf ${Array.isArray(propTypes) ? joinValues(propTypes) : propTypes}`}</span>;
+};
 
 OneOf.propTypes = {
   propType: TypeInfo.isRequired,

diff --git a/examples/official-storybook/components/DocgenButton.js b/examples/official-storybook/components/DocgenButton.js
@@ -105,6 +105,7 @@ DocgenButton.propTypes = {
    * `oneOf` is basically an Enum which is also supported but can be pretty big.
    */
   enm: PropTypes.oneOf(['News', 'Photos']),
+  enmEval: PropTypes.oneOf((() => ['News', 'Photos'])()),
   /**
    *  A multi-type prop is also valid and is displayed as `Union<String|Message>`
    */

diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -3592,6 +3592,31 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
                     class="css-d52hbj"
                   />
                 </tr>
+                <tr>
+                  <td
+                    class="css-1ygfcef"
+                  >
+                    enmEval
+                  </td>
+                  <td
+                    class="css-1ygfcef"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-d52hbj"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-d52hbj"
+                  />
+                </tr>
                 <tr>
                   <td
                     class="css-1ygfcef"