Merge pull request #168 from rvsia/async-select-docs

Add AsyncSelect docs

Author: Hyperkid123

packages/react-renderer-demo/src/common/examples-definitions.js

@@ -3,6 +3,7 @@ import GenericComponentText from './examples-texts/generic-mui-component';
 import TabsText from './examples-texts/tabs';
 import CustomComponentText from './examples-texts/custom-component';
 import WizardText from './examples-texts/wizard';
+import SelectText from './examples-texts/select';
 
 export const baseExamples = [{
   component: componentTypes.TEXT_FIELD,
@@ -120,7 +121,7 @@ export const baseExamples = [{
 {
   component: componentTypes.SELECT_COMPONENT,
   linkText: 'Select',
-  ContentText: GenericComponentText,
+  ContentText: SelectText,
   canBeRequired: true,
   value: { fields: [{
     component: componentTypes.SELECT_COMPONENT,

packages/react-renderer-demo/src/common/examples-texts/select.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import GenericComponentText from './generic-mui-component';
+import Pf3Select from 'docs/components/pf3-select.md';
+import Pf4Select from 'docs/components/pf4-select.md';
+
+export default ({ activeMapper }) => activeMapper === 'pf3' ? <Pf3Select /> : activeMapper === 'pf4' ? <Pf4Select /> : <GenericComponentText />;

packages/react-renderer-demo/src/docs-components/pf3-select.md

@@ -0,0 +1,17 @@
+### Async Select
+
+PF3 Select allows to load the options asynchronously.
+
+
+|prop name|type|description|
+|---------|----|-----------|
+|loadOptions|`func`|A function returning `Promise`, only on mount.|
+|loadingMessage|`string`|A message shown during the loading.|
+
+#### loadOptions example
+
+Currently now, PF3 select supports only loading on mounting.
+
+```jsx
+const asyncLoadOptions = () => new Promise(resolve => setTimeout(() => resolve(options), 2000));
+```

packages/react-renderer-demo/src/docs-components/pf4-select.md

@@ -0,0 +1,24 @@
+### Async Select
+
+PF4 Select allows to load the options asynchronously.
+
+
+|prop name|type|description|
+|---------|----|-----------|
+|loadOptions|`func`|A function returning `Promise`: `(searchValue) => new Promise`|
+|loadingMessage|`node`|A message shown during the initial loading.|
+|updatingMessage|`node`|A message shown during the loading|
+
+#### loadOptions example
+
+`loadOptions` receives a search input text as an argument.
+
+```jsx
+const asyncLoadOptions = (searchValue) => new Promise(resolve => setTimeout(() => {
+  if (searchValue && searchValue.trim() !== '') {
+    return resolve(asyncOptions.filter(({ label }) => label.toLocaleLowerCase().includes(searchValue.trim().toLocaleLowerCase())));
+  }
+
+  return resolve(options);
+}, 2000));
+```