@vixoniccom/news-internal 0.4.21-dev.35 → 0.4.21-dev.37

package/configuration/index.ts

@@ -1,8 +1,8 @@
 import { Configuration } from '@vixoniccom/modules'
-import { appereanceGroup } from './appearanceGroup'
+import { appearanceGroup } from './appearanceGroup'
 import { newsGroup } from './newsGroup'
 
 export const configuration: Configuration = new Configuration({
   durationFormula: `(_values.news && _values.news.filter(function(newsItem) { return new Date(newsItem.expirationDate) > new Date() || isNaN(new Date(newsItem.expirationDate)) ; }).length || 0) * (_values.showTime || 10)`,
-  schema: [newsGroup, appereanceGroup],
+  schema: [newsGroup, appearanceGroup],
 })

package/configuration/newsGroup/index.ts

@@ -10,8 +10,8 @@ export const newsGroup = new List({
   range: new NumberRangeValue(1, 200),
   itemDisplayClass: '2-lines',
   itemDisplayAttributes: {
-    title: 'title',
-    subtitle: 'description',
+    title: 'titleMedium',
+    subtitle: 'descriptionMedium',
     expirationDate: 'expirationDate',
   },
 })

package/configuration/newsGroup/newsInputs.ts

@@ -3,7 +3,7 @@ import { ShowValidations } from '../utils'
 
 export const newsInputs = [
   new TextInput({
-    id: 'title',
+    id: 'titleShort',
     label: 'Título corto',
     required: true,
     show: ShowValidations.shortTitleEnabled,
@@ -11,7 +11,7 @@ export const newsInputs = [
     pattern: '^(?!\\s*$).+',
   }),
   new TextInput({
-    id: 'title',
+    id: 'titleMedium',
     label: 'Título mediano',
     required: true,
     show: ShowValidations.mediumTitleEnabled,
@@ -19,7 +19,7 @@ export const newsInputs = [
     pattern: '^(?!\\s*$).+',
   }),
   new TextInput({
-    id: 'title',
+    id: 'titleLarge',
     label: 'Título largo',
     required: true,
     show: ShowValidations.largeTitleEnabled,
@@ -28,7 +28,7 @@ export const newsInputs = [
   }),
 
   new TextInput({
-    id: 'title',
+    id: 'titleExtraLarge',
     label: 'Título extra largo',
     required: true,
     show: ShowValidations.extraLargeTitleEnabled,
@@ -37,7 +37,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionShort',
     label: 'Descripción corta',
     required: true,
     show: ShowValidations.shortDescriptionEnabled,
@@ -47,7 +47,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionMedium',
     label: 'Descripción mediana',
     required: true,
     show: ShowValidations.mediumDescriptionEnabled,
@@ -57,7 +57,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionLarge',
     label: 'Descripción larga',
     required: true,
     show: ShowValidations.largeDescriptionEnabled,
@@ -67,7 +67,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionExtraLarge',
     label: 'Descripción extra larga',
     required: true,
     show: ShowValidations.extraLargeDescriptionEnabled,

package/configuration.json

@@ -7,79 +7,79 @@
       "type": "list",
       "itemSchema": [
         {
-          "id": "title",
+          "id": "titleShort",
           "label": "Título corto",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'short')",
           "type": "text-input",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:25]"
+          "range": "[1:25:]"
         },
         {
-          "id": "title",
+          "id": "titleMedium",
           "label": "Título mediano",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'medium')",
           "type": "text-input",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:40]"
+          "range": "[1:40:]"
         },
         {
-          "id": "title",
+          "id": "titleLarge",
           "label": "Título largo",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'large')",
           "type": "text-input",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:50]"
+          "range": "[1:50:]"
         },
         {
-          "id": "title",
+          "id": "titleExtraLarge",
           "label": "Título extra largo",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'extra-large')",
           "type": "text-input",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:70]"
+          "range": "[1:70:]"
         },
         {
-          "id": "description",
+          "id": "descriptionShort",
           "label": "Descripción corta",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'short')",
           "type": "text-area",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:80]",
+          "range": "[1:80:]",
           "html": true
         },
         {
-          "id": "description",
+          "id": "descriptionMedium",
           "label": "Descripción mediana",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'medium')",
           "type": "text-area",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:180]",
+          "range": "[1:180:]",
           "html": true
         },
         {
-          "id": "description",
+          "id": "descriptionLarge",
           "label": "Descripción larga",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'large')",
           "type": "text-area",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:350]",
+          "range": "[1:350:]",
           "html": true
         },
         {
-          "id": "description",
+          "id": "descriptionExtraLarge",
           "label": "Descripción extra larga",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'extra-large')",
           "type": "text-area",
           "required": true,
           "pattern": "^(?!\\s*$).+",
-          "range": "[1:500]",
+          "range": "[1:500:]",
           "html": true
         },
         {
@@ -119,11 +119,11 @@
         }
       ],
       "description": "Lista de noticias",
