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

package/package.json

@@ -10,7 +10,7 @@
   "author": {
     "name": ""
   },
-  "version": "0.2.0-dev.1",
+  "version": "0.2.0-dev.2",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode build",
     "watch": "vixonic-module-packager --mode watch",

package/src/logger.ts

@@ -1,7 +1,7 @@
 export const LOGGER_PROPERTY = 'vxAppLogger'
 class Logger {
   log(message: any, ...optionalParams: any[]) {
-    if ((window as any)[LOGGER_PROPERTY] === true) {
+    if ((globalThis.window as any)[LOGGER_PROPERTY] === true) {
       if (optionalParams && optionalParams.length > 0) console.log(message, optionalParams)
       else console.log(message)
     }

package/src/scenes/App.tsx

@@ -35,7 +35,7 @@ const resolveTodayMenu = (vixonicData: VixonicData): TodayMenu => {
 }
 
 class App extends React.Component<AppProps> {
-  render () {
+  render() {
     const { parameters, downloadsPath } = this.props.vixonicData
     let cycle = parameters.animationDuration && parameters.animationDuration * 1000 || 15000
     const { status, data, error } = resolveTodayMenu(this.props.vixonicData)
@@ -45,13 +45,29 @@ class App extends React.Component<AppProps> {
       position: 'absolute',
       top: 0, right: 0, bottom: 0, left: 0,
       backgroundImage: parameters.backgroundImage &&
-      `url("${downloadsPath + '/' + parameters.backgroundImage.filename}")` || undefined,
+        `url("${downloadsPath + '/' + parameters.backgroundImage.filename}")` || undefined,
       backgroundSize: '100% 100%',
       padding: parameters.containerGridMargins
     }}>
-    {
-      !data?.[0] ?
-        <div style={{width: '100%', height: '100%', display: 'flex', fontSize: `${100 / (parameters.itemGridRows || 1)}vmin`, justifyContent: 'center', alignItems: 'center'}}>
+      {data?.[0] ?
+        <Grid
+          animate={this.props.start}
+          style={{ width: '100%', height: '100%' }}
+          items={data.map((meal) => (<MealContainer key={meal.type} data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
+          animationConfig={{
+            mode: parameters.animationMode || 'fade',
+            duration: cycle
+          }} layout={{
+            alignment: {
+              h: 'start',
+              v: 'center'
+            },
+            columns: parameters.containerGridColumns || 1,
+            columnsGap: parameters.containerGridColumnsGap || 0,
+            rows: parameters.containerGridRows || 1,
+            rowsGap: parameters.containerGridRowsGap || 0
+          }} /> :
+        <div style={{ width: '100%', height: '100%', display: 'flex', fontSize: `${100 / (parameters.itemGridRows || 1)}vmin`, justifyContent: 'center', alignItems: 'center' }}>
           <FormattedText
             text={placeholder}
             defaults={{
@@ -59,31 +75,13 @@ class App extends React.Component<AppProps> {
               fontColor: 'black',
               fontSize: 10
             }}
-            style={{width: '100%'}}
+            style={{ width: '100%' }}
             format={parameters.itemOptionsTextFormat || {}}
-            unit='%'/>
-        </div> :
-        <Grid
-        id='container'
-        animate={this.props.start}
-        style={{width: '100%', height: '100%'}}
-        items={data.map((meal) => (<MealContainer key={meal.type} data={meal} interval={cycle} vixonicData={this.props.vixonicData} />))}
-        animation={{
-          mode: parameters.animationMode || 'fade',
-          duration: cycle
-        }} layout={{
-          alignment: {
-            h: 'start',
-            v: 'center'
-          },
-          columns: parameters.containerGridColumns || 1,
-          columnsGap: parameters.containerGridColumnsGap || 0,
-          rows: parameters.containerGridRows || 1,
-          rowsGap: parameters.containerGridRowsGap || 0
-        }}/>
-    }
-    <FontLoader downloadPath={downloadsPath} fonts={fontParser(parameters)}/>
-  </div>
+            unit='%' />
+        </div>
+      }
+      <FontLoader downloadPath={downloadsPath} fonts={fontParser(parameters)} />
+    </div>
   }
 }
 

package/src/scenes/components/FormattedText.tsx

@@ -22,13 +22,15 @@ type Props = {
 }
 
 class FormattedText extends React.Component<Props> {
-  render () {
-    let { format, defaults } = this.props
-    let { alignment, font, fontColor, fontSize } = format
-    let containerStyle = Object.assign({
+  render() {
+    const { format, defaults } = this.props
+    const { alignment, font, fontColor, fontSize } = format
+    const containerStyle = {
       display: 'inline-flex',
-      justifyContent: this.getHorizontalAlignment(alignment?.horizontal || defaults.alignment)
-    }, this.props.style)
+      justifyContent: this.getHorizontalAlignment(alignment?.horizontal || defaults.alignment),
+      ...this.props.style
+    }
+
     return <div style={containerStyle}>
       <span style={{
         color: fontColor || defaults.fontColor,
@@ -44,7 +46,7 @@ class FormattedText extends React.Component<Props> {
     </div>
   }
 
-  getHorizontalAlignment (alignment: any) {
+  getHorizontalAlignment(alignment: any) {
     if (alignment) {
       return alignments.hasOwnProperty(alignment) ? (alignments as any)[alignment] : 'flex-start'
     }

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

@@ -4,14 +4,14 @@ import Item from './GridItem'
 
 type GridProps = {
   animate: boolean,
-  animation: {
+  animationConfig: {
     mode: 'fade' | 'slideLeft' | 'slideRight',
     duration: number,
     speed?: number,
     stagger?: number,
     reverse?: boolean
   },
-  layout: {
+  layout: Readonly<{
     rows: number,
     rowsGap?: number,
     columns: number,
@@ -20,10 +20,9 @@ type GridProps = {
       h: 'start' | 'center' | 'end',
       v: 'start' | 'center' | 'end'
     }
-  }
+  }>
   style?: React.CSSProperties
   fontSize?: string
-  id: string
   items: React.ReactNode[]
 }
 
@@ -54,39 +53,42 @@ class Grid extends React.Component<GridProps, GridState> {
     items: []
   }
 
-  constructor (props: GridProps) {
-    super (props)
+  constructor(props: GridProps) {
+    super(props)
     this.lastIndex = 0
     this.animation = new AnimationController()
   }
 
-  componentDidMount () {
-    this.configure(this.props)
+  componentDidMount() {
+    this.configure()
   }
 
-  componentWillUnmount () {
+  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
+  configure() {
+    const { animationConfig, layout, animate } = this.props
+    this.animation.configure(animationConfig)
+    this.columns = layout.columns || 1
+    this.columnsGap = layout.columnsGap || 0
+    this.rows = layout.rows || 1
+    this.rowsGap = layout.rowsGap || 0
     this.itemsCount = this.rows * this.columns
-    if (props.animate && !this.animating && this.state.stage === 'idle') {
+    if (animate && !this.animating && this.state.stage === 'idle') {
       this.animating = true
-      this.createItems(props)
+      this.createItems()
     }
   }
 
   // Filter items by index and create the proper item within its container.
-  createItems (props: GridProps) {
-    if (!props.items) return
+  createItems() {
+    const { items, layout } = this.props
+    if (!items) return
+
     let count = 0
-    this.lastIndex = this.lastIndex < props.items.length ? this.lastIndex : 0
-    let newItems = props.items.filter((_item, index) => {
+    this.lastIndex = this.lastIndex < items.length ? this.lastIndex : 0
+    const newItems = items.filter((_item, index) => {
       return index >= this.lastIndex
     }).map((item, index, arr) => {
       if (count >= this.itemsCount) return null
@@ -101,7 +103,7 @@ class Grid extends React.Component<GridProps, GridState> {
           ic_lastChild: index === (arr.length - 1)
         }} style={this.animation.getInitialStyle()}
         // Item alignment. By default is center - center.
-        alignment={props.layout.alignment}
+        alignment={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.
@@ -129,7 +131,7 @@ class Grid extends React.Component<GridProps, GridState> {
     }
   }
 
-  render () {
+  render() {
     return <div ref={(container) => { this.container = container }} style={{
       opacity: this.state.show ? 1 : 0,
       position: 'relative',
@@ -142,14 +144,14 @@ class Grid extends React.Component<GridProps, GridState> {
     </div>
   }
 
-  componentDidUpdate (prevProps: GridProps) {
+  componentDidUpdate(prevProps: GridProps) {
     if (prevProps !== this.props) {
-      this.configure(this.props)
+      this.configure()
     }
     if (this.props.animate && this.state.stage === 'prepared') {
       // Start animations.
       this.animation.animate(this.container!.childNodes, () => {
-        !this.unmounting && this.createItems(this.props)
+        !this.unmounting && this.createItems()
       })
       this.setState({
         stage: 'animating'

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

@@ -41,13 +41,23 @@ class GridItem extends React.Component<GridItemProps, any> {
     this.setState({height: this.el.offsetHeight})
   }
 
-  componentWillReceiveProps () {
-    this.setState({ height: this.el.offsetHeight })
+  componentDidUpdate () {
+    const height = this.el.offsetHeight
+    if (height !== this.state.height) {
+      this.setState({ height })
+    }
   }
 
   render () {
-    let props = this.props
-    let style: React.CSSProperties = {
+    const props = this.props
+    const { ic_rowIndex, ic_columnIndex } = props.containerData
+    const top = ic_rowIndex > 0 && props.verticalGap
+      ? `${props.verticalGap * ic_rowIndex}%`
+      : '0'
+    const paddingLeft = ic_columnIndex > 0 && props.horizontalGap
+      ? `${props.horizontalGap}%`
+      : '0'
+    const style: React.CSSProperties = {
       overflow: 'hidden',
       display: 'flex',
       position: 'relative',
@@ -56,16 +66,8 @@ class GridItem extends React.Component<GridItemProps, any> {
       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',
+      top,
+      paddingLeft,
       ...props.style
     }
     return <div style={style}

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

@@ -29,16 +29,17 @@ class Title extends React.Component<Props> {
   }
 
   componentDidMount() {
-    this.setup(this.props)
+    this.setup()
   }
 
-  setup(props: Props) {
-    const { parameters } = props.vixonicData
+  setup() {
+    const { vixonicData, getPadding } = this.props
+    const { parameters } = vixonicData
     if (parameters.itemStyle && TitleStyles[parameters.itemStyle]) {
       this.style = TitleStyles[parameters.itemStyle]
     }
     const fontSize = parameters.itemTitleTextFormat?.fontSize
-    props.getPadding(this.style.getPadding(fontSize || defaultFontSize))
+    getPadding(this.style.getPadding(fontSize || defaultFontSize))
   }
 
   render() {

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

@@ -38,10 +38,9 @@ export default class MealContainer extends React.Component<Props, any> {
             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={{
+          animationConfig={{
             mode: parameters.animationMode || 'fade',
             duration: cycle
           }}