vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Fixe autocomplete

old
Javi Velasco 2016-01-06 12:56:30 +01:00
parent c5666f0ebb
commit 3c6b7afcc1
4 changed files with 215 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

412
components/autocomplete/Autocomplete.jsx
View File

@ -1,206 +1,206 @@
//import React from 'react'; import React from 'react';
//import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
//import ClassNames from 'classnames'; import ClassNames from 'classnames';
//import Input from '../input'; import Input from '../input';
//import events from '../utils/events'; import events from '../utils/events';
//import style from './style'; import style from './style';
//
//const POSITION = { const POSITION = {
// AUTO: 'auto', AUTO: 'auto',
// DOWN: 'down', DOWN: 'down',
// UP: 'up' UP: 'up'
//}; };
//
//class Autocomplete extends React.Component { class Autocomplete extends React.Component {
// static propTypes = { static propTypes = {
// className: React.PropTypes.string, className: React.PropTypes.string,
// direction: React.PropTypes.oneOf(['auto', 'up', 'down']), direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
// disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
// error: React.PropTypes.string, error: React.PropTypes.string,
// label: React.PropTypes.string, label: React.PropTypes.string,
// multiple: React.PropTypes.bool, multiple: React.PropTypes.bool,
// onChange: React.PropTypes.func, onChange: React.PropTypes.func,
// source: React.PropTypes.any, source: React.PropTypes.any,
// value: React.PropTypes.any value: React.PropTypes.any
// }; };
//
// static defaultProps = { static defaultProps = {
// className: '', className: '',
// direction: 'auto', direction: 'auto',
// multiple: true, multiple: true,
// source: {} source: {}
// }; };
//
// state = { state = {
// direction: this.props.direction, direction: this.props.direction,
// focus: false, focus: false,
// query: this.query(this.props.value) query: this.query(this.props.value)
// }; };
//
// componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
// if (!this.props.multiple) { if (!this.props.multiple) {
// this.setState({query: nextProps.value}); this.setState({query: nextProps.value});
// } }
// } }
//
// shouldComponentUpdate (nextProps, nextState) { shouldComponentUpdate (nextProps, nextState) {
// if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) { if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
// const direction = this.calculateDirection(); const direction = this.calculateDirection();
// if (this.state.direction !== direction) { if (this.state.direction !== direction) {
// this.setState({ direction }); this.setState({ direction });
// return false; return false;
// } }
// } }
// return true; return true;
// } }
//
// handleChange = (keys, event) => { handleChange = (keys, event) => {
// const key = this.props.multiple ? keys : keys[0]; const key = this.props.multiple ? keys : keys[0];
// const query = this.query(key); const query = this.query(key);
// if (this.props.onChange) this.props.onChange(key, event); if (this.props.onChange) this.props.onChange(key, event);
// this.setState({ focus: false, query }, () => { this.refs.input.blur(); }); this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
// }; };
//
// handleQueryBlur = () => { handleQueryBlur = () => {
// if (this.state.focus) this.setState({focus: false}); if (this.state.focus) this.setState({focus: false});
// }; };
//
// handleQueryChange = (value) => { handleQueryChange = (value) => {
// this.setState({query: value}); this.setState({query: value});
// }; };
//
// handleQueryFocus = () => { handleQueryFocus = () => {
// this.refs.suggestions.scrollTop = 0; this.refs.suggestions.scrollTop = 0;
// this.setState({active: '', focus: true}); this.setState({active: '', focus: true});
// }; };
//
// handleQueryKeyUp = (event) => { handleQueryKeyUp = (event) => {
// if (event.which === 13 && this.state.active) this.select(this.state.active, event); if (event.which === 13 && this.state.active) this.select(this.state.active, event);
// if (event.which === 27) this.refs.input.blur(); if (event.which === 27) this.refs.input.blur();
// if ([40, 38].indexOf(event.which) !== -1) { if ([40, 38].indexOf(event.which) !== -1) {
// const suggestionsKeys = [...this.suggestions().keys()]; const suggestionsKeys = [...this.suggestions().keys()];
// let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1); let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
// if (index < 0) index = suggestionsKeys.length - 1; if (index < 0) index = suggestionsKeys.length - 1;
// if (index >= suggestionsKeys.length) index = 0; if (index >= suggestionsKeys.length) index = 0;
// this.setState({active: suggestionsKeys[index]}); this.setState({active: suggestionsKeys[index]});
// } }
// }; };
//
// handleSuggestionHover = (key) => { handleSuggestionHover = (key) => {
// this.setState({active: key}); this.setState({active: key});
// }; };
//
// calculateDirection () { calculateDirection () {
// if (this.props.direction === 'auto') { if (this.props.direction === 'auto') {
// const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect(); const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
// const screen_height = window.innerHeight || document.documentElement.offsetHeight; const screen_height = window.innerHeight || document.documentElement.offsetHeight;
// const up = client.top > ((screen_height / 2) + client.height); const up = client.top > ((screen_height / 2) + client.height);
// return up ? 'up' : 'down'; return up ? 'up' : 'down';
// } else { } else {
// return this.props.direction; return this.props.direction;
// } }
// } }
//
// query (key) { query (key) {
// return !this.props.multiple && this.props.value ? this.source().get(key) : ''; return !this.props.multiple && this.props.value ? this.source().get(key) : '';
// } }
//
// suggestions2 () { suggestions () {
// const suggestions2 = new Map(); const suggest = new Map();
// const query = this.state.query.toLowerCase().trim() || ''; const query = this.state.query.toLowerCase().trim() || '';
// const values = this.values(); const values = this.values();
// for (const [key, value] of this.source()) { for (const [key, value] of this.source()) {
// if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) { if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
// suggestions2.set(key, value); suggest.set(key, value);
// } }
// } }
// return suggestions2; return suggest;
// } }
//
// source () { source () {
// const { source } = this.props; const { source: src } = this.props;
// if (source.hasOwnProperty('length')) { if (src.hasOwnProperty('length')) {
// return new Map(source.map((item) => [item, item])); return new Map(src.map((item) => [item, item]));
// } else { } else {
// return new Map(Object.keys(source).map((key) => [key, source[key]])); return new Map(Object.keys(src).map((key) => [key, src[key]]));
// } }
// } }
//
// values () { values () {
// const valueMap = new Map(); const valueMap = new Map();
// const values = this.props.multiple ? this.props.value : [this.props.value]; const vals = this.props.multiple ? this.props.value : [this.props.value];
// for (const [k, v] of this.source()) { for (const [k, v] of this.source()) {
// if (values.indexOf(k) !== -1) valueMap.set(k, v); if (vals.indexOf(k) !== -1) valueMap.set(k, v);
// } }
// return valueMap; return valueMap;
// } }
//
// select (key, event) { select (key, event) {
// events.pauseEvent(event); events.pauseEvent(event);
// const values = this.values(this.props.value); const values = this.values(this.props.value);
// this.handleChange([key, ...values.keys()], event); this.handleChange([key, ...values.keys()], event);
// } }
//
// unselect (key, event) { unselect (key, event) {
// const values = this.values(this.props.value); const values = this.values(this.props.value);
// values.delete(key); values.delete(key);
// this.handleChange([...values.keys()], event); this.handleChange([...values.keys()], event);
// } }
//
// renderSelected () { renderSelected () {
// if (this.props.multiple) { if (this.props.multiple) {
// const selectedItems = [...this.values()].map(([key, value]) => { const selectedItems = [...this.values()].map(([key, value]) => {
// return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>; return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
// }); });
//
// return <ul className={style.values}>{selectedItems}</ul>; return <ul className={style.values}>{selectedItems}</ul>;
// } }
// } }
//
// renderSuggestions () { renderSuggestions () {
// const suggestions2 = [...this.suggestions2()].map(([key, value]) => { const suggestions = [...this.suggestions()].map(([key, value]) => {
// const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key}); const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
// return ( return (
// <li <li
// key={key} key={key}
// className={className} className={className}
// onMouseDown={this.select.bind(this, key)} onMouseDown={this.select.bind(this, key)}
// onMouseOver={this.handleSuggestionHover.bind(this, key)} onMouseOver={this.handleSuggestionHover.bind(this, key)}
// > >
// {value} {value}
// </li> </li>
// ); );
// }); });
//
// const className = ClassNames(style.suggestions2, {[style.up]: this.state.direction === 'up'}); const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
// return <ul ref='suggestions' className={className}>{suggestions}</ul>; return <ul ref='suggestions' className={className}>{suggestions}</ul>;
// } }
//
// render () { render () {
// const {error, label, ...other} = this.props; const {error, label, ...other} = this.props;
// const className = ClassNames(style.root, { const className = ClassNames(style.root, {
// [style.focus]: this.state.focus [style.focus]: this.state.focus
// }, this.props.className); }, this.props.className);
//
// return ( return (
// <div data-react-toolbox='autocomplete' className={className}> <div data-react-toolbox='autocomplete' className={className}>
// {this.renderSelected()} {this.renderSelected()}
// <Input <Input
// {...other} {...other}
// ref='input' ref='input'
// className={style.input} className={style.input}
// error={error} error={error}
// label={label} label={label}
// onBlur={this.handleQueryBlur} onBlur={this.handleQueryBlur}
// onChange={this.handleQueryChange} onChange={this.handleQueryChange}
// onFocus={this.handleQueryFocus} onFocus={this.handleQueryFocus}
// onKeyUp={this.handleQueryKeyUp} onKeyUp={this.handleQueryKeyUp}
// value={this.state.query} value={this.state.query}
// /> />
// {this.renderSuggestions()} {this.renderSuggestions()}
// </div> </div>
// ); );
// } }
//} }
//
//export default Autocomplete; export default Autocomplete;