-      "range": "[1:200]",
+      "range": "[1:200:]",
       "itemDisplayClass": "2-lines",
       "itemDisplayAttributes": {
-        "title": "title",
-        "subtitle": "description",
+        "title": "titleMedium",
+        "subtitle": "descriptionMedium",
         "expirationDate": "expirationDate"
       },
       "sortable": true
@@ -188,7 +188,7 @@
           "id": "showTime",
           "label": "Persistencia",
           "type": "number-input",
-          "range": "[5:9999]",
+          "range": "[5:9999:]",
           "description": "Tiempo en segundos por noticia. Por defecto 10"
         },
         {
@@ -253,12 +253,13 @@
         },
         {
           "id": "defaultMessage",
-          "label": "Sin noticias",
-          "type": "text-input"
+          "label": "Mensaje sin noticias",
+          "type": "text-input",
+          "description": "Mensaje a mostrar cuando no existen noticias o han caducado"
         },
         {
           "id": "defaultMessageFormat",
-          "label": "Formato mensaje sin noticias",
+          "label": "Formato del mensaje sin noticias",
           "type": "text-format"
         },
         {
@@ -282,7 +283,7 @@
           "label": "Altura de línea",
           "show": "{{titleEnabled}} === true",
           "type": "number-input",
-          "range": "[0.8:100]"
+          "range": "[0.8:100:]"
         },
         {
           "id": "descriptionEnabled",
@@ -301,7 +302,7 @@
           "label": "Altura de línea",
           "show": "{{descriptionEnabled}} === true",
           "type": "number-input",
-          "range": "[0.8:100]"
+          "range": "[0.8:100:]"
         },
         {
           "id": "textSeparation",
@@ -348,7 +349,7 @@
           "label": "Tamaño personalizado",
           "show": "{{imageEnabled}} === true && ( ( {{template}} === 'gallery' ) === false ) && ( ( {{template}} === 'gradient' ) === false ) && ( {{imageSize}} === 'custom' )",
           "type": "number-input",
-          "range": "[1:100]",
+          "range": "[1:100:]",
           "description": "En porcentaje.",
           "required": true
         },
@@ -454,7 +455,7 @@
           "label": "Porcentje de degradado",
           "show": "{{template}} === 'gradient'",
           "type": "number-input",
