Merge branch 'master' of github.com:ModusCreateOrg/extjs-reactjs-examples

Author: mschwartz

19-tabpanel/a-tabpanel/src/Tab.css

@@ -6,26 +6,6 @@
 .tab:hover {
   background-color: #d8d8d8;
 }
-.tab-panel.top .tab,
-.tab-panel.bottom .tab {
-  padding: 12px 6px;
-}
-.tab-panel.left .tab,
-.tab-panel.right .tab {
-  padding: 6px 12px;
-}
-.tab-panel.top .tab.active {
-  border-bottom-color: #1e8bfb;
-}
-.tab-panel.left .tab.active {
-  border-right-color: #1e8bfb;
-}
-.tab-panel.bottom .tab.active {
-  border-top-color: #1e8bfb;
-}
-.tab-panel.right .tab.active {
-  border-left-color: #1e8bfb;
-}
 .tab.active:hover {
   background-color: transparent;
 }

19-tabpanel/a-tabpanel/src/Tab.js

@@ -5,10 +5,10 @@ import './Tab.css';
 
 const Tab = props => {
   const { tabtext, icon, activetab, cardindex, onClick } = props,
-        isActive = activetab === cardindex ? 'active' : '';
+        isActive = activetab === cardindex ? ' active' : '';
 
   return (
-    <div className={`tab ${isActive}`} onClick={onClick}>
+    <div className={`tab${isActive}`} onClick={onClick}>
       {icon ? <FontAwesome icon={Icons[`fa${icon}`]} /> : ''}
       {tabtext}
     </div>

19-tabpanel/a-tabpanel/src/TabPanel.css

@@ -30,6 +30,27 @@
 .tab-panel.right .tab-strip {
   flex-direction: column;
 }
+
+.tab-panel.top .tab,
+.tab-panel.bottom .tab {
+  padding: 12px 6px;
+}
+.tab-panel.left .tab,
+.tab-panel.right .tab {
+  padding: 6px 12px;
+}
+.tab-panel.top .tab.active {
+  border-bottom-color: #1e8bfb;
+}
+.tab-panel.left .tab.active {
+  border-right-color: #1e8bfb;
+}
+.tab-panel.bottom .tab.active {
+  border-top-color: #1e8bfb;
+}
+.tab-panel.right .tab.active {
+  border-left-color: #1e8bfb;
+}
 
 .card-ct {
   flex: 1;

19-tabpanel/a-tabpanel/src/TabPanel.js

@@ -35,15 +35,17 @@ class TabPanel extends Component {
         </div>
         <div className="card-ct">
           {React.Children.map(children, (child, i) => {
-            const { className } = child.props,
-              isActive = i === activetab ? 'active' : '',
-              cardProps = {
-                ...child.props,
-
-                className: `${className} card ${isActive}`,
-                cardindex: i,
-                activetab: activetab
-              };
+            let { className } = child.props;
+            className = className ? ` ${className}` : '';
+
+            const isActive = i === activetab ? ' active' : '';
+            const cardProps = {
+              ...child.props,
+
+              className: `card${className}${isActive}`,
+              cardindex: i,
+              activetab: activetab
+            };
 
             return React.cloneElement(child, cardProps);
           })}

20-carousel/a-carousel/src/Carousel.css

@@ -70,7 +70,7 @@
   background-color: #b5b5b5;
 }
 .nav-strip .nav.active .nav-dot {
-  background-color: #1e8bfb !important;
+  background-color: #1e8bfb;
 }
 
 .carousel .card {

20-carousel/a-carousel/src/Carousel.js

@@ -18,15 +18,18 @@ class Carousel extends Component {
   }
 
   render () {
-    const { children, className, position } = this.props;
+    let { className } = this.props;
+    className = className ? ` ${className}` : '';
+
+    const { children, position } = this.props;
     const { activecard } = this.state;
     const xPositions = ['top', 'bottom'],
           axis = xPositions.includes(position) ? 'x' : 'y';
 
     return (
       <div
         {...this.props}
-        className = {`${className} carousel ${position}`}
+        className = {`carousel ${position}${className}`}
       >
         <div className={`nav-strip`}>
           {React.Children.map(children, (child, i) => {
@@ -47,15 +50,17 @@ class Carousel extends Component {
           axis={axis}
         >
           {React.Children.map(children, (child, i) => {
-            const { className } = child.props,
-                  isActive  = (i === activecard) ? 'active' : '',
-                  cardProps = {
-                    ...child.props,
-                    style     : {flex: 1},
-                    className : `${className} card ${isActive}`,
-                    cardindex : i,
-                    activecard
-                  };
+            let { className } = child.props;
+            className = className ? ` ${className}` : '';
+
+            const isActive  = (i === activecard) ? ' active' : '';
+            const cardProps = {
+              ...child.props,
+              style     : {flex: 1},
+              className : ` card${isActive}${className}`,
+              cardindex : i,
+              activecard
+            };
 
             return React.cloneElement(child, cardProps);
           })}