fix: Set displayname when getComposeComponent. close #60

src/collections/breadcrumb.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui breadcrumb';
+const componentName    = 'Breadcrumb';
 
 const Breadcrumb = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Breadcrumb;

src/collections/form.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui form';
+const componentName    = 'Form';
 
 const Form = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Form;

src/collections/grid.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui grid';
+const componentName    = 'Grid';
 
 const Grid = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Grid;

src/collections/menu.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui menu';
+const componentName    = 'Menu';
 
 const Menu = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Menu;

src/collections/message.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui message';
+const componentName    = 'Message';
 
 const Message = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Message;

src/collections/table.js

@@ -4,13 +4,14 @@ import React from 'react';
 import filter from '../filter';
 
 const defaultClassName = 'ui table';
+const componentName    = 'Table';
 
 const Basic = ({children, ...other}) => (
   <table {...other}>{children}</table>
 );
 
 const Table = new filter(Basic)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Table;

src/commons/column.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from './div';
 
 const defaultClassName = 'column';
+const componentName    = 'Column';
 
 const Column = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Column;

src/commons/content.js

@@ -6,10 +6,11 @@ import Div    from './div';
 
 const stateArray       = ['active'];
 const defaultClassName = 'content';
+const componentName    = 'Content';
 
 const Content = new filter(Div)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Content;

src/commons/field.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from './div';
 
 const defaultClassName = 'field';
+const componentName    = 'Field';
 
 const Field = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Field;

src/commons/fields.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from './div';
 
 const defaultClassName = 'fields';
+const componentName    = 'Fields';
 
 const Fields = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Fields;

src/commons/row.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from './div';
 
 const defaultClassName = 'row';
+const componentName    = 'Row';
 
 const Row = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Row;

src/commons/section.js

@@ -4,11 +4,12 @@ import filter from '../filter';
 import Unit from './unit';
 
 const defaultClassName = 'section';
+const componentName    = 'Section';
 
 const Section = new filter(Unit)
   .typeFilter()
   .colorFilter()
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Section;

src/commons/text.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from './div';
 
 const defaultClassName = 'text';
+const componentName    = 'Text';
 
 const Text = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Text;

src/commons/title.js

@@ -6,11 +6,12 @@ import Div    from './div';
 
 const stateArray       = ['active'];
 const defaultClassName = 'title';
+const componentName    = 'Title';
 
 const Title = new filter(Div)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 
 export default Title;

src/elements/button.js

@@ -6,12 +6,13 @@ import Unit from '../commons/unit';
 
 const stateArray       = ['disabled', 'active', 'loading'];
 const defaultClassName = 'ui button';
+const componentName    = 'Button';
 
 const Button = new filter(Unit)
   .typeFilter()
   .colorFilter()
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Button;

src/elements/container.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui container';
+const componentName    = 'Container';
 
 const Container = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Container;

src/elements/divider.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui divider';
+const componentName    = 'Divider';
 
 const Divider = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Divider;

src/elements/flag.js

@@ -4,11 +4,12 @@ import React from 'react';
 import filter from '../filter';
 
 const defaultClassName = 'flag';
+const componentName    = 'Flag';
 
 const Basic = (props) => <i {...props}/>;
 
 const Flag = new filter(Basic)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Flag;

src/elements/header.js

@@ -6,12 +6,13 @@ import Unit from '../commons/unit';
 
 const stateArray       = ['disabled'];
 const defaultClassName = 'ui header';
+const componentName    = 'Header';
 
 const Header = new filter(Unit)
   .typeFilter()
   .colorFilter()
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Header;

src/elements/icon.js

@@ -5,13 +5,14 @@ import filter from '../filter';
 
 const stateArray       = ['disabled', 'loading'];
 const defaultClassName = 'icon';
+const componentName    = 'Icon';
 
 const Basic = (props) => <i {...props}/>;
 
 const Icon = new filter(Basic)
   .colorFilter()
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Icon;

src/elements/image.js

@@ -5,12 +5,13 @@ import filter from '../filter';
 
 const stateArray       = ['disabled'];
 const defaultClassName = 'ui image';
+const componentName    = 'Image';
 
 const Basic = (props) => <img {...props}/>;
 
 const Image = new filter(Basic)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Image;

src/elements/input.js

@@ -5,6 +5,7 @@ import filter from '../filter';
 
 const stateArray       = ['loading', 'focus', 'error'];
 const defaultClassName = 'ui input';
+const componentName    = 'Input';
 
 const Basic = React.createClass({
 
@@ -33,6 +34,6 @@ const Basic = React.createClass({
 const Input = new filter(Basic)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Input;

src/elements/label.js

@@ -5,11 +5,12 @@ import filter from '../filter';
 import Unit from '../commons/unit';
 
 const defaultClassName = 'ui label';
+const componentName    = 'Label';
 
 const Label = new filter(Unit)
   .typeFilter()
   .colorFilter()
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Label;

src/elements/list.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui list';
+const componentName    = 'List';
 
 const List = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default List;

src/elements/loader.js

@@ -6,10 +6,11 @@ import Div    from '../commons/div';
 
 const stateArray       = ['disabled', 'active'];
 const defaultClassName = 'ui loader';
+const componentName    = 'Loader';
 
 const Loader = new filter(Div)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Loader;

src/elements/rail.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui rail';
+const componentName    = 'Rail';
 
 const Rail = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Rail;

src/elements/reveal.js

@@ -6,10 +6,11 @@ import Div    from '../commons/div';
 
 const stateArray       = ['disabled'];
 const defaultClassName = 'ui reveal';
+const componentName    = 'Reveal';
 
 const Reveal = new filter(Div)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Reveal;

src/elements/segment.js

@@ -6,11 +6,12 @@ import Div    from '../commons/div';
 
 const stateArray       = ['disabled', 'loading'];
 const defaultClassName = 'ui segment';
+const componentName    = 'Segment';
 
 const Segment = new filter(Div)
   .colorFilter()
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Segment;

src/elements/step.js

@@ -6,10 +6,11 @@ import Div    from '../commons/div';
 
 const stateArray       = ['active', 'completed', 'disabled'];
 const defaultClassName = 'step';
+const componentName    = 'Step';
 
 const Step = new filter(Div)
   .stateFilter(stateArray)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Step;

src/elements/steps.js

@@ -5,9 +5,10 @@ import filter from '../filter';
 import Div    from '../commons/div';
 
 const defaultClassName = 'ui steps';
+const componentName    = 'Steps';
 
 const Steps = new filter(Div)
   .classGenerator(defaultClassName)
-  .getComposeComponent();
+  .getComposeComponent(componentName);
 
 export default Steps;