feat(Dropdown): add loading prop

CHANGELOG.md

@@ -19,6 +19,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING
 - Rename `DropdownLabel` to `DropdownSelectedItem` and extract styles @layershifter ([#725](https://github.com/stardust-ui/react/pull/725))
+- Changes in `Dropdown` @layershifter ([#729](https://github.com/stardust-ui/react/pull/729))
+  - rename `toggleButton` prop to `indicator`
+  - `indicator` is visible by default
 
 ### Fixes
 - Remove `render` from default factories options @layershifter ([#735](https://github.com/stardust-ui/react/pull/735))
@@ -31,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add accessibility for submenu in toolbar and menu behavior @kolaps33 ([#686] (https://github.com/stardust-ui/react/pull/686))
+- Add `loading` prop for `Dropdown` @layershifter ([#729](https://github.com/stardust-ui/react/pull/729))
 
 <!--------------------------------[ v0.16.2 ]------------------------------- -->
 ## [v0.16.2](https://github.com/stardust-ui/react/tree/v0.16.2) (2019-01-14)

docs/src/components/CodeSnippet.tsx

@@ -6,20 +6,21 @@ import Editor, { EDITOR_BACKGROUND_COLOR } from './Editor'
 export interface CodeSnippetProps {
   fitted?: boolean
   label?: string
-  mode?: 'jsx' | 'html' | 'sh'
-  value: string
+  mode?: 'json' | 'jsx' | 'html' | 'sh'
+  value: string | Object
   style?: React.CSSProperties
 }
 
 const formatters = {
   sh: (val: string = ''): string => val.replace(/^/g, '$  '),
   html: (val: string = ''): string => formatCode(val, 'html'),
+  json: (val: Object = {}): string => JSON.stringify(val, null, 2),
   jsx: (val: string = ''): string => formatCode(val, 'babylon'),
 }
 
 const CodeSnippet = ({ fitted, label, value, mode = 'jsx', ...restProps }: CodeSnippetProps) => {
   const format = formatters[mode]
-  const formattedValue = format(value)
+  const formattedValue = format(value as any)
     // remove eof line break, they are not helpful for snippets
     .replace(/\n$/, '')
 

docs/src/components/Editor/Editor.tsx

@@ -5,6 +5,7 @@ import AceEditor, { AceEditorProps } from 'react-ace'
 import * as ace from 'brace'
 import 'brace/ext/language_tools'
 import 'brace/mode/html'
+import 'brace/mode/json'
 import 'brace/mode/jsx'
 import 'brace/mode/sh'
 import 'brace/theme/tomorrow_night'
@@ -47,7 +48,7 @@ languageTools.addCompleter(semanticUIReactCompleter)
 export interface EditorProps extends AceEditorProps {
   active?: boolean
   highlightGutterLine?: boolean
-  mode?: 'html' | 'jsx' | 'sh'
+  mode?: 'html' | 'jsx' | 'sh' | 'json'
   value?: string
   showCursor?: boolean
 }

docs/src/components/Sidebar/Sidebar.tsx

@@ -273,6 +273,14 @@ class Sidebar extends React.Component<any, any> {
                   >
                     Chat message with popover
                   </Menu.Item>
+                  <Menu.Item
+                    as={NavLink}
+                    exact
+                    to="/prototype-async-dropdown-search"
+                    activeClassName="active"
+                  >
+                    Async Dropdown Search
+                  </Menu.Item>
                   <Menu.Item
                     as={NavLink}
                     exact

docs/src/examples/components/Dropdown/State/DropdownExampleLoading.knobs.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import Knobs from 'docs/src/components/Knobs/Knobs'
+
+type DropdownExampleLoadingKnobsProps = {
+  loading?: boolean
+  onKnobChange: () => void
+}
+
+const DropdownExampleLoadingKnobs: React.FC<DropdownExampleLoadingKnobsProps> = props => {
+  const { loading, onKnobChange } = props
+
+  return (
+    <Knobs>
+      <Knobs.Boolean name="loading" onChange={onKnobChange} value={loading} />
+    </Knobs>
+  )
+}
+
+DropdownExampleLoadingKnobs.defaultProps = {
+  loading: true,
+}
+
+export default DropdownExampleLoadingKnobs

docs/src/examples/components/Dropdown/State/DropdownExampleLoading.shorthand.tsx

@@ -0,0 +1,26 @@
+import { Dropdown } from '@stardust-ui/react'
+import * as React from 'react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+const DropdownExampleLoading: React.FC<{ knobs: { loading: boolean } }> = ({ knobs }) => (
+  <Dropdown
+    loading={knobs.loading}
+    multiple
+    items={inputItems}
+    placeholder="Start typing a name"
+    search
+  />
+)
+
+export default DropdownExampleLoading

docs/src/examples/components/Dropdown/State/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const State = () => (
+  <ExampleSection title="State">
+    <ComponentExample
+      title="Loading"
+      description="A dropdown with single selection."
+      examplePath="components/Dropdown/State/DropdownExampleLoading"
+    />
+  </ExampleSection>
+)
+
+export default State

docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx

@@ -19,7 +19,6 @@ const DropdownExample = () => (
     search
     getA11ySelectionMessage={getA11ySelectionMessage}
     getA11yStatusMessage={getA11yStatusMessage}
-    noResultsMessage="We couldn't find any matches."
     placeholder="Start typing a name"
     items={inputItems}
   />

docs/src/examples/components/Dropdown/index.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react'
+
 import Types from './Types'
 import Variations from './Variations'
+import State from './State'
 
 const DropdownExamples = () => (
   <div>
     <Types />
     <Variations />
+    <State />
   </div>
 )
 

docs/src/prototypes/AsyncDropdownSearch/AsyncDropdownSearch.tsx

@@ -0,0 +1,98 @@
+import { Divider, Dropdown, DropdownProps, Header, Segment } from '@stardust-ui/react'
+import * as faker from 'faker'
+import * as _ from 'lodash'
+import * as React from 'react'
+import CodeSnippet from '../../components/CodeSnippet'
+
+// ----------------------------------------
+// Types
+// ----------------------------------------
+type Entry = {
+  header: string
+  image: string
+  content: string
+}
+
+interface SearchPageState {
+  loading: boolean
+  items: Entry[]
+  searchQuery: string
+  value: Entry[]
+}
+
+// ----------------------------------------
+// Mock Data
+// ----------------------------------------
+const createEntry = (): Entry => ({
+  image: faker.internet.avatar(),
+  header: `${faker.name.firstName()} ${faker.name.lastName()}`,
+  content: faker.commerce.department(),
+})
+
+// ----------------------------------------
+// Prototype Search Page View
+// ----------------------------------------
+class AsyncDropdownSearch extends React.Component<{}, SearchPageState> {
+  state = {
+    loading: false,
+    searchQuery: '',
+    items: [],
+    value: [],
+  }
+
+  searchTimer: number
+
+  handleSelectedChange = (e: React.SyntheticEvent, { searchQuery, value }: DropdownProps) => {
+    this.setState({ value: value as Entry[], searchQuery })
+  }
+
+  handleSearchQueryChange = (e: React.SyntheticEvent, { searchQuery }: DropdownProps) => {
+    this.setState({ searchQuery })
+    this.fetchItems()
+  }
+
+  fetchItems = () => {
+    clearTimeout(this.searchTimer)
+    this.setState({ loading: true })
+
+    this.searchTimer = setTimeout(() => {
+      this.setState(prevState => ({
+        loading: false,
+        items: [...prevState.items, ..._.times<Entry>(10, createEntry)],
+      }))
+    }, 2000)
+  }
+
+  render() {
+    const { items, loading, searchQuery, value } = this.state
+
+    return (
+      <div style={{ margin: 20 }}>
+        <Segment>
+          <Header content="Async Dropdown Search" />
+          <p>Use the field to perform a simulated search.</p>
+        </Segment>
+
+        <Segment>
+          <Dropdown
+            fluid
+            indicator={false}
+            items={items}
+            loading={loading}
+            multiple
+            onSearchQueryChange={this.handleSearchQueryChange}
+            onSelectedChange={this.handleSelectedChange}
+            placeholder="Try to enter something..."
+            search
+            searchQuery={searchQuery}
+            value={value}
+          />
+          <Divider />
+          <CodeSnippet mode="json" value={this.state} />
+        </Segment>
+      </div>
+    )
+  }
+}
+
+export default AsyncDropdownSearch

docs/src/prototypes/AsyncDropdownSearch/index.ts

@@ -0,0 +1 @@
+export { default } from './AsyncDropdownSearch'

docs/src/routes.tsx

@@ -60,6 +60,12 @@ const Router = () => (
             path="/prototype-search-page"
             component={require('./prototypes/SearchPage/index').default}
           />,
+          <DocsLayout
+            exact
+            key="/prototype-async-dropdown-search"
+            path="/prototype-async-dropdown-search"
+            component={require('./prototypes/AsyncDropdownSearch/index').default}
+          />,
           <DocsLayout
             exact
             key="/prototype-popups"