summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2019-02-13 19:19:10 +0100
committerJules Laplace <julescarbon@gmail.com>2019-02-13 19:19:10 +0100
commit5c176ce457f195dfad15d0c7d01d36fc2f9fdbdd (patch)
tree5b86773170303e86edf54c135b9fb4750cbb3df2 /client
parent83063b97105c7514d71ec2afaaf66def49116214 (diff)
possible PDF embed
Diffstat (limited to 'client')
-rw-r--r--client/geocode/autocomplete.component.js208
-rw-r--r--client/geocode/geocode.component.js25
-rw-r--r--client/geocode/index.js10
3 files changed, 0 insertions, 243 deletions
diff --git a/client/geocode/autocomplete.component.js b/client/geocode/autocomplete.component.js
deleted file mode 100644
index 12419cf1..00000000
--- a/client/geocode/autocomplete.component.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { Component } from 'react'
-// import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-function formatLabel(label, value) {
- if (!value) {
- return label
- }
- let len = 0
- return (
- <span>
- {
- label.split(new RegExp(value.replace(/[-\[\]\(\)\+\*\\\^\$\{\}\.\?\&\|\<\>]/g, ''), "i")) // eslint-disable-line
- .reduce((prev, current, i) => {
- if (!i) {
- len += current.length
- return [current]
- }
- const ret = prev.concat(<b key={i}>{label.substr(len, value.length)}</b>, current)
- len += value.length + current.length
- return ret
- }, [])
- }
- </span>
- )
-}
-
-function sanitizeForAutocomplete(s) {
- return (s || "")
- .toLowerCase()
- .replace(/[^a-zA-Z0-9 ]/g, '')
- .trim()
- .replace(/\\/g, '')
-}
-
-class Autocomplete extends Component {
- constructor(props) {
- super()
- this.state = {
- q: props.q || "",
- selected: 0,
- matches: []
- }
- this.handleKeyDown = this.handleKeyDown.bind(this)
- this.handleChange = this.handleChange.bind(this)
- this.handleCancel = this.handleCancel.bind(this)
- }
-
- componentWillMount() {
- // build index based on what's in the hierarchy
- const { nodes } = this.props.hierarchy
- let index = []
- this.index = index
- Object.keys(nodes).forEach(key => {
- const node = nodes[key]
- if (!key || !node || !node.name || !node.parent) return
- let { name } = node
- let prefixName = name
- if (node.is_attribute) {
- const parent = nodes[node.parent]
- if (parent) {
- prefixName = parent.name + " (" + name + ")"
- }
- }
- index.push([sanitizeForAutocomplete(prefixName), name, node.id])
- node.synonyms
- .split("\n")
- .map(word => word = word.trim())
- .filter(word => !!word)
- .forEach(word => index.push([prefixName, name, node.id]))
- })
- }
-
- handleKeyDown(e) {
- let id
- switch (e.keyCode) {
- case 27: // escape
- e.preventDefault()
- this.handleCancel()
- break
- case 37: // left
- case 38: // up
- e.preventDefault()
- this.setState({
- selected: (this.state.matches.length + this.state.selected - 1) % this.state.matches.length
- })
- return false
- case 39: // right
- case 40: // down
- e.preventDefault()
- this.setState({
- selected: (this.state.selected + 1) % this.state.matches.length
- })
- return false
- case 13: // enter
- id = this.state.matches[this.state.selected]
- e.preventDefault()
- this.handleSelect(id)
- return false
- default:
- break
- }
- }
-
- handleChange(e) {
- // search for the given string in our index
- const q = e.target.value
- let value = sanitizeForAutocomplete(q)
- if (!value.length) {
- this.setState({
- q,
- selected: 0,
- matches: [],
- })
- return
- }
- const re = new RegExp(value)
- let matches = []
- let seen = {}
- this.index.forEach(pair => {
- if (seen[pair[2]]) return
- if (pair[0].match(re)) {
- seen[pair[2]] = true
- if (pair[1].indexOf(value) === 0) {
- matches.unshift(pair[2])
- } else {
- matches.push(pair[2])
- }
- }
- })
- this.setState({
- q,
- selected: 0,
- matches: matches.slice(0, 10),
- })
- }
-
- handleSelect(id) {
- const { nodes } = this.props.hierarchy
- const node = nodes[id]
- if (this.props.onSelect) this.props.onSelect(node)
- this.setState({ q: "", selected: 0, matches: [] })
- }
-
- handleCancel() {
- if (this.props.onCancel) this.props.onCancel()
- this.setState({ q: "", selected: 0, matches: [] })
- }
-
- render() {
- // const suggestions = this.state.suggestions.map((suggestion))
- const { nodes } = this.props.hierarchy
- const { q, selected } = this.state
- const matches = this.state.matches.map((match, i) => {
- const node = nodes[match]
- const parent = nodes[node.parent]
- let label
- if (node.is_attribute) {
- label = (
- <span>
- {formatLabel(parent.name, q)}
- {' '}<small>{'('}{formatLabel(node.name, q)}{')'}</small>
- </span>
- )
- } else {
- label = formatLabel(node.name, q)
- }
- return (
- <div
- key={i}
- className={selected === i ? 'selected' : ''}
- onClick={() => this.handleSelect(node.id)}
- onMouseEnter={() => this.setState({ selected: i })}
- >
- {label}
- </div>
- )
- })
- return (
- <div className="autocomplete">
- <input
- type="text"
- name="q"
- value={this.state.q}
- onKeyDown={this.handleKeyDown}
- onChange={this.handleChange}
- autoFocus
- autoCapitalize="off"
- autoComplete="off"
- placeholder="Start typing a name"
- />
- <div className="matches">
- {matches}
- </div>
- </div>
- )
- }
-}
-
-const mapStateToProps = (state, ownProps) => ({
- onSelect: ownProps.onSelect,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Autocomplete)
diff --git a/client/geocode/geocode.component.js b/client/geocode/geocode.component.js
deleted file mode 100644
index e57d238d..00000000
--- a/client/geocode/geocode.component.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Component } from 'react'
-
-import Autocomplete from './autocomplete.component'
-
-class GeocodeContainer extends Component {
- // constructor() {
- // super()
- // }
- render() {
- // const { } = this.props
- return (
- <div className=''>
- <select>
- {}
- </select>
- <div>
- <Autocomplete />
- </div>
- </div>
- )
- }
-}
-
-
-export default GeocodeContainer
diff --git a/client/geocode/index.js b/client/geocode/index.js
deleted file mode 100644
index 4f0da3f6..00000000
--- a/client/geocode/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-// import { toArray } from '../util'
-
-import GeocodeContainer from './autocomplete.component'
-
-ReactDOM.render(
- <GeocodeContainer />, document.querySelector('#container')
-)