Skip to content

Commit

Permalink
chore(deps): upgrade stories dependencies (#493)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandernanberg authored and Kent C. Dodds committed Jun 29, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent b9068a1 commit 9955013
Showing 2 changed files with 83 additions and 67 deletions.
124 changes: 69 additions & 55 deletions stories/examples/apollo.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import React from 'react'
import {
ApolloClient,
ApolloProvider,
createNetworkInterface,
gql,
graphql,
} from 'react-apollo'
import {ApolloProvider, Query} from 'react-apollo'
import ApolloClient from 'apollo-boost'
import gql from 'graphql-tag'
import Downshift from '../../src'

export default Examples

const networkInterface = createNetworkInterface({
const client = new ApolloClient({
uri: 'https://api.graph.cool/simple/v1/cj5k7w90bjt2i0122z6v0syvu',
})

const client = new ApolloClient({
networkInterface,
})
const SEARCH_COLORS = gql`
query AllColors($inputValue: String!) {
allColors(filter: {name_contains: $inputValue}) {
name
}
}
`

function Examples() {
return (
@@ -35,71 +33,87 @@ function ApolloAutocomplete() {
{({
inputValue,
getInputProps,
getMenuProps,
getItemProps,
selectedItem,
highlightedIndex,
isOpen,
}) => (
<div>
<input {...getInputProps()} />
{inputValue ? (
<ApolloAutocompleteMenuWithData
{...{
inputValue,
getItemProps,
selectedItem,
highlightedIndex,
isOpen,
}}
/>
) : null}
<ApolloAutocompleteMenu
{...{
inputValue,
getMenuProps,
getItemProps,
selectedItem,
highlightedIndex,
isOpen,
}}
/>
</div>
)}
</Downshift>
)
}

function ApolloAutocompleteMenu({
data: {allColors = [], loading} = {},
selectedItem,
highlightedIndex,
isOpen,
getItemProps,
getMenuProps,
inputValue,
}) {
if (!isOpen) {
return null
}
if (loading) {
return <div>Loading...</div>
}

return (
<div>
{allColors.map(({name: item}, index) => (
<div
key={item}
{...getItemProps({
item,
style: {
backgroundColor: highlightedIndex === index ? 'gray' : 'white',
fontWeight: selectedItem === item ? 'bold' : 'normal',
},
})}
>
{item}
</div>
))}
</div>
<Query
query={SEARCH_COLORS}
variables={{
inputValue,
}}
>
{({loading, error, data}) => {
const allColors = (data && data.allColors) || []

if (loading) {
return <div>Loading...</div>
}

if (error) {
return <div>Error! ${error.message}</div>
}

return (
<ul
{...getMenuProps({
style: {padding: 0, margin: 0, listStyle: 'none'},
})}
>
{allColors.map(({name: item}, index) => (
<li
key={item}
{...getItemProps({
index,
item,
style: {
backgroundColor:
highlightedIndex === index ? 'lightgray' : 'white',
fontWeight: selectedItem === item ? 'bold' : 'normal',
},
})}
>
{item}
</li>
))}
</ul>
)
}}
</Query>
)
}

const SEARCH_COLORS = gql`
query AllColors($inputValue: String!) {
allColors(filter: {name_contains: $inputValue}) {
name
}
}
`

const ApolloAutocompleteMenuWithData = graphql(SEARCH_COLORS)(
ApolloAutocompleteMenu,
)
export default Examples
26 changes: 14 additions & 12 deletions stories/package.json
Original file line number Diff line number Diff line change
@@ -10,20 +10,22 @@
"author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
"license": "MIT",
"dependencies": {
"axios": "^0.16.2",
"glamor": "^2.20.37",
"glamorous": "^3.24.0",
"match-sorter": "^1.8.0",
"react": "^15.6.1",
"react-apollo": "^1.4.8",
"react-dom": "^15.6.1",
"react-instantsearch": "^5.0.0",
"apollo-boost": "^0.1.10",
"axios": "^0.18.0",
"glamor": "^2.20.40",
"glamorous": "^4.13.1",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.2",
"match-sorter": "^2.2.3",
"react": "^16.4.1",
"react-apollo": "^2.1.6",
"react-dom": "^16.4.1",
"react-instantsearch": "^5.1.0",
"react-popper": "^0.7.2",
"react-tiny-virtual-list": "^2.1.1",
"react-virtualized": "9.18.3",
"throttle-debounce": "^1.0.1"
"react-tiny-virtual-list": "^2.1.6",
"react-virtualized": "^9.20.0"
},
"devDependencies": {
"babel-macros": "^1.0.2"
"babel-macros": "^2.0.0"
}
}

0 comments on commit 9955013

Please sign in to comment.