@vixoniccom/menu-daily 0.1.2-dev.0 → 0.2.0-dev.0

package/src/scenes/components/FormattedText.tsx

@@ -9,7 +9,6 @@ const alignments = {
 
 type Props = {
   text: string
-  downloadsPath: string
   unit: 'px' | '%' | 'em' | 'vh'
   defaults: {
     fontSize: number,
@@ -28,15 +27,15 @@ class FormattedText extends React.Component<Props> {
     let { alignment, font, fontColor, fontSize } = format
     let containerStyle = Object.assign({
       display: 'inline-flex',
-      justifyContent: this.getHorizontalAlignment(alignment && alignment.horizontal || defaults.alignment)
+      justifyContent: this.getHorizontalAlignment(alignment?.horizontal || defaults.alignment)
     }, this.props.style)
     return <div style={containerStyle}>
       <span style={{
         color: fontColor || defaults.fontColor,
         width: '100%',
-        fontFamily: font && font.filename && `"${parseFontName(font.filename)}"` || undefined,
+        fontFamily: font?.filename && `"${parseFontName(font.filename)}"` || undefined,
         fontSize: `${fontSize || defaults.fontSize}${this.props.unit}`,
-        textAlign: alignment && alignment.horizontal || defaults.alignment,
+        textAlign: alignment?.horizontal || defaults.alignment,
         lineHeight: this.props.lineHeight,
         overflow: 'hidden',
         textOverflow: 'ellipsis',

package/src/scenes/components/Grid/Grid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Animation from './animation'
+import { AnimationController } from './animation'
 import Item from './GridItem'
 
 type GridProps = {
@@ -35,6 +35,7 @@ type GridState = {
 
 class Grid extends React.Component<GridProps, GridState> {
   lastIndex: number
+  itemKeyCounter: number = 0
   animation: any
   animating: boolean = false
   unmounting: boolean = false
@@ -56,17 +57,13 @@ class Grid extends React.Component<GridProps, GridState> {
   constructor (props: GridProps) {
     super (props)
     this.lastIndex = 0
-    this.animation = new Animation()
+    this.animation = new AnimationController()
   }
 
   componentDidMount () {
     this.configure(this.props)
   }
 
-  componentWillReceiveProps (nextProps: GridProps) {
-    this.configure(nextProps)
-  }
-
   componentWillUnmount () {
     this.unmounting = true
   }
@@ -96,7 +93,7 @@ class Grid extends React.Component<GridProps, GridState> {
       this.lastIndex++
       count++
       return <Item
-        key={`${Math.random()}${Math.random()}`} containerData={{
+        key={`item-${++this.itemKeyCounter}`} containerData={{
           ic_index: index,
           ic_rowIndex: Math.floor(index / this.columns),
           ic_columnIndex: Math.floor(index % this.columns),
@@ -145,7 +142,10 @@ class Grid extends React.Component<GridProps, GridState> {
     </div>
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (prevProps: GridProps) {
+    if (prevProps !== this.props) {
+      this.configure(this.props)
+    }
     if (this.props.animate && this.state.stage === 'prepared') {
       // Start animations.
       this.animation.animate(this.container!.childNodes, () => {

package/src/scenes/components/Grid/GridItem.tsx

@@ -18,6 +18,7 @@ type GridItemProps = {
   verticalGap: number,
   containerData: ContainerDataProps
   fontSize?: string
+  children: React.ReactNode
 }
 
 export type ContainerDataProps = {

package/src/scenes/components/Grid/animation.ts

@@ -1,104 +1,118 @@
-const anime: any = require('animejs').default
+import anime from 'animejs'
 
-// Predefined animation modes.
-const animationModes: {[mode: string]: any} = {
+interface Options {
+  mode: keyof typeof animationModes
+  duration: number
+  speed: number
+  stagger: number
+  reverse: boolean
+}
+
+const animationModes = {
   fade: {
     in: {
       opacity: [0, 1],
-      easing: 'linear'
+      easing: 'linear',
     },
     out: {
       opacity: [1, 0],
-      easing: 'linear'
+      easing: 'linear',
     },
     init: {
-      opacity: 0
-    }
+      opacity: 0,
+    },
   },
   slideRight: {
     in: {
-      translateX: (_el: any, _i: any) => {
+      translateX: () => {
         return [`-100vw`, '0vw']
       },
-      easing: 'easeOutQuad'
+      easing: 'easeOutQuad',
     },
     out: {
-      translateX: (_el: any, _i: any) => {
+      translateX: () => {
         return ['0vw', `100vw`]
       },
-      easing: 'easeInQuad'
+      easing: 'easeInQuad',
     },
     init: {
-      transform: 'translate(0vw)'
-    }
+      transform: 'translateX(-100vw)',
+    },
   },
   slideLeft: {
     in: {
-      translateX: (_el: any, _i: any) => {
+      translateX: () => {
         return [`100vw`, '0vw']
       },
-      easing: 'easeOutQuad'
+      easing: 'easeOutQuad',
     },
     out: {
-      translateX: (_el: any, _i: any) => {
+      translateX: () => {
         return ['0vw', `-100vw`]
       },
-      easing: 'easeInQuad'
+      easing: 'easeInQuad',
     },
     init: {
-      transform: 'translate(0vw)'
-    }
-  }
+      transform: 'translateX(100vw)',
+    },
+  },
 }
 
-class Animation {
-  mode: any = animationModes.fade
-  duration: number = 10000
-  speed: number = 1000
-  stagger: number = 1000 / 4
-  reverse?: boolean = false
+export class AnimationController {
+  public mode: any
+  public duration: number
+  public speed: number
+  public stagger: number
+  public reverse: boolean
 
-  configure (options: { mode?: string, duration?: number, speed?: number, stagger?: number, reverse?: boolean }) {
-    this.mode = options.mode && animationModes.hasOwnProperty(options.mode) && animationModes[options.mode] || animationModes.fade
-    this.duration = options.duration && options.duration > 1000 && options.duration || 10000
-    this.speed = 1000 * (options.speed || 1)
-    this.stagger = this.speed / (options.stagger || 4)
-    this.reverse = options.reverse
+  constructor() {
+    this.mode = animationModes.fade
+    this.duration = 10000
+    this.speed = 1000
+    this.stagger = 1000 / 4
+    this.reverse = false
   }
 
-  getInitialStyle () {
+  configure(options: Partial<Options>) {
+    this.mode =
+      options.mode && animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
+    this.duration = options.duration ?? 10000
+    this.speed = 1000 * (options.speed ?? 1)
+    this.stagger = this.speed / (options.stagger ?? 4)
+    this.reverse = options.reverse ?? false
+  }
+
+  getInitialStyle() {
     return this.mode.init
   }
 
-  animate (listNodes: any, finished: Function) {
-    let self = this
-    let els = [].slice.call(listNodes, 0)
+  animate(listNodes: any, finished: any) {
+    let els = Array.prototype.slice.call(listNodes, 0)
     if (this.reverse) els = els.reverse()
     if (!els || els.length < 1) return
-    let offset = this.duration - (((els.length - 1) * this.stagger) + this.speed) * 2
-    offset = offset < 0 ? 0 : offset
+    let offset = this.duration - ((els.length - 1) * this.stagger + this.speed) * 2
+    offset = Math.max(offset, 0)
     let animation = anime.timeline({
-      autoplay: false
+      autoplay: false,
     })
-    animation.add(Object.assign({
-      targets: els,
-      duration: this.speed,
-      delay: function (_el: any, _i: any, _l: any) {
-        return _i * self.stagger
-      }
-    }, this.mode.in))
-    animation.add(Object.assign({
+    animation.add({
       targets: els,
       duration: this.speed,
-      delay: function (_el: any, _i: any, _l: any) {
-        return _i * self.stagger
+      delay: (_el: any, i: any) => i * this.stagger,
+      ...this.mode.in,
+    })
+    animation.add(
+      {
+        targets: els,
+        duration: this.speed,
+        delay: (_el: any, i: any) => i * this.stagger,
+        complete: () => {
+          finished()
+        },
+        ...this.mode.out,
       },
-      complete: () => {
-        finished()
-      }
-    }, this.mode.out), `+=${offset}`)
+      `+=${offset}`
+    )
     animation.play()
   }
 }
-
-export default Animation

package/src/scenes/components/MealContainer/components/OptionItem.tsx

@@ -8,10 +8,9 @@ type Props = {
 
 export default class OptionItem extends React.Component<Props> {
   render () {
-    let { vixonicData } = this.props
+    const { vixonicData } = this.props
     return <FormattedText
     text={this.props.data}
-    downloadsPath={vixonicData.downloadsPath}
     defaults={{
       fontSize: 10,
       alignment: 'left',

package/src/scenes/components/MealContainer/components/Title/index.tsx

@@ -8,7 +8,7 @@ type Props = {
   getPadding: (padding: string) => void
 }
 
-const TitleStyles: {[name: string]: TitleStyle} = {
+const TitleStyles: { [name: string]: TitleStyle } = {
   standard: {
     component: null,
     getPadding: () => ('0'),
@@ -23,38 +23,35 @@ const defaultFontSize = 20
 class Title extends React.Component<Props> {
   style: TitleStyle
 
-  constructor (props: Props) {
+  constructor(props: Props) {
     super(props)
     this.style = TitleStyles.standard
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.setup(this.props)
   }
 
-  setup (props: Props) {
-    let { parameters } = props.vixonicData
+  setup(props: Props) {
+    const { parameters } = props.vixonicData
     if (parameters.itemStyle && TitleStyles[parameters.itemStyle]) {
       this.style = TitleStyles[parameters.itemStyle]
     }
-    let fontSize = parameters.itemTitleTextFormat && parameters.itemTitleTextFormat.fontSize
+    const fontSize = parameters.itemTitleTextFormat?.fontSize
     props.getPadding(this.style.getPadding(fontSize || defaultFontSize))
   }
 
-  render () {
-    let { text } = this.props
-    let { parameters, downloadsPath } = this.props.vixonicData
-    let backgroundColor = parameters.itemTitleBackgroundColor
-    let fontSize = parameters.itemTitleTextFormat
-    && parameters.itemTitleTextFormat.fontSize
-    && (parameters.itemTitleTextFormat.fontSize / 100)
-    || defaultFontSize / 100
-    return <div style={{display: 'flex', height: `${fontSize * (this.style.heightOffset || 1)}em`}}>
-      {this.style.component && <this.style.component type='l' color={backgroundColor}/>}
-      <div style={{flex: 1, display: 'flex', alignItems: 'center', position: 'relative', width: '100%'}}>
+  render() {
+    const { text } = this.props
+    const { parameters } = this.props.vixonicData
+    const backgroundColor = parameters.itemTitleBackgroundColor
+    const fontSize = parameters.itemTitleTextFormat?.fontSize && (parameters.itemTitleTextFormat.fontSize / 100)
+      || defaultFontSize / 100
+    return <div style={{ display: 'flex', height: `${fontSize * (this.style.heightOffset || 1)}em` }}>
+      {this.style.component && <this.style.component type='l' color={backgroundColor} />}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', position: 'relative', width: '100%' }}>
         <FormattedText
           text={text}
-          downloadsPath={downloadsPath}
           defaults={{
             fontSize: defaultFontSize,
             alignment: 'left',
@@ -72,9 +69,9 @@ class Title extends React.Component<Props> {
             height: '100%',
             alignItems: 'center'
           }} />
-        {this.style.component && <this.style.component type='c' color={backgroundColor}/>}
+        {this.style.component && <this.style.component type='c' color={backgroundColor} />}
       </div>
-      {this.style.component && <this.style.component type='r' color={backgroundColor}/>}
+      {this.style.component && <this.style.component type='r' color={backgroundColor} />}
     </div>
   }
 }

package/src/scenes/components/MealContainer/components/Title/styles/Framed.tsx

@@ -1,49 +1,40 @@
-import React, { SFC } from 'react'
-import { TitleStyle, StyleProps } from './'
+import React from 'react'
+import { TitleStyle, SideProps, createStyleComponent, createGetPadding } from './'
 
-const Left: SFC<{color: string}> = (props) =>
-(<svg x='0px' y='0px' style={{flexShrink: 0}} height='100%' viewBox='0 0 40 100'>
+const Left: React.FunctionComponent<SideProps> = (props) =>
+(<svg x='0px' y='0px' style={{ flexShrink: 0 }} height='100%' viewBox='0 0 40 100'>
   <g>
-    <path fill={props.color} d='M40,0H37.75C26.43,0,17.25,8.33,17.25,18.59v1.33a34.85,34.85,0,0,0,0,60.16v1.33c0,10.27,9.18,18.59,20.51,18.59H40ZM23.89,54.94A4.94,4.94,0,1,1,28.83,50,4.94,4.94,0,0,1,23.89,54.94Z'/>
-    <path fill='#fff' d='M40,95.21H37.75C29.08,95.21,22,89,22,81.41V77.34L19.67,76a30.07,30.07,0,0,1,0-51.9L22,22.66V18.59C22,11,29.08,4.79,37.75,4.79H40V3.42H37.75c-9.42,0-17.09,6.81-17.09,15.17v3.29l-1.69,1a31.44,31.44,0,0,0,0,54.26l1.69,1v3.29c0,8.37,7.67,15.17,17.09,15.17H40Z'/>
+    <path fill={props.color} d='M40,0H37.75C26.43,0,17.25,8.33,17.25,18.59v1.33a34.85,34.85,0,0,0,0,60.16v1.33c0,10.27,9.18,18.59,20.51,18.59H40ZM23.89,54.94A4.94,4.94,0,1,1,28.83,50,4.94,4.94,0,0,1,23.89,54.94Z' />
+    <path fill='#fff' d='M40,95.21H37.75C29.08,95.21,22,89,22,81.41V77.34L19.67,76a30.07,30.07,0,0,1,0-51.9L22,22.66V18.59C22,11,29.08,4.79,37.75,4.79H40V3.42H37.75c-9.42,0-17.09,6.81-17.09,15.17v3.29l-1.69,1a31.44,31.44,0,0,0,0,54.26l1.69,1v3.29c0,8.37,7.67,15.17,17.09,15.17H40Z' />
   </g>
 </svg>)
 
-const Center: SFC<{color: string}> = (props) => (
-  <div style={{position: 'absolute', left: -1, right: 0, top: 0, bottom: 0}}>
-    <svg x='0px' y='0px' style={{position: 'absolute'}} width='100%' height='100%'
-    viewBox='0 0 40 100' preserveAspectRatio='none'>
+const Center: React.FunctionComponent<SideProps> = (props) => (
+  <div style={{ position: 'absolute', left: -1, right: 0, top: 0, bottom: 0 }}>
+    <svg x='0px' y='0px' style={{ position: 'absolute' }} width='100%' height='100%'
+      viewBox='0 0 40 100' preserveAspectRatio='none'>
       <g>
-        <rect fill={props.color} width='40' height='100'/>
+        <rect fill={props.color} width='40' height='100' />
         <g fill='#fff'>
-          <rect y='95.21' width='40' height='1.37'/>
-          <rect y='3.42' width='40' height='1.37'/>
+          <rect y='95.21' width='40' height='1.37' />
+          <rect y='3.42' width='40' height='1.37' />
         </g>
       </g>
     </svg>
   </div>
 )
 
-const Right: SFC<{color: string}> = (props) =>
-(<svg x='0px' y='0px' style={{flexShrink: 0, marginLeft: -2}} height='100%' viewBox='0 0 40 100'>
+const Right: React.FunctionComponent<SideProps> = (props) =>
+(<svg x='0px' y='0px' style={{ flexShrink: 0, marginLeft: -2 }} height='100%' viewBox='0 0 40 100'>
   <g>
-    <path fill={props.color} d='M0,100H2.25c11.33,0,20.51-8.33,20.51-18.59V80.08a34.85,34.85,0,0,0,0-60.16V18.59C22.75,8.32,13.57,0,2.25,0H0ZM16.11,45.06A4.94,4.94,0,1,1,11.17,50,4.94,4.94,0,0,1,16.11,45.06Z'/>
-    <path fill='#fff' d='M0,4.79H2.25C10.92,4.79,18,11,18,18.59v4.07L20.33,24a30.07,30.07,0,0,1,0,51.9L18,77.34v4.07C18,89,10.92,95.21,2.25,95.21H0v1.37H2.25c9.42,0,17.09-6.81,17.09-15.17V78.12l1.69-1a31.44,31.44,0,0,0,0-54.26l-1.69-1V18.59c0-8.37-7.67-15.17-17.09-15.17H0Z'/>
+    <path fill={props.color} d='M0,100H2.25c11.33,0,20.51-8.33,20.51-18.59V80.08a34.85,34.85,0,0,0,0-60.16V18.59C22.75,8.32,13.57,0,2.25,0H0ZM16.11,45.06A4.94,4.94,0,1,1,11.17,50,4.94,4.94,0,0,1,16.11,45.06Z' />
+    <path fill='#fff' d='M0,4.79H2.25C10.92,4.79,18,11,18,18.59v4.07L20.33,24a30.07,30.07,0,0,1,0,51.9L18,77.34v4.07C18,89,10.92,95.21,2.25,95.21H0v1.37H2.25c9.42,0,17.09-6.81,17.09-15.17V78.12l1.69-1a31.44,31.44,0,0,0,0-54.26l-1.69-1V18.59c0-8.37-7.67-15.17-17.09-15.17H0Z' />
   </g>
 </svg>)
 
-const Framed: SFC<StyleProps> = (props) => (
-  props.type === 'l'
-  ? <Left color={props.color || 'rgba(0,0,0,0)'} />
-  : props.type === 'c'
-    ? <Center color={props.color || 'rgba(0,0,0,0)'} />
-    : <Right color={props.color || 'rgba(0,0,0,0)'} />
-)
+const Framed = createStyleComponent(Left, Center, Right)
 
-const getPadding = (fontSize: number) => {
-  let height = (fontSize * 2) / 100
-  return `0 ${height * (40 / 100)}em 0 ${height * (40 / 100)}em`
-}
+const getPadding = createGetPadding(40 / 100, 40 / 100)
 
 export const FramedStyle: TitleStyle = {
   component: Framed,

package/src/scenes/components/MealContainer/components/Title/styles/Modern.tsx

@@ -1,18 +1,18 @@
-import React, { SFC } from 'react'
-import { TitleStyle, StyleProps } from './'
+import React from 'react'
+import { TitleStyle, SideProps, createStyleComponent, createGetPadding } from './'
 
-const Left: SFC<{color: string}> = (props) =>
-(<svg x='0px' y='0px' style={{flexShrink: 0}} height='100%' viewBox='0 0 100 79.5'>
+const Left: React.FunctionComponent<SideProps> = (props) =>
+(<svg x='0px' y='0px' style={{ flexShrink: 0 }} height='100%' viewBox='0 0 100 79.5'>
   <g>
-    <polygon fill='#666665' points='14.7,17.5 14.4,17.1 0,17.1 0.3,17.5 16.8,39.4 0.3,61.4 14.7,61.4 31.2,39.4 	'/>
-    <path fill={props.color} d='M100,0h-4.3C73.8,0,55.9,17.9,55.9,39.8v0c0,21.9,17.9,39.8,39.8,39.8h4.3V0z'/>
+    <polygon fill='#666665' points='14.7,17.5 14.4,17.1 0,17.1 0.3,17.5 16.8,39.4 0.3,61.4 14.7,61.4 31.2,39.4 	' />
+    <path fill={props.color} d='M100,0h-4.3C73.8,0,55.9,17.9,55.9,39.8v0c0,21.9,17.9,39.8,39.8,39.8h4.3V0z' />
   </g>
 </svg>)
 
-const Center: SFC<{color: string}> = (props) => (
-  <div style={{position: 'absolute', left: -1, right: 0, top: 0, bottom: 0}}>
-    <svg x='0px' y='0px' style={{position: 'absolute'}} width='100%' height='100%'
-    viewBox='0 0 100 79.5' preserveAspectRatio='none'>
+const Center: React.FunctionComponent<SideProps> = (props) => (
+  <div style={{ position: 'absolute', left: -1, right: 0, top: 0, bottom: 0 }}>
+    <svg x='0px' y='0px' style={{ position: 'absolute' }} width='100%' height='100%'
+      viewBox='0 0 100 79.5' preserveAspectRatio='none'>
       <g>
         <rect fill={props.color} width='100' height='79.5' />
       </g>
@@ -20,25 +20,16 @@ const Center: SFC<{color: string}> = (props) => (
   </div>
 )
 
-const Right: SFC<{color: string}> = (props) =>
-(<svg x='0px' y='0px' style={{flexShrink: 0, marginLeft: -2}} height='100%' viewBox='0 0 44.1 79.5'>
+const Right: React.FunctionComponent<SideProps> = (props) =>
+(<svg x='0px' y='0px' style={{ flexShrink: 0, marginLeft: -2 }} height='100%' viewBox='0 0 44.1 79.5'>
   <g>
-    <path fill={props.color} d='M0,79.5h4.3c21.9,0,39.8-17.9,39.8-39.8v0C44.1,17.9,26.2,0,4.3,0H0V79.5z'/>
+    <path fill={props.color} d='M0,79.5h4.3c21.9,0,39.8-17.9,39.8-39.8v0C44.1,17.9,26.2,0,4.3,0H0V79.5z' />
   </g>
 </svg>)
 
-const Modern: SFC<StyleProps> = (props) => (
-  props.type === 'l'
-  ? <Left color={props.color || 'rgba(0,0,0,0)'} />
-  : props.type === 'c'
-    ? <Center color={props.color || 'rgba(0,0,0,0)'} />
-    : <Right color={props.color || 'rgba(0,0,0,0)'} />
-)
+const Modern = createStyleComponent(Left, Center, Right)
 
-const getPadding = (fontSize: number) => {
-  let height = (fontSize * 2) / 100
-  return `0 ${height * (44.1 / 79.5)}em 0 ${height * (100 / 79.5)}em`
-}
+const getPadding = createGetPadding(100 / 79.5, 44.1 / 79.5)
 
 export const ModernStyle: TitleStyle = {
   component: Modern,

package/src/scenes/components/MealContainer/components/Title/styles/index.tsx

@@ -1,13 +1,37 @@
+import React from 'react'
+
 export type StyleProps = {
   color?: string
   type: 'l' | 'c' | 'r'
 }
 
+export type SideProps = { color: string }
+
 export type TitleStyle = {
-  component: React.StatelessComponent<StyleProps> | null
+  component: React.FunctionComponent<StyleProps> | null
   getPadding: ((height: number) => string)
   heightOffset: number
 }
 
+export function createGetPadding(leftRatio: number, rightRatio: number): (fontSize: number) => string {
+  return (fontSize) => {
+    const height = (fontSize * 2) / 100
+    return `0 ${height * rightRatio}em 0 ${height * leftRatio}em`
+  }
+}
+
+export function createStyleComponent(
+  Left: React.FunctionComponent<SideProps>,
+  Center: React.FunctionComponent<SideProps>,
+  Right: React.FunctionComponent<SideProps>
+): React.FunctionComponent<StyleProps> {
+  return (props) => {
+    const color = props.color || 'rgba(0,0,0,0)'
+    if (props.type === 'l') return <Left color={color} />
+    if (props.type === 'c') return <Center color={color} />
+    return <Right color={color} />
+  }
+}
+
 export { ModernStyle } from './Modern'
 export { FramedStyle } from './Framed'

package/src/scenes/components/MealContainer/index.tsx

@@ -9,17 +9,17 @@ type Props = {
 }
 
 export default class MealContainer extends React.Component<Props, any> {
-  constructor (props: Props) {
-    super (props)
+  constructor(props: Props) {
+    super(props)
     this.state = {}
   }
 
-  render () {
-    let { data, interval, vixonicData } = this.props
-    let { parameters } = vixonicData
-    let rows = parameters.itemGridRows || 1
-    let pages = Math.ceil(data.options.length / rows)
-    let cycle = parameters.itemAnimationDuration && parameters.itemAnimationDuration * 1000 || (interval / pages)
+  render() {
+    const { data, interval, vixonicData } = this.props
+    const { parameters } = vixonicData
+    const rows = parameters.itemGridRows || 1
+    const pages = Math.ceil(data.options.length / rows)
+    const cycle = parameters.itemAnimationDuration ? parameters.itemAnimationDuration * 1000 : interval / pages
     return <div style={{
       display: 'flex',
       flexDirection: 'column',
@@ -30,29 +30,29 @@ export default class MealContainer extends React.Component<Props, any> {
       <Title
         text={data.type}
         vixonicData={vixonicData}
-        getPadding={(padding) => this.setState({padding})} />
-      { data && data.options &&
-      <Grid
-        style={{
-          flex: 1,
-          padding: parameters.itemGridMargins || this.state.padding
-        }}
-        fontSize='inherit'
-        id={data.type}
-        items={data.options.map((option) => (<OptionItem data={option} vixonicData={vixonicData} />))}
-        animate={true}
-        animation={{
-          mode: parameters.animationMode || 'fade',
-          duration: cycle
-        }}
-        layout={{
-          columns: 1,
-          rows,
-          alignment: {
-            h: 'start',
-            v: 'center'
-          }
-        }} />
+        getPadding={(padding) => this.setState({ padding })} />
+      {data?.options &&
+        <Grid
+          style={{
+            flex: 1,
+            padding: parameters.itemGridMargins || this.state.padding
+          }}
+          fontSize='inherit'
+          id={data.type}
+          items={data.options.map((option) => (<OptionItem key={option} data={option} vixonicData={vixonicData} />))}
+          animate={true}
+          animation={{
+            mode: parameters.animationMode || 'fade',
+            duration: cycle
+          }}
+          layout={{
+            columns: 1,
+            rows,
+            alignment: {
+              h: 'start',
+              v: 'center'
+            }
+          }} />
       }
     </div>
   }

package/src/test/parameters.json

@@ -1,11 +1,11 @@
 {
   "parameters":{
-     "animationDuration":10,
+     "animationDuration":3,
      "animationMode":"fade",
      "backgroundImage":{
         "filename":"background.jpg"
      },
-     "containerGridMargins":"110px 30px 30px 30px",
+     "containerGridMargins":"110px 50px 30px 40px",
      "containerGridRows":2,
      "containerGridRowsGap":5,
      "itemGridRows":3,
@@ -30,7 +30,9 @@
           "filename": "bold-font.ttf"
         }
      },
-     "pollingInterval": 300000,
-     "url":"https://docs.google.com/spreadsheets/d/e/2PACX-1vRNutB0GG-4deRCMFk5R3mGWWHS3ctoVZOjS7ZzK4Z3wFfozYYLet4TYXiArJ-8eeWwqQtgP3StDkkF/pub?output=xlsx"
+     "msj0": "Sin menú",
+     "menuService": {
+        "id": "38c3df7c-fb9e-e5a5-489a-d6e31048c2d3"
+     }
   }
-}
+}