feat: add allowCreate

stoplightio · Jan 30, 2019 · 315d9b5 · 315d9b5
1 parent 26c06f0
commit 315d9b5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/src/Select.tsx b/src/Select.tsx
@@ -33,6 +33,8 @@ export interface ISelectBaseProps {
   blurOnSelect?: boolean; // blurInputOnSelect
   closeOnSelect?: boolean;
   closeOnScroll?: boolean;
+
+  allowCreate?: boolean;
 }
 
 export interface ISelectProps
@@ -79,6 +81,8 @@ export const Select: React.FunctionComponent<ISelect> = props => {
     loadingMessage = 'Loading...',
     noOptionsMessage = 'No Options',
 
+    allowCreate = false,
+
     ...selectProps
   } = props;
 
@@ -105,15 +109,15 @@ export const Select: React.FunctionComponent<ISelect> = props => {
     styles: customStyles(),
   };
 
-  if ('loadOptions' in props && 'onCreateOption' in props) {
+  if ('loadOptions' in props && ('onCreateOption' in props || allowCreate)) {
     return <ReactAsyncCreatableSelect {...actualProps} />;
   }
 
   if ('loadOptions' in props) {
     return <ReactAsyncSelect {...actualProps} />;
   }
 
-  if ('onCreateOption' in props) {
+  if ('onCreateOption' in props || allowCreate) {
     return <ReactCreatableSelect {...actualProps} />;
   }
 

diff --git a/src/__stories__/Forms/Select.tsx b/src/__stories__/Forms/Select.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 
+import { action } from '@storybook/addon-actions';
 import { withKnobs } from '@storybook/addon-knobs';
-import { boolean, number, select, text } from '@storybook/addon-knobs/react';
+import { array, boolean, number, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
 
 import { Box } from '../../Box';
@@ -25,6 +26,7 @@ export const selectKnobs = (tabName = 'Select'): ISelect => ({
   closeOnScroll: boolean('closeOnScroll', false),
   hideSelectedOptions: boolean('hideSelectedOptions', false),
   backspaceRemovesValue: boolean('backspaceRemovesValue', true),
+  onChange: action('onChange'),
 });
 
 storiesOf('Forms:Select', module)
@@ -67,4 +69,38 @@ storiesOf('Forms:Select', module)
         }}
       />
     </Box>
+  ))
+  .add('creatable multi', () => (
+    <Box width="40%">
+      <Select
+        {...selectKnobs()}
+        isMulti={true}
+        allowCreate={true}
+        defaultOptions={[{ label: 'option1', value: 2 }]}
+        options={array('options', ['1', '2', '3', '4']).map(x => ({ value: x, label: x }))}
+      />
+    </Box>
+  ))
+  .add('creatable async', () => (
+    <Box width="40%">
+      <Select
+        {...selectKnobs()}
+        allowCreate={true}
+        defaultOptions={[{ label: 'option1', value: 2 }]}
+        loadOptions={inputValue => {
+          return new Promise(resolve => {
+            setTimeout(
+              () =>
+                resolve(
+                  [0, 1, 2, 3].map(index => ({
+                    label: `${inputValue}${index}`,
+                    value: `${index}`,
+                  }))
+                ),
+              250
+            );
+          });
+        }}
+      />
+    </Box>
   ));