Merge pull request #5 from ivandiazwm/guillermo-master

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: 'red'},
+                        {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/drop-down.js

@@ -50,11 +50,12 @@ class DropDown extends React.Component {
 
     render() {
         let animation = this.getAnimationStyles();
-        let selectedItem = this.props.items[this.getSelectedIndex()];
 
         return (
             <div className={this.getClass()}>
-                {this.renderCurrentItem(selectedItem)}
+                <div {...this.getCurrentItemProps()}>
+                    {this.props.children ? this.props.children : this.renderCurrentItem()}
+                </div>
                 <Motion defaultStyle={animation.defaultStyle} style={animation.style} onRest={this.onAnimationFinished.bind(this)}>
                     {this.renderList.bind(this)}
                 </Motion>
@@ -72,15 +73,17 @@ class DropDown extends React.Component {
         );
     }
 
-    renderCurrentItem(item) {
-        var iconNode = null;
+    renderCurrentItem() {
+        let item = this.props.items[this.getSelectedIndex()];
+        let iconNode = null;
+
 
         if (item.icon) {
             iconNode = <Icon className="drop-down__current-item-icon" name={item.icon} />;
         }
 
         return (
-            <div {...this.getCurrentItemProps()}>
+            <div>
                 {iconNode}{item.content}
             </div>
         );

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

@@ -1,39 +1,73 @@
 import React from 'react';
 import _ from 'lodash';
 import Icon from 'core-components/icon';
+import DropDown from 'core-components/drop-down';
 
 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>
-                <div>{this.props.values.join()}</div>
+            <div className="tag-selector">
+                <DropDown className="tag-selector__drop-down" items={this.renderTagOptions().map(tag => ({content: tag}))} selectedIndex={-1} size="large">
+                    {this.renderSelectedTags()}
+                </DropDown>
             </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}} onClick={event => event.stopPropagation()} 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" key={index}>
+                <span className="tag-selector__tag-option-square" style={{backgroundColor:item.color}}/>
+                <span className="tag-selector__tag-option-name" >{item.name}</span>
+            </div>
+        );
+    }
+
+    onRemoveClick(tag) {
+
+        if(this.props.onRemoveClick){
+            this.props.onRemoveClick(tag);
+        }
+    }
+    onTagSelected(tag) {
+        if(this.props.onTagSelected){
+            this.props.onTagSelected(tag);
+        }
+    }
+
 }
 export default TagSelector;

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

@@ -0,0 +1,69 @@
+@import '../scss/vars';
+
+.tag-selector{
+  margin-bottom: 30px;
+  text-align: left;
+
+  &__drop-down {
+    .drop-down__current-item {
+      cursor: text;
+      background-color: white;
+      border: 1px solid $grey;
+
+      &:focus {
+        outline: none;
+        border-color: $primary-blue;
+      }
+    }
+  }
+
+  &__selected-tags {
+    border-radius: 3px;
+    background-color: white;
+    padding: 3px 1px;
+  }
+
+  &__selected-tag {
+    color: white;
+    display: inline-block;
+    border-radius: 3px;
+    margin-left: 5px;
+    padding: 3px;
+    font-size: 13px;
+  }
+
+  &__selected-tag {
+    cursor: default;
+
+    &-remove {
+      cursor: pointer;
+      margin-left: 10px;
+
+      &:hover {
+        color: $light-grey;
+      }
+    }
+  }
+
+  &__tag-options {
+    font-size: 13px;
+    color: $dark-grey;
+  }
+
+  &__tag-option {
+    color: $primary-black;
+    display: flex;
+    align-items: center;
+
+    &-square {
+      display: inline-block;
+      height: 15px;
+      width: 15px;
+      border-radius: 4px;
+    }
+
+    &-name {
+      margin-left: 10px;
+    }
+  }
+}