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

package/src/scenes/App.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react'
-
-import { DataLoader } from '../dataLoader'
 import Grid from './components/Grid'
 import MealContainer from './components/MealContainer'
 import FontLoader, { fontParser } from './components/FontLoader'
@@ -11,48 +9,38 @@ export type AppProps = {
   vixonicData: VixonicData
 }
 
-export type AppState = {
-  loading: boolean
-  updateTime?: number
+type TodayMenu = {
+  status: 'loading' | 'ready'
   data?: Menu
+  error?: string
 }
 
-class App extends React.Component<AppProps, AppState> {
-  private readonly dataLoader: DataLoader
+const resolveTodayMenu = (vixonicData: VixonicData): TodayMenu => {
+  const { parameters, services } = vixonicData
+  const serviceId = parameters.menuService?.id
+  const serviceData = serviceId ? (services?.[serviceId]?.data as MenuAppServiceData | undefined) : undefined
 
-  constructor (props: AppProps) {
-    super(props)
-    let { parameters } = props.vixonicData
-    this.state = {
-      loading: true
-    }
-    this.dataLoader = new DataLoader(parameters.url, parameters.pollingInterval)
-  }
+  if (!serviceData) return { status: 'loading' }
+  if (serviceData.errors) return { status: 'ready', error: serviceData.errors }
 
-  componentDidMount () {
-    this.dataLoader.onUpdate = (data) => {
-      const { mealType } = this.props.vixonicData.parameters
-      const today = new Date()
-      today.setHours(0,0,0,0)
-      const menu = mealType && data[mealType.toUpperCase()] || data[Object.keys(data)[0]]
-      this.setState({loading: false, data: menu[today.getTime()]})
-    }
+  const menus = serviceData.menus || {}
+  const sheet = (parameters.mealType && menus[parameters.mealType.toUpperCase()]) || menus[Object.keys(menus)[0]]
+  if (!sheet) return { status: 'ready' }
 
-    this.dataLoader.onError = (e) => {
-      console.error(e)
-    }
-  }
-
-  componentWillReceiveProps (nextProps: AppProps) {
-    if (this.props.vixonicData.parameters.url !== nextProps.vixonicData.parameters.url) {
-      let { parameters } = nextProps.vixonicData
-      parameters.url && this.dataLoader.setup(parameters.url, parameters.pollingInterval)
-    }
-  }
+  const now = new Date()
+  const todayKey = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
+  const day = sheet.find((d) => d.date === todayKey)
+  const meals = day?.meals.filter((meal) => meal.options.length > 0)
+  return { status: 'ready', data: meals }
+}
 
+class App extends React.Component<AppProps> {
   render () {
     const { parameters, downloadsPath } = this.props.vixonicData
     let cycle = parameters.animationDuration && parameters.animationDuration * 1000 || 15000
+    const { status, data, error } = resolveTodayMenu(this.props.vixonicData)
+    const placeholder = error || (status === 'loading' ? 'Cargando...' : parameters.msj0 || 'No hay menu.')
+
     return <div style={{
       position: 'absolute',
       top: 0, right: 0, bottom: 0, left: 0,
@@ -62,11 +50,10 @@ class App extends React.Component<AppProps, AppState> {
       padding: parameters.containerGridMargins
     }}>
     {
-      this.state.loading || !this.state.data || !this.state.data[0] ?
+      !data?.[0] ?
         <div style={{width: '100%', height: '100%', display: 'flex', fontSize: `${100 / (parameters.itemGridRows || 1)}vmin`, justifyContent: 'center', alignItems: 'center'}}>
           <FormattedText
-            text={this.state.loading ? 'Cargando...' : parameters.msj0 || 'No hay menu.'}
-            downloadsPath={downloadsPath}
+            text={placeholder}
             defaults={{
               alignment: 'center',
               fontColor: 'black',
@@ -80,7 +67,7 @@ class App extends React.Component<AppProps, AppState> {
         id='container'
         animate={this.props.start}
         style={{width: '100%', height: '100%'}}
-        items={this.state.data.map((meal) => (<MealContainer data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
+        items={data.map((meal) => (<MealContainer key={meal.type} data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
         animation={{
           mode: parameters.animationMode || 'fade',
           duration: cycle

package/src/scenes/components/FontLoader.tsx

@@ -15,7 +15,7 @@ class FontLoader extends React.Component<Props> {
             src: url("${parseFontUrl(this.props.downloadPath, font)}");
           }
         `
-      } catch (err) {
+      } catch {
         return ''
       }
     })
@@ -24,21 +24,8 @@ class FontLoader extends React.Component<Props> {
 }
 
 export function fontParser (parameters: VixonicParameters): string[] {
-  let initArr: string[] = []
-  return Object.keys(parameters).reduce(
-    (fonts, param) => {
-      switch (param) {
-        case 'itemTitleTextFormat':
-        case 'itemOptionsTextFormat':
-          if (parameters[param] && parameters[param]!.font && parameters[param]!.font!.filename) {
-            fonts.push((parameters[param]!.font!.filename || ''))
-            return fonts
-          } else return fonts
-        default:
-          return fonts
-      }
-    }, initArr
-  )
+  const keys = ['itemTitleTextFormat', 'itemOptionsTextFormat'] as const
+  return keys.map(key => parameters[key]?.font?.filename).filter((filename): filename is string => !!filename)
 }
 
 export const parseFontName = (filename: string): string => {

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'