@vixoniccom/aniversarios 1.2.0-dev.1 → 1.2.1-dev.0

package/src/components/AnniversaryItem/components/ClassicItem/index.tsx

@@ -0,0 +1,109 @@
+import React, { useContext, useEffect, useRef, useState } from "react"
+import { AnniversaryDate, AnniversaryImage, Separator } from '..'
+import { FormattedText } from "../../../FormattedText"
+import { ConfigureContext } from "../../../../context/configureContext/ConfigureContext"
+import { getPhotoUrl, parseBorderMargin, parseParameters } from '../utils'
+
+interface Props {
+  anniversary: DataEmployee
+}
+
+export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary }: Props) => {
+  let month = anniversary.month
+  const cont = useRef(null)
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters, downloadsPath } = configureState
+  const { orientation, separatorColor, separatorWidth, imageSize } = parameters
+  const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
+  const [state, setState] = useState(Object.assign({}, parseParameters(parameters)))
+
+  useEffect(() => {
+    setMargins(parseBorderMargin(parameters.itemMargins))
+    setState(Object.assign({}, parseParameters(parameters)))
+  }, [])
+
+  const separatorProps = {
+    orientation: orientation,
+    size: separatorWidth,
+    color: separatorColor,
+    margins: orientation === "v"
+      ? `${margins.r} 0 ${margins.l} 0`
+      : `0 ${margins.r} 0 ${margins.l}`,
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: orientation === "v" ? "column" : "row",
+        backgroundColor: "transparent",
+        overflow: "hidden",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+      }}
+      ref={cont}
+    >
+      {state.imageEnabled && parameters.imageStyle && (
+        <div style={state.imageStyle}>
+          {
+            <AnniversaryImage
+              url={anniversary.image ? getPhotoUrl(anniversary.image, parameters, downloadsPath) : null}
+              orientation={orientation}
+              size={Number(imageSize) || 100}
+              borderStyle={parameters.imageStyle}
+            />
+          }
+        </div>
+      )}
+      {state.imageEnabled && parameters.separator && (
+        <Separator order={state.imageStyle.order} {...separatorProps} />
+      )}
+      <div
+        style={{
+          ...state.textStyle,
+          flexDirection: "column",
+        }}
+      >
+        <FormattedText
+          text={anniversary.name}
+          format={parameters.nameFormat}
+          maxChar={Number(parameters.nameMaxChar)}
+          lineHeight={1.2}
+        />
+        {state.descriptionEnabled && (
+          <FormattedText
+            text={anniversary.position}
+            format={parameters.descriptionFormat}
+            maxChar={Number(parameters.descriptionMaxChar)}
+            lineHeight={1.2}
+          />
+        )}
+        {state.optionalEnabled && (
+          <FormattedText
+            text={anniversary.optional}
+            format={parameters.optionalFormat}
+            maxChar={Number(parameters.descriptionMaxChar)}
+            lineHeight={1.2}
+          />
+        )
+        }
+      </div>
+      {parameters.separator && (
+        <Separator order={state.textStyle.order} {...separatorProps} />
+      )}
+      {state.dateEnabled && parameters.dateStyle && (
+        <div style={state.dateStyle}>
+          <AnniversaryDate
+            style={parameters.dateStyle}
+            day={anniversary.day}
+            month={month}
+          />
+        </div>
+      )}
+      {state.dateEnabled && parameters.separator && (
+        <Separator order={state.dateStyle.order} {...separatorProps} />
+      )}
+    </div>
+  )
+}

