@vixoniccom/news-internal 0.4.19 → 0.4.20-dev.1

package/src/components/App.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { v4 as uuid } from 'uuid'
+import { NewsContainer } from './NewsContainer'
+import { FontLoader } from './FontLoader'
+import dayjs from 'dayjs'
+
+export type Props = {
+  data?: VixonicData
+  start: boolean
+}
+
+type State = {
+  currentIndex: number
+  news: NewsItem[]
+}
+
+export class App extends React.Component<Props, State> {
+  state: State = { currentIndex: 0, news: [] }
+
+  constructor(props: Props) {
+    super(props)
+    this.state = { currentIndex: 0, news: this.parseNews(props.data) }
+    this.updateCssVariables(props)
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    const currentNews = this?.props?.data?.parameters?.news
+    const nextNews = nextProps?.data?.parameters?.news
+    if ((JSON.stringify(currentNews) !== JSON.stringify(nextNews)) || (JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data))) {
+      this.setState({ news: this.parseNews(nextProps.data) })
+    }
+    this.updateCssVariables(nextProps)
+  }
+
+  updateCssVariables(props: Props) {
+    if (!props.data) return
+    const { animationSpeed, animationType, template } = props.data.parameters
+    const speed = 1750 / (animationSpeed || 1)
+    document?.documentElement?.style?.setProperty('--speed', `${speed}ms`)
+    document?.documentElement?.style?.setProperty('--enterDelay', `${animationType === 'crossFade' ? 0 : speed}ms`)
+    // If gallery make a cross fade with delay to prevent background.
+    document?.documentElement?.style?.setProperty('--exitDelay', `${(animationType === 'crossFade' && template === 'gallery') ? speed : 0}ms`)
+  }
+
+  parseNews(data?: VixonicData): NewsItem[] {
+    if (!data) return []
+    const { news } = 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}`
+      return { ...rest, image: parsedImage, id: uuid(), qrCodeUrl: qrUrl }
+    }).filter((n) => {
+      const { expirationDate } = n
+      const today = dayjs()
+      if (!expirationDate) return true
+      const expiration = dayjs(expirationDate)
+      return today.isBefore(expiration)
+    })
+    return parsedNews || []
+  }
+
+  render() {
+    const { data } = this.props
+    if (!data) return null
+    return <div style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: 'hidden',
+      backgroundSize: '100% 100%',
+    }}>
+      <NewsContainer data={data} items={this.state.news} />
+      <FontLoader downloadPath={data.downloadsPath} parameters={data.parameters} />
+    </div >
+  }
+}

package/src/components/FontLoader.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { TextFormat } from '@vixoniccom/modules'
+
+type Props<T> = {
+  parameters: T
+  downloadPath: string
+}
+
+export const FontLoader: React.FunctionComponent<Props<any>> = (props) => {
+  const fonts = fontParser(props.parameters)
+  const fontStyles = fonts.filter((el, pos, arr) => (arr.indexOf(el) === pos)).map((font) => {
+    try {
+      return `
+        @font-face {
+          font-family: "${parseFontName(font)}";
+          src: url("${parseFontUrl(props.downloadPath, font)}");
+        }`
+    } catch (err) {
+      return ''
+    }
+  })
+  return ReactDOM.createPortal(<style type='text/css'>{fontStyles}</style>, document.getElementsByTagName('head')[0])
+}
+
+export function fontParser(parameters: any): string[] {
+  const initArr: string[] = []
+  return Object.keys(parameters).reduce(
+    (fonts, param) => {
+      const paramObj = parameters[param]
+      if (paramObj && isFont(paramObj)) {
+        fonts.push((paramObj.font!.filename || ''))
+      }
+      return fonts
+    }, initArr
+  )
+}
+
+function isFont(arg: any): arg is TextFormat.Value {
+  return arg?.font?.filename !== undefined
+}
+
+export const parseFontName = (filename: string): string => {
+  return filename.replace('.', '-')
+}
+
+export const parseFontUrl = (path: string, filename: string): string => {
+  return path + '/' + filename
+}

package/src/components/FormattedHtmlText/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { TextFormat } from '@vixoniccom/modules'
+import { parseFontName } from '../FontLoader'
+import DOMPurify from 'dompurify'
+
+const sanitizeHtml = (html?: string): string => {
+  return html ? DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['span', 'p', 'strong', 'b', 'em', 'i', 'u', 'br'],
+    ALLOWED_ATTR: ['class'],
+  }) : ''
+}
+
+const alignments = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end'
+}
+
+type Props = {
+  html: string
+  unit: 'px' | '%' | 'em' | 'vmin' | 'vh'
+  defaults: {
+    fontSize: number,
+    fontColor: string
+    alignment: 'left' | 'center' | 'right'
+  }
+  format?: TextFormat.Value
+  multiline?: boolean
+  lineHeight?: number
+  style?: React.CSSProperties
+}
+
+const getHorizontalAlignment = (alignment: any) => {
+  if (alignment) {
+    return alignments.hasOwnProperty(alignment) ? (alignments as any)[alignment] : 'flex-start'
+  }
+  return 'flex-start'
+}
+
+export const FormattedText: React.FunctionComponent<Props> = (props) => {
+  const { format, defaults, html } = props
+  const font = format?.font
+  const alignment = format?.alignment
+  const fontColor = format?.fontColor
+  const fontSize = format?.fontSize
+  const containerStyle = Object.assign({
+    display: 'inline-flex',
+    justifyContent: getHorizontalAlignment(alignment?.horizontal || defaults.alignment)
+  }, props.style)
+
+  return <div style={containerStyle}>
+    <div style={{
+      color: fontColor || defaults.fontColor,
+      width: '100%',
+      fontFamily: font?.filename && `"${parseFontName(font.filename)}"` || undefined,
+      fontSize: `${fontSize || defaults.fontSize}${props.unit}`,
+      textAlignLast: alignment?.horizontal || defaults.alignment,
+      lineHeight: props.lineHeight,
+      overflow: 'hidden',
+      whiteSpace: props.multiline ? 'pre-wrap' : 'nowrap'
+    }}>
+      <div className='ql-editor'
+        style={{ padding: 0, overflow: 'hidden', textAlign: alignment?.horizontal || defaults.alignment }}
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(html) }}
+      />
+    </div>
+  </div>
+}
+
+export default FormattedText

package/src/components/FormattedText/index.tsx

@@ -0,0 +1,82 @@
+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?: React.CSSProperties
+  text: string
+  unit?: string
+  paddingBottom?: string
+  paddingTop?: string
+  multiline?: boolean
+}
+
+export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop, multiline }) => {
+  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)
+      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 || '#ffffff',
+        fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
+        fontSize: `${format?.fontSize || 72}${unit}`,
+        textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
+        lineHeight: lineHeight,
+        paddingBottom: paddingBottom,
+        paddingTop: paddingTop,
+        display: 'inline-flex',
+        whiteSpace: multiline ? 'pre-wrap' : 'nowrap'
+      }}>{renderText}</span>
+    </div>
+  )
+}
+
+FormattedText.defaultProps = {
+  format: {},
+  lineHeight: 1,
+  unit: 'vh',
+  maxChar: undefined
+}

package/src/components/GalleryItem/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { ImageContainer } from '../ImageContainer'
+import { TextContainer } from '../TextContainer'
+import { QrCodeContainer } from '../QrCodeContainer'
+
+const imageContainerStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  flexShrink: 0
+}
+
+type Props = {
+  item: NewsItem
+  parameters: VixonicParameters
+}
+
+const direction: { [key: string]: 'column' | 'row-reverse' | 'column-reverse' | 'row' } = {
+  'top': 'column',
+  'right': 'row-reverse',
+  'bottom': 'column-reverse',
+  'left': 'row'
+}
+
+const barSize = {
+  small: '10%',
+  medium: '15%',
+  big: '20%'
+}
+
+const hexToRgbA = (hex: string, opacity?: number) => {
+  let c: any
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    c = hex.substring(1).split('')
+    if (c.length === 3) c = [c[0], c[0], c[1], c[1], c[2], c[2]]
+    c = '0x' + c.join('')
+    return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + (opacity || 1) + ')'
+  }
+  throw new Error('Bad Hex')
+}
+
+export const GalleryItem: React.FunctionComponent<Props> = (props) => {
+  const { item, parameters } = props
+  const flexDirection = direction[parameters.imagePosition || 'left']
+  return <div style={{
+    display: 'flex',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    flexDirection,
+    overflow: 'hidden',
+    padding: 'inherit'
+  }}>
+    <ImageContainer parameters={parameters} style={imageContainerStyle} src={item.image} />
+    {parameters.qrCodeEnabled && <QrCodeContainer parameters={parameters} item={item} />}
+    <div style={{
+      display: 'flex',
+      position: 'absolute',
+      bottom: '5vmin',
+      left: '5vmin',
+      right: '5vmin',
+      height: parameters.barSize && barSize[parameters.barSize] || '15%',
+      backgroundColor: parameters.barColor && hexToRgbA(parameters.barColor, parameters.barOpacity)
+    }}>
+      {parameters.iconVisible &&
+        <svg height='100%' viewBox='0 0 100 100'>
+          <rect width='100' height='100' fill={parameters.iconColor} />
+          <svg viewBox='0 0 100 100' x='10%' y='10%' width='80%' height='80%'>
+            <g>
+              <polygon fill='#fff' points='91.025,38.018 90.362,54.736 97.891,42.112  ' />
+              <polygon fill='#fff' points='65.395,96.6 71.269,86.753 47.289,85.802  ' />
+              <polygon fill='#fff' points='73.18,22.143 73.8,24.422 77.233,24.559 81.498,24.728 81.404,27.044 81.201,32.159 80.95,38.474    80.747,43.589 80.528,49.133 80.991,50.836 82.629,56.861 84.657,64.304 85.375,66.948 85.543,62.824 86,51.208 86.38,41.712    86.629,35.397 86.837,30.282 87.267,19.4 72.275,18.804  ' />
+              <polygon fill='#fff' points='74.287,70.849 68.038,72.551 62.763,73.985 56.736,75.628 38.535,80.584 37.339,80.908    39.203,80.983 73.888,82.361 79,82.561 84.746,82.789 85.164,72.229 85.286,69.227 85.343,67.84 82.005,68.751  ' />
+              <path fill='#fff' d='M57.398,70.785l8.567-2.327l5.389-1.471l6.254-1.699l2.305-0.629l0.167-0.047l-0.146-0.536l-0.503-1.851   l-1.641-6.028l-1.275-4.686l-0.507-1.865l-2.889-10.61l-1.701-6.247l-1.089-4.007l-1.01-3.71l-0.231-0.837l-1.472-5.413   l-0.056-0.208l-1.235-4.549L63.42,3.4L48.546,7.447l-10.987,2.99l-7.965,2.167l-10.259,2.796l-17.225,4.69l9.304,34.194   l1.639,6.024l1.649,6.062l1.701,6.249l0.571,2.101l1.793,6.584l3.634-0.988l4.739-1.293l6.031-1.644l18.203-4.948L57.398,70.785z    M15.364,47.656L8.922,23.987l10.181-2.775l4.547-1.232l9.812-2.673l0.156-0.041l6.095-1.663l8.333-2.262l1.096-0.301l6.031-1.641   l4.35-1.184l0.983,3.618l0.243,0.891l0.996,3.66l0.705,2.59L63.273,24l1.239,4.551l-0.217-0.011l0.252,0.155l1.703,6.245   l4.907,18.029l-29.962,8.159l-5.917,1.605l-0.171-0.01l0.062,0.042l-7.748,2.106l-5.618,1.531l-1.248,0.337l-2.849-10.471   l-0.704-2.583L15.364,47.656z' />
+            </g>
+          </svg>
+        </svg>
+      }
+      <TextContainer style={{ margin: '1vmin 2.5vmin' }} parameters={parameters} item={item} />
+    </div>
+  </div>
+}

package/src/components/GradientImage/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+type Props = {
+  src: string
+}
+
+export const GradientImage: React.FunctionComponent<Props> = (props) => {
+  const { src } = props
+
+  return <svg style={{ flexShrink: 0, height: '100%', zIndex: -1 }} viewBox='0 0 100 100'>
+    <defs>
+      <clipPath id='gradientClip'>
+        <rect width='100' height='100' />
+      </clipPath>
+    </defs>
+    <image width='100' height='100' xlinkHref={src} clipPath='url(#gradientClip)' preserveAspectRatio='xMidYMid slice' />
+  </svg>
+}

package/src/components/GradientItem/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { GradientImage } from '../GradientImage'
+import { TextContainer } from '../TextContainer'
+import { QrCodeContainer } from '../QrCodeContainer'
+import { GradientTitle } from '../GradientTitle'
+
+type Props = {
+  item: NewsItem
+  parameters: VixonicParameters
+}
+
+const direction: { [key: string]: 'row-reverse' | 'row' } = {
+  'right': 'row-reverse',
+  'left': 'row'
+}
+
+export const GradientItem: React.FunctionComponent<Props> = (props) => {
+  const { item, parameters } = props
+  const flexDirection = direction[parameters.gradientOrientation || 'left']
+  const gradientDirection = flexDirection === 'row' ?
+    `linear-gradient(to right, ${parameters.gradientBackgroundColor || 'red'} ${parameters.gradientRate || 50}%, rgba(0, 0, 0, 0))` :
+    `linear-gradient(to left, ${parameters.gradientBackgroundColor || 'red'} ${parameters.gradientRate || 50}%, rgba(0, 0, 0, 0))`
+
+  return <div style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+    alignItems: 'center',
+    background: gradientDirection,
+    flexDirection,
+    backgroundSize: 'cover'
+  }}>
+    <div style={{
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      height: '100%',
+      overflow: 'hidden',
+      padding: parameters.padding || '',
+    }}>
+      <TextContainer parameters={parameters} item={item} />
+    </div>
+    <GradientImage src={item.image || ''} />
+    {parameters.qrCodeEnabled && <QrCodeContainer parameters={parameters} item={item} />}
+    {parameters.gradientTitleEnabled && <GradientTitle parameters={parameters} />}
+  </div>
+}

package/src/components/GradientTitle/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { FormattedText } from '../FormattedText'
+
+type Props = {
+  parameters: VixonicParameters
+}
+
+export const GradientTitle: React.FunctionComponent<Props> = (props) => {
+  const { parameters } = props
+
+  return <div style={{
+    display: 'block',
+    position: 'absolute',
+    top: `${parameters.gradientTitlePositionY || 0}px`,
+    left: `${parameters.gradientTitlePositionX || 0}px`
+  }}>
+    <FormattedText text={parameters.gradientTitle || ''} unit={'px'} format={parameters.gradientTitleFormat} />
+  </div>
+}

package/src/components/ImageContainer/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+type Props = {
+  src?: string
+  parameters: VixonicParameters
+  style?: React.CSSProperties
+}
+
+const imageRadius = {
+  rounded: '25',
+  circle: '100'
+}
+
+const imageModes = {
+  contain: 'xMidYMid meet',
+  cover: 'xMidYMid slice',
+  fill: 'none',
+  none: 'xMinYMin slice'
+}
+
+export const ImageContainer: React.FunctionComponent<Props> = (props) => {
+  const { src, style, parameters } = props
+  const { imagePosition, imageMode, imageStyle, imageEnabled, imageSize } = parameters
+  if (imageEnabled === false) return null
+
+  const getSize = (): string => {
+    const { imageSize, imageCustomSize, template } = props.parameters
+    if (template === 'gallery') return '100%'
+    if (imageSize === 'custom') {
+      return `${imageCustomSize}%`
+    } else {
+      return imageSize === 'large' ? '100%' : imageSize === 'medium' ? '70%' : '50%'
+    }
+  }
+
+  const getImagePadding = (): string => {
+    const { template, imageSeparation, imagePosition } = props.parameters
+    if (template === 'gallery') return ''
+    const padding = `${(imageSeparation !== undefined && imageSeparation) || 10}px`
+    const imagePos = imagePosition || 'left'
+    const getPadding = (position: string) => imagePos === position ? padding : '0px'
+    return `${getPadding('bottom')} ${getPadding('left')} ${getPadding('top')} ${getPadding('right')}`
+  }
+
+  const sizeAttr = imagePosition === 'top' || imagePosition === 'bottom' ? 'height' : 'width'
+  const opositeAttr = sizeAttr === 'height' ? 'width' : 'height'
+  const size: string = getSize()
+
+  const shouldBeSquare = imageStyle !== undefined && imageStyle !== 'normal'
+  const preserveAspectRatio = imageMode && imageModes[imageMode] || imageModes.contain
+  const radius = (imageStyle === 'rounded' || imageStyle === 'circle') ? imageRadius[imageStyle] : '0'
+
+  const commonImageProps = {
+    width: '100%',
+    height: '100%',
+    clipPath: imageStyle && imageStyle !== 'normal' && 'url(#clip)' || undefined
+  }
+
+  return <div style={{ ...style, [sizeAttr]: `${imageSize === 'large' ? '80%' : size}`, [opositeAttr]: '100%', margin: getImagePadding() }}>
+    <svg viewBox={shouldBeSquare ? '0 0 100 100' : undefined} style={{ width: `${imageSize === 'large' ? size : '100%'}`, height: `${imageSize === 'large' ? size : '100%'}`, display: 'flex' }} className={'news-item__image-svg'}>
+      <defs>
+        {imageStyle !== 'hex' ?
+          <clipPath id='clip'>
+            <rect x='0' y='0' rx={radius} ry={radius} width='100%' height='100%' className='news-item__square-image-mask' />
+          </clipPath>
+          : <clipPath id='clip'>
+            <polygon className='news-item__hex-image-mask' points='93.3 75 93.3 25 50 0 6.7 25 6.7 75 50 100 93.3 75' />
+          </clipPath>
+        }
+      </defs>
+      <image {...commonImageProps}
+        xlinkHref={src}
+        preserveAspectRatio={preserveAspectRatio} className='news-item__image'
+      />
+    </svg>
+  </div>
+}

package/src/components/NewsContainer/index.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
+import { StandardItem } from '../StandardItem'
+import { GalleryItem } from '../GalleryItem'
+import { GradientItem } from '../GradientItem'
+import './styles.css'
+
+type Props = {
+  data: VixonicData
+  items: NewsItem[]
+}
+
+export const NewsContainer: React.FunctionComponent<Props> = (props) => {
+  const { parameters, downloadsPath } = props.data
+  const { animationSpeed } = parameters
+  const timerRef = useRef<number | undefined>(undefined)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const item = props.items.length > currentIndex ? props.items[currentIndex] : undefined
+
+  useEffect(() => {
+    startTimeout()
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [currentIndex, props.items])
+
+  const startTimeout = () => {
+    const showTime = props.data?.parameters?.showTime || 10
+    const time = showTime * 1000
+    timerRef.current = window.setTimeout(nextItem, time)
+  }
+
+  const nextItem = () => {
+    let newIndex = currentIndex + 1
+    if (newIndex >= props.items.length) newIndex = 0
+    setCurrentIndex(newIndex)
+  }
+
+  if (parameters.template === 'gradient') {
+    return <TransitionGroup className='main-container' style={{
+      backgroundColor: parameters.gradientBackgroundColor || 'red'
+    }}>
+      {item &&
+        <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
+          <div className={'news-item-container'}>
+            {
+              <GradientItem parameters={parameters} item={item} />
+            }
+          </div>
+        </CSSTransition>
+      }
+    </TransitionGroup>
+
+  } else {
+    return <TransitionGroup className='main-container' style={{
+      padding: parameters.padding,
+      backgroundImage: parameters.background && `url("${downloadsPath}/${parameters.background.filename}")`
+    }}>
+      {item &&
+        <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
+          <div className={'news-item-container'}>
+            {parameters.template !== 'gallery'
+              ? <StandardItem parameters={parameters} item={item} />
+              : <GalleryItem parameters={parameters} item={item} />
+            }
+          </div>
+        </CSSTransition>
+      }
+    </TransitionGroup>
+  }
+}

package/src/components/NewsContainer/styles.css

@@ -0,0 +1,45 @@
+.main-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  z-index: -1;
+  background-size: 100% 100%;
+}
+
+.news-item-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  padding: inherit;
+}
+
+.fade-enter {
+  opacity: 0.01;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity var(--speed);
+  transition-timing-function: linear;
+  transition-delay: var(--enterDelay);
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0.01;
+  transition: opacity var(--speed);
+  transition-timing-function: linear;
+  transition-delay: var(--exitDelay);
+}