From 9a8760c12090ed1121b329eede6e8071519ba494 Mon Sep 17 00:00:00 2001 From: Dick Choi Date: Tue, 4 Oct 2016 13:35:38 +0900 Subject: [PATCH] delete ModeIcon & ModeSelect --- browser/components/ModeIcon.js | 82 --------------- browser/components/ModeSelect.js | 172 ------------------------------- 2 files changed, 254 deletions(-) delete mode 100644 browser/components/ModeIcon.js delete mode 100644 browser/components/ModeSelect.js diff --git a/browser/components/ModeIcon.js b/browser/components/ModeIcon.js deleted file mode 100644 index 9fe48390..00000000 --- a/browser/components/ModeIcon.js +++ /dev/null @@ -1,82 +0,0 @@ -import React, { PropTypes } from 'react' - -export default class ModeIcon extends React.Component { - getClassName () { - var mode = this.props.mode - switch (mode) { - // Script - case 'javascript': - return 'devicon-javascript-plain' - case 'jsx': - return 'devicon-react-original' - case 'coffee': - return 'devicon-coffeescript-original' - case 'ruby': - return 'devicon-ruby-plain' - case 'erlang': - return 'devicon-erlang-plain' - case 'php': - return 'devicon-php-plain' - - // HTML - case 'html': - return 'devicon-html5-plain' - - // Stylesheet - case 'css': - return 'devicon-css3-plain' - case 'less': - return 'devicon-less-plain-wordmark' - case 'sass': - case 'scss': - return 'devicon-sass-original' - - // Compile - case 'c': - return 'devicon-c-plain' - case 'cpp': - return 'devicon-cplusplus-plain' - case 'csharp': - return 'devicon-csharp-plain' - case 'objc': - return 'devicon-apple-original' - case 'golang': - return 'devicon-go-plain' - case 'java': - return 'devicon-java-plain' - - // Framework - case 'django': - return 'devicon-django-plain' - - // Config - case 'dockerfile': - return 'devicon-docker-plain' - case 'gitignore': - return 'devicon-git-plain' - - // Shell - case 'sh': - case 'batchfile': - case 'powershell': - return 'fa fa-fw fa-terminal' - - case 'text': - case 'markdown': - return 'fa fa-fw fa-file-text-o' - } - return 'fa fa-fw fa-code' - } - - render () { - let className = `ModeIcon ${this.getClassName()} ${this.props.className}` - return ( - - ) - } -} - -ModeIcon.propTypes = { - className: PropTypes.string, - mode: PropTypes.string -} diff --git a/browser/components/ModeSelect.js b/browser/components/ModeSelect.js deleted file mode 100644 index e8719b8d..00000000 --- a/browser/components/ModeSelect.js +++ /dev/null @@ -1,172 +0,0 @@ -import React, { PropTypes } from 'react' -import ReactDOM from 'react-dom' -import ModeIcon from './ModeIcon' -import modes from '../lib/modes' -import _ from 'lodash' - -const IDLE_MODE = 'IDLE_MODE' -const EDIT_MODE = 'EDIT_MODE' - -export default class ModeSelect extends React.Component { - constructor (props) { - super(props) - - this.state = { - mode: IDLE_MODE, - search: '', - focusIndex: 0 - } - } - - componentDidMount () { - this.blurHandler = e => { - let searchElement = ReactDOM.findDOMNode(this.refs.search) - if (this.state.mode === EDIT_MODE && document.activeElement !== searchElement) { - this.handleBlur(e) - } - } - window.addEventListener('click', this.blurHandler) - } - - componentWillUnmount () { - window.removeEventListener('click', this.blurHandler) - let searchElement = ReactDOM.findDOMNode(this.refs.search) - if (searchElement != null && this.searchKeyDownListener != null) { - searchElement.removeEventListener('keydown', this.searchKeyDownListener) - } - } - - handleIdleSelectClick (e) { - this.setState({mode: EDIT_MODE, search: this.props.value}, () => { - ReactDOM.findDOMNode(this.refs.search).select() - }) - } - - handleModeOptionClick (modeName) { - return e => { - this.props.onChange(modeName) - this.setState({ - mode: IDLE_MODE, - search: '', - focusIndex: 0 - }) - } - } - - handleSearchKeyDown (e) { - switch (e.keyCode) { - // up - case 38: - e.preventDefault() - if (this.state.focusIndex > 0) this.setState({focusIndex: this.state.focusIndex - 1}) - break - // down - case 40: - e.preventDefault() - { - let search = _.escapeRegExp(this.state.search) - let filteredModes = modes - .filter(mode => { - let nameMatched = mode.name.match(search) - let aliasMatched = _.some(mode.alias, alias => alias.match(search)) - return nameMatched || aliasMatched - }) - if (filteredModes.length === this.state.focusIndex + 1) this.setState({focusIndex: filteredModes.length - 1}) - else this.setState({focusIndex: this.state.focusIndex + 1}) - } - break - // enter - case 13: - e.preventDefault() - { - let search = _.escapeRegExp(this.state.search) - let filteredModes = modes - .filter(mode => { - let nameMatched = mode.name.match(search) - let aliasMatched = _.some(mode.alias, alias => alias.match(search)) - return nameMatched || aliasMatched - }) - let targetMode = filteredModes[this.state.focusIndex] - if (targetMode != null) { - this.props.onChange(targetMode.name) - this.setIdle() - } - } - break - // esc - case 27: - case 9: - e.stopPropagation() - this.setIdle() - } - if (this.props.onKeyDown) this.props.onKeyDown(e) - } - - handleSearchChange (e) { - this.setState({ - search: e.target.value, - focusIndex: 0 - }) - } - - handleBlur (e) { - if (e.target !== ReactDOM.findDOMNode(this.refs.search)) { - this.setIdle() - } - } - - setIdle () { - this.setState({ - mode: IDLE_MODE, - search: '', - focusIndex: 0 - }) - } - - render () { - let className = this.props.className != null - ? `ModeSelect ${this.props.className}` - : this.props.className - - if (this.state.mode === IDLE_MODE) { - let mode = _.findWhere(modes, {name: this.props.value}) - let modeName = mode != null ? mode.name : 'text' - let modeLabel = mode != null ? mode.label : this.props.value - - return ( -
this.handleIdleSelectClick(e)}> - {modeLabel} -
- ) - } - - let search = _.escapeRegExp(this.state.search) - let filteredOptions = modes - .filter(mode => { - let nameMatched = mode.name.match(search) - let aliasMatched = _.some(mode.alias, alias => alias.match(search)) - return nameMatched || aliasMatched - }) - .map((mode, index) => { - return ( -
this.handleModeOptionClick(mode.name)(e)}>{mode.label}
- ) - }) - - return ( -
- this.handleBlur(e)} onKeyDown={e => this.handleSearchKeyDown(e)} ref='search' onChange={e => this.handleSearchChange(e)} value={this.state.search} type='text'/> -
- {filteredOptions} -
-
- ) - } -} - -ModeSelect.propTypes = { - className: PropTypes.string, - value: PropTypes.string, - onChange: PropTypes.func, - onKeyDown: PropTypes.func -}