@vixoniccom/news-internal 0.4.21-dev.24 → 0.4.21-dev.26

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": ""
   },
-  "version": "0.4.21-dev.24",
+  "version": "0.4.21-dev.26",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/components/NewsContainer/index.tsx

@@ -26,7 +26,7 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
   }, [currentIndex, props.items])
 
   const startTimeout = () => {
-    const showTime = props.data?.parameters?.showTime || 10
+    const showTime = props.data?.parameters?.showTime ?? 10
     const time = showTime * 1000
     timerRef.current = window.setTimeout(nextItem, time)
   }
@@ -37,39 +37,53 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
     setCurrentIndex(newIndex)
   }
 
-  if (parameters.template === 'gradient') {
-    return <TransitionGroup className='main-container' style={{
-      backgroundColor: parameters.gradientBackgroundColor || 'red'
-    }}>
-      {item ?
-        <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
-          <div className={'news-item-container'}>
-            {
-              <GradientItem parameters={parameters} item={item} />
-            }
-          </div>
-        </CSSTransition>
-       : <FormattedText text={defaultMessage || 'No hay cumpleaños para mostrar'} format={parameters.defaultMessageFormat} />
-      }
-    </TransitionGroup>
-
-  } else {
-    return <TransitionGroup className='main-container' style={{
+  const getContainerStyles = () => {
+    if (parameters.template === 'gradient') {
+      return { backgroundColor: parameters.gradientBackgroundColor || 'red' }
+    }
+    return {
       padding: parameters.padding,
       backgroundImage: parameters.background && `url("${downloadsPath}/${parameters.background.filename}")`
-    }}>
-      {item ?
-        <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
-          <div className={'news-item-container'}>
-            {parameters.template === 'gallery'
-              ? <GalleryItem parameters={parameters} item={item} />
-              : <StandardItem parameters={parameters} item={item} />
-            }
-          </div>
-        </CSSTransition>
-        :<FormattedText text={defaultMessage || 'No hay noticias para mostrar'} format={parameters.defaultMessageFormat} />
+    }
+  }
 
-      }
-    </TransitionGroup>
+  const renderNewsItem = (item: NewsItem) => {
+    if (parameters.template === 'gradient') {
+      return <GradientItem parameters={parameters} item={item} />
+    }
+    if (parameters.template === 'gallery') {
+      return <GalleryItem parameters={parameters} item={item} />
+    }
+    return <StandardItem parameters={parameters} item={item} />
+  }
+
+  if (props.items.length === 0 || !item) {
+    return (
+      <div className='main-container' style={getContainerStyles()}>
+        <div style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}>
+          <FormattedText text={defaultMessage || 'No hay noticias para mostrar'} format={parameters.defaultMessageFormat} />
+        </div>
+      </div>
+    )
   }
+
+  return (
+    <TransitionGroup className='main-container' style={getContainerStyles()}>
+      <CSSTransition 
+        key={item.id} 
+        classNames={parameters.animationType || 'fade'} 
+        timeout={(1750 / (animationSpeed || 1)) * 2}
+      >
+        <div className={'news-item-container'}>
+          {renderNewsItem(item)}
+        </div>
+      </CSSTransition>
+    </TransitionGroup>
+  )
 }