Merge pull request #117 from mewtaylor/issue/105-hide-carousel-arrows

Override `Slider`'s `arrows` setting by row length

src/views/splash/splash.jsx

@@ -21,6 +21,11 @@ var Splash = injectIntl(React.createClass({
         Api,
         Session
     ],
+    getDefaultProps: function () {
+        return {
+            slidesToShow: 5
+        };
+    },
     getInitialState: function () {
         return {
             projectCount: 10569070,
@@ -89,6 +94,7 @@ var Splash = injectIntl(React.createClass({
     },
     renderHomepageRows: function () {
         var formatMessage = this.props.intl.formatMessage;
+        var showArrows = true;
         var rows = [
             <Box
                     title={formatMessage({
@@ -106,9 +112,10 @@ var Splash = injectIntl(React.createClass({
             </Box>
         ];
 
-        if (
-                this.state.featuredGlobal.curator_top_projects &&
+        if (this.state.featuredGlobal.curator_top_projects &&
             this.state.featuredGlobal.curator_top_projects.length > 4) {
+            
+            showArrows = this.state.featuredGlobal.curator_top_projects.length > this.props.slidesToShow;
             rows.push(
                 <Box
                         key="curator_top_projects"
@@ -117,14 +124,17 @@ var Splash = injectIntl(React.createClass({
                             this.state.featuredGlobal.curator_top_projects[0].curator_name}
                         moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})}
                         moreHref="/studios/386359/">
-                    <Carousel items={this.state.featuredGlobal.curator_top_projects} />
+                    <Carousel
+                        items={this.state.featuredGlobal.curator_top_projects}
+                        arrows={showArrows} />
                 </Box>
             );
         }
 
-        if (
-                this.state.featuredGlobal.scratch_design_studio &&
+        if (this.state.featuredGlobal.scratch_design_studio &&
             this.state.featuredGlobal.scratch_design_studio.length > 4) {
+            
+            showArrows = this.state.featuredGlobal.scratch_design_studio.length > this.props.slidesToShow;
             rows.push(
                 <Box
                         key="scratch_design_studio"
@@ -135,15 +145,18 @@ var Splash = injectIntl(React.createClass({
                             + ' - ' + this.state.featuredGlobal.scratch_design_studio[0].gallery_title}
                         moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})}
                         moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
-                    <Carousel items={this.state.featuredGlobal.scratch_design_studio} />
+                    <Carousel
+                        items={this.state.featuredGlobal.scratch_design_studio}
+                        arrows={showArrows} />
                 </Box>
             );
         }
 
-        if (
-                this.state.session.user &&
+        if (this.state.session.user &&
             this.state.featuredGlobal.community_newest_projects &&
             this.state.featuredGlobal.community_newest_projects.length > 0) {
+            
+            showArrows = this.state.featuredGlobal.community_newest_projects.length > this.props.slidesToShow;
             rows.push(
                 <Box
                         title={
@@ -151,70 +164,79 @@ var Splash = injectIntl(React.createClass({
                                 id: 'splash.recentlySharedProjects',
                                 defaultMessage: 'Recently Shared Projects' })}
                         key="community_newest_projects">
-                    <Carousel items={this.state.featuredGlobal.community_newest_projects} />
+                    <Carousel
+                        items={this.state.featuredGlobal.community_newest_projects}
+                        arrows={showArrows} />
                 </Box>
             );
         }
 
-        if (
-                this.state.featuredCustom.custom_projects_by_following &&
+        if (this.state.featuredCustom.custom_projects_by_following &&
             this.state.featuredCustom.custom_projects_by_following.length > 0) {
+            
+            showArrows = this.state.featuredCustom.custom_projects_by_following.length > this.props.slidesToShow;
             rows.push(
-                <Box
-                        title={
+                <Box title={
                             formatMessage({
                                 id: 'splash.projectsByScratchersFollowing',
                                 defaultMessage: 'Projects by Scratchers I\'m Following'})}
                      key="custom_projects_by_following">
-                    <Carousel items={this.state.featuredCustom.custom_projects_by_following} />
+                    
+                    <Carousel items={this.state.featuredCustom.custom_projects_by_following}
+                              arrows={showArrows} />
                 </Box>
             );
         }
-        if (
-                this.state.featuredCustom.custom_projects_loved_by_following &&
+        if (this.state.featuredCustom.custom_projects_loved_by_following &&
             this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
+
+            showArrows = this.state.featuredCustom.custom_projects_loved_by_following.length > this.props.slidesToShow;
             rows.push(
-                <Box
-                        title={
+                <Box title={
                             formatMessage({
                                 id: 'splash.projectsLovedByScratchersFollowing',
                                 defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
                      key="custom_projects_loved_by_following">
-                    <Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
+                    
+                    <Carousel items={this.state.featuredCustom.custom_projects_loved_by_following}
+                              arrows={showArrows} />
                 </Box>
             );
         }
 
-        if (
-                this.state.featuredCustom.custom_projects_in_studios_following &&
+        if (this.state.featuredCustom.custom_projects_in_studios_following &&
             this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
+            
+            showArrows =
+                this.state.featuredCustom.custom_projects_in_studios_following.length > this.props.slidesToShow;
             rows.push(
-                <Box
-                        title={
+                <Box title={
                             formatMessage({
                                 id:'splash.projectsInStudiosFollowing',
                                 defaultMessage: 'Projects in Studios I\'m Following'})}
                      key="custom_projects_in_studios_following">
-                    <Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
+                    
+                    <Carousel items={this.state.featuredCustom.custom_projects_in_studios_following}
+                              arrows={showArrows} />
                 </Box>
             );
         }
 
         rows.push(
-            <Box
-                    title={
+            <Box title={
                         formatMessage({
                             id: 'splash.communityRemixing',
                             defaultMessage: 'What the Community is Remixing' })}
                  key="community_most_remixed_projects">
+                
                 <Carousel items={this.state.featuredGlobal.community_most_remixed_projects} showRemixes={true} />
             </Box>,
-            <Box
-                    title={
+            <Box title={
                         formatMessage({
                             id: 'splash.communityLoving',
                             defaultMessage: 'What the Community is Loving' })}
                  key="community_most_loved_projects">
+                
                 <Carousel items={this.state.featuredGlobal.community_most_loved_projects} showLoves={true} />
             </Box>
         );