Add: <Tags> component

src/components/Icon/index.tsx

@@ -8,6 +8,8 @@ interface IconProps extends BaseComponentProps {
 
     // icon size
     size?: number
+
+    onClick?: React.FormEventHandler
 }
 
 export const Icon: React.SFC<IconProps> = props => {

src/components/Tags/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { BaseComponentProps } from '@models/BaseProps'
+import { Icon } from '@components'
+import classnames from 'classnames'
+import './style.scss'
+
+interface TagsProps extends BaseComponentProps {
+    data: Set<string>
+    showAdd: boolean
+    onDelete: (tag: string) => void
+    onAdd: () => void
+}
+
+export class Tags extends React.Component<TagsProps, {}> {
+    static defaultProps: TagsProps = {
+        data: new Set(),
+        showAdd: true,
+        onDelete: () => {},
+        onAdd: () => {}
+    }
+
+    render () {
+        const { className, data, onDelete, onAdd, showAdd } = this.props
+        const tags = [...data]
+            .sort()
+            .map(t => (
+                <li>
+                    { t }
+                    <Icon
+                        className="tags-delete"
+                        type="plus"
+                        size={12}
+                        style={{ fontWeight: 'bold', color: '#fff' }}
+                        onClick={() => onDelete(t)}/>
+                </li>
+            ))
+
+        return (
+            <ul className={classnames('tags', className)}>
+                { tags }
+                {
+                    showAdd &&
+                    <li className="tags-add" onClick={onAdd}>
+                        <Icon type="plus" size={12} style={{ fontWeight: 'bold', color: '#fff' }} />
+                    </li>
+                }
+            </ul>
+        )
+    }
+}

src/components/Tags/style.scss

@@ -0,0 +1,61 @@
+@import '~@styles/variables';
+
+$height: 22px;
+$add-height: 25px;
+$delete-height: 22px;
+
+.tags {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    flex-wrap: wrap;
+    padding: 3px 4px;
+
+    li {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid $color-primary-darken;
+        color: $color-primary-darken;
+        height: $height;
+        border-radius: $height / 2;
+        padding: 0 6px;
+        margin: 3px 4px;
+        font-size: 10px;
+        cursor: default;
+
+        .tags-delete {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            right: -$delete-height / 2;
+            top: -$delete-height / 2;
+            height: $delete-height;
+            width: $delete-height;
+            border-radius: 50%;
+            background-color: $color-red;
+            transform: rotate(45deg) scale(0.7);
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            cursor: pointer;
+        }
+
+        &:hover .tags-delete {
+            opacity: 1;
+        }
+    }
+
+    li.tags-add {
+        height: $add-height;
+        width: $add-height;
+        border: none;
+        text-align: center;
+        padding: 0;
+        border-radius: 50%;
+        background-color: $color-primary-darken;
+        transform: translateX(-2px) scale(0.7);
+        cursor: pointer;
+    }
+}

src/components/index.ts

@@ -5,3 +5,4 @@ export * from './Card'
 export * from './Row'
 export * from './Col'
 export * from './ButtonSelect'
+export * from './Tags'