From 7c346d62eb2375a132c20417e108fb81d60af495 Mon Sep 17 00:00:00 2001 From: Dick Choi Date: Sun, 29 May 2016 02:53:28 +0900 Subject: [PATCH] remove old TagSelect --- browser/components/TagSelect.js | 165 -------------------------------- 1 file changed, 165 deletions(-) delete mode 100644 browser/components/TagSelect.js diff --git a/browser/components/TagSelect.js b/browser/components/TagSelect.js deleted file mode 100644 index 2e631bef..00000000 --- a/browser/components/TagSelect.js +++ /dev/null @@ -1,165 +0,0 @@ -import React, { PropTypes } from 'react' -import ReactDOM from 'react-dom' -import _ from 'lodash' - -function isNotEmptyString (str) { - return _.isString(str) && str.length > 0 -} - -export default class TagSelect extends React.Component { - constructor (props) { - super(props) - - this.state = { - input: '', - isInputFocused: false - } - } - - componentDidMount () { - this.blurInputBlurHandler = e => { - if (ReactDOM.findDOMNode(this.refs.tagInput) !== document.activeElement) { - this.setState({isInputFocused: false}) - } - } - window.addEventListener('click', this.blurInputBlurHandler) - } - - componentWillUnmount (e) { - window.removeEventListener('click', this.blurInputBlurHandler) - } - - // Suggestは必ずInputの下に位置するようにする - componentDidUpdate () { - if (this.shouldShowSuggest()) { - let inputRect = ReactDOM.findDOMNode(this.refs.tagInput).getBoundingClientRect() - let suggestElement = ReactDOM.findDOMNode(this.refs.suggestTags) - if (suggestElement != null) { - suggestElement.style.top = inputRect.top + 20 + 'px' - suggestElement.style.left = inputRect.left + 'px' - } - } - } - - shouldShowSuggest () { - return this.state.isInputFocused && isNotEmptyString(this.state.input) - } - - addTag (tag, clearInput = true) { - let tags = this.props.tags.slice(0) - let newTag = tag.trim() - - if (newTag.length === 0 && clearInput) { - this.setState({input: ''}) - return - } - - tags.push(newTag) - tags = _.uniq(tags) - - if (_.isFunction(this.props.onChange)) { - this.props.onChange(newTag, tags) - } - if (clearInput) this.setState({input: ''}) - } - - handleKeyDown (e) { - switch (e.keyCode) { - case 8: - { - if (this.state.input.length > 0) break - e.preventDefault() - - let tags = this.props.tags.slice(0) - tags.pop() - - this.props.onChange(null, tags) - } - break - case 13: - { - e.preventDefault() - this.addTag(this.state.input) - } - } - } - - handleThisClick (e) { - ReactDOM.findDOMNode(this.refs.tagInput).focus() - } - - handleInputFocus (e) { - this.setState({isInputFocused: true}) - } - - handleItemRemoveButton (tag) { - return e => { - e.stopPropagation() - - let tags = this.props.tags.slice(0) - tags.splice(tags.indexOf(tag), 1) - - if (_.isFunction(this.props.onChange)) { - this.props.onChange(null, tags) - } - } - } - - handleSuggestClick (tag) { - return e => { - this.addTag(tag) - } - } - - render () { - let { tags, suggestTags } = this.props - - let tagElements = _.isArray(tags) - ? this.props.tags.map(tag => ( -
- -
{tag}
-
)) - : null - - let suggestElements = this.shouldShowSuggest() ? suggestTags - .filter(tag => { - return tag.match(this.state.input) - }) - .map(tag => { - return - }) - : null - - return ( -
this.handleThisClick(e)}> -
- {tagElements} - this.handleKeyDown(e)} - ref='tagInput' - valueLink={this.linkState('input')} - placeholder='Click here to add tags' - className='TagSelect-input' - onFocus={e => this.handleInputFocus(e)} - /> -
- {suggestElements != null && suggestElements.length > 0 - ? ( -
- {suggestElements} -
- ) - : null - } -
- ) - } -} - -TagSelect.propTypes = { - tags: PropTypes.arrayOf(PropTypes.string), - onChange: PropTypes.func, - suggestTags: PropTypes.array -}