@vixoniccom/menu-daily 0.1.0

package/src/scenes/components/FontLoader.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+type Props = {
+  fonts: string[]
+  downloadPath: string
+}
+
+class FontLoader extends React.Component<Props> {
+  render () {
+    let fonts = this.props.fonts.map((font) => {
+      try {
+        return `
+          @font-face {
+            font-family: "${parseFontName(font)}";
+            src: url("${parseFontUrl(this.props.downloadPath, font)}");
+          }
+        `
+      } catch (err) {
+        return ''
+      }
+    })
+    return <style>{fonts}</style>
+  }
+}
+
+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
+  )
+}
+
+export const parseFontName = (filename: string): string => {
+  return filename.replace('.','-')
+}
+
+export const parseFontUrl = (path: string, filename: string): string => {
+  return path + '/' + filename
+}
+
+export default FontLoader

package/src/scenes/components/FormattedText.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { parseFontName } from './FontLoader'
+
+const alignments = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end'
+}
+
+type Props = {
+  text: string
+  downloadsPath: string
+  unit: 'px' | '%' | 'em' | 'vh'
+  defaults: {
+    fontSize: number,
+    fontColor: string
+    alignment: 'left' | 'center' | 'right'
+  }
+  format: VixonicTextFormat
+  multiline?: boolean
+  lineHeight?: number
+  style?: React.CSSProperties
+}
+
+class FormattedText extends React.Component<Props> {
+  render () {
+    let { format, defaults } = this.props
+    let { alignment, font, fontColor, fontSize } = format
+    let containerStyle = Object.assign({
+      display: 'inline-flex',
+      justifyContent: this.getHorizontalAlignment(alignment && 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,
+        fontSize: `${fontSize || defaults.fontSize}${this.props.unit}`,
+        textAlign: alignment && alignment.horizontal || defaults.alignment,
+        lineHeight: this.props.lineHeight,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: this.props.multiline ? 'normal' : 'nowrap'
+      }}>{this.props.text}</span>
+    </div>
+  }
+
+  getHorizontalAlignment (alignment: any) {
+    if (alignment) {
+      return alignments.hasOwnProperty(alignment) ? (alignments as any)[alignment] : 'flex-start'
+    }
+    return 'flex-start'
+  }
+}
+
+export default FormattedText

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

@@ -0,0 +1,161 @@
+import React from 'react'
+import Animation from './animation'
+import Item from './GridItem'
+
+type GridProps = {
+  animate: boolean,
+  animation: {
+    mode: 'fade' | 'slideLeft' | 'slideRight',
+    duration: number,
+    speed?: number,
+    stagger?: number,
+    reverse?: boolean
+  },
+  layout: {
+    rows: number,
+    rowsGap?: number,
+    columns: number,
+    columnsGap?: number,
+    alignment: {
+      h: 'start' | 'center' | 'end',
+      v: 'start' | 'center' | 'end'
+    }
+  }
+  style?: React.CSSProperties
+  fontSize?: string
+  id: string
+  items: React.ReactNode[]
+}
+
+type GridState = {
+  show: boolean,
+  stage: 'idle' | 'preparing' | 'prepared' | 'animating',
+  items: React.ReactNode[]
+}
+
+class Grid extends React.Component<GridProps, GridState> {
+  lastIndex: number
+  animation: any
+  animating: boolean = false
+  unmounting: boolean = false
+
+  container: HTMLDivElement | null = null
+
+  columns: number = 1
+  columnsGap: number = 1
+  rows: number = 1
+  rowsGap: number = 1
+  itemsCount: number = 1
+
+  state: GridState = {
+    show: false,
+    stage: 'idle',
+    items: []
+  }
+
+  constructor () {
+    super ()
+    this.lastIndex = 0
+    this.animation = new Animation()
+  }
+
+  componentDidMount () {
+    this.configure(this.props)
+  }
+
+  componentWillReceiveProps (nextProps: GridProps) {
+    this.configure(nextProps)
+  }
+
+  componentWillUnmount () {
+    this.unmounting = true
+  }
+
+  configure (props: GridProps) {
+    this.animation.configure(props.animation)
+    this.columns = props.layout.columns || 1
+    this.columnsGap = props.layout.columnsGap || 0
+    this.rows = props.layout.rows || 1
+    this.rowsGap = props.layout.rowsGap || 0
+    this.itemsCount = this.rows * this.columns
+    if (props.animate && !this.animating && this.state.stage === 'idle') {
+      this.animating = true
+      this.createItems(props)
+    }
+  }
+
+  // Filter items by index and create the proper item within its container.
+  createItems (props: GridProps) {
+    if (!props.items) return
+    let count = 0
+    this.lastIndex = this.lastIndex < props.items.length ? this.lastIndex : 0
+    let newItems = props.items.filter((_item, index) => {
+      return index >= this.lastIndex
+    }).map((item, index, arr) => {
+      if (count >= this.itemsCount) return null
+      this.lastIndex++
+      count++
+      return <Item
+        key={`${Math.random()}${Math.random()}`} containerData={{
+          ic_index: index,
+          ic_rowIndex: Math.floor(index / this.columns),
+          ic_columnIndex: Math.floor(index % this.columns),
+          ic_firstChild: index === 0,
+          ic_lastChild: index === (arr.length - 1)
+        }} style={this.animation.getInitialStyle()}
+        // Item alignment. By default is center - center.
+        alignment={props.layout.alignment}
+        // Setup item width based on columns count.
+        width={(100 - (this.columnsGap * (this.columns - 1))) / this.columns}
+        // Setup item height based on rows count. If 0 set up on auto.
+        height={(100 - (this.rowsGap * (this.rows - 1))) / this.rows}
+        // Setup horizontal gap
+        horizontalGap={this.columnsGap}
+        // Setup vertical gap
+        verticalGap={this.rowsGap}
+        // Optional fontSize
+        fontSize={this.props.fontSize}>
+        {item}
+      </Item>
+    })
+    if (newItems.length > 0) {
+      this.setState({
+        show: true,
+        stage: 'prepared',
+        items: newItems
+      })
+    } else {
+      this.setState({
+        show: false,
+        stage: 'idle'
+      })
+    }
+  }
+
+  render () {
+    return <div ref={(container) => { this.container = container }} style={{
+      opacity: this.state.show ? 1 : 0,
+      position: 'relative',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignContent: 'flex-start',
+      ...this.props.style
+    }}>
+      {this.state.items}
+    </div>
+  }
+
+  componentDidUpdate () {
+    if (this.props.animate && this.state.stage === 'prepared') {
+      // Start animations.
+      this.animation.animate(this.container!.childNodes, () => {
+        !this.unmounting && this.createItems(this.props)
+      })
+      this.setState({
+        stage: 'animating'
+      })
+    }
+  }
+}
+
+export default Grid

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

@@ -0,0 +1,79 @@
+import React from 'react'
+
+const aligments: {[alignment: string]: 'flex-start' | 'center' | 'flex-end'} = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end'
+}
+
+type GridItemProps = {
+  style: React.CSSProperties,
+  alignment: {
+    h: 'start' | 'center' | 'end',
+    v: 'start' | 'center' | 'end'
+  }
+  width: number,
+  height: number,
+  horizontalGap: number,
+  verticalGap: number,
+  containerData: ContainerDataProps
+  fontSize?: string
+}
+
+export type ContainerDataProps = {
+  ic_index: number
+  ic_rowIndex: number,
+  ic_columnIndex: number,
+  ic_firstChild: boolean,
+  ic_lastChild: boolean
+}
+
+class GridItem extends React.Component<GridItemProps, any> {
+  el: any
+
+  constructor () {
+    super()
+    this.state = {}
+  }
+
+  componentDidMount () {
+    this.setState({height: this.el.offsetHeight})
+  }
+
+  componentWillReceiveProps () {
+    this.setState({ height: this.el.offsetHeight })
+  }
+
+  render () {
+    let props = this.props
+    let style: React.CSSProperties = {
+      overflow: 'hidden',
+      display: 'flex',
+      position: 'relative',
+      alignItems: aligments[props.alignment ? props.alignment.v : 'center'],
+      justifyContent: aligments[props.alignment ? props.alignment.h : 'center'],
+      width: `${props.width}%`,
+      height: `${props.height}%`,
+      fontSize: this.props.fontSize || this.state.height && `${this.state.height}px`,
+      top: props.containerData.ic_rowIndex === 0
+      ? '0'
+      : props.verticalGap
+        ? `${props.verticalGap * props.containerData.ic_rowIndex}%`
+        : '0',
+      paddingLeft: props.containerData.ic_columnIndex === 0
+      ? '0'
+      : props.horizontalGap
+        ? `${props.horizontalGap}%`
+        : '0',
+      ...props.style
+    }
+    return <div style={style}
+        ref={(el) => this.el = el}>
+        {
+          React.cloneElement<any, any>(props.children as React.ReactElement<any>, props.containerData)
+        }
+    </div>
+  }
+}
+
+export default GridItem

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