4
components/utils/index.js
View File

@ -4,3 +4,7 @@ import time from './time';
import utils from './utils'; import utils from './utils';
export default {events, prefixer, time, utils}; export default {events, prefixer, time, utils};
export {events};
export {prefixer};
export {time};
export {utils};

6
server.js
View File

@ -17,14 +17,14 @@ app.use(require('webpack-dev-middleware')(compiler, {
app.use(require('webpack-hot-middleware')(compiler)); app.use(require('webpack-hot-middleware')(compiler));
app.get('*', function (req, res) { app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, './www/index.html')); res.sendFile(path.join(__dirname, './spec/index.html'));
}); });
app.listen(8081, '0.0.0.0', function (err) { app.listen(8080, '0.0.0.0', function (err) {
if (err) { if (err) {
console.log(err); console.log(err);
return; return;
} }
console.log('Listening at http://0.0.0.0:8081'); console.log('Listening at http://0.0.0.0:8080');
}); });

4
webpack.config.development.js
View File

@ -23,8 +23,8 @@ module.exports = {
loaders: [ loaders: [
{ {
test: /\.(js|jsx)$/, test: /\.(js|jsx)$/,
loader: ['babel'], loader: 'babel',
include: path.join(__dirname, 'spec') exclude: /(node_modules)/
}, { }, {
test: /\.(scss|css)$/, test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap') loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')