@startlibs/components 1.0.3 → 1.1.0

package/src/alt/dialogs/DialogWithSidebar.jsx

@@ -0,0 +1,135 @@
+import React, {useRef} from 'react'
+import styled from 'styled-components'
+import {media, callIfFunction, getColor, twoWayAnimation, oneWayAnimation} from '@startlibs/utils'
+import {useToggle, usePopupToggle, useLazyConstant} from '@startlibs/core'
+import {CloseIcon, Dialog} from '../../Dialog'
+import {willUseFlipSwitch} from '../../Flip'
+import {Loading} from '../../Loading'
+import {DialogContainer} from '../../containers/DialogContainer'
+
+export const SideMenu = styled.div`
+  background-color: ${getColor('lightBluishGray')};
+  border-top-left-radius: 18px;
+  border-bottom-left-radius: 18px;
+  width: 19rem;
+  flex-shrink: 0;
+  padding: 1.25rem 0;
+  ${props => !props.visibleOnDesktop && 'display:none;'}
+  ${media.mobile`
+    display:block;
+    position:fixed;
+    top:0;
+    left:0;
+    bottom:0;
+    z-index:1000;
+    transition: 0.25s transform ease-out;
+    background-color: ${getColor('gray240')};
+    box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);
+    border-radius: 0;
+    ${props => !props.isOpen && `
+      transform: translateX(-100%);
+      box-shadow: none;
+    `}
+  `}
+`
+export const DialogTabMenu = styled.ul`
+  cursor: default;
+  overflow: auto;
+  text-align: left;
+  color: inherit;
+  user-select: none;
+  li {
+    position: relative;
+    padding: 1rem 2rem 1rem 4.1rem;
+    font-size: 14px;
+    ${media.mobile`
+      font-size: 16px;
+    `}
+    :hover {
+      background-color: ${getColor('bluishGray')};
+      cursor: pointer;
+    }
+    &.selected {
+      color: ${getColor('main')};
+      background: rgba(0, 132, 214, 0.125);
+      pointer-events: none;
+    }
+  }
+  .icon{
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3rem;
+    text-align: center;
+    line-height: 0;
+    font-size: 26px;
+  }
+  ${props => props.menuTabIsOpen && `
+    li {
+      padding: 1.25rem 2rem 1.25rem 3.25rem;
+      border-radius: 6px
+    }
+    .icon{
+      left: 0;
+    }
+  `}
+`
+
+const [fadeIn, relativeFadeout] = twoWayAnimation('opacity: 0;','opacity: 0;', 'opacity: 1;')
+const absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;')
+const fadeOut = [absoluteOnLeave,relativeFadeout]
+
+export const MENU_TAB = '$menu$'
+
+// ponytail: sem footer — padrão do dialog com barra lateral; fecha pelo X ou por fora
+export const DialogWithSidebarPresentation = ({className, tabIsOpen, menuIsOpen, sidebar, Content, openTab, children, title, ...props}) => {
+  const tab = useToggle(tabIsOpen)
+  const sideMenu = usePopupToggle(menuIsOpen)
+  const ref = useRef()
+  const switchAnimation = useLazyConstant(willUseFlipSwitch)
+
+  const menuTabIsOpen = tab.isOpen === MENU_TAB
+
+  return <DialogContainer {...props} ref={ref}>{({confirmCloseDialog}) =>
+      <div className={className + " JS-has-wc"} ref={ref}>
+        {
+          props.closeDialog &&
+          <CloseIcon onClick={confirmCloseDialog}/>
+        }
+        <SideMenu isOpen={sideMenu.isOpen} visibleOnDesktop>
+          {sidebar(tab)}
+        </SideMenu>
+
+        <div className={(menuTabIsOpen ? "menuTabIsOpen " : "") + "main-container"}>
+          <h2>{
+            menuTabIsOpen ? "Configurações gerais" : <><span className="icon icon-menu mobile-only" onClick={sideMenu.open}/>
+          {title(tab)}</>}</h2>
+          <React.Suspense fallback={<TabContent key="loading" switchAnimation={switchAnimation} tab={tab} children={<Loading absolute/>} />}>
+            <TabContent key={tab.isOpen} switchAnimation={switchAnimation} tab={tab} Content={Content} children={children} />
+          </React.Suspense>
+        </div>
+      </div>
+    }</DialogContainer>
+}
+
+const TabContent = ({Content,children,tab,switchAnimation}) => {
+  const contentRef = useRef()
+  switchAnimation(contentRef,fadeIn,fadeOut)
+
+  return <div ref={contentRef} className="dialog-content">
+    {callIfFunction(Content,tab)}
+    {callIfFunction(children,tab)}
+  </div>
+}
+
+export const DialogWithSidebar = styled((props) => <Dialog fullscreenOnMobile as={DialogWithSidebarPresentation} {...props} />)`
+  max-width: 59rem;
+  display: flex;
+  padding: 0;
+  flex-direction: row;
+  ${media.mobile`
+    min-height: 100%;
+    overflow: hidden;
+  `}
+`

