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 => ( -