Added autocomplete tagselector component

client/src/app-components/ticket-viewer.js

@@ -134,7 +134,13 @@ class TicketViewer extends React.Component {
                                   onChange={this.onDepartmentDropdownChanged.bind(this)} />
                     </div>
                     <div className="col-md-4">{ticket.author.name}</div>
-                    <div className="col-md-4"> <TagSelector items={this.props.tags} values={this.props.ticket.tags} onRemoveClick={this.removeTag.bind(this)} onTagSelected={this.addTag.bind(this)}/></div>
+                    <div className="col-md-4">
+                        <TagSelector
+                            items={this.props.tags}
+                            values={this.props.ticket.tags}
+                            onRemoveClick={this.removeTag.bind(this)}
+                            onTagSelected={this.addTag.bind(this)}/>
+                    </div>
                 </div>
                 <div className="ticket-viewer__info-row-header row">
                     <div className="col-md-4">{i18n('PRIORITY')}</div>
@@ -143,7 +149,11 @@ class TicketViewer extends React.Component {
                 </div>
                 <div className="ticket-viewer__info-row-values row">
                     <div className="col-md-4">
-                        <DropDown className="ticket-viewer__editable-dropdown" items={priorityList} selectedIndex={priorities[ticket.priority]} onChange={this.onPriorityDropdownChanged.bind(this)} />
+                        <DropDown
+                            className="ticket-viewer__editable-dropdown"
+                            items={priorityList}
+                            selectedIndex={priorities[ticket.priority]}
+                            onChange={this.onPriorityDropdownChanged.bind(this)} />
                     </div>
                     <div className="col-md-4">
                         {this.renderAssignStaffList()}

client/src/app/demo/components-demo-page.js

@@ -26,7 +26,7 @@ class DemoPage extends React.Component {
             <div>
                 <AutocompleteDropDown
                 items={itemsList}
-                value={this.state.selectedList}
+                values={this.state.selectedList}
                 onChange={selectedList => this.setState({selectedList: selectedList})}/>
                 <button onClick={() => this.setState({selectedList: []})}>clear</button>
             </div>

client/src/core-components/autocomplete-dropdown.js

@@ -11,8 +11,9 @@ class AutocompleteDropDown extends React.Component {
     static propTypes = {
         items: Menu.propTypes.items,
         onChange: React.PropTypes.func,
-        value: React.PropTypes.arrayOf(React.PropTypes.shape({
-        }))
+        values: React.PropTypes.arrayOf(React.PropTypes.shape({})),
+        onRemoveClick: React.PropTypes.func,
+        onTagSelected: React.PropTypes.func,
     };
 
     state = {
@@ -30,7 +31,7 @@ class AutocompleteDropDown extends React.Component {
             inputWith = Math.ceil(this.span.getBoundingClientRect().width) + 20
             this.span.style.display = 'none';
         }
-        
+
         return (
             <div className="tag-selector">
                 <label>
@@ -81,7 +82,10 @@ class AutocompleteDropDown extends React.Component {
     }
 
     onRemoveClick(itemId, event) {
-        const { onChange, } = this.props;
+        const {
+            onChange,
+            onRemoveClick,
+        } = this.props;
 
         event.preventDefault();
 
@@ -93,10 +97,14 @@ class AutocompleteDropDown extends React.Component {
 
         onChange && onChange(this.getValue().filter(item => item.id != itemId));
 
+        onRemoveClick && onRemoveClick(itemId);
     }
 
     onChangeDropDown(e){
-        const { onChange, } = this.props;
+        const {
+            onChange,
+            onTagSelected
+        } = this.props;
 
         if (this.getDropdownList().length) {
             this.setState({
@@ -106,6 +114,8 @@ class AutocompleteDropDown extends React.Component {
             });
 
             onChange && onChange([...this.getValue(), this.getDropdownList()[e.index]]);
+
+            onTagSelected && onTagSelected(this.getDropdownList()[e.index].id);
     
         }
 
@@ -132,7 +142,10 @@ class AutocompleteDropDown extends React.Component {
     }
 
     onKeyDown(event){
-        const { onChange, } = this.props;
+        const {
+            onChange,
+            onRemoveClick,
+        } = this.props;
 
         if (keyCode(event) === "space"){
             event.stopPropagation();
@@ -145,11 +158,18 @@ class AutocompleteDropDown extends React.Component {
             });
 
             onChange && onChange(this.getValue().slice(0,this.getValue().length-1));
+
+            if (this.getValue().length) {
+                const itemId = this.getValue()[this.getValue().length-1].id;
+                onRemoveClick && onRemoveClick(itemId);
+            }
         }
     }
 
     getValue() {
-        return (this.props.value !== undefined) ? this.props.value : this.state.itemsSelected;
+        const { values, } = this.props;
+
+        return (values !== undefined) ? values : this.state.itemsSelected;
     }
 
 }

client/src/core-components/tag-selector.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
-import Icon from 'core-components/icon';
-import DropDown from 'core-components/drop-down';
-import Tag from 'core-components/tag';
+import AutocompleteDropDown from './autocomplete-dropdown';
 
 class TagSelector extends React.Component {
 
@@ -17,35 +15,24 @@ class TagSelector extends React.Component {
     };
 
     render() {
+        const items = this.props.items.map(tag => ({...tag, content: this.renderTagOption(tag)}));
+        const values = items.filter(item => _.includes(this.props.values, item.name ));
+
         return (
             <div className="tag-selector">
-                <DropDown className="tag-selector__drop-down" items={this.renderTagOptions().map(tag => ({content: tag}))} selectedIndex={-1} size="large">
-                    {this.renderSelectedTags()}
-                </DropDown>
+                <AutocompleteDropDown
+                    items={items}
+                    values={values}
+                    onRemoveClick={this.props.onRemoveClick}
+                    onTagSelected={this.props.onTagSelected}
+                    />
             </div>
         );
     }
 
-    renderSelectedTags() {
-        const itemList = this.props.values.map(value => _.find(this.props.items, {name:value}));
-    
-        return itemList.map(this.renderSelectedTag.bind(this));
-    }
-
-    renderSelectedTag(item,index) {
-    
-        return <Tag name={item.name} color={item.color} showDeleteButton onRemoveClick={this.onRemoveClick.bind(this,item.id)} key={index}/>;
-    }
-
-    renderTagOptions() {
-        const itemList = _.filter(this.props.items,(item) => !_.includes(this.props.values,item.name));
-        
-        return itemList.map(this.renderTagOption.bind(this));
-    }
-
     renderTagOption(item) {
         return (
-            <div onClick={this.onTagSelected.bind(this,item.id)} className="tag-selector__tag-option" key={`tag-option-${item.id}`}>
+            <div className="tag-selector__tag-option" key={`tag-option-${item.id}`}>
                 <span className="tag-selector__tag-option-square" style={{backgroundColor:item.color}}/>
                 <span className="tag-selector__tag-option-name" >{item.name}</span>
             </div>
@@ -53,15 +40,18 @@ class TagSelector extends React.Component {
     }
 
     onRemoveClick(tagId) {
-        if(this.props.onRemoveClick){
-            this.props.onRemoveClick(tagId);
-        }
+        const { onRemoveClick, } = this.props;
+
+        onRemoveClick && onRemoveClick(tagId);
+
     }
 
     onTagSelected(tagId) {
-        if(this.props.onTagSelected){
-            this.props.onTagSelected(tagId);
-        }
+        const { onTagSelected, } = this.props;
+
+        onTagSelected && onTagSelected(tagId);
+
     }
+
 }
 export default TagSelector;