@startlibs/components 1.0.4 → 1.1.0

package/src/ContextMenu.jsx

@@ -0,0 +1,621 @@
+import React, {useState, useMemo, useEffect, useRef, forwardRef} from 'react';
+import ReactDOM from 'react-dom'
+import styled, {css, isStyledComponent} from 'styled-components'
+
+import {
+  Fill,
+  useEnsureRef,
+  useRefState,
+  useToggle,
+  willUseLayers,
+  willUseSharedState
+} from '@startlibs/core';
+import {darken, transparentize} from 'polished'
+import {isMemo} from 'react-is'
+import {
+  stopPropagation,
+  getColor,
+  ifProp,
+  callIfFunction,
+  customTheme,
+  oneWayAnimation,
+  animationTiming,
+  styledExtend,
+  media
+} from '@startlibs/utils'
+import mitt from 'mitt'
+
+import {Button} from './Button'
+import {useFlipEnter, useFlipLeave} from './Flip'
+import {Icon} from './Icon'
+import {Link} from './Link'
+import {getDialogLayersSize} from './containers/DialogContainer'
+import {usePositioning} from './containers/usePositioning'
+import {createPressAndMoveEvent, isMobile} from '@startlibs/utils'
+
+
+const fadeIn = oneWayAnimation('opacity: 0', 'opacity: 1')
+const slideDown = oneWayAnimation('transform: translateY(-10px); pointer-events: none', 'transform: translateY(0); pointer-events: none')
+const slideUpOnTop = oneWayAnimation('transform: translateY(10px); pointer-events: none', 'transform: translateY(0); pointer-events: none')
+const slideRight = oneWayAnimation('transform: translateX(-10px)', 'transform: none;')
+const slideLeftOnLeft = oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none')
+
+const popupAnimation = animationTiming('0.2s ease-out')
+
+const areComponentsEqual = (a,b) => a === b
+
+export const ListItem = styled.li`
+  position: relative;
+  font-size: 13px;
+  & > * {
+    padding: 11px 1.5rem 11px 3.5rem;
+    display: block;
+  }
+  ${props => props.hasSubmenu && `
+    & > * {
+      padding-right: 3rem;
+    }
+  `}
+  ${Icon}, .icon {
+    font-size: ${props => props.iconSize || 23}px;
+    position: absolute;
+    padding-left: 0.25rem;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3.5rem;
+    text-align: center;
+  }
+  ${media.mobile`
+    font-size: 15px;
+    & > * {
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
+    ${Icon}, .icon {
+      font-size: ${props => (props.iconSize || 23) + 2}px;
+    }
+  `}
+  & > a {
+    color: inherit;
+    font-weight: inherit;
+    text-decoration: inherit;
+  }
+  & > a, & > label {
+    cursor: pointer;
+  }
+  ${ifProp('hover', css`
+    & > a, & > label {
+      // background: ${props => lighten(0.53, getColor("main")(props))};
+      background: ${props => transparentize(0.88, getColor("main")(props))};
+      color: ${props => darken(0.03, getColor("main")(props))};
+    }`)}
+  ${ifProp('highlight', css`
+    color: ${getColor('main')};
+  `)}
+  input[type="radio"] {
+    display: none;
+  }
+  ${ifProp('noActions', `
+    max-width: 17rem;
+    color: rgba(0,0,0,0.4);
+    pointer-events: none;
+    text-align: center;
+    white-space: normal;
+  `)}
+  ${ifProp('withButton', css`
+    padding: 0.25rem 1rem;
+    ${Button} {
+      width: 100%;
+      color: white;
+      font-weight: 500;
+      padding: 10px 1.25rem;
+      ${media.mobile`
+        padding: 13px 1.25rem;
+      `}
+    }
+  `)}
+  ${ifProp('smallPaddingRight', css`
+    & > * {
+      padding-right: 1.5rem;
+    }
+  `)}
+  ${customTheme('ListItem')}
+`
+
+const ListItemDescText = styled.div`
+  font-size: 11px;
+  margin-top: 0.25rem;
+  opacity: 0.6;
+  ${media.mobile `
+    font-size: 12px;
+  `}
+`
+const ListItemHelpText = styled.span`
+  opacity: 0.5;
+`
+
+export const ListMenu = styled.ul`
+    padding: 0.5rem 0;
+    cursor: default;
+    overflowY: auto;
+    text-align: left;
+    color: inherit;
+    user-select: none;
+`
+
+export const ContextListMenu = styled(ListMenu)`
+  position: absolute;
+  z-index: 999;
+  background-color: white;
+  backdrop-filter: blur(20px);
+  background-color: rgb(255 255 255 / 80%);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 10px -2px rgba(0,0,0,0.15), 0 0px 2px 0px rgba(0,0,0,0.2);
+  border-radius: 12px;
+  margin-bottom: 0.5rem;
+  overflow: auto;
+  max-height: 100vh;
+  max-height: 100dvh;
+  max-width: 100vw;
+  max-width: 100dvw;
+  ${props => props.withoutIcons && `
+    ${ListItem} > * {
+      padding-left: 1.5rem;
+    }
+  `}
+  ${ifProp('sub', css`
+    ${props => props.fullHeight ? '' : (props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;')}
+
+    ${ifProp('atRight', `
+      margin-left: -4px;
+      `, `
+      margin-left: 4px;
+    `)}
+  `)}
+  ${customTheme('ContextMenu')}
+`
+
+export const StickyContainer = styled.div`
+  position: sticky;
+  background: white;
+  ${props => props.atBottom && `
+    bottom: -0.5rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: -0.5rem;
+  `}
+  ${props => props.atTop && `
+    top: -0.5rem;
+    padding-top: 0.5rem;
+    margin-top: -0.5rem;
+  `}
+`
+
+export const ListSeparator = styled.li`
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    cursor: default;
+    height: 0;
+    ${ifProp('lighten', css`
+      border-color: rgba(255,255,255,0.15);
+    `)}
+`
+
+export const ListHeading = styled.li`
+  display: flex;
+  align-items: center;
+  padding: .5rem 1rem;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+  text-transform: uppercase;
+  :after {
+    content: '';
+    flex-grow: 1;
+    margin-left: 0.75rem;
+    height: 1px;
+    background: rgba(0,0,0,0.15);
+  }
+`
+
+const SubmenuArrowIcon = styledExtend(Icon)`
+  font-size: 13px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3rem;
+  text-align: center;
+`
+
+
+let layerCursor = 0
+
+export class SimpleLi extends React.Component {
+
+  static isKeyboardNavigable = true
+  static defaultProps = {
+    emitter: mitt()
+  }
+
+  componentWillUnmount() {
+    this.props.emitter.off('confirm', this.confirm)
+  }
+
+  componentDidUpdate() {
+    if (this.props.hover) {
+      this.scrollToVisibility()
+    }
+  }
+
+  componentDidMount() {
+    this.props.emitter.on('confirm', this.confirm)
+    if (this.props.selected && this.props.setCursorOnHover) {
+      this.props.setCursorOnHover(this.props.index)
+      const el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)
+      const list = el.parentNode
+      list.scrollTop = el.offsetTop + (el.offsetHeight / 2) - (list.offsetHeight / 2)
+    }
+  }
+
+  scrollToVisibility = () => {
+    const el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)
+    const list = el.parentNode
+    if (el.offsetTop < list.scrollTop) {
+      list.scrollTop = el.offsetTop
+    } else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.offsetHeight) {
+      list.scrollTop = el.offsetTop + el.offsetHeight - list.offsetHeight
+    }
+  }
+
+  confirm = () => {
+    if (this.props.hover) {
+      const node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)
+      node.click()
+    }
+  }
+  onMouseEnter = () => this.props.setCursorOnHover && this.props.setCursorOnHover(this.props.index)
+  onMouseOut = () => this.props.setCursorOnHover && this.props.setCursorOnHover(-1)
+
+  touchEnd = (e) => {
+    if (this.props.children) {
+      e.preventDefault()
+      if (!this.props.hover)
+        this.onMouseEnter()
+    }
+  }
+
+  onClick = (e) => {
+    this.props.onClick && this.props.onClick()
+  }
+
+  render() {
+    const {label, layerIndex, href, linkTo, prefixWith, subMenu, icon, children, ...rest} = this.props
+    const Tag = (linkTo) ? Link : 'a'
+    return <ListItem
+      {...rest}
+      onClick={this.onClick}
+      onMouseLeave={this.onMouseOut}
+      onMouseEnter={this.onMouseEnter}
+      onTouchEnd={this.touchEnd}
+    >
+      <Tag href={href} to={linkTo}>
+        {prefixWith}
+        {icon && <Icon icon={icon}/>}
+        {label}
+      </Tag>
+    </ListItem>
+  }
+}
+
+export const Li = React.forwardRef(({emitter = mitt(), index, menuSlot, keepOpen, hover, layerIndex, hoverCursor, passTouchThrough, children, setCursorOnHover, onClick, prefixWith, linkTo, icon, label,descText,helpText, target, href, ...rest},ref) => {
+  const nodeRef = useEnsureRef(ref)
+  const tagRef = useRef()
+  const subMenu = useToggle()
+  const subPrevented = useRefState(false)
+
+  const onOpenSub = () => {
+    subPrevented.set(false)
+    if (hover && children) {
+      subMenu.open()
+    }
+  }
+
+  const onPreventSub = (subIndex) => {
+    if (index !== subIndex)
+      subMenu.close()
+    subPrevented.set(true)
+  }
+
+  const confirm = () => {
+    if (hover) {
+      nodeRef.current.click()
+    }
+  }
+
+  useEffect(() => {
+    if (hover) {
+      try {
+      const el = nodeRef.current
+      const parent = el.parentElement
+      const stickyContainer = parent.lastChild
+      const stickyContainerHeight =
+        (stickyContainer && stickyContainer.tagName === "DIV" && (stickyContainer.offsetTop - parent.scrollTop) < parent.offsetHeight)
+          ? stickyContainer.offsetHeight
+          : 0
+      if (el.offsetTop > parent.offsetHeight + parent.scrollTop - stickyContainerHeight - el.offsetHeight) {
+        parent.scroll(0, el.offsetTop - parent.offsetHeight + el.offsetHeight + stickyContainerHeight)
+      } else if (el.offsetTop < parent.scrollTop) {
+        parent.scroll(0, el.offsetTop)
+      }
+      } catch (e) {}
+    }
+    emitter.on('confirm', confirm)
+    emitter.on('preventSub', onPreventSub)
+    emitter.on('openSub', onOpenSub)
+    return () => {
+      emitter.off('confirm', confirm)
+      emitter.off('preventSub', onPreventSub)
+      emitter.off('openSub', onOpenSub)
+    }
+  }, [hover])
+
+  useEffect(() => () => subMenu.close(), [])
+
+  useEffect(() => {
+    if (children && !isMobile()) {
+      if (hover) {
+        if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
+          subMenu.open()
+        }
+      } else {
+        if (subMenu.isOpen) {
+          if (hoverCursor === -1) {
+            // Mouse saiu de todos os itens — provavelmente indo até o submenu (que
+            // abre ao lado, com um pequeno gap). Janela generosa; ao alcançá-lo, o
+            // onMouseEnter/onMouseMove do submenu chama subMenu.open e cancela.
+            subMenu.closeAfter(450)
+          } else {
+            // Mouse foi para outro item do menu — mantém os 200ms originais.
+            subMenu.closeAfter(200)
+          }
+          emitter.emit('preventSub', index)
+        }
+      }
+    }
+  }, [hoverCursor])
+
+  const onMouseMove = (e) => {
+    if (!hover) {
+      callIfFunction(setCursorOnHover, index)
+    }
+    e?.stopPropagation()
+  }
+
+  const onMouseOut = (e) => {
+    callIfFunction(setCursorOnHover, -1)
+    e?.stopPropagation()
+  }
+
+  const onClickHandler = (e) => {
+    if (children || keepOpen) {
+      e.stopPropagation()
+    }
+    if (children) {
+      if (hover) {
+        subMenu.toggle()
+      } else {
+        onMouseMove()
+      }
+    } else {
+      callIfFunction(onClick, e)
+    }
+  }
+
+  const onCloseSub = () => emitter.emit('openSub')
+
+  const addProps = (children) => React.Children.map(children, c => React.cloneElement(c, {
+    fixed: rest.fixedPosition,
+    closing: subMenu.closing,
+    onMouseMove: subMenu.open,
+    // onMouseEnter não borbulha, então não é barrado pelo stopPropagation dos itens
+    // do submenu (linha onMouseMove do Li). Garante que alcançar o submenu sempre
+    // cancele o fechamento agendado por closeAfter(200), mantendo-o aberto.
+    onMouseEnter: subMenu.open,
+    onClose: onCloseSub,
+    sub: true,
+    slot: c.props.slot || menuSlot
+  }))
+
+  const content = <>
+    {prefixWith}
+    {icon && <Icon icon={icon}/>}
+    {label} {helpText && <ListItemHelpText>({helpText})</ListItemHelpText>}
+    {descText && <ListItemDescText>{descText}</ListItemDescText>}
+    {children && <SubmenuArrowIcon icon="arrow-right"/>}
+  </>
+
+  const Tag = linkTo ? Link : 'a'
+  return <ListItem
+    ref={nodeRef}
+    {...rest}
+    hover={hover}
+    onClick={onClickHandler}
+    onMouseLeave={onMouseOut}
+    onMouseMove={onMouseMove}
+    hasSubmenu={children}
+  >
+    {
+      (rest.withButton || rest.noActions)
+        ? content
+        : <Tag href={href} target={target} to={linkTo} ref={tagRef} onMouseEnter={onMouseMove}>{content}</Tag>
+    }
+    {
+      subMenu.isOpen && addProps(children)
+    }
+  </ListItem>
+})
+Li.isKeyboardNavigable
+Li.Simple = SimpleLi
+
+const [useContextMenuLayers, contextMenuLayersSize] = willUseLayers()
+export const contextMenuLayersQuantity = contextMenuLayersSize
+const [useContextMenuSharedState] = willUseSharedState()
+
+export const ContextMenuComponent = forwardRef((
+  {
+    children, sub, hoverIndex, autoHover, menuSlot, withoutIcons, onClose, onHover = () => 0, fill, onClick, ...props
+  },
+  unesuredRef
+) => {
+  const ref = useEnsureRef(unesuredRef)
+  const [hoverCursor, setHoverCursor] = useState(autoHover || sub ? 0 : -1)
+  const [layerCursor, setLayerCursor] = useContextMenuSharedState(0)
+
+  const [layerIndex, {getSize}] = useContextMenuLayers()
+
+  const itemsEmitter = useMemo(() => mitt(), [])
+  useEffect(() => {
+    window.addEventListener('keydown', keydown)
+    return () => {
+      callIfFunction(onClose)
+      window.removeEventListener('keydown', keydown)
+    }
+  }, [layerIndex, layerCursor, hoverCursor])
+
+  useEffect(() => {
+    if (hoverIndex !== undefined) {
+      setHoverCursor(Math.min(Math.max(hoverIndex, -1), getTotalKeyboardItems(children) + 1))
+    }
+  }, [hoverIndex !== hoverCursor])
+
+  const keydown = (e) => {
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      if (!e.defaultPrevented) {
+        const layers = getSize()
+        const direction = e.keyCode - 38
+        setLayerCursor((layerCursor + direction + layers) % layers)
+      }
+      e.preventDefault()
+    }
+    if (layerIndex !== layerCursor) return
+    if (e.keyCode === 27 && ref.current) {
+      ref.current.click()
+    }
+    if (e.keyCode === 13 || e.keyCode === 32 && hoverCursor >= 0) {// enter
+      e.preventDefault()
+      itemsEmitter.emit('confirm')
+    }
+    if (e.keyCode === 38 || e.keyCode === 40) { // up down
+      e.preventDefault()
+      const direction = e.keyCode - 39
+      const max = getTotalKeyboardItems(children)
+      const newIndex = (hoverCursor + direction + max) % max
+      setHoverCursor(newIndex)
+      onHover(newIndex)
+    }
+  }
+
+  const getTotalKeyboardItems = (children) => {
+    let sum = 0
+    React.Children.forEach(children, child => {
+        if (child && !child.props.disabled && !child.props.readOnly) {
+          if ((!isStyledComponent(child.type) && child.type === Li) || child.type.isKeyboardNavigable) {
+            sum += 1
+          }
+          if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
+            sum += getTotalKeyboardItems(child.props.children)
+          }
+        }
+      }
+    )
+    return sum
+  }
+
+  const setCursorOnHover = (index) => {
+    setLayerCursor(layerIndex)
+    setHoverCursor(index)
+    onHover(index)
+  }
+
+  const formatChildren = (children, indexRef = {current: 0}) => {
+    return React.Children.map(children, (child, j) =>
+      child && !child.props.disabled && !child.props.readOnly
+      ? (
+        child.props.nested
+        ? React.cloneElement(child, child.props, formatChildren(child.props.children, indexRef))
+        : ((!isStyledComponent(child.type) && !isMemo(child.type) && areComponentsEqual(child.type, Li)) || child.type.isKeyboardNavigable)
+          ? React.cloneElement(child, {
+            fixedPosition:props.fixed,
+            hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
+            hoverCursor: hoverCursor,
+            index: indexRef.current++,
+            setCursorOnHover,
+            emitter: itemsEmitter,
+            layerIndex: layerIndex,
+            menuSlot
+          })
+          : (
+            areComponentsEqual(child.type, StickyContainer)
+            ? React.cloneElement(child, {
+              ...child.props,
+              children: formatChildren(child.props.children, indexRef)
+            })
+            : child
+          )
+      )
+      : child
+    )
+  }
+
+  const touchStart = createPressAndMoveEvent((e,prevPos) => {
+    // e.preventDefault()
+    e.stopPropagation()
+    e.target.dispatchEvent(new MouseEvent('mousemove', {bubbles: true}))
+    let passedResistance = false
+    return (e,nextPos) => {
+      const delta = prevPos.clientY - nextPos.clientY
+      if (Math.abs(delta) > 10) {
+        passedResistance = true
+        setCursorOnHover(-1)
+      }
+    }
+  })
+
+  return (
+    <ContextListMenu
+      data-drag={false}
+      ref={ref}
+      sub={sub}
+      onWheel={e => e.stopPropagation()}
+      onTouchStart={touchStart}
+      withoutIcons={withoutIcons}
+      onMouseDown={stopPropagation()}
+      {...props}
+    >
+      {formatChildren(children)}
+    </ContextListMenu>
+  )
+})
+
+
+export const ContextMenu = forwardRef(({slot = 'Popup', sub, withoutIcons, children, ...rest}, ref) => {
+  const contextMenuRef = useEnsureRef(ref)
+  const [positionInfo, placeholder, arrow] = usePositioning(contextMenuRef, rest)
+  const {atRight, atBottom} = {...positionInfo}
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : (slot + '-' + (getDialogLayersSize() - 1)), [])
+
+  const enterAnimation = useMemo(() => [fadeIn, sub ? (atRight ? slideRight : slideLeftOnLeft) : (atBottom ? slideDown : slideUpOnTop)], [atRight, atBottom])
+  useFlipEnter(contextMenuRef, !!positionInfo && enterAnimation)
+  useFlipLeave(contextMenuRef, !!positionInfo && enterAnimation, sub && {events: {mouseover: rest.onMouseMove}})
+  return <>
+    {placeholder}
+    <Fill name={slotName}>
+      <ContextMenuComponent {...rest} menuSlot={slot} sub={sub} {...positionInfo} ref={contextMenuRef} withoutIcons={withoutIcons}>
+        {arrow}
+        {children}
+      </ContextMenuComponent>
+    </Fill>
+  </>
+})
+
+ContextMenu.ListItem = ListItem