@startlibs/components 1.0.4 → 1.1.0

package/src/containers/usePositioning.jsx

@@ -0,0 +1,305 @@
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {getClosestOffsetScroll} from '@startlibs/utils'
+import {useEnsureRef} from '@startlibs/core'
+import {getDialogLayersSize} from './DialogContainer'
+
+const Placeholder = styled.span`
+  top:0;
+  left:0;
+  padding: 0 !important;
+  position: absolute;
+`
+/*
+type Alignment = 'top left' | 'top center' | 'top right' |
+  'center left' | 'center center' | 'center right' |
+  'bottom left' | 'bottom center' | 'bottom right'
+
+type Collision = 'fit fit' | 'fit flip' | 'fit fitflip' | 'fit none' |
+  'flip fit' | 'flip flip' | 'flip fitflip' | 'flip none' |
+  'flipfit fit' | 'flipfit flip' | 'flipfit fitflip' | 'flipfit none' |
+  'none fit' | 'none flip' | 'none fitflip' | 'none none'
+*/
+
+const HORIZONTAL_MAPPING = ['left', 'center', 'right']
+const VERTICAL_MAPPING = ['top', 'center', 'bottom']
+const ARROW_KEY_POSITIONS = {left: '0', right: '-0', top: '0', bottom: '-0'}
+
+const POSITIONING_BOUNDS = {left:0,top:0,right:0,bottom:0}
+export const addPositioningBound = (key,value) => {
+  POSITIONING_BOUNDS[key] += value
+  return () => POSITIONING_BOUNDS[key] -= value
+}
+
+function getPosition(origin, offset, max, originSize, selfSize, originalAlignment, selfAlignment, onCollision, mapping, boundMargin) {
+
+  // 0 pra left ou top, 1/2 pra center, 1 pra right ou bottom
+  const originDiff = originSize * (mapping.indexOf(originalAlignment) / 2)
+  // 0 pra left ou top, -1/2 pra center, -1 pra right ou bottom
+  const selfDiff = -(selfSize * (mapping.indexOf(selfAlignment) / 2))
+
+  const respectingBounds = boundMargin !== false
+  const upperBound = respectingBounds ? (POSITIONING_BOUNDS[mapping[0]] + boundMargin) : Number.MIN_SAFE_INTEGER
+  const lowerBound = respectingBounds ? (POSITIONING_BOUNDS[mapping[2]] + boundMargin) : 0
+  const newPosition = Math.max(upperBound, origin + selfDiff + originDiff + offset)
+
+  const collision = Math.max(-newPosition, newPosition + selfSize - max + lowerBound)
+  if (collision > 0 && onCollision !== 'none') {
+    if (onCollision.indexOf('flip') >= 0) {
+      const flippedPosition = getPosition(origin, -offset, max, originSize, selfSize, originalAlignment, selfAlignment, onCollision.indexOf('fit') >= 0 ? 'fit' : 'none', mapping.slice().reverse(), boundMargin)
+      const flippedCollision = Math.max(-flippedPosition[0], flippedPosition[0] + selfSize - max)
+      if ((collision > 0 && flippedCollision > 0) || flippedPosition[0] < upperBound)  {
+        return getPosition(origin, offset, max, originSize, selfSize, originalAlignment, selfAlignment, 'fit', mapping, boundMargin)
+      }
+      return collision < flippedCollision ? [newPosition, 'none'] : [flippedPosition[0], flippedPosition[1] === 'fit' ? 'flipfit' : 'flip']
+    } else {
+      const minBound = respectingBounds ? upperBound : 0
+      const fittedPosition = Math.max(minBound, Math.min(newPosition, max - selfSize - lowerBound))
+      return [fittedPosition, fittedPosition !== newPosition ? 'fit' : 'none']
+    }
+  } else {
+    return [newPosition, 'none']
+  }
+}
+
+const arrowShadow = {
+  top: '-1px -1px 2px -1px rgba(0,0,0,.25)',
+  right: '1px -1px 2px -1px rgba(0,0,0,.25)',
+  bottom: '1px 1px 2px -1px rgba(0,0,0,.25)',
+  left: '-1px 1px 2px -1px rgba(0,0,0,.25)'
+}
+
+const translate = (position, offset) => (position === 'left' ? '-50%' : position === 'right' ? '50%' : offset) + ',' +
+  (position === 'top' ? '-50%' : position === 'bottom' ? '50%' : offset)
+
+const ARROW_DEFAULT_SIZE = 14
+
+export const DefaultArrow = styled.div`
+  background-color: #fff;
+  position: absolute;
+  width: ${ARROW_DEFAULT_SIZE}px;
+  height: ${ARROW_DEFAULT_SIZE}px;
+  transform: translate(-50%,50%) rotate(45deg);
+  bottom: 0;
+  left: 50%;
+  box-shadow: ${arrowShadow.bottom};
+`
+
+export const usePositioning = (
+  element,
+  {
+    my = 'top right',
+    offset = '0 0', // x y
+    at = 'bottom right',
+    onCollision = 'flip flip',
+    arrow,
+    arrowPadding = 10,
+    fill,
+    useLayers = true,
+    fixed,
+    bottom: onBottom,
+    left: onLeft,
+    right: onRight,
+    top: onTop,
+    keepWidth = true,
+    boundMargin = 6,
+    respectBounds,
+    respectOffsetScroll,
+    on,
+    placeholderAs
+  },
+  arrowRefOpt
+) => {
+  const placeholder = useRef()
+  const arrowRef = useEnsureRef(arrowRefOpt)
+  const [positionInfo, setPositionInfo] = useState()
+
+  const setPosition = (retry=0) => {
+    if (retry>10) { return }
+    if (!element.current?.style || !(placeholder.current?.offsetParent || placeholder.current?.parentNode?.offsetParent)) {
+      setTimeout(()=>setPosition(retry+1),100)
+      return
+    }
+    if (keepWidth) {
+      element.current.style.width = ''
+    } else {
+      element.current.style.maxWidth = ''
+    }
+    const placeholderOffsetParent = (placeholder.current?.offsetParent || placeholder.current?.parentNode?.offsetParent)
+    const usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize() > 0
+    const scrollOwner =
+      usingLayer
+      ? (_.isFunction(respectOffsetScroll) ? respectOffsetScroll(element.current.offsetParent) : getClosestOffsetScroll(element.current.offsetParent))
+      : {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset}
+
+      // console.log({scrollOwner,scrollTop:scrollOwner.scrollTop,pageYOffset:window.pageYOffset})
+
+    const scrollY = !isNaN(scrollOwner.scrollTop) ? scrollOwner.scrollTop : window.pageYOffset
+    const scrollX = !isNaN(scrollOwner.scrollLeft) ? scrollOwner.scrollLeft : window.pageXOffset
+    const getRespectOffsetScrollTopLeft = () => {
+      const {top,left} = placeholder.current.getBoundingClientRect()
+      const {top:scrollOwnerTop, left: scrollOwnerLeft} = scrollOwner.getBoundingClientRect()
+      return {top: top-scrollOwnerTop,left: left-scrollOwnerLeft}
+    }
+    const {left: leftPlusBorder, top: topPlusBorder} =
+      respectOffsetScroll
+      ? getRespectOffsetScrollTopLeft()
+      :placeholder.current.getBoundingClientRect()
+
+    const {borderLeftWidth, borderTopWidth} = window.getComputedStyle(placeholderOffsetParent)
+    const left = leftPlusBorder - parseInt(borderLeftWidth, 10)
+    const top = topPlusBorder - parseInt(borderTopWidth, 10)
+    const {offsetWidth: parentOffsetWidth, offsetHeight: parentOffsetHeight} = (placeholderOffsetParent)
+    const {offsetWidth: popupOffsetWidth, offsetHeight: popupOffsetHeight} = element.current
+    const {width:popupCurrentWidth} = element.current.getBoundingClientRect()
+    const [offsetX, offsetY] = [].concat(offset).join(' ').split(' ').map(_ => Number(_ || 0))
+    const simplePositioning = [onTop, onRight, onBottom, onLeft].map(_ => _ === true ? 'center' : _)
+    const simplePositioningIndex = simplePositioning.findIndex(_ => _)
+    const bodyWidth = document.body.offsetWidth - (usingLayer ? parseInt(getComputedStyle(document.body).paddingRight, 10) : 0)
+    // Barra fixa inferior (footer mobile) registrada em POSITIONING_BOUNDS conta como
+    // borda da tela: sem isso o popup se posiciona atrás dela. Com respectBounds o
+    // desconto já vem do lowerBound em getPosition, não descontar duas vezes.
+    const windowHeight = window.innerHeight - (respectBounds ? 0 : POSITIONING_BOUNDS.bottom)
+
+    const [verticalCollision, horizontalCollision] = onCollision.split(' ')
+    const [verticalMy, horizontalMy] = [my, 'bottom $', '$ left', 'top $', '$ right'][simplePositioningIndex + 1].replace('$', simplePositioning[simplePositioningIndex]).split(' ')
+    const [verticalAt, horizontalAt] = [at, 'top $', '$ right', 'bottom $', '$ left'][simplePositioningIndex + 1].replace('$', simplePositioning[simplePositioningIndex]).split(' ')
+
+    const [processedLeft, collisionH] = getPosition(left, offsetX, bodyWidth, parentOffsetWidth, fill ? parentOffsetWidth : popupOffsetWidth, horizontalAt, horizontalMy, horizontalCollision, HORIZONTAL_MAPPING,!!respectBounds && boundMargin)
+    const [processedTop, collisionV] = getPosition(top, offsetY, windowHeight, parentOffsetHeight, popupOffsetHeight, verticalAt, verticalMy, verticalCollision, VERTICAL_MAPPING,!!respectBounds && boundMargin)
+
+
+    const flippedV = collisionV.indexOf('flip') >= 0
+    const flippedH = collisionH.indexOf('flip') >= 0
+
+
+    //arrow
+    const arrowSide = Math.abs(VERTICAL_MAPPING.indexOf(verticalMy) - VERTICAL_MAPPING.indexOf(verticalAt)) === 2 ? (flippedV ? verticalAt : verticalMy) :
+                      Math.abs(HORIZONTAL_MAPPING.indexOf(horizontalMy) - HORIZONTAL_MAPPING.indexOf(horizontalAt)) === 2 ? (flippedH ? horizontalAt : horizontalMy) : ''
+    const arrowElement = arrowRef.current
+    const arrowOnVerticalSide = arrowSide === 'left' || arrowSide === 'right'
+    const arrowSize = arrowElement ? arrowElement.getBoundingClientRect()[arrowOnVerticalSide ? 'height' : 'width'] : (ARROW_DEFAULT_SIZE * Math.sqrt(2))
+    const [arrowOffset, popupArrowOffset] = arrowOnVerticalSide ?
+                                            processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) :
+                                            processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV)
+
+
+    const maxHeight = window.innerHeight - (POSITIONING_BOUNDS.top + POSITIONING_BOUNDS.bottom) - (respectBounds ? boundMargin*2 : 0)
+    const maxWidth = window.innerWidth - (POSITIONING_BOUNDS.left + POSITIONING_BOUNDS.right) - (respectBounds ? boundMargin*2 : 0)
+
+    element.current.style.maxHeight = ''
+    if (parseInt(window.getComputedStyle(element.current).maxHeight) > maxHeight) {
+      element.current.style.maxHeight = maxHeight+'px'
+    }
+    if (keepWidth) {
+      element.current.style.width = Math.ceil(popupCurrentWidth)+"px"
+    } else {
+      element.current.style.maxWidth = maxWidth+'px'
+    }
+    // console.log({processedTop,top,offsetY,scrollY})
+
+
+    element.current.style.top = (processedTop + (arrowOnVerticalSide ? popupArrowOffset : 0) + (fixed ? 0 : scrollY)) + 'px'
+    element.current.style.left = (processedLeft + (arrowOnVerticalSide ? 0 : popupArrowOffset) + (fixed ? 0 : scrollX)) + 'px'
+
+    const arrowStyle = {
+      transform: `translate(${translate(arrowSide, arrowOffset[0] === 'top' || arrowOffset[0] === 'left' ? '-50%' : '50%')}) rotate(45deg)`,
+      bottom:"auto",
+      left:"auto",
+      [arrowSide]: '0',
+      boxShadow: arrowShadow[arrowSide],
+      [arrowOffset[0]]: arrowOffset[1]+'px'
+    }
+    if (arrowRef.current) {
+      Object.assign(arrowRef.current.style,arrowStyle)
+    }
+
+    setPositionInfo({
+      atTop: (verticalAt === 'top' && !flippedV) || (verticalAt === 'bottom' && flippedV),
+      atBottom: (verticalAt === 'bottom' && !flippedV) || (verticalAt === 'top' && flippedV),
+      atLeft: (horizontalAt === 'left' && !flippedH) || (verticalAt === 'right' && flippedH),
+      atRight: (horizontalAt === 'right' && !flippedH) || (verticalAt === 'left' && flippedH),
+      fullHeight: popupOffsetHeight > maxHeight,
+      fullWidth: popupOffsetWidth > maxWidth,
+      arrowSide,
+      arrowOffset,
+      arrowStyle
+    })
+
+    if (fill) {
+      element.current.style.width = parentOffsetWidth + 'px'
+    }
+    if (fixed) {
+      element.current.style.position = 'fixed'
+    }
+  }
+
+  useLayoutEffect(setPosition, [on])
+
+
+  useEffect(() => {
+      window.addEventListener('portalReposition', setPosition)
+      window.addEventListener('stepResize', setPosition)
+      window.addEventListener('scroll', setPosition, {passive:true})
+      return () => {
+        window.removeEventListener('portalReposition', setPosition)
+        window.removeEventListener('stepResize', setPosition)
+        window.removeEventListener('scroll', setPosition)
+      }
+    }, []
+  )
+
+
+  const processArrow = (arrow, arrowSize, onVerticalSide, arrowContainerWidth, popupSize, deltaPopupPosition, flipped) => {
+    if (!arrow) {
+      return ['', 0]
+    }
+    const margin = arrowPadding + (arrowSize / 2)
+    const [invertDirection, percent, px] = (arrow === true ? '50%' : arrow).replace(/(-)?(\d+%)?\s?(-?\d+)?/, '$1:$2:$3').split(':')
+    const invertAndFlipDirection = flipped ? !invertDirection : invertDirection
+    const arrowPosition = onVerticalSide ? (invertAndFlipDirection ? 'bottom' : 'top') : (invertAndFlipDirection ? 'right' : 'left')
+    const fromOriginCorner = arrowPosition === 'left' || arrowPosition === 'top'
+
+    const popupOffset = fromOriginCorner ? deltaPopupPosition : (arrowContainerWidth - deltaPopupPosition - popupSize)
+
+    /*   ____________________________
+        |      arrow container      |
+        |___________________________|
+                 ..../\_______
+                |    popup   |
+                |____________|
+
+        |-------| =  delta popup position (popupOffset)
+
+                .... = arrowPadding prop,  applies to both sides, moves popup or does nothing
+
+    arrow prop = invert percent px   // relative to arrow container
+        invert = -?
+        percent = (\d+%)?
+        px = (-?\d+)?
+
+    procedure:
+      1- position arrow according to container - arrowInitialPos
+      2- constrain position inside container - constrainedArrowPosition
+      3- move popup according to arrowPadding (margin) - popupDelta
+      4- final arrow position, relative to final popup position - finalArrowPosition
+     */
+
+    const arrowInitialPos = (parseInt(percent || 0, 10) * arrowContainerWidth / 100) + parseInt(px || 0, 10)
+    const constrainedArrowPosition = (Math.min(Math.max(arrowInitialPos, 0), arrowContainerWidth))
+    const arrowPositionRelativeToPopup = fromOriginCorner ? constrainedArrowPosition - popupOffset : (arrowContainerWidth - popupOffset - constrainedArrowPosition)
+    const popupDelta = arrowPositionRelativeToPopup < margin ?
+                       (arrowPositionRelativeToPopup - margin) :
+                       arrowPositionRelativeToPopup > (popupSize - margin) ?
+                       (margin + arrowPositionRelativeToPopup - popupSize) :
+                       0
+    const finalPopupPosition = fromOriginCorner ? popupOffset + popupDelta : (arrowContainerWidth - popupOffset - popupDelta - popupSize)
+    return [[arrowPosition,(constrainedArrowPosition - finalPopupPosition)], popupDelta]
+  }
+
+  const arrowElement = arrow && <DefaultArrow ref={arrowRef} />
+
+  const placeholderElement = <Placeholder as={placeholderAs} ref={placeholder}/>
+  return [positionInfo,placeholderElement,arrowElement]
+}

