tag selector styling

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

@@ -17,6 +17,7 @@ const Menu = require('core-components/menu');
 const Tooltip = require('core-components/tooltip');
 const Table = require('core-components/table');
 const InfoTooltip = require('core-components/info-tooltip');
+const TagSelector = require('core-components/tag-selector');
 
 function rand(min, max, num) {
     var rtn = [];
@@ -75,6 +76,23 @@ let DemoPage = React.createClass({
 				<Button type="primary">Sign up</Button>
 			)
 		},
+        {
+            title: 'Tag selector',
+            render: (
+                <TagSelector
+                    items={[
+                        {name: 'tag1', color: 'blue'},
+                        {name: 'suggestion', color: '#ff6900'},
+                        {name: 'tag3', color: 'yellow'},
+                        {name: 'tag4', color: 'green'},
+                        {name: 'bug', color: '#eb144c'},
+                    ]}
+                    values={['suggestion','bug']}
+                    onRemoveClick={(e)  => console.log('deleted click', e)}
+                    onTagSelected={(e)  => console.log('selected click', e)}
+                />
+            )
+        },
         {
             title: 'Input',
             render: (

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

@@ -7,33 +7,67 @@ class TagSelector extends React.Component {
     static propTypes = {
         items: React.PropTypes.arrayOf(React.PropTypes.shape({
             name: React.PropTypes.string,
-            color: React.PropTypes.string
+            color: React.PropTypes.string,
         })),
-        values: React.PropTypes.arrayOf(React.PropTypes.string)
+        values: React.PropTypes.arrayOf(React.PropTypes.string),
+        onRemoveClick: React.PropTypes.func,
     };
 
     render() {
         return (
-            <div>
-                <div style={{alignItems:'center', backgroundColor:'light-blue'}}>
-                    <h2>Tags</h2>
-                    <div style={{justifyContent:'flex-start', borderRadius:'25px', backgroundColor:'grey'}}>{this.renderItemsList()}</div>
+            <div className="tag-selector">
+                <div className="tag-selector__selected-tags">
+                    {this.renderSelectedTags()}
+                </div>
+                <div className="tag-selector__tag-options">
+                    {this.renderTagOptions()}
                 </div>
-                <div>{this.props.values.join()}</div>
             </div>
         );
     }
-    renderItemsList() {
-        const itemList = _.filter(this.props.items,(item) => !_.includes(this.props.values,item.name));
-        console.log('la lista de items librs',itemList);
-        return itemList.map((item,index) => {
-                return(
-                    <spam style={{justifyContent:'space-between',backgroundColor:item.color,borderRadius:'25px'}} key={index}>
-                        <spam >{item.name}</spam>
-                        <spam style={{color:item.color,borderRadius:'25px' ,backgroundColor:'white'}}>x</spam>
-                    </spam>
-                )
-        });
+
+    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 (
+            <div className="tag-selector__selected-tag" style={{backgroundColor:item.color}} key={index}>
+                <span className="tag-selector__selected-tag-name">{item.name}</span>
+                <span onClick={this.onRemoveClick.bind(this,item.name)} className="tag-selector__selected-tag-remove" >
+                    <Icon name="times-circle" size="small"/>
+                </span>
+            </div>
+        );
+    }
+
+    renderTagOptions() {
+        const itemList = _.filter(this.props.items,(item) => !_.includes(this.props.values,item.name));
+
+        return itemList.map(this.renderTagOption.bind(this));
+    }
+
+    renderTagOption(item,index) {
+        return (
+            <div onClick={this.onTagSelected.bind(this,item.name)} className="tag-selector__tag-option" style={{backgroundColor:item.color}} key={index}>
+                <span className="tag-selector__tag-option-name" >{item.name}</span>
+            </div>
+        );
+    }
+
+    onRemoveClick(name) {
+        if(this.props.onRemoveClick){
+            this.props.onRemoveClick(name);
+        }
+    }
+    onTagSelected(name) {
+        if(this.props.onTagSelected){
+            this.props.onTagSelected(name);
+        }
+    }
+
 }
 export default TagSelector;

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

@@ -0,0 +1,41 @@
+@import '../scss/vars';
+
+.tag-selector{
+  margin-bottom: 30px;
+  text-align: left;
+  &__selected-tags {
+    border-radius: 3px;
+    background-color:white;
+    padding:3px 1px;
+  }
+
+  &__selected-tag,
+  &__tag-option {
+    color:white;
+    border-radius: 3px;
+    margin-left: 5px;
+    padding:3px;
+    font-size: 10px;
+  }
+
+  &__selected-tag {
+    display: inline-block;
+
+    &-remove {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+
+  &__tag-options {
+    font-size: 13px;
+    color: $dark-grey;
+  }
+
+  &__tag-option {
+    cursor: pointer;
+    &-name {
+
+    }
+  }
+}