Skip to content
This repository was archived by the owner on Jan 14, 2022. It is now read-only.

Commit 2e83a62

Browse files
ZeroX-DGZeroX-DG
committed
added input select for language
1 parent 67f5b40 commit 2e83a62

File tree

7 files changed

+553
-326
lines changed

7 files changed

+553
-326
lines changed

‎browser/render/components/select-input/index.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react'
2+
import './select-input'
3+
4+
class SelectInput extends React.PureComponent {
5+
state = {
6+
selected: { label: '', value: '' },
7+
keyword: '',
8+
isFocus: false
9+
}
10+
11+
changeOption = e => {
12+
const { onChange } = this.props
13+
const selectedValue = e.target.dataset.value
14+
const selectedLabel = e.target.innerText
15+
const selected = { value: selectedValue, label: selectedLabel }
16+
this.setState({ selected, isFocus: false }, () => {
17+
this.refs.input.value = selectedLabel
18+
if (typeof onChange === 'function') {
19+
onChange(selected)
20+
}
21+
})
22+
}
23+
24+
value () {
25+
return this.state.selected
26+
}
27+
28+
handleBlur = () => {
29+
this.setState({ isFocus: false })
30+
}
31+
32+
handleToggleFocus = () => {
33+
const { isFocus } = this.state
34+
this.setState({ isFocus: !isFocus })
35+
}
36+
37+
handleKeywordChange = e => {
38+
const newKeyword = e.target.value
39+
this.setState({ keyword: newKeyword })
40+
}
41+
42+
filteredOptions = () => {
43+
const { keyword } = this.state
44+
const { options } = this.props
45+
return options.filter(option =>
46+
option.label.toLowerCase().includes(keyword.toLowerCase())
47+
)
48+
}
49+
50+
render () {
51+
const { isFocus } = this.state
52+
return (
53+
<div className="select-input">
54+
<input
55+
type="text"
56+
ref="input"
57+
onClick={this.handleToggleFocus}
58+
onChange={this.handleKeywordChange}
59+
/>
60+
{isFocus && (
61+
<div className="options">
62+
{this.filteredOptions().map(option => (
63+
<div
64+
key={option.label}
65+
className="option"
66+
onClick={this.changeOption}
67+
data-value={option.value}
68+
>
69+
{option.label}
70+
</div>
71+
))}
72+
</div>
73+
)}
74+
</div>
75+
)
76+
}
77+
}
78+
79+
export default SelectInput

‎browser/render/components/select-input/select-input.sass‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.select-input
2+
width: calc(100% - 150px)
3+
border: none
4+
border-radius: 5px
5+
outline: none
6+
display: inline-block
7+
position: relative
8+
input[type='text']
9+
width: 100%!important
10+
height: 30px
11+
padding: 5px
12+
.options
13+
width: 100%
14+
max-height: 300px
15+
overflow-y: scroll
16+
margin-top: 5px
17+
position: absolute
18+
border-radius: 5px
19+
font-family: 'Lato'
20+
z-index: 10
21+
.option
22+
width: 100%
23+
height: 40px
24+
text-overflow: ellipsis
25+
white-space: nowrap
26+
overflow: hidden
27+
padding: 10px
28+
cursor: pointer
29+
user-select: none

‎browser/render/lib/styles/theme/dark.sass‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,16 @@ body[data-theme='dark']
99
background-color: rgba(0, 0, 0, 0.24)
1010
&:hover
1111
background-color: rgba(0, 0, 0, 0.7)
12-
select
12+
select, .select-input input, .select-input .options
1313
background: map-get($input-tag-dark, background)
1414
color: map-get($input-tag-dark, color)
1515
input[type='text'], input[type='number'], textarea
1616
background: map-get($input-tag-dark, background)
1717
color: map-get($input-tag-dark, color)
1818

19+
.select-input .option:hover
20+
background: rgba(255, 255, 255, 0.1)
21+
1922
body[data-theme='dark']
2023
.sidebar
2124
background: map-get($sidebar-dark, background)

‎browser/render/lib/styles/theme/light.sass‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body[data-theme='light']
99
background-color: rgba(0, 0, 0, 0.2)
1010
&:hover
1111
background-color: rgba(0, 0, 0, 0.5)
12-
select
12+
select, .select-input input, .select-input .options
1313
background: map-get($input-tag-light, background)
1414
color: map-get($input-tag-light, color)
1515
input[type='text'], input[type='number'], textarea

‎browser/render/modals/create-snippet/index.jsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,17 @@ import ModalSkeleton from '../modal-skeleton'
33
import eventEmitter from 'lib/event-emitter'
44
import i18n from 'render/lib/i18n'
55
import TagInput from 'render/components/tag-input'
6+
import SelectInput from 'render/components/select-input'
67
import { trackEvent } from 'lib/analytics'
78
import CodeMirror from 'codemirror'
89
import 'codemirror/mode/meta'
910
import 'codemirror/addon/display/autorefresh'
1011

12+
const languageOptions = CodeMirror.modeInfo.reduce((acc, mode) => {
13+
acc.push({ value: mode.mode, label: mode.name })
14+
return acc
15+
}, [])
16+
1117
export default class CreateSnippetModal extends React.Component {
1218
constructor (props) {
1319
super(props)
@@ -84,8 +90,8 @@ export default class CreateSnippetModal extends React.Component {
8490
changeLang () {
8591
const { config } = this.props
8692
const langConf = config.language
87-
const snippetLang = this.refs.lang.value
88-
const snippetMode = CodeMirror.findModeByName(snippetLang).mode
93+
const snippetLang = this.refs.snippetLang.value()
94+
const snippetMode = snippetLang.value
8995
if (snippetMode === 'null') {
9096
this.editor.setOption('mode', 'null')
9197
this.editor.setOption('htmlMode', false)
@@ -110,7 +116,7 @@ export default class CreateSnippetModal extends React.Component {
110116

111117
createSnippet () {
112118
const snippetName = this.refs.snippetName.value
113-
const snippetLang = this.refs.lang.value
119+
const snippetLang = this.refs.snippetLang.value().label
114120
const snippetCode = this.editor.getValue()
115121
// wrappedInstance is mobX wrapped instance of the original component
116122
const snippetTags = this.tags.wrappedInstance.getTags()
@@ -147,13 +153,11 @@ export default class CreateSnippetModal extends React.Component {
147153
</div>
148154
<div className="input-group">
149155
<label>{i18n.__('Snippet language')}</label>
150-
<select ref="lang" onChange={this.changeLang.bind(this)}>
151-
{CodeMirror.modeInfo.map((mode, index) => (
152-
<option value={mode.name} key={index}>
153-
{mode.name}
154-
</option>
155-
))}
156-
</select>
156+
<SelectInput
157+
ref="snippetLang"
158+
options={languageOptions}
159+
onChange={this.changeLang.bind(this)}
160+
/>
157161
</div>
158162
<div className="code-input-group">
159163
<label>{i18n.__('Tags')}</label>

0 commit comments

Comments
 (0)