package/src/alt/dialogs/MobileBubbleDialog.jsx

@@ -0,0 +1,56 @@
+import React, {useRef} from 'react'
+
+import {callIfFunction, getColor} from '@startlibs/utils'
+import styled from 'styled-components'
+
+import {DialogErrorContent} from '../../Dialog'
+import {DialogContainer} from '../../containers/DialogContainer'
+
+const MobileBubbleDialogFooter = styled.div `
+  background-color: ${getColor('gray240')};
+  min-height: 5rem;
+  color: ${getColor('main')};
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 1rem;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  :active {
+    background: rgb(232,232,232);
+  }
+`
+
+export const MobileBubbleDialog = styled(({className, footer, Content, children, title, illustration, icon, auxiliarActions, ...props}) => {
+  const ref = useRef()
+  return <DialogContainer {...props} closeOnClick ref={ref} DialogErrorContent={DialogErrorContent} title={title}>{({confirmCloseDialog}) =>
+    <>
+    <div className={className} ref={ref}>
+      {
+        children && callIfFunction(children)
+      }
+      <MobileBubbleDialogFooter onClick={confirmCloseDialog}>
+        Fechar
+      </MobileBubbleDialogFooter>
+    </div>
+    </>
+  }</DialogContainer>
+})`
+  border-radius: 10px;
+  background-color: white;
+  width: 100%;
+  margin: auto;
+  position: relative;
+  align-self: baseline;
+  overflow: hidden;
+  @supports (flex-wrap: wrap) {
+    display: flex;
+    flex-direction: column;
+  }
+`
+

package/src/containers/DialogContainer.jsx