package/src/components/{anniversary-item/shared/separator → AnniversaryItem/components/Separator}/Separator.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
- 
 
 interface Props {
   order: number | undefined
@@ -9,8 +8,7 @@ interface Props {
   margins: string | undefined
 }
 
-export const Separator = ({ order,size, color, orientation, margins  }: Props) => {
-
+export const Separator = ({ order, size, color, orientation, margins }: Props) => {
   const getSizeStyle = (orientation: any, size: any) => {
     if (orientation === 'h') {
       return {
@@ -26,11 +24,11 @@ export const Separator = ({ order,size, color, orientation, margins  }: Props) =
   }
 
   if (order === 3) return null
-   const sizeStyle = getSizeStyle(orientation, size)
+  const sizeStyle = getSizeStyle(orientation, size)
   return (
     <div style={{
       flexShrink: 0,
-      order:  order,
+      order: order,
       backgroundColor: color || '',
       margin: margins,
       ...sizeStyle
@@ -38,4 +36,3 @@ export const Separator = ({ order,size, color, orientation, margins  }: Props) =
   )
 }
 
- 

package/src/components/AnniversaryItem/components/index.ts

@@ -0,0 +1,11 @@
+import { AnniversaryDate } from './AnniversaryDate'
+import { AnniversaryImage } from './AnniversaryImage'
+import { ClassicItem } from './ClassicItem'
+import { Separator } from './Separator/Separator'
+
+export {
+  AnniversaryDate,
+  AnniversaryImage,
+  ClassicItem,
+  Separator
+}

package/src/components/AnniversaryItem/components/utils.ts

@@ -0,0 +1,75 @@
+export const utils = (orientation: string, size: number) => {
+  const sizeAttr = orientation === 'v' ? 'width' : 'height'
+  const percentage = size ? `${size}` : orientation === 'v' ? '40%' : '80%'
+  return { [sizeAttr]: percentage }
+}
+
+export const parseBorderMargin = (marginString: any) => {
+  const pattern = /(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc))?/g
+  const match = marginString ? marginString.match(pattern) : ['']
+
+  switch (match.length) {
+    case 1:
+      return { r: '4%', l: '4%' }
+    case 2:
+      return { r: match[0], l: match[0] }
+    default:
+      return { r: match[0], l: match[1] }
+  }
+}
+
+const parseElementStyles = (margin: string, position: number, defaultPosition: number, parameters: VixonicParameters) => {
+  const { orientation, separator } = parameters
+  const marginAttr = orientation === 'v' ? 'marginBottom' : 'marginRight'
+  const sizeAttr = orientation === 'v' ? 'width' : 'height'
+  const pos = position !== undefined ? position : defaultPosition
+  return {
+    order: pos,
+    [sizeAttr]: '100%',
+    [marginAttr]: margin !== undefined && margin !== '' ? `${margin}%` : pos === 3 || separator === true ? 0 : '4%',
+  }
+}
+
+export const parseParameters = (parameters: any) => {
+  const imageAlignment = parameters.imageAlignment || 'center'
+  const textAlignment = parameters.textAlignment || 'center'
+  const dateAlignment = parameters.dateAlignment || 'center'
+
+  return {
+    imageEnabled: parameters.imageEnabled,
+    imageStyle: Object.assign(
+      {
+        flexShrink: 0,
+        display: 'flex',
+        justifyContent: imageAlignment,
+        alignItems: imageAlignment,
+      },
+      parseElementStyles(parameters.imageMargin, parameters.imagePosition, 1, parameters)
+    ),
+    descriptionEnabled: parameters.descriptionEnabled,
+    optionalEnabled: parameters.optionalEnabled,
+    textStyle: Object.assign(
+      { display: 'flex', flexDirection: 'column', justifyContent: textAlignment, flex: 1 },
+      parseElementStyles(parameters.textMargin, parameters.textPosition, 2, parameters)
+    ),
+    dateEnabled: parameters.dateEnabled,
+    dateStyle: Object.assign(
+      {
+        display: 'flex',
+        justifyContent: dateAlignment,
+        alignItems: dateAlignment,
+        flexShrink: 0,
+      },
+      parseElementStyles(parameters.dateMargin, parameters.datePosition, 3, parameters)
+    ),
+  }
+}
+
+export const getPhotoUrl = (filename: string, parameters: VixonicParameters, downloadsPath: string) => {
+  const mode = parameters.photosMode
+  if (mode === 'zip' && parameters.photosZip && parameters.photosZip.filename !== undefined) {
+    return downloadsPath + '/' + parameters.photosZip.filename.replace('.zip', '/') + filename
+  } else {
+    return filename
+  }
+}

package/src/components/AnniversaryItem/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ClassicItem } from './components'
+
+const itemStyles = {
+  standard: ClassicItem
+}
+
+interface Props {
+  style: 'standard' | 'custom',
+  anniversary: DataEmployee
+}
+
+export const AnniversaryItem = ({ style, anniversary }: Props) => {
+  const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles['standard'] : itemStyles.standard
+
+  return <StyledItem anniversary={anniversary} />
+}

package/src/components/{FontLoader.tsx → FontLoader/index.tsx}

@@ -1,36 +1,36 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { ConfigureContext } from '../contex/configureContext/ConfigureContext'
+import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
 
 interface Props {
   paths: Array<string>
 }
 
-export const FontLoader = ({ paths}: Props) => {
-
+export const FontLoader = ({ paths }: Props) => {
   const { configureState } = useContext(ConfigureContext)
   const { parameters, downloadsPath } = configureState
 
-  const _getValueByPath = (path: any, obj: any): any => {
-    let pathsArray = path.split('.')
-    let propertyName = pathsArray[0]
+  const _getValueByPath = (path: string, obj: any): any => {
+    const pathsArray = path.split('.')
+    const propertyName = pathsArray[0]
     if (pathsArray.length === 1) return obj[propertyName]
     else {
       pathsArray.splice(0, 1)
       return _getValueByPath(pathsArray.join('.'), obj[propertyName])
     }
   }
-  let fonts = paths.map((path: any) => {
+
+  const fonts = paths.map((path: any) => {
     try {
-      let fontParam = _getValueByPath(path, parameters)
-      let font = {
+      const fontParam = _getValueByPath(path, parameters)
+      const font = {
         family: fontParam.filename.replace('.', '-'),
         src: `${downloadsPath}/${fontParam.filename}`
       }
       return `
           @font-face {
-            font-family: "${font.family}";
-            src: url("${font.src}");
+            font-family: '${font.family}';
+            src: url('${font.src}');
           }
         `
     } catch (err) {
@@ -43,7 +43,6 @@ export const FontLoader = ({ paths}: Props) => {
   )
 }
 
-
 FontLoader.defaultProps = {
   paths: [],
   parameters: {},

package/src/components/FormattedText/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+const alignments = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end'
+}
+
+type Aligment = {
+  horizontal: keyof typeof alignments,
+  vertical: keyof typeof alignments
+}
+
+interface Props {
+  format?: any
+  lineHeight?: number
+  maxChar?: number
+  style?: number
+  text: string
+  unit?: string
+  paddingBottom?: string
+  paddingTop?: string
+}
+
+export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }) => {
+  const trimText = (text: any, maxChar: any) => {
+    const isValid = maxChar && maxChar >= 3
+    if (isValid && (text && text.length > maxChar) || false) {
+      const returnText = text.substring(0, maxChar - 3)
+      returnText.substr(-1, 3)
+      return `${returnText.trim()}...`
+    }
+    return text
+  }
+
+  const checkNested = (obj: any, path: string): boolean => {
+    return path.split('.').every(segment => {
+      if (obj && obj.hasOwnProperty(segment)) {
+        obj = obj[segment]
+        return true
+      }
+      return false
+    })
+  }
+
+  const getHorizontalAlignment = (alignment: Aligment) => {
+    if (alignment) {
+      const hA = alignment.horizontal
+      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
+    }
+    return 'flex-start'
+  }
+
+  const renderText = maxChar ? trimText(text, maxChar) : text
+  const containerStyle = Object.assign({
+    display: 'inline-flex',
+    justifyContent: getHorizontalAlignment(format.alignment)
+  }, style)
+
+  return (
+    <div style={containerStyle}>
+      <span style={{
+        color: format?.fontColor,
+        fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
+        fontSize: `${format?.fontSize}${unit}`,
+        textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
+        lineHeight: lineHeight,
+        paddingBottom: paddingBottom,
+        paddingTop: paddingTop,
+        display: 'inline-flex'
+      }}>{renderText}</span>
+    </div>
+  )
+}
+
+FormattedText.defaultProps = {
+  format: {},
+  lineHeight: 1,
+  unit: 'vh',
+  maxChar: undefined
+}

package/src/components/{items-container → ItemsContainer/components}/Item.tsx

@@ -16,9 +16,7 @@ interface Props {
   style: any
 }
 
-
 export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {
-
   const itemRef = useRef(null)
 
   return (
@@ -33,14 +31,10 @@ export const Item = ({ width, height, containerData, verticalGap, horizontalGap,
         height: height,
         top: containerData.ic_rowIndex === 0
           ? '0'
-          : verticalGap
-            ? `${verticalGap * containerData.ic_rowIndex}%`
-            : '0',
+          : verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0',
         paddingLeft: containerData.ic_columnIndex === 0
           ? '0'
-          : horizontalGap
-            ? `${horizontalGap}%`
-            : '0'
+          : horizontalGap ? `${horizontalGap}%` : '0'
         , ...style
       }}
     >
@@ -48,5 +42,3 @@ export const Item = ({ width, height, containerData, verticalGap, horizontalGap,
     </div>
   )
 }
-
-

package/src/components/ItemsContainer/components/animation.ts

@@ -0,0 +1,130 @@
+import anime from 'animejs'
+
+interface Options {
+  mode: keyof typeof animationModes
+  duration: number
+  speed: number
+  stagger: number
+  reverse: boolean
+}
+
+const animationModes = {
+  fade: {
+    in: {
+      opacity: [0, 1],
+      easing: 'linear',
+    },
+    out: {
+      opacity: [1, 0],
+      easing: 'linear',
+    },
+    init: {
+      opacity: 0,
+    },
+  },
+  slideRight: {
+    in: {
+      translateX: () => {
+        return [`-100vw`, '0vw']
+      },
+      easing: 'easeOutQuad',
+    },
+    out: {
+      translateX: () => {
+        return ['0vw', `100vw`]
+      },
+      easing: 'easeInQuad',
+    },
+    init: {
+      transform: 'translateX(-100vw)',
+    },
+  },
+  slideLeft: {
+    in: {
+      translateX: () => {
+        return [`100vw`, '0vw']
+      },
+      easing: 'easeOutQuad',
+    },
+    out: {
+      translateX: () => {
+        return ['0vw', `-100vw`]
+      },
+      easing: 'easeInQuad',
+    },
+    init: {
+      transform: 'translateX(100vw)',
+    },
+  },
+}
+
+class Animation {
+  public mode: any
+  public duration: number
+  public speed: number
+  public stagger: number
+  public reverse: boolean
+
+  constructor() {
+    this.mode = animationModes.fade
+    this.duration = 10000
+    this.speed = 1000
+    this.stagger = 1000 / 4
+    this.reverse = true
+  }
+
+  configure(options: Options) {
+    this.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
+  }
+
+  getInitialStyle() {
+    return this.mode.init
+  }
+
+  animate(listNodes: any, finished: any) {
+    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
+          },
+          complete: () => {
+            finished()
+          },
+        },
+        this.mode.out
+      ),
+      `+=${offset}`
+    )
+    animation.play()
+  }
+}
+
+module.exports = exports = Animation