@@ -0,0 +1,105 @@
+let anime = require('animejs')
+
+// Predefined animation modes.
+const animationModes: {[mode: string]: any} = {
+  fade: {
+    in: {
+      opacity: [0, 1],
+      easing: 'linear'
+    },
+    out: {
+      opacity: [1, 0],
+      easing: 'linear'
+    },
+    init: {
+      opacity: 0
+    }
+  },
+  slideRight: {
+    in: {
+      translateX: (_el: any, _i: any) => {
+        return [`-100vw`, '0vw']
+      },
+      easing: 'easeOutQuad'
+    },
+    out: {
+      translateX: (_el: any, _i: any) => {
+        return ['0vw', `100vw`]
+      },
+      easing: 'easeInQuad'
+    },
+    init: {
+      transform: 'translate(0vw)'
+    }
+  },
+  slideLeft: {
+    in: {
+      translateX: (_el: any, _i: any) => {
+        return [`100vw`, '0vw']
+      },
+      easing: 'easeOutQuad'
+    },
+    out: {
+      translateX: (_el: any, _i: any) => {
+        return ['0vw', `-100vw`]
+      },
+      easing: 'easeInQuad'
+    },
+    init: {
+      transform: 'translate(0vw)'
+    }
+  }
+}
+
+class Animation {
+  mode: any = animationModes.fade
+  duration: number = 10000
+  speed: number = 1000
+  stagger: number = 1000 / 4
+  reverse?: boolean = false
+
+  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
+  }
+
+  getInitialStyle () {
+    return this.mode.init
+  }
+
+  animate (listNodes: any, finished: Function) {
+    let self = this
+    let els = [].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 animation = anime.timeline({
+      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({
+      targets: els,
+      duration: this.speed,
+      delay: function (_el: any, _i: any, _l: any) {
+        return _i * self.stagger
+      },
+      offset: `+=${offset}`,
+      complete: () => {
+        finished()
+      }
+    }, this.mode.out))
+    animation.play()
+  }
+}
+
+export default Animation

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