@@ -0,0 +1,423 @@
+import React, {forwardRef, useEffect, useRef} from 'react'
+import styled from 'styled-components'
+import _ from 'lodash/fp'
+import {Fill, Slot, useEnsureRef, useRefState, willUseLayers} from '@startlibs/core'
+import {callIfFunction, identityOpacityFrames, media, oneWayAnimation, twoWayAnimation} from '@startlibs/utils'
+import {ErrorBoundary} from '../ErrorBoundary'
+import {useFlipAnimation} from '../Flip'
+
+export const dialogFadeInDown = oneWayAnimation('opacity: 0; transform: translateY(50px);', 'opacity: 1; transform: translateY(0);')
+const [dialogModalIn, dialogModalOut] = twoWayAnimation('opacity: 0;', 'opacity: 1;')
+export {dialogModalIn, dialogModalOut}
+
+export const Modal = styled.div`
+    position: fixed;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    will-change: opacity;
+    background-color: rgba(0,0,0,0.7);
+    ${props => props.$blurBackdrop && `backdrop-filter: blur(10px);`}
+`
+
+export const ModalContainer = styled.div`
+    position: fixed;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    /* Barra invisível mantendo a LARGURA NATIVA da calha (scrollbar-color não
+       colapsa a largura como scrollbar-width:none / ::-webkit-scrollbar faziam).
+       Essa calha compensa a remoção da scrollbar do body ao abrir a dialog (body
+       vira overflow:hidden e o viewport alarga ~15px no fim da animação); sem ela,
+       a dialog centralizada dá um pulinho lateral. Aqui: sem barra visível e sem salto. */
+    scrollbar-color: transparent transparent;
+`
+
+const DialogCenter = styled.div`
+  @supports (position:sticky) {
+    will-change: transform, opacity;
+    &.JS-wc-off {
+      will-change: auto;
+    }
+  }  
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  overflow-y: ${props => props.withScroll ? "scroll" : "hidden"};
+  overflow-x:hidden;
+  /* idem ModalContainer: calha nativa reservada (sem salto), track invisível — mas o
+     polegar é visível, senão dialog mais alta que a tela rola sem nenhuma pista.
+     Claro porque a calha fica sobre o backdrop escuro. Sem overflow, o Chromium não
+     desenha polegar → não sobra track fantasma. */
+  scrollbar-color: rgba(255,255,255,0.6) transparent;
+  position:fixed;
+  top:0;
+  bottom:0;
+  left:0;
+  right:0;
+  align-items: center;
+  ${media.desktop`
+    padding: ${props => props.fullscreen ? '1rem' : '3rem 0.5rem;'};
+  `}
+  ${media.mobile`
+    padding: ${props => props.fullscreenOnMobile ? '0' : '0.5rem'};
+  `}
+`
+
+const PopupSlot = styled(Slot)`
+position: absolute;
+left:0;
+top: 0;
+width: 100%;
+`
+const RelativeSlot = styled(Slot)`
+width:100%;
+position: absolute;
+`
+const editableSelector = 'textarea,input,[contenteditable]'
+const focusableSelector = 'button,a,'+editableSelector
+
+const shouldPreventResolvers = []
+let shouldPreventDialogPop = Promise.resolve()
+export const preventDialogPop = (cb) => {
+  shouldPreventDialogPop = shouldPreventDialogPop.then(() => {
+    new Promise((res) => {
+      shouldPreventResolvers.push(res)
+      cb()
+    })
+  })
+}
+export const waitForPop = () => {
+  return shouldPreventDialogPop
+}
+const preventDialogPopState = (e) => {
+  const resolver = shouldPreventResolvers.shift()
+  if (resolver) {
+    e.stopImmediatePropagation()
+    resolver()
+  }
+}
+
+window.addEventListener("popstate",preventDialogPopState)
+
+const fixPosition = (query, fn) => {
+  const elements = document.querySelectorAll(query)
+  if (elements.length) {
+    Array.prototype.slice.call(elements).forEach(fn)
+  }
+}
+
+let openLayers = 0
+let fakedScrollTop = 0
+export const isFakeScrolled = () => openLayers>0 && fakedScrollTop > 0
+export const removeWindowScroll = (opening, keepDisabledScroll) => {
+  if (opening) {
+    openLayers = Math.max(openLayers+1,1)
+    if (openLayers>1) {
+      return
+    }
+  } else {
+    openLayers = Math.min(openLayers-1,0)
+    if (openLayers<0) {
+      return
+    }
+  }
+  const finishReset = (marginRight, scrollTop) => {
+    // body.style.paddingRight = marginRight + 'px'
+    window.scroll(window.scrollLeft || window.scrollX || 0, scrollTop)
+    if (keepDisabledScroll) { return }
+    fixPosition('.navbar,.JS-fix-dialog-scroll', n => {
+      if (opening) {
+        const {right} = window.getComputedStyle(n)
+        n.style.right = (parseInt(right) + marginRight) + 'px'
+      } else {
+        n.style.right = null
+      }
+    })
+    fixPosition('.JS-fix-dialog-scroll-transform', n => {
+      if (marginRight) {
+        n.style.transform = window.getComputedStyle(n).transform + ` translateX(-${marginRight / 2}px)`
+      } else {
+        n.style.transform = null
+      }
+    })
+
+    fixPosition('.JS-on-open-dialog', n => {
+      if (opening) {
+        n.classList.add('JS-dialog-open')
+      } else {
+        n.classList.remove('JS-dialog-open')
+      }
+    })
+    window.requestAnimationFrame(()=>window.dispatchEvent(new CustomEvent('resize', {detail: {dialog: true}})))
+  }
+
+  const body = document.body
+  let bodyWidth = body.offsetWidth
+  if (opening) {
+    const scrollTop = window.pageYOffset
+    fakedScrollTop = scrollTop
+    if (keepDisabledScroll) {
+      body.style.overflowY = 'scroll'
+    } else {
+      body.style.overflow = 'hidden'
+    }
+    const marginRight = (body.offsetWidth - bodyWidth)
+
+    body.style.position = 'fixed'
+    body.style.top = -scrollTop + "px"
+    body.style.left = '0'
+    if (!keepDisabledScroll) {
+      body.style.right = marginRight + 'px'
+    } else {
+      body.style.right = '0'
+    }
+
+    finishReset(marginRight,scrollTop)
+  } else {
+    fakedScrollTop = 0
+    // setTimeout(() => {
+    const scrollTop = parseInt(body.style.top)
+    body.style.overflow = ''
+
+    body.style.position = ''
+    body.style.top = ''
+    body.style.left = ''
+    body.style.right = ''
+    finishReset(0,-scrollTop)
+     // },250)
+  }
+}
+
+const {href: originalHref, hash: originalHash} = window.location
+
+const [useDialogLayers, getDialogLayersSize] = willUseLayers(React.useLayoutEffect)
+export {useDialogLayers, getDialogLayersSize}
+
+export const DialogContainer = forwardRef((
+  {
+    children, title, closeDialog, closeOnClick, dontRefocus, onConfirm, prev, next, form, noFormWrap, withFormWrap, placement = 'Dialog',
+    DialogErrorContent, customHref, animation = dialogFadeInDown, animationTiming, animationLeaveEffect, animationEnterEffect, skipKeys,fullscreenOnMobile, fullscreen, confirmChanges = false, skipDom, modalRef, skipCheckFocus,
+    autoComplete, blurBackdrop
+  },
+  forwardedRef) => {
+
+  const dialogRef = useEnsureRef(forwardedRef)
+  const prevActiveElement = useRefState(document.activeElement)
+  const modal = useEnsureRef(modalRef)
+  const modalScroll = useRef()
+  const mouseDownInModal = useRefState()
+  const previousHash = useRefState(window.location.hash)
+
+  const [layerIndex, {isTop, getSize}] = useDialogLayers({
+    onFirst: () => {
+      waitForPop().then(() => {
+        if (customHref && encodeURI(customHref) === window.location.hash) {
+          window.history.replaceState(history.state, '', window.location.pathname)
+          window.history.pushState({dialog: true}, '', customHref)
+        } else {
+          window.history.pushState({dialog: true}, '', window.location.href + (customHref || ""))
+        }
+      })
+      // clearPreventDialogPop()
+      if (document.body.scrollHeight === document.body.clientHeight) {
+        modal.current.style.overflowY = "scroll"
+        if (modalScroll.current) {
+          modalScroll.current.style.overflowY = "scroll"
+        }
+      }
+      // resetNavbar(true)
+    },
+    onRemove: (layers) => {
+      if (
+        (layers === 0 && _.get('dialog', window.history.state) === true) ||
+        (customHref && window.location.hash === encodeURI(customHref))
+      ) {
+        preventDialogPop(() => {
+          window.history.back()
+        })
+      }
+    },
+    onEmpty: () => {
+      if (document.body.scrollHeight > document.body.clientHeight) {
+        if (modalScroll.current) {
+          modalScroll.current.style.overflowY = "hidden"
+        }
+      } else if (modal.current) {
+        modal.current.style.overflowY = "scroll"
+      }
+      removeWindowScroll(false)
+    }
+  })
+
+  const confirmCloseDialog = () => {
+    if (form && form.getHasChanged() && confirmChanges) {
+      form.confirm()
+        .then(closeDialog)
+    } else {
+      callIfFunction(closeDialog)
+    }
+  }
+/*
+  useEffect(() => () => {
+    setTimeout(() => {
+      if (window.location.hash === previousHash.get() && _.get('dialog', window.history.state) === true) {
+        console.log("???")
+      }
+    }, 100)
+  }, [])*/
+
+  const pastFirstTime = React.useRef()
+
+
+  useEffect(() => {
+    if (customHref && window.location.hash !== customHref) {
+      // if (pastFirstTime.current) {
+      waitForPop().then(() => {
+        if (window.location.hash) {
+          window.history.replaceState({dialog: true}, '', customHref)
+        } else {
+          window.history.pushState({dialog: true}, '', customHref)
+        }
+      })
+      // } else {
+      //   window.history.pushState({dialog: true}, '', customHref)
+      //   pastFirstTime.current = true
+      // }
+      previousHash.set(encodeURI(customHref))
+    }
+  }, [customHref])
+
+  useEffect(() => {
+    window.addEventListener('keydown', checkKey)
+    window.addEventListener('focusin', checkFocus)
+    window.addEventListener('popstate', checkHistory)
+    return () => {
+      window.removeEventListener('keydown', checkKey)
+      window.removeEventListener('focusin', checkFocus)
+      window.removeEventListener('popstate', checkHistory)
+      if (!dontRefocus && document.body.contains(prevActiveElement.get()) && prevActiveElement.get().matches(focusableSelector)) {
+        setTimeout(() => prevActiveElement.get().focus(), 0)
+      }
+    }
+  }, [])
+
+
+  const checkHistory = (e) => {
+    if (!isTop()/* || (previousHash.get() !== window.location.hash && !customHref)*/) return
+    if (_.get('willOpenDialog', window.history.state) === true) { return }
+    if (_.get('dialog', window.history.state) !== true) {
+      window.history.pushState({dialog: true}, '', window.location.href)
+    }
+    confirmCloseDialog()
+  }
+
+  const checkFocus = (e) => {
+    if (!isTop() || skipCheckFocus) return
+    if (modal.current && !e.target.closest('.' + modal.current.className.split(' ').join('.'))) {
+      const nextTab = modal.current.querySelector('[tabindex]')
+      if (nextTab)
+        nextTab.focus()
+    }
+  }
+
+  const checkKey = (e) => {
+    if (!isTop() || skipKeys || e.target?.className?.indexOf("JS-dialog-skip-evts")>=0 || e.target?.closest(".JS-dialog-skip-evts")) return
+    if (modal.current && e.shiftKey && e.keyCode === 9 && modal.current.querySelector('[tabindex]') === document.activeElement) {
+      e.preventDefault()
+      const prevTab = [].slice.call(modal.current.querySelectorAll('[tabindex]')).reduce((acc, el) => el.tabIndex >= acc.tabIndex ? el : acc, {tabIndex: -1})
+      if (prevTab && prevTab.focus)
+        prevTab.focus()
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      confirmCloseDialog()
+    } else if (e.key === 'Enter') {
+      if (e.target) {
+        const target = e.target.closest(focusableSelector + ',div')
+        if (target && (target.tagName.toLowerCase() !== 'input' || target.form || target.type.toLowerCase() === 'file') && target.matches(focusableSelector))
+          return
+      }
+      e.preventDefault()
+      e.stopPropagation()
+      if (onConfirm) {
+        onConfirm()
+      } else if (form) {
+        form.submitForm()
+      }
+    } else if (!e.target.matches(editableSelector)) {
+      if (e.key === 'ArrowLeft' && prev) {
+        prev()
+      } else if (e.key === 'ArrowRight' && next) {
+        next()
+      }
+    }
+  }
+
+  const checkClick = (e) => {
+    if (closeOnClick && e.target === e.currentTarget && mouseDownInModal.get()) {
+      confirmCloseDialog()
+    }
+    mouseDownInModal.set(false)
+  }
+  const mouseDown = (e) => {
+    mouseDownInModal.set(e.target === e.currentTarget)
+  }
+
+  const usingForm = withFormWrap || (form && !noFormWrap)
+
+  useFlipAnimation(dialogRef, animation, true, {
+    nestedFlip: !skipDom,
+    onEnterEnd: () => {
+      if (getSize() === 1) {
+        removeWindowScroll(true);
+      }
+      if (document.body.scrollHeight === document.body.clientHeight) {
+        modal.current.style.overflowY = "none"
+      }
+      if (modalScroll.current) {
+        modalScroll.current.style.overflowY = "scroll"
+      }
+    },
+    leaveEffect:animationLeaveEffect,
+    enterEffect:animationEnterEffect,
+    timing:animationTiming
+  })
+  useFlipAnimation(modal, !skipDom && identityOpacityFrames, true,{timing:animationTiming})
+
+  const content = <>
+    <PopupSlot name={'Popup-' + layerIndex}/>
+    <ErrorBoundary title={callIfFunction(title)} closeDialog={closeDialog} Error={DialogErrorContent}>
+      {callIfFunction(children, {confirmCloseDialog}, dialogRef, fullscreenOnMobile)}
+    </ErrorBoundary>
+  </>
+
+  return (
+    <Fill name={placement}>
+      {
+        skipDom
+          ? content
+          : <>
+            <AnimatedModal timing={animationTiming} blurBackdrop={blurBackdrop}/>
+            <ModalContainer ref={modal}>
+
+            <DialogCenter autoComplete={autoComplete} className="JS-has-wc" withScroll={getSize()>1} fullscreen={fullscreen} fullscreenOnMobile={fullscreenOnMobile} ref={modalScroll} as={usingForm ? 'form' : undefined} onClick={checkClick}
+                          onSubmit={usingForm ? () => {} : undefined}
+                          onMouseDown={mouseDown}>
+              {content}
+            </DialogCenter>
+          </ModalContainer>
+          </>
+      }
+    </Fill>
+  )
+})
+
+export const AnimatedModal = React.forwardRef(({timing,nestedFlip,enterEffect,leaveEffect,modalIn = dialogModalIn, modalOut = dialogModalOut, blurBackdrop,...props},ref) => {
+  const modal = useEnsureRef(ref)
+  useFlipAnimation(modal, modalIn, modalOut,{timing,nestedFlip,leaveEffect,enterEffect})
+  return <Modal {...props} $blurBackdrop={blurBackdrop} ref={modal}/>
+})
+

package/src/containers/Reposition.jsx

@@ -0,0 +1,24 @@
+import React, {useMemo} from 'react'
+import {Fill, useEnsureRef} from '@startlibs/core'
+import {usePositioning} from './usePositioning'
+import styled from 'styled-components'
+import {getDialogLayersSize} from './DialogContainer'
+
+const AbsoluteContainer = styled.div`
+position: absolute;
+`
+
+export const Reposition = React.forwardRef(({slot = 'Popup', className, onClick, children, ...rest},ref) => {
+  const popupRef = useEnsureRef(ref)
+  const [positionInfo, placeholder] = usePositioning(popupRef, rest)
+
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : (slot + '-' + (getDialogLayersSize() - 1)), [])
+  return <>
+    {placeholder}
+    <Fill name={slotName}>
+      <AbsoluteContainer {...positionInfo} onClick={onClick} className={className} ref={popupRef}>
+        {children}
+      </AbsoluteContainer>
+    </Fill>
+  </>
+})