@mongodb-js/mongodb-ui-components/src/footer/language-picker.js

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

import {h, Component} from 'preact'
import {chatIcon} from './icons'

export class LanguagePicker extends Component {
  constructor (props) {
    super(props)
    this.toggle = this.toggle.bind(this)
    this.state = {
      isOpen: false,
      activeCode: 'en'
    }
  }

  componentDidMount () {
    const {languages} = this.props
    const urlCode = window.location.pathname.split('/').pop()

    for (let i = 0, l = languages.length; i < l; i++) {
      const [, code] = languages[i]
      if (urlCode === code) {
        return this.setState({activeCode: code})
      }
    }
  }

  toggle () {
    this.setState({isOpen: !this.state.isOpen})
  }

  onLangSelect (code) {
    window.location.href = `/${code}`
  }

  render ({visible, languages}, {isOpen, activeCode}) {
    if (visible !== true) return null

    return (
      <div class='relative h-50 m-b-40 user-select-none' style={{height: '24px'}}>
        <div class='fl fl-center' style={{cursor: 'pointer'}} onClick={this.toggle}>
          {chatIcon}
          <small class='m-l-10'>
            <strong>{languages.filter(([lang, code]) => code === activeCode)[0][0]}</strong>
          </small>
        </div>

        {isOpen &&
        <div
          class='absolute w-min-100 bg-white radius p-v-10 p-h-20'
          style={{bottom: '40px', left: '-10px', cursor: 'pointer'}}>
          {languages
            .filter(([lang, code]) => code !== activeCode)
            .map(([lang, code]) =>
              <small
                class='disp-block hover-green'
                style={{color: '#1A1A1A', padding: '2px'}}
                onClick={() => this.onLangSelect(code)}>
                {lang}
              </small>
            )}
          <div class='arrow-down absolute' style={{
            bottom: '-10px',
            left: 'calc(50% - 10px)'
          }} />
        </div>}
      </div>
    )
  }
}