@@ -0,0 +1,2 @@
+import Grid from './Grid'
+export default Grid

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import FormattedText from '../../FormattedText'
+
+type Props = {
+  data: string
+  vixonicData: VixonicData
+}
+
+export default class OptionItem extends React.Component<Props> {
+  render () {
+    let { vixonicData } = this.props
+    return <FormattedText
+    text={this.props.data}
+    downloadsPath={vixonicData.downloadsPath}
+    defaults={{
+      fontSize: 10,
+      alignment: 'left',
+      fontColor: 'black'
+    }}
+    format={vixonicData.parameters.itemOptionsTextFormat || {}}
+    unit='%'
+    multiline
+    style={{width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}} />
+  }
+}

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

@@ -0,0 +1,82 @@
+import React from 'react'
+import FormattedText from '../../../FormattedText'
+import { ModernStyle, FramedStyle, TitleStyle } from './styles'
+
+type Props = {
+  text: string
+  vixonicData: VixonicData
+  getPadding: (padding: string) => void
+}
+
+const TitleStyles: {[name: string]: TitleStyle} = {
+  standard: {
+    component: null,
+    getPadding: () => ('0'),
+    heightOffset: 1
+  },
+  modern: ModernStyle,
+  framed: FramedStyle
+}
+
+const defaultFontSize = 20
+
+class Title extends React.Component<Props> {
+  style: TitleStyle
+
+  constructor () {
+    super()
+    this.style = TitleStyles.standard
+  }
+
+  componentDidMount () {
+    this.setup(this.props)
+  }
+
+  setup (props: Props) {
+    let { parameters } = props.vixonicData
+    if (parameters.itemStyle && TitleStyles[parameters.itemStyle]) {
+      this.style = TitleStyles[parameters.itemStyle]
+    }
+    let fontSize = parameters.itemTitleTextFormat && 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%'}}>
+        <FormattedText
+          text={text}
+          downloadsPath={downloadsPath}
+          defaults={{
+            fontSize: defaultFontSize,
+            alignment: 'left',
+            fontColor: 'black'
+          }}
+          format={parameters.itemTitleTextFormat || {}}
+          unit='%'
+          style={{
+            overflow: 'hidden',
+            position: 'absolute',
+            zIndex: 1,
+            width: '100%',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            height: '100%',
+            alignItems: 'center'
+          }} />
+        {this.style.component && <this.style.component type='c' color={backgroundColor}/>}
+      </div>
+      {this.style.component && <this.style.component type='r' color={backgroundColor}/>}
+    </div>
+  }
+}
+
+export default Title

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

