@muvehealth/fixins/dist/utils.js.flow

Component library for Muvehealth

// @flow
import __ from 'ramda/src/__'
import addIndex from 'ramda/src/addIndex'
import complement from 'ramda/src/complement'
import compose from 'ramda/src/compose'
import contains from 'ramda/src/contains'
import curry from 'ramda/src/curry'
import either from 'ramda/src/either'
import forEach from 'ramda/src/forEach'
import isEmpty from 'ramda/src/isEmpty'
import isNil from 'ramda/src/isNil'
import map from 'ramda/src/map'
import not from 'ramda/src/not'

// ------------------------ muvda ------------------------- //
export const mapIndexed = addIndex(map)
export const forEachIndexed = addIndex(forEach)
export const noob = {}
export const isEmptyOrNil = either(isNil, isEmpty)
export const isNotEmptyOrNotNil = complement(isEmptyOrNil)
export const isNotEmpty = complement(isEmpty)
export const trace = curry((tag, x) => {
  // eslint-disable-next-line no-console
  console.warn(tag, x)
  return x
})

// ------------------------ muvda ------------------------- //
const styledSystemProps = [
  'align',
  'alignContent',
  'alignItems',
  'alignSelf',
  'background',
  'bg',
  'border',
  'borderBottom',
  'borderTop',
  'bottom',
  'boxShadow',
  'change',
  'color',
  'cols',
  'direction',
  'display',
  'flex',
  'flexDirection',
  'flexWrap',
  'fontFamily',
  'fontSize',
  'fontWeight',
  'gridAutoFlow',
  'gridColumnGap',
  'gridGap',
  'gridRowGap',
  'gridTemplateAreas',
  'gridTemplateColumns',
  'gridTemplateRows',
  'height',
  'innerRef',
  'justifyContent',
  'justifyItems',
  'left',
  'letterSpacing',
  'lineHeight',
  'm',
  'maxHeight',
  'maxWidth',
  'mb',
  'minHeight',
  'ml',
  'modifier',
  'mr',
  'mt',
  'mx',
  'my',
  'order',
  'p',
  'pb',
  'pl',
  'position',
  'pr',
  'pt',
  'px',
  'py',
  'right',
  'showSupplementalValue',
  'showSupplementalValueA',
  'showSupplementalValueB',
  'size',
  'textAlign',
  'textStyle',
  'textTransform',
  'top',
  'width',
  'zIndex',
]

// $FlowFixMe
export const shouldForwardPropFunc = propOmits => (props: any) => compose(
  not,
  contains(__, propOmits),
)(props)

export const shouldForwardProp = shouldForwardPropFunc(styledSystemProps)

// ------------------------ viewport ------------------------- //
const inOutSine = n => (
  0.5 * (1 - Math.cos(Math.PI * n))
)

export const getPageY = () => (
  typeof window === 'undefined'
    ? 0
    : window.pageYOffset || (document.documentElement && document.documentElement.scrollTop)
)

export const scrollViewport = (to: number, fn?: () => void) => {
  if (typeof window === 'undefined') { return }
  const start = Number(new Date())
  const from = Number(getPageY())
  const ease = inOutSine
  const duration = 350

  if (from === to && fn) {
    fn()
    return
  }

  const animate = () => {
    const now = Number(new Date())
    const time = Math.min(1, ((now - start) / duration))
    const eased = ease(time)
    window.scrollTo(0, (eased * (to - from)) + from)
    time < 1 ? requestAnimationFrame(animate) : (fn && fn()) // eslint-disable-line
  }
  requestAnimationFrame(animate)
}

export const scrollToElement = (selector: string, offset: number, fn?: () => void) => {
  const element = document.body && document.body.querySelector(selector)
  if (!element) { return }
  const scrollNumber = element.offsetTop - (offset || 0)
  scrollViewport(scrollNumber, fn)
}