Merge pull request JedWatson#862 from bvaughn/master

Cleaned up custom :menuRenderer example to use react-virtualized-select HOC
sevenval · Apr 6, 2016 · 2877726 · 2877726
2 parents 5c565b8 + 1492b1e
commit 2877726
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 85 deletions.
diff --git a/examples/src/app.js b/examples/src/app.js
@@ -14,7 +14,7 @@ import States from './components/States';
 
 ReactDOM.render(
 	<div>
-		<Cities label="Cities" searchable />
+		<Cities label="Cities" />
 		<States label="States" searchable />
 		<Multiselect label="Multiselect" />
 		<Contributors label="Contributors (Async)" />

diff --git a/examples/src/components/Cities.js b/examples/src/components/Cities.js
@@ -1,110 +1,38 @@
 import React from 'react';
-import Select from 'react-select';
-import { AutoSizer, VirtualScroll } from 'react-virtualized';
+import VirtualizedSelect from 'react-virtualized-select';
 
 const DATA = require('../data/cities');
 
-const OPTION_HEIGHT = 35;
-const MAX_OPTIONS_HEIGHT = 200;
-
 var CitiesField = React.createClass({
 	displayName: 'CitiesField',
-	propTypes: {
-		label: React.PropTypes.string,
-		searchable: React.PropTypes.bool,
-	},
-	getDefaultProps () {
-		return {
-			label: 'Cities:',
-			searchable: true,
-		};
-	},
 	getInitialState () {
-		return {
-			country: 'AU',
-			disabled: false,
-			searchable: this.props.searchable,
-			selectValue: 'new-south-wales',
-			clearable: true,
-		};
-	},
-	switchCountry (e) {
-		var newCountry = e.target.value;
-		console.log('Country changed to ' + newCountry);
-		this.setState({
-			country: newCountry,
-			selectValue: null
-		});
+		return {};
 	},
 	updateValue (newValue) {
-		console.log('State changed to ' + newValue);
 		this.setState({
 			selectValue: newValue
 		});
 	},
-	focusStateSelect () {
-		this.refs.stateSelect.focus();
-	},
-	toggleCheckbox (e) {
-		let newState = {};
-		newState[e.target.name] = e.target.checked;
-		this.setState(newState);
-	},
-	renderMenu({ focusedOption, focusOption, labelKey, options, selectValue, valueArray }) {
-		const focusedOptionIndex = options.indexOf(focusedOption);
-		const height = Math.min(MAX_OPTIONS_HEIGHT, options.length * OPTION_HEIGHT);
-
-		return (
-      <AutoSizer disableHeight>
-        {({ width }) => (
-          <VirtualScroll
-            ref="VirtualScroll"
-            height={height}
-            rowHeight={OPTION_HEIGHT}
-            rowRenderer={(index) => (
-            	<div
-            		onMouseOver={() => focusOption(options[index])}
-            		onClick={() => selectValue(options[index])}
-            		style={{
-            			backgroundColor: options[index] === focusedOption ? '#eee' : '#fff',
-            			height: OPTION_HEIGHT,
-            			display: 'flex',
-            			alignItems: 'center',
-            			padding: '0 .5rem'
-            		}}
-            	>
-            		{options[index][labelKey]}
-            	</div>
-            )}
-            rowsCount={options.length}
-            scrollToIndex={focusedOptionIndex}
-            width={width}
-          />
-        )}
-      </AutoSizer>
-		);
-	},
 	render () {
 		var options = DATA.CITIES;
 		return (
 			<div className="section">
-				<h3 className="section-heading">World's Largest Cities</h3>
-				<h4>Uses react-virtualized to display data</h4>
-				<Select ref="stateSelect"
+				<h3 className="section-heading">Large Datasets</h3>
+				<VirtualizedSelect ref="citySelect"
 					autofocus
 					options={options}
 					simpleValue
-					clearable={this.state.clearable}
-					name="selected-state"
-					disabled={this.state.disabled}
+					clearable
+					name="select-city"
 					value={this.state.selectValue}
 					onChange={this.updateValue}
-					searchable={this.state.searchable}
+					searchable
 					labelKey="name"
 					valueKey="name"
-					menuStyle={{ overflow: 'hidden' }}
-					menuRenderer={this.renderMenu}
 				/>
+				<div className="hint">
+					Uses <a href="https://github.com/bvaughn/react-virtualized">react-virtualized</a> and <a href="https://github.com/bvaughn/react-virtualized-select/">react-virtualized-select</a> to display a list of the world's 1,000 largest cities.
+				</div>
 			</div>
 		);
 	}

diff --git a/examples/src/example.less b/examples/src/example.less
@@ -250,3 +250,7 @@ h6, .h6 {
 	margin: 15px 0;
 	color: #666;
 }
+
+.virtual-scroll {
+	z-index: 1;
+}
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -12,8 +12,9 @@
 	<meta property="og:site_name" content="React-Select">
 	<meta property="og:type" content="article">
 	<link rel="stylesheet" href="example.css">
-	<link rel="stylesheet" href="https://npmcdn.com/[email protected]/styles.css">
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link rel="stylesheet" href="https://npmcdn.com/react-virtualized/styles.css">
+	<link rel="stylesheet" href="https://npmcdn.com/react-virtualized-select/styles.css">
 </head>
 <body>
 	<header class="page-header">

diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "react-component-gulp-tasks": "^0.7.7",
     "react-dom": "^0.14 || ^15.0.0-rc || ^15.0.0",
     "react-gravatar": "^2.3.0",
-    "react-virtualized": "^6.0.2",
+    "react-virtualized": "^6.0.4",
+    "react-virtualized-select": "^0.0.2",
     "sinon": "^1.17.2",
     "unexpected": "^10.7.0",
     "unexpected-dom": "^3.0.2",