@@ -0,0 +1,52 @@
+import React, { SFC } from 'react'
+import { TitleStyle, StyleProps } from './'
+
+const Left: SFC<{color: string}> = (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'/>
+  </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'>
+      <g>
+        <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'/>
+        </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'>
+  <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'/>
+  </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 getPadding = (fontSize: number) => {
+  let height = (fontSize * 2) / 100
+  return `0 ${height * (40 / 100)}em 0 ${height * (40 / 100)}em`
+}
+
+export const FramedStyle: TitleStyle = {
+  component: Framed,
+  getPadding,
+  heightOffset: 2
+}

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

@@ -0,0 +1,47 @@
+import React, { SFC } from 'react'
+import { TitleStyle, StyleProps } from './'
+
+const Left: SFC<{color: string}> = (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'/>
+  </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'>
+      <g>
+        <rect fill={props.color} width='100' height='79.5' />
+      </g>
+    </svg>
+  </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'>
+  <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'/>
+  </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 getPadding = (fontSize: number) => {
+  let height = (fontSize * 2) / 100
+  return `0 ${height * (44.1 / 79.5)}em 0 ${height * (100 / 79.5)}em`
+}
+
+export const ModernStyle: TitleStyle = {
+  component: Modern,
+  getPadding,
+  heightOffset: 2
+}

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

@@ -0,0 +1,13 @@
+export type StyleProps = {
+  color?: string
+  type: 'l' | 'c' | 'r'
+}
+
+export type TitleStyle = {
+  component: React.StatelessComponent<StyleProps> | null
+  getPadding: ((height: number) => string)
+  heightOffset: number
+}
+
+export { ModernStyle } from './Modern'
+export { FramedStyle } from './Framed'

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

@@ -0,0 +1,2 @@
+export { default as OptionItem } from './OptionItem'
+export { default as Title } from './Title'