From de9e6b5f08ab983e2c7a2d64a4f69e0eb96285cc Mon Sep 17 00:00:00 2001 From: selvagsz Date: Mon, 26 Feb 2018 12:05:14 +0800 Subject: [PATCH] [Docs Revamp] Initial Commit --- .../ArrayOfObjectsDemo.js | 0 .../CustomSelectedOption.js | 0 .../PlainArray.js | 0 docs/app/Demos/MultiPowerSelectDemos/index.js | 49 ++++ .../AfterOptionsDemo.js | 0 .../ArrayOfObjectsDemo.js | 0 .../BeforeOptionsDemo.js | 0 .../CustomOptionDemo.js | 0 .../CustomSelectedOptionDemo.js | 0 .../OptGroupDemo.js | 0 .../PlainArrayDemo.js | 0 .../SearchFieldsDemo.js | 0 .../WithoutSearchDemo.js | 0 docs/app/Demos/PowerSelectDemos/index.js | 112 ++++++++ .../AutofillTypeAhead.js | 0 .../HighlightSearch.js | 0 .../TaggedInput.js | 0 docs/app/Demos/Recipes/index.js | 49 ++++ .../ArrayOfObjectsDemo.js | 0 .../PlainArray.js | 0 docs/app/Demos/TypeAheadDemos/index.js | 30 +++ docs/app/Demos/index.js | 242 ++---------------- docs/app/index.scss | 34 ++- package-lock.json | 10 + package.json | 1 + 25 files changed, 311 insertions(+), 216 deletions(-) rename docs/app/Demos/{PowerSelectMultiple => MultiPowerSelectDemos}/ArrayOfObjectsDemo.js (100%) rename docs/app/Demos/{PowerSelectMultiple => MultiPowerSelectDemos}/CustomSelectedOption.js (100%) rename docs/app/Demos/{PowerSelectMultiple => MultiPowerSelectDemos}/PlainArray.js (100%) create mode 100644 docs/app/Demos/MultiPowerSelectDemos/index.js rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/AfterOptionsDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/ArrayOfObjectsDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/BeforeOptionsDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/CustomOptionDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/CustomSelectedOptionDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/OptGroupDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/PlainArrayDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/SearchFieldsDemo.js (100%) rename docs/app/Demos/{PowerSelect => PowerSelectDemos}/WithoutSearchDemo.js (100%) create mode 100644 docs/app/Demos/PowerSelectDemos/index.js rename docs/app/Demos/{TypeAhead => Recipes}/AutofillTypeAhead.js (100%) rename docs/app/Demos/{PowerSelect => Recipes}/HighlightSearch.js (100%) rename docs/app/Demos/{PowerSelectMultiple => Recipes}/TaggedInput.js (100%) create mode 100644 docs/app/Demos/Recipes/index.js rename docs/app/Demos/{TypeAhead => TypeAheadDemos}/ArrayOfObjectsDemo.js (100%) rename docs/app/Demos/{TypeAhead => TypeAheadDemos}/PlainArray.js (100%) create mode 100644 docs/app/Demos/TypeAheadDemos/index.js 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

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-

TypeAhead

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-

MultiSelect

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-

More Recipes

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
+
+ + + 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",