import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const tocasProps = [
  // main
  'ts',
  // semantics
  'primary', 'info', 'warning', 'positive', 'negative', 'inverted',
  // annoucements
  'secondary', 'tertiary',
  // sizes
  'mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive',
  // directions
  'top', 'bottom',
  'left', 'center', 'right',
  'vertically', 'horizontally',
  // alignment
  'floated', 'aligned', 'attached',
  // disabled
  'disabled',
  // others
  'icon',
];

class Box extends Component {
  render() {
    let {
      wrapper,
      className,
      children,
      ...rest
    } = this.props;
    let cx = classNames(
      className,
      ...tocasProps.map(tocasProp => {
        delete rest[tocasProp];

        return {
          [tocasProp]: this.props[tocasProp],
        };
      })
    );

    return React.createElement(
      wrapper,
      {
        className: cx,
        ...rest,
      },
      children
    );
  }
}

Box.displayName = 'Box';

Box.defaultProps = {
  wrapper: 'div',
};

Box.propTypes = {
  wrapper: PropTypes.node.isRequired,
  ...Object.assign({},
    ...tocasProps.map(tocasProp => ({ [tocasProp]: PropTypes.bool }))
  ),
};

export default Box;

@@ -134,26 +134,8 @@
 = %5B%0A
-  // main%0A  'ts',%0A
   //
@@ -409,40 +409,8 @@
 t',%0A
-  'vertically', 'horizontally',%0A
   //
@@ -621,76 +621,292 @@
     
-...rest%0A    %7D = this.props;%0A    let cx = classNames(%0A      className
+ts,%0A      vertically,%0A      horizontally,%0A      very,%0A      extra,%0A      padded,%0A      fitted,%0A      ...rest%0A    %7D = this.props;%0A    let cx = classNames(%0A      %7B%0A        ts,%0A        vertically,%0A        horizontally,%0A        very,%0A        extra,%0A        padded,%0A        fitted,%0A      %7D
 ,%0A  
@@ -954,14 +954,41 @@
     
-de
 let
-e
+ cx = %7B%0A          %5BtocasProp%5D:
  res
@@ -999,18 +999,17 @@
 casProp%5D
-;%0A
+,
 %0A       
@@ -1013,16 +1013,10 @@
     
-return %7B
+%7D;
 %0A   
@@ -1024,33 +1024,19 @@
     
-  %5BtocasProp%5D: this.props
+delete rest
 %5Btoc
@@ -1034,33 +1034,34 @@
  rest%5BtocasProp%5D
-,
+;%0A
 %0A        %7D;%0A    
@@ -1045,33 +1045,41 @@
 Prop%5D;%0A%0A        
-%7D
+return cx
 ;%0A      %7D)%0A    )
@@ -1072,16 +1072,33 @@
       %7D)
+,%0A      className
 %0A    );%0A

Update Box