metacode selector working nicely
This commit is contained in:
Connor Turland
parent
616a489ae4
commit
9c13f5a281
5 changed files with 29 additions and 102 deletions
|
|
@ -5,48 +5,20 @@
|
|||
.metacodeSelect {
|
||||
border-top: 1px solid #DDD;
|
||||
padding: 0;
|
||||
|
||||
.tabList {
|
||||
float: left;
|
||||
background: #FFF;
|
||||
background: #FFF;
|
||||
|
||||
div {
|
||||
border-right: 1px solid #DDD;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
div.active {
|
||||
border-right: none;
|
||||
background: #EEE;
|
||||
|
||||
.metacodeFilterInput {
|
||||
background: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
.metacodeFilterInput {
|
||||
width: 100px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #424242;
|
||||
font-family: 'din-medium', helvetica, sans-serif;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 8px;
|
||||
display: block;
|
||||
}
|
||||
.metacodeFilterInput {
|
||||
width: 100px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #424242;
|
||||
font-family: 'din-medium', helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.metacodeList {
|
||||
float:left;
|
||||
list-style: none;
|
||||
background: #FFF;
|
||||
min-height: 107px;
|
||||
|
|
@ -57,7 +29,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover, &.keySelect {
|
||||
background: #EEE;
|
||||
background: #4CAF50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,4 +41,4 @@
|
|||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<span><%= user_metacode().name %></span>
|
||||
<div class="downArrow"></div>
|
||||
</div>
|
||||
<%= form.text_field :name, :maxlength => 140, :placeholder => "title..." %>
|
||||
<%= form.text_field :name, :maxlength => 140, :placeholder => "what are you thinking..." %>
|
||||
<div class="clearfloat"></div>
|
||||
<div id="metacodeSelector"></div>
|
||||
<div class="clearfloat"></div>
|
||||
|
|
|
|||
|
|
@ -253,9 +253,7 @@ const Create = {
|
|||
Create.newTopic.hideSelector()
|
||||
$('#topic_name').focus()
|
||||
},
|
||||
metacodes: DataModel.Metacodes.models,
|
||||
recent: Create.recentMetacodes,
|
||||
mostUsed: Create.mostUsedMetacodes
|
||||
metacodes: DataModel.Metacodes.models
|
||||
}),
|
||||
document.getElementById('metacodeSelector')
|
||||
)
|
||||
|
|
|
|||
|
|
@ -725,7 +725,7 @@ const JIT = {
|
|||
const creatingMap = GlobalUI.lightbox
|
||||
if (creatingMap === 'newmap' || creatingMap === 'forkmap') {
|
||||
GlobalUI.CreateMap.submit()
|
||||
} else if (Create.newTopic.beingCreated) {
|
||||
} else if (Create.newTopic.beingCreated && !Create.newTopic.metacodeSelectorOpen) {
|
||||
Topic.createTopicLocally()
|
||||
} else if (Create.newSynapse.beingCreated) {
|
||||
Synapse.createSynapseLocally()
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ class MetacodeSelect extends Component {
|
|||
super(props)
|
||||
this.state = {
|
||||
filterText: '',
|
||||
activeTab: 0,
|
||||
selectingSection: true,
|
||||
underCursor: 0
|
||||
}
|
||||
|
|
@ -46,112 +45,72 @@ class MetacodeSelect extends Component {
|
|||
this.setState({ filterText: e.target.value, underCursor: 0 })
|
||||
}
|
||||
|
||||
changeDisplay (activeTab) {
|
||||
this.setState({ activeTab, underCursor: 0 })
|
||||
}
|
||||
|
||||
getSelectMetacodes () {
|
||||
const { metacodes, recent, mostUsed } = this.props
|
||||
const { filterText, activeTab } = this.state
|
||||
|
||||
let selectMetacodes = []
|
||||
if (activeTab == 0) { // search
|
||||
let selectMetacodes = metacodes
|
||||
if (filterText.length > 1) { // search
|
||||
selectMetacodes = filterText.length > 1 ? metacodes.filter(m => {
|
||||
return m.get('name').toLowerCase().search(filterText.toLowerCase()) > -1
|
||||
}) : []
|
||||
} else if (activeTab == 1) { // recent
|
||||
selectMetacodes = recent.map(id => {
|
||||
return metacodes.find(m => m.id == id)
|
||||
}).filter(m => m)
|
||||
} else if (activeTab == 2) { // mostUsed
|
||||
selectMetacodes = mostUsed.map(id => {
|
||||
return metacodes.find(m => m.id == id)
|
||||
}).filter(m => m)
|
||||
}
|
||||
return selectMetacodes
|
||||
}
|
||||
|
||||
handleKeyUp (e) {
|
||||
const { close } = this.props
|
||||
const { activeTab, underCursor, selectingSection } = this.state
|
||||
const { underCursor } = this.state
|
||||
const selectMetacodes = this.getSelectMetacodes()
|
||||
let nextIndex
|
||||
|
||||
switch (e.which) {
|
||||
case ENTER_KEY:
|
||||
if (selectMetacodes.length && !selectingSection) this.resetAndClick(selectMetacodes[underCursor].id)
|
||||
if (selectMetacodes.length) this.resetAndClick(selectMetacodes[underCursor].id)
|
||||
break
|
||||
case UP_ARROW:
|
||||
if (selectingSection && activeTab == 0) {
|
||||
if (underCursor == 0) {
|
||||
close()
|
||||
break
|
||||
}
|
||||
else if (selectingSection) {
|
||||
nextIndex = activeTab - 1
|
||||
this.changeDisplay(nextIndex)
|
||||
break
|
||||
}
|
||||
nextIndex = underCursor == 0 ? selectMetacodes.length - 1 : underCursor - 1
|
||||
this.setState({ underCursor: nextIndex })
|
||||
break
|
||||
case DOWN_ARROW:
|
||||
if (selectingSection) {
|
||||
nextIndex = activeTab == 2 ? 0 : activeTab + 1
|
||||
this.changeDisplay(nextIndex)
|
||||
break
|
||||
}
|
||||
nextIndex = underCursor == selectMetacodes.length - 1 ? 0 : underCursor + 1
|
||||
this.setState({ underCursor: nextIndex })
|
||||
break
|
||||
case RIGHT_ARROW:
|
||||
if (selectingSection) this.setState({ selectingSection: false })
|
||||
break
|
||||
case LEFT_ARROW:
|
||||
if (!selectingSection) this.setState({ selectingSection: true })
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
resetAndClick (id) {
|
||||
const { onClick } = this.props
|
||||
this.setState({ filterText: '', underCursor: 0 })
|
||||
this.changeDisplay(0)
|
||||
onClick(id)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { onClick, close, recent, mostUsed } = this.props
|
||||
const { filterText, activeTab, underCursor, selectingSection } = this.state
|
||||
const { onClick, close } = this.props
|
||||
const { filterText, underCursor } = this.state
|
||||
const selectMetacodes = this.getSelectMetacodes()
|
||||
return <div className='metacodeSelect'>
|
||||
<div className='tabList'>
|
||||
<div className={ activeTab == 0 ? 'active' : '' }
|
||||
onClick={() => { this.changeDisplay(0) }}>
|
||||
<input type='text'
|
||||
<input type='text'
|
||||
className='metacodeFilterInput'
|
||||
placeholder='Search...'
|
||||
ref='input'
|
||||
value={ filterText }
|
||||
onChange={ this.changeFilterText.bind(this) } />
|
||||
</div>
|
||||
<div className={ activeTab == 1 ? 'active' : '' }
|
||||
onClick={() => { this.changeDisplay(1) }}>
|
||||
<span>Recent</span>
|
||||
</div>
|
||||
<div className={ activeTab == 2 ? 'active' : '' }
|
||||
onClick={() => { this.changeDisplay(2) }}>
|
||||
<span>Most Used</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='metacodeList'>
|
||||
{ selectMetacodes.map((m, index) => {
|
||||
return <Metacode underCursor={!selectingSection && underCursor == index}
|
||||
<ul className='metacodeList'>
|
||||
{ selectMetacodes.map((m, index) => {
|
||||
return <Metacode underCursor={underCursor == index}
|
||||
key={m.id}
|
||||
m={m}
|
||||
onClick={this.resetAndClick.bind(this)} />
|
||||
})}
|
||||
</ul>
|
||||
<div className='clearfloat'></div>
|
||||
</ul>
|
||||
<div className='clearfloat'></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -160,8 +119,6 @@ MetacodeSelect.propTypes = {
|
|||
onClick: PropTypes.func.isRequired,
|
||||
close: PropTypes.func.isRequired,
|
||||
metacodes: PropTypes.array.isRequired,
|
||||
recent: PropTypes.array.isRequired,
|
||||
mostUsed: PropTypes.array.isRequired
|
||||
}
|
||||
|
||||
export default MetacodeSelect
|
||||
|
|
|
|||
Loading…
Reference in a new issue