@mongodb-js/mongodb-ui-components/src/nav/panel.js

A collection of frequently used functional UI components found on mongodb properties

import {h, Component} from 'preact'

const PanelCallout = ({callout, isOpen, isActive, position}) => {
  return (
    <div
      style={{
        background: '#F5F6F7',
        transition: isOpen ? 'opacity 300ms, transform 250ms cubic-bezier(0.175, 0.885, 0.320, 1.275)' : '',
        transform: isActive ? '' : `translate(${position * 15}px, 0)`,
        opacity: isActive ? 1 : 0,
        visibility: isActive ? '' : 'hidden',
        pointerEvents: isActive ? '' : 'none'
      }}
      class='absolute right h-full w-440 p-40' >
      <p
        class='m-t-0 m-b-20'
        style={{
          minHeight: '24px',
          color: '#116149',
          textTransform: 'uppercase'
        }}>
        <strong>{callout.title}</strong>
      </p>
      <div dangerouslySetInnerHTML={{__html: callout.html}} />
      <a class='reset' href={callout.link.href}>
        <p class='green'>
          <strong>{callout.link.text} →</strong>
        </p>
      </a>
    </div>
  )
}

export class Panel extends Component {
  constructor (props) {
    super(props)

    this.onLinkHover = this.onLinkHover.bind(this)
    this.onLinkLeave = this.onLinkLeave.bind(this)

    this.state = {}
  }

  onLinkHover ({currentTarget}) {
    currentTarget.children[0].style.color = '#13AA52'

    this.setState({
      isHovering: true,
      hoverX: currentTarget.offsetLeft + currentTarget.parentNode.parentNode.parentNode.offsetLeft,
      hoverY: currentTarget.offsetTop,
      hoverW: currentTarget.offsetWidth,
      hoverH: currentTarget.offsetHeight
    })
  }

  onLinkLeave ({currentTarget}) {
    currentTarget.children[0].style.color = ''

    this.setState({
      isHovering: false
    })
  }

  render (
    {isOpen, isActive, position, sections, callout, width},
    {isHovering, hoverX, hoverY, hoverW, hoverH}
  ) {
    return (
      <div>
        <div
          style={{maxWidth: '1220px'}}
          class='relative w-full m-auto'>
          <div
            class='absolute top left w-full fl fl-justify-between p-40'
            style={{
              maxWidth: width || '',
              transition: isOpen ? 'opacity 300ms, transform 250ms cubic-bezier(0.175, 0.885, 0.320, 1.275)' : '',
              transform: isActive ? '' : `translate(${position * 15}px, 0)`,
              opacity: isActive ? '1' : '0',
              visibility: isActive ? '' : 'hidden',
              pointerEvents: isActive ? '' : 'none'
            }}>
            {sections.map(section =>
              <div class='m-r-50' >
                <p
                  class='m-t-0 m-b-20'
                  style={{
                    cursor: 'default',
                    minHeight: '24px',
                    color: '#116149',
                    textTransform: 'uppercase'
                  }}>
                  <strong>{section.title}</strong>
                </p>

                {section.links.map((link, i, {length}) =>
                  <a
                    onMouseEnter={this.onLinkHover}
                    onMouseLeave={this.onLinkLeave}
                    class={`reset disp-block ${
                      link.text || i === length - 1 ? 'm-b-30' : 'm-b-15'
                    }`}
                    href={link.href}>
                    <div class='fl fl-center-y'>
                      {link.icon &&
                      <img height='30' class='m-r-5' src={link.icon} />}
    
                      <p class='m-0' style={{transition: 'color 200ms'}}>
                        <strong>{link.title}</strong>
                      </p>
                    </div>
                    {link.text && <small class='m-0'>{link.text}</small>}
                  </a>
                )}

                {section.link &&
                <a class='reset' href={section.link.href}>
                  <p class='green'>
                    <strong>{section.link.text} →</strong>
                  </p>
                </a>}
              </div>
            )}
          </div>
        </div>

        <div class='absolute top left' style={{
          pointerEvents: 'none',
          border: '1px solid rgba(179,187,193,0.25)',
          borderRadius: '4px',
          boxShadow: '0 2px 4px 0 rgba(0,0,0,0.1)',
          margin: '-10px -15px',
          width: `${hoverW + 30}px`,
          height: `${hoverH + 20}px`,
          transform: `translate(${hoverX}px, ${hoverY}px)`,
          opacity: isHovering ? '1' : '0',
          transition: isActive ? 'opacity 300ms, transform 150ms cubic-bezier(0.190, 1.000, 0.220, 1.000)' : ''
        }} />

        {callout &&
        <PanelCallout
          callout={callout}
          isOpen={isOpen}
          isActive={isActive}
          position={position} />}
      </div>
    )
  }
}