[Playground] Created iconValidator util (#3820)

elastic · Jul 30, 2020 · 472062b · 472062b
1 parent 57b8cae
commit 472062b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 46 deletions.
diff --git a/src-docs/src/services/playground/iconValidator.js b/src-docs/src/services/playground/iconValidator.js
@@ -0,0 +1,18 @@
+import { iconTypes } from '../../views/icon/icons';
+import { mapOptions } from './mapOptions';
+import { PropTypes } from 'react-view';
+
+const iconOptions = mapOptions(iconTypes);
+
+export const iconValidator = prop => {
+  const newProp = {
+    ...prop,
+    value: undefined,
+    type: PropTypes.String,
+    custom: {
+      ...prop.custom,
+      validator: val => iconOptions[val],
+    },
+  };
+  return newProp;
+};
diff --git a/src-docs/src/services/playground/index.js b/src-docs/src/services/playground/index.js
@@ -2,3 +2,4 @@ export { default as playgroundCreator } from './playground';
 export { default as Knobs } from './knobs';
 export { default as propUtilityForPlayground } from './props';
 export { mapOptions } from './mapOptions';
+export { iconValidator } from './iconValidator';
diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js
@@ -6,13 +6,10 @@ import {
 } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  mapOptions,
+  iconValidator,
 } from '../../services/playground';
-import { iconTypes } from '../icon/icons';
 import * as t from '@babel/types';
 
-const iconOptions = mapOptions(iconTypes);
-
 export const badgeConfig = () => {
   const docgenInfo = Array.isArray(EuiBadge.__docgenInfo)
     ? EuiBadge.__docgenInfo[0]
@@ -70,15 +67,7 @@ export const badgeConfig = () => {
     type: PropTypes.String,
   };
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => iconOptions[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   propsToUse.color = {
     ...propsToUse.color,
@@ -132,15 +121,7 @@ export const betaBadgeConfig = () => {
     type: PropTypes.String,
   };
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => iconOptions[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   return {
     config: {

diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
@@ -2,26 +2,16 @@ import { PropTypes } from 'react-view';
 import { EuiButton } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  mapOptions,
+  iconValidator,
 } from '../../services/playground';
-import { iconTypes } from '../icon/icons';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiButton.__docgenInfo)
     ? EuiButton.__docgenInfo[0]
     : EuiButton.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
-  const options = mapOptions(iconTypes);
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => options[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   propsToUse.children = {
     value: 'Button',

diff --git a/src-docs/src/views/call_out/playground.js b/src-docs/src/views/call_out/playground.js
@@ -2,26 +2,16 @@ import { PropTypes } from 'react-view';
 import { EuiCallOut, EuiText } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  mapOptions,
+  iconValidator,
 } from '../../services/playground';
-import { iconTypes } from '../icon/icons';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiCallOut.__docgenInfo)
     ? EuiCallOut.__docgenInfo[0]
     : EuiCallOut.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
-  const options = mapOptions(iconTypes);
 
-  propsToUse.iconType = {
-    ...propsToUse.iconType,
-    value: undefined,
-    type: PropTypes.String,
-    custom: {
-      ...propsToUse.iconType.custom,
-      validator: val => options[val],
-    },
-  };
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
 
   propsToUse.title = {
     ...propsToUse.title,