-          "range": "[1:100]",
+          "range": "[1:100:]",
           "description": "Por defecto 50"
         },
         {

package/package.json

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

package/src/components/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { v4 as uuid } from 'uuid'
 import { NewsContainer } from './NewsContainer'
 import { FontLoader } from './FontLoader'
 import dayjs from 'dayjs'
@@ -9,26 +10,36 @@ export type Props = {
 
 export const App: React.FunctionComponent<Props> = ({ data }) => {
   const [news, setNews] = useState<NewsItem[]>([])
-  
+
+  const getPrefixBySize = (n: any, size: string, prefix: string): string => {
+    const prefixMap: { [key: string]: string } = {
+      'short': n[`${prefix}Short`],
+      'medium': n[`${prefix}Medium`],
+      'large': n[`${prefix}Large`],
+      'extra-large': n[`${prefix}ExtraLarge`]
+    }
+    return prefixMap[size] || n[`${prefix}Medium`] || n[prefix] || ''
+  }
+
   const parseNews = (data?: VixonicData): NewsItem[] => {
     if (!data) return []
-    const { news } = data.parameters
-    const parsedNews = news?.map((n, index) => {
+    const { news, newsSizeSelect } = data.parameters
+    const parsedNews = news?.map((n) => {
       const { image, ...rest } = n
       let parsedImage
       const qrUrl = n.qrCodeUrl
       if (image?.filename) parsedImage = `${data.downloadsPath}/${image.filename}`
-    
-      let title = n.title
-      let description = n.description
+
+      let title = getPrefixBySize(n, newsSizeSelect ?? 'medium', 'title')
+      let description = getPrefixBySize(n, newsSizeSelect ?? 'medium', 'description')
 
       return {
          ...rest,
           title,
           description,
           image: parsedImage,
-          id: n.__id ?? String(index),
-          qrCodeUrl: qrUrl 
+          id: uuid(),
+          qrCodeUrl: qrUrl
         }
     }).filter((n) => {
       const { expirationDate } = n

package/src/parameters.d.ts

@@ -4,118 +4,6 @@ declare type VixonicData = {
   parameters: VixonicParameters
 }
 
-declare type VixonicParameters = 
-Partial<{
-  news: {
-    title: string, 
-    description: string, 
-    image: {
-      id?: string, 
-      filename?: string, 
-      extension?: string
-    }, 
-    qrCodeUrl: string, 
-    qrCodeTitle: string, 
-    expirationDate: string, 
-    __id: string | undefined}[], 
-    newsSizeSelect: 'short' | 'medium' | 'large' | 'extra-large', 
-    template: 'standard' | 'gallery' | 'gradient', 
-    showTime: number, animationSpeed: number, 
-    animationType: 'fade' | 'crossFade', 
-    textAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between',
-    defaultMessage: string
-    defaultMessageFormat: {
-      fontSize?: number,
-      fontColor?: string,
-      alignment?: {
-        horizontal?: 'left' | 'right' | 'center'},
-        font?: {
-          filename: string; 
-          id: string; 
-          __isAsset: true}
-    }
-    titleEnabled: boolean, 
-    titleFormat: { 
-      fontSize?: number, 
-      fontColor?: string, 
-      alignment?: { 
-        horizontal?: 'left' | 'right' | 'center' 
-      }, 
-      font?: { 
-        filename: string, 
-        id: string, 
-        __isAsset: true 
-      } 
-    }, 
-    titleLineHeight: number, 
-    descriptionEnabled: boolean, 
-    descriptionFormat: { 
-      fontSize?: number, 
-      fontColor?: string, 
-      alignment?: { 
-        horizontal?: 'left' | 'right' | 'center' 
-      }, 
-      font?: { 
-        filename: string, 
-        id: string, 
-        __isAsset: true 
-      } 
-    }, 
-    descriptionLineHeight: number, 
-    textSeparation: number, 
-    imageEnabled: boolean, 
-    imageSize: 'small' | 'medium' | 'large' | 'custom', 
-    imageCustomSize: number, 
-    imagePosition: 'top' | 'right' | 'bottom' | 'left', 
-    imageMode: 'contain' | 'cover' | 'fill' | 'none', 
-    imageStyle: 'normal' | 'rounded' | 'circle' | 'hex', 
-    imageSeparation: number, 
-    gradientBackgroundColor: string, 
-    gradientRate: number, 
-    gradientOrientation: 'left' | 'right', 
-    gradientTitleEnabled: boolean, 
-    gradientTitle: string, 
-    gradientTitlePositionX: number, 
-    gradientTitlePositionY: number, 
-    gradientTitleFormat: { 
-      fontSize?: number, 
-      fontColor?: string, 
-      alignment?: { 
-        horizontal?: 'left' | 'right' | 'center' 
-      }, 
-      font?: { 
-        filename: string, 
-        id: string, 
-        __isAsset: true 
-      } 
-    }, 
-    barSize: 'small' | 'medium' | 'big', 
-    barColor: string, 
-    barOpacity: number, 
-    iconVisible: boolean, 
-    iconColor: string, 
-    qrCodeEnabled: boolean, 
-    qrCodeWidth: number, 
-    qrCodeHeight: number, 
-    qrCodePositionX: number, 
-    qrCodePositionY: number, 
-    qrCodeBackgroundColor: string, 
-    qrCodeColor: string, 
-    QrCodeTitleFormat: { 
-      fontSize?: number, 
-      fontColor?: string, 
-      alignment?: { 
-        horizontal?: 'left' | 'right' | 'center' }, 
-        font?: { 
-          filename: string, 
-          id: string, 
-          __isAsset: true 
-        } 
-      }, 
-      background: {
-        id?: string, 
-        filename?: string, 
-        extension?: string
-      }, 
-      padding: string
+declare type VixonicParameters = Partial<{
+  news: {titleShort: string, titleMedium: string, titleLarge: string, titleExtraLarge: string, descriptionShort: string, descriptionMedium: string, descriptionLarge: string, descriptionExtraLarge: string, image: {id?: string, filename?: string, extension?: string}, qrCodeUrl: string, qrCodeTitle: string, expirationDate: string, __id: string | undefined}[], newsSizeSelect: 'short' | 'medium' | 'large' | 'extra-large', template: 'standard' | 'gallery' | 'gradient', showTime: number, animationSpeed: number, animationType: 'fade' | 'crossFade', textAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between', defaultMessage: string, defaultMessageFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, titleEnabled: boolean, titleFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, titleLineHeight: number, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionLineHeight: number, textSeparation: number, imageEnabled: boolean, imageSize: 'small' | 'medium' | 'large' | 'custom', imageCustomSize: number, imagePosition: 'top' | 'right' | 'bottom' | 'left', imageMode: 'contain' | 'cover' | 'fill' | 'none', imageStyle: 'normal' | 'rounded' | 'circle' | 'hex', imageSeparation: number, gradientBackgroundColor: string, gradientRate: number, gradientOrientation: 'left' | 'right', gradientTitleEnabled: boolean, gradientTitle: string, gradientTitlePositionX: number, gradientTitlePositionY: number, gradientTitleFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, barSize: 'small' | 'medium' | 'big', barColor: string, barOpacity: number, iconVisible: boolean, iconColor: string, qrCodeEnabled: boolean, qrCodeWidth: number, qrCodeHeight: number, qrCodePositionX: number, qrCodePositionY: number, qrCodeBackgroundColor: string, qrCodeColor: string, QrCodeTitleFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, background: {id?: string, filename?: string, extension?: string}, padding: string
 }>