package/src/index.js

@@ -0,0 +1,35 @@
+export * from './Icon'
+export * from './Loading'
+export * from './Button'
+export * from './alt/buttons/OnClickLoadingButton'
+export * from './TextButton'
+export * from './LoadingDiv'
+export * from './Dialog'
+export * from './useDialogWithToggle'
+export * from './WarningDialog'
+export * from './Notifications'
+export * from './ToastNotifications'
+export * from './PersistentNotifications'
+export * from './containers/usePositioning'
+export * from './containers/Reposition'
+export * from './containers/DialogContainer'
+export * from './Draggable'
+export * from './Popup'
+export * from './Tooltip'
+export * from './SplitColumnsContainer'
+export * from './ContextMenu'
+export * from './ErrorBoundary'
+export * from './PageLoader'
+export * from './FillLastLineResizer'
+export * from './Flip'
+export * from './FlipList'
+export * from './TransitionDiv'
+export * from './SwitchDiv'
+export * from './willUseIsSticky'
+export * from './FormatDate'
+export * from './Image'
+export * from './alt/dialogs/DialogWithImageHeader'
+export * from './alt/dialogs/DialogWithSidebar'
+export * from './alt/dialogs/MobileBubbleDialog'
+export * from './Link'
+export * from './BasicBulletList'

package/src/useDialogWithToggle.jsx

@@ -0,0 +1,12 @@
+import {useToggle,useFill} from '@startlibs/core'
+
+export const useDialog = (dialog, args = [], toggleCallback) => {
+  const toggle = useToggle(false,toggleCallback)
+  useFill("Dialog", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen, ...args])
+  return toggle.open
+}
+export const useDialogWithToggle = (dialog, args = []) => {
+  const toggle = useToggle()
+  useFill("Dialog", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen, ...args])
+  return toggle
+}

package/src/willUseIsSticky.jsx

@@ -0,0 +1,113 @@
+import React, {useEffect, useState} from 'react'
+import {useEnsureRef, willUseSharedState, willUseSharedCallback} from '@startlibs/core'
+import styled from 'styled-components'
+import _ from 'lodash/fp'
+import {callIfFunction} from '@startlibs/utils'
+
+
+const TOP_TRIGGER = (posInfo,refInfo) => {
+  // Started sticking.
+  if (posInfo.bottom < refInfo.top) {
+    return true
+  }
+  // Stopped sticking.
+  if (posInfo.bottom >= refInfo.top &&
+    posInfo.bottom < refInfo.bottom) {
+    return false
+  }
+}
+const BOTTOM_TRIGGER = (posInfo,refInfo) => {
+  // Started sticking.
+  if (posInfo.top > refInfo.bottom) {
+    return true
+  }
+  if (posInfo.top <= refInfo.bottom &&
+  posInfo.top > refInfo.top) {
+    return false
+  }
+}
+
+const SentinelStyle = styled.div`
+  position:absolute;
+  visibility: hidden;
+  height:1px;
+  width: 1px;
+  ${props => props.addCss}
+`
+
+export const willUseIsSticky = (options = {}) => {
+
+  const [useRegister, onChange] = willUseSharedCallback()
+  const [useSharedIsSticky,, setSharedIsSticky] = willUseSharedState()
+
+  const createObserver = (root) => window.IntersectionObserver ? new window.IntersectionObserver((records, observer) => {
+    for (const record of records) {
+      const targetInfo = record.boundingClientRect
+      const rootBoundsInfo = record.rootBounds
+      if (!rootBoundsInfo) {
+        return
+      }
+      onChange(targetInfo,rootBoundsInfo, record.target, record.isIntersecting)
+    }
+  },{root,...options}) : {observe:_.identity,unobserve:_.identity}
+
+  const observerMap = new Map()
+  const getObserver = (root = null) => {
+    const result = observerMap.get(root)
+    if (result) {
+      return result
+    }
+    const observer = createObserver(root)
+    observerMap.set(root,observer)
+    return observer
+  }
+  
+  let activeObserved = []
+  const resetObservers = (root = null) => {
+    const observer = getObserver(root)
+    activeObserved.forEach((observed) => {
+      observer.unobserve(observed)
+      observer.observe(observed)
+    })
+  }
+
+  const WithIsSticky = React.forwardRef(({className, id, css, children,bottom, root, intersection,onChange},ref) => {
+    const ensuredRef = useEnsureRef(ref)
+    const [isSticky,setIsSticky] = useState(false)
+
+    useRegister((posInfo,refInfo,target, isIntersecting) => {
+      if (ensuredRef.current === target) {
+        const value = intersection ?  isIntersecting : (bottom ? BOTTOM_TRIGGER(posInfo,refInfo) : TOP_TRIGGER(posInfo,refInfo))
+        if (value!==undefined) {
+          setIsSticky(value)
+          callIfFunction(onChange,value)
+          if (!id) {
+            setSharedIsSticky(value)
+          } else if (value) {
+            setSharedIsSticky(id)
+          }
+        }
+      }
+    })
+
+    useEffect(() => {
+      setIsSticky(false)
+      getObserver(callIfFunction(root)).observe(ensuredRef.current)
+      activeObserved = activeObserved.concat(ensuredRef.current)
+      return () => {
+        // observer.unobserve(ref.current)
+        activeObserved = _.without([ensuredRef.current],activeObserved)
+      }
+    },[])
+
+    const renderSentinel = (css = "") => <SentinelStyle addCss={css} className={className} ref={ensuredRef} />
+
+    return children
+      ? children(renderSentinel,isSticky)
+      : renderSentinel(css)
+
+  })
+
+
+  return [WithIsSticky, useSharedIsSticky, resetObservers]
+}

package/.babelrc

@@ -1,27 +0,0 @@
-// .babelrc
-{
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-flow",
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    "lodash",
-    "macros",
-    "fbjs-scripts/babel-6/dev-expression",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-proposal-throw-expressions",
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-proposal-json-strings",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-arrow-functions",
-    "@babel/plugin-transform-spread",
-    "@babel/plugin-proposal-object-rest-spread",
-    ["@babel/plugin-proposal-class-properties", {"loose": true}]
-  ]
-}