diff --git a/docs/app/Demos/PowerSelectMultiple/ArrayOfObjectsDemo.js b/docs/app/Demos/MultiPowerSelectDemos/ArrayOfObjectsDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelectMultiple/ArrayOfObjectsDemo.js
rename to docs/app/Demos/MultiPowerSelectDemos/ArrayOfObjectsDemo.js
diff --git a/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js b/docs/app/Demos/MultiPowerSelectDemos/CustomSelectedOption.js
similarity index 100%
rename from docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
rename to docs/app/Demos/MultiPowerSelectDemos/CustomSelectedOption.js
diff --git a/docs/app/Demos/PowerSelectMultiple/PlainArray.js b/docs/app/Demos/MultiPowerSelectDemos/PlainArray.js
similarity index 100%
rename from docs/app/Demos/PowerSelectMultiple/PlainArray.js
rename to docs/app/Demos/MultiPowerSelectDemos/PlainArray.js
diff --git a/docs/app/Demos/MultiPowerSelectDemos/index.js b/docs/app/Demos/MultiPowerSelectDemos/index.js
new file mode 100644
index 0000000..6462806
--- /dev/null
+++ b/docs/app/Demos/MultiPowerSelectDemos/index.js
@@ -0,0 +1,49 @@
+import { Component } from 'react';
+import Snippet from '../Snippet';
+import MultiSelectPlainArray from './PlainArray';
+import MultiSelectArrayOfObjects from './ArrayOfObjectsDemo';
+import MultiSelectCustomSelectedOption from './CustomSelectedOption';
+
+export default class MultiPowerSelectDemos extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/docs/app/Demos/PowerSelect/AfterOptionsDemo.js b/docs/app/Demos/PowerSelectDemos/AfterOptionsDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/AfterOptionsDemo.js
rename to docs/app/Demos/PowerSelectDemos/AfterOptionsDemo.js
diff --git a/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js b/docs/app/Demos/PowerSelectDemos/ArrayOfObjectsDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
rename to docs/app/Demos/PowerSelectDemos/ArrayOfObjectsDemo.js
diff --git a/docs/app/Demos/PowerSelect/BeforeOptionsDemo.js b/docs/app/Demos/PowerSelectDemos/BeforeOptionsDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/BeforeOptionsDemo.js
rename to docs/app/Demos/PowerSelectDemos/BeforeOptionsDemo.js
diff --git a/docs/app/Demos/PowerSelect/CustomOptionDemo.js b/docs/app/Demos/PowerSelectDemos/CustomOptionDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/CustomOptionDemo.js
rename to docs/app/Demos/PowerSelectDemos/CustomOptionDemo.js
diff --git a/docs/app/Demos/PowerSelect/CustomSelectedOptionDemo.js b/docs/app/Demos/PowerSelectDemos/CustomSelectedOptionDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/CustomSelectedOptionDemo.js
rename to docs/app/Demos/PowerSelectDemos/CustomSelectedOptionDemo.js
diff --git a/docs/app/Demos/PowerSelect/OptGroupDemo.js b/docs/app/Demos/PowerSelectDemos/OptGroupDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/OptGroupDemo.js
rename to docs/app/Demos/PowerSelectDemos/OptGroupDemo.js
diff --git a/docs/app/Demos/PowerSelect/PlainArrayDemo.js b/docs/app/Demos/PowerSelectDemos/PlainArrayDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/PlainArrayDemo.js
rename to docs/app/Demos/PowerSelectDemos/PlainArrayDemo.js
diff --git a/docs/app/Demos/PowerSelect/SearchFieldsDemo.js b/docs/app/Demos/PowerSelectDemos/SearchFieldsDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/SearchFieldsDemo.js
rename to docs/app/Demos/PowerSelectDemos/SearchFieldsDemo.js
diff --git a/docs/app/Demos/PowerSelect/WithoutSearchDemo.js b/docs/app/Demos/PowerSelectDemos/WithoutSearchDemo.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/WithoutSearchDemo.js
rename to docs/app/Demos/PowerSelectDemos/WithoutSearchDemo.js
diff --git a/docs/app/Demos/PowerSelectDemos/index.js b/docs/app/Demos/PowerSelectDemos/index.js
new file mode 100644
index 0000000..cf6f608
--- /dev/null
+++ b/docs/app/Demos/PowerSelectDemos/index.js
@@ -0,0 +1,112 @@
+import { Component } from 'react';
+import Snippet from '../Snippet';
+import PlainArrayDemo from './PlainArrayDemo';
+import WithoutSearchDemo from './WithoutSearchDemo';
+import ArrayOfObjectsDemo from './ArrayOfObjectsDemo';
+import OptGroupDemo from './OptGroupDemo';
+import SearchFieldsDemo from './SearchFieldsDemo';
+import CustomOptionDemo from './CustomOptionDemo';
+import CustomSelectedOptionDemo from './CustomSelectedOptionDemo';
+import AfterOptionsDemo from './AfterOptionsDemo';
+import BeforeOptionsDemo from './BeforeOptionsDemo';
+
+export default class PowerSelectDemos extends Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/docs/app/Demos/TypeAhead/AutofillTypeAhead.js b/docs/app/Demos/Recipes/AutofillTypeAhead.js
similarity index 100%
rename from docs/app/Demos/TypeAhead/AutofillTypeAhead.js
rename to docs/app/Demos/Recipes/AutofillTypeAhead.js
diff --git a/docs/app/Demos/PowerSelect/HighlightSearch.js b/docs/app/Demos/Recipes/HighlightSearch.js
similarity index 100%
rename from docs/app/Demos/PowerSelect/HighlightSearch.js
rename to docs/app/Demos/Recipes/HighlightSearch.js
diff --git a/docs/app/Demos/PowerSelectMultiple/TaggedInput.js b/docs/app/Demos/Recipes/TaggedInput.js
similarity index 100%
rename from docs/app/Demos/PowerSelectMultiple/TaggedInput.js
rename to docs/app/Demos/Recipes/TaggedInput.js
diff --git a/docs/app/Demos/Recipes/index.js b/docs/app/Demos/Recipes/index.js
new file mode 100644
index 0000000..34c2f90
--- /dev/null
+++ b/docs/app/Demos/Recipes/index.js
@@ -0,0 +1,49 @@
+import { Component } from 'react';
+import Snippet from '../Snippet';
+import HighlightSearchDemo from './HighlightSearch';
+import TaggedInputDemo from './TaggedInput';
+import AutoFillTypeAheadDemo from './AutoFillTypeAhead';
+
+export default class TypeAheadDemos extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/docs/app/Demos/TypeAhead/ArrayOfObjectsDemo.js b/docs/app/Demos/TypeAheadDemos/ArrayOfObjectsDemo.js
similarity index 100%
rename from docs/app/Demos/TypeAhead/ArrayOfObjectsDemo.js
rename to docs/app/Demos/TypeAheadDemos/ArrayOfObjectsDemo.js
diff --git a/docs/app/Demos/TypeAhead/PlainArray.js b/docs/app/Demos/TypeAheadDemos/PlainArray.js
similarity index 100%
rename from docs/app/Demos/TypeAhead/PlainArray.js
rename to docs/app/Demos/TypeAheadDemos/PlainArray.js
diff --git a/docs/app/Demos/TypeAheadDemos/index.js b/docs/app/Demos/TypeAheadDemos/index.js
new file mode 100644
index 0000000..5faf5a6
--- /dev/null
+++ b/docs/app/Demos/TypeAheadDemos/index.js
@@ -0,0 +1,30 @@
+import { Component } from 'react';
+import Snippet from '../Snippet';
+import TypeAheadPlainArray from './PlainArray';
+import TypeAheadArrayOfObjects from './ArrayOfObjectsDemo';
+
+export default class TypeAheadDemos extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/docs/app/Demos/index.js b/docs/app/Demos/index.js
index fe7bc35..e34fb84 100644
--- a/docs/app/Demos/index.js
+++ b/docs/app/Demos/index.js
@@ -1,24 +1,8 @@
-import PlainArrayDemo from './PowerSelect/PlainArrayDemo';
-import WithoutSearchDemo from './PowerSelect/WithoutSearchDemo';
-import ArrayOfObjectsDemo from './PowerSelect/ArrayOfObjectsDemo';
-import OptGroupDemo from './PowerSelect/OptGroupDemo';
-import HighlightSearchDemo from './PowerSelect/HighlightSearch';
-import SearchFieldsDemo from './PowerSelect/SearchFieldsDemo';
-import CustomOptionDemo from './PowerSelect/CustomOptionDemo';
-import CustomSelectedOptionDemo from './PowerSelect/CustomSelectedOptionDemo';
-import AfterOptionsDemo from './PowerSelect/AfterOptionsDemo';
-import BeforeOptionsDemo from './PowerSelect/BeforeOptionsDemo';
-
-import TypeAheadPlainArray from './TypeAhead/PlainArray';
-import TypeAheadArrayOfObjects from './TypeAhead/ArrayOfObjectsDemo';
-import AutoFillTypeAheadDemo from './TypeAhead/AutoFillTypeAhead';
-
-import MultiSelectPlainArray from './PowerSelectMultiple/PlainArray';
-import MultiSelectArrayOfObjects from './PowerSelectMultiple/ArrayOfObjectsDemo';
-import MultiSelectCustomSelectedOption from './PowerSelectMultiple/CustomSelectedOption';
-import TaggedInputDemo from './PowerSelectMultiple/TaggedInput';
-
-import Snippet from './Snippet';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import PowerSelectDemos from './PowerSelectDemos';
+import MultiPowerSelectDemos from './MultiPowerSelectDemos';
+import TypeAheadDemos from './TypeAheadDemos';
+import Recipes from './Recipes';
export default () => {
return (
@@ -42,201 +26,29 @@ export default () => {
-
-
- Power Select
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- MultiSelect
-
-
-
-
-
-
-
-
-
-
+
+
+
+ PowerSelect
+ MultiPowerSelect
+ TypeAhead
+ More Recipes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/docs/app/index.scss b/docs/app/index.scss
index 457006e..c195c59 100644
--- a/docs/app/index.scss
+++ b/docs/app/index.scss
@@ -130,9 +130,41 @@ header {
z-index: 1;
position: relative;
background-color: #fff;
- padding: 30px;
+ padding: 15px 30px;
+ margin-top: -65px;
+ border-radius: 4px;
}
+.react-tabs__tab-list {
+ padding-left: 0;
+
+ &::before, &::after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+}
+
+.react-tabs__tab {
+ list-style: none;
+ float: left;
+ padding: 15px;
+ cursor: pointer;
+
+ &:first-child {
+ padding-left: 0;
+ }
+}
+
+.react-tabs__tab--selected {
+ border-bottom: 2px solid #6d45da;
+}
+
+.react-tabs__tab-panel {
+ margin-top: 30px;
+}
+
+
.demo {
h3 {
margin-bottom: 12px;
diff --git a/package-lock.json b/package-lock.json
index c2b2f60..fcc9efb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8316,6 +8316,16 @@
}
}
},
+ "react-tabs": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-2.2.1.tgz",
+ "integrity": "sha512-Fu1frsfsGUUwxsNQsjQDo1ZuNwyLCXoZcu7jaaeWAP9HlwPpYsUzNQaquA6+6jd4E/uPlBGyBTFW3PpEUOwkVw==",
+ "dev": true,
+ "requires": {
+ "classnames": "2.2.5",
+ "prop-types": "15.5.10"
+ }
+ },
"react-test-renderer": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.2.0.tgz",
diff --git a/package.json b/package.json
index ad46841..e59a831 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
"react": "^16.2.0",
"react-codemirror2": "^4.0.0",
"react-dom": "^16.2.0",
+ "react-tabs": "^2.2.1",
"react-test-renderer": "^16.2.0",
"regenerator-runtime": "^0.10.5",
"sass-loader": "^6.0.5",