import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Button } from 'mdbreact'
import Autocomplete from 'react-autocomplete'
class WeldingPlaceLink extends Component {
state = {editing: this.props.id===0,
name : this.props.name,
id : this.props.id,
items: []};
onSave = this.props.onSave;
componentWillMount(){
this.setState ({items: this.loadData(this.state.name)})
}
StartEditing = (e) => { // Начало редактирования
this.lastName = this.state.name;
this.lastId = this.state.id;
this.setState ({editing: true});
}
handleCancel = (e) => { // Отмена редактирования
this.setState ({name: this.lastName,
id: this.lastId,
editing: false})
}
handleSave = (e) => { // Сохранение данных
if (this.onSave) this.onSave(this.state.id, this.state.name);
this.setState ({editing: false});
}
loadData (str){ // Загрузка данных из базы данных
let arr = [];
arr = [
{ label: 'Клиент на Ильичевской 5',id: 1},
{ label: 'Клиент на Технической 9',id: 2},
{ label: 'Муфта на перекрестке Ильичевской',id: 3},
{ label: 'Ящик на Якира 5',id: 4},
{ label: 'Муфта на Старых большевиков 10',id: 5},
{ label: 'Кассета на Лозоватке',id: 6},
{ label: 'Муфта на повороте на Мелешкина 10',id: 7},
{ label: 'Кассета в кабинете бухгалтерии',id: 8},
{ label: 'Клиент Леонида Бородича 10',id: 9},
{ label: 'Новая почта Крыленко 10',id: 10},
{ label: 'Косарева 26',id: 11},
{ label: 'Клиент на Ильичевской 22',id: 12}];
return arr;
}
render (){
const { id,name } = this.props;
let Content = <div style={{color: 'red'}}>WeldingPlaceLink: Не указан параметр id или пустое name</div>;
// <input style={{width: '100%'}} defaultValue={this.state.name}
// onFocus={(e)=>{e.target.select()}} autoFocus={true}
// onKeyPress={(e)=>{if (e.key==='Enter') this.handleSave();}}
// onKeyDown={(e)=>{if (e.key==='Escape') this.handleCancel();}}
// />
if (this.state.editing) { // Если режим редактирования
Content = <div className='d-flex'>
<Autocomplete
getItemValue={(item) => item.label}
wrapperStyle={{display: 'inline-block', width: '100%'}}
inputProps={{autoFocus: true,
style: {width: '100%'}
}}
items={this.state.items.filter((item) => item.label.toUpperCase().indexOf(this.state.name.toUpperCase())>=0 || item.id==this.state.name)}
renderItem={(item, isHighlighted) =>
<div key={item.id} style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
menuStyle ={{
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
zIndex: '99999'
}}
value={this.state.name}
onChange={(e) => this.setState ({name: e.target.value})}
onSelect={(str,val) => {this.setState ({name: val.label, id: val.id})}}
/>
<span className="trigger-square badge-success"
data-toggle="tooltip" data-placement="top" title="сохранить" onClick={this.handleSave}>
<i className="fa fa-check" aria-hidden="true"></i>
</span>
<span className="trigger-square badge-danger"
data-toggle="tooltip" data-placement="top" title="отменить" onClick={this.handleCancel}>
<i className="fa fa-close" aria-hidden="true"></i>
</span>
</div>;
} else
if ((id>0) && (name!=='')) { // Если уже указан код и имя Neighbor
Content = <div>
<i className="fa fa-flag" aria-hidden="true" style={{color: 'red'}}/>
<Link to={'/welding/' + this.state.id+ '/'} style={{cursor: 'default'}}>
<span style={{paddingLeft: "10px"}}>
{this.state.name}</span>
</Link>
{this.props.onSave &&
<i id='edit_button' style={{color: "black", paddingLeft: "5px"}} className="fa fa-pencil" aria-hidden="true" onClick={this.StartEditing}
data-toggle="tooltip" data-placement="top" data-original-title="нажмите для редактирования"/>}
</div>
}
return Content;
}
}
export default WeldingPlaceLink;
use:
<WeldingPlaceLink id={5} name={'test'} onSave={(e)=>{}}/>
