apeman-react-section/lib/ap_section_header.jsx

apeman react package for section components.

/**
 * Header for a section.
 * @class ApSectionHeader
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import ReactDOM from 'react-dom'
import {ApIcon} from 'apeman-react-icon'

const DEFAULT_ANCHOR_ICON = 'ion ion-link'

/** @lends ApSectionHeader */
const ApSectionHeader = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    /** Icon class name for anchor */
    anchorIcon: types.string,
    /** Show anchor */
    anchored: types.bool,
    /** Show line under header text */
    lined: types.bool
  },

  mixins: [],

  statics: {
    DEFAULT_ANCHOR_ICON
  },

  getInitialState () {
    return {
      anchorRef: null,
      anchored: false,
      lined: false
    }
  },

  getDefaultProps () {
    return {
      anchorIcon: DEFAULT_ANCHOR_ICON
    }
  },

  render () {
    const s = this
    let { props } = s

    return (
      <h1 className={ classnames('ap-section-header', {
                'ap-section-header-lined': props.lined
            }, props.className) }
          style={ Object.assign({}, props.style) }>
        { s._renderAnchor() }
        { props.children }
      </h1>
    )
  },

  // --------------------
  // Lifecycle
  // --------------------

  componentDidMount () {
    const s = this
    s.setState({
      anchorRef: s._detectAnchorRef()
    })
  },

  // --------------------
  // Private
  // --------------------

  _detectAnchorRef () {
    const s = this

    let elm = ReactDOM.findDOMNode(s)
    while (elm) {
      elm = elm.parentElement
      if (elm.id) {
        return elm.id
      }
    }
    return null
  },

  _renderAnchor () {
    const s = this
    let { state, props } = s

    let ref = state.anchorRef || ''

    return (
      <a href={ `#${ref}` }
         className={ classnames('ap-section-anchor', {
                    'ap-section-anchor-disabled': !props.anchored
               }) }
         name={ ref }>
        <span className="ap-section-aligner">&nbsp;</span>
        <ApIcon className={ classnames('ap-section-anchor-icon', props.anchorIcon) }/>
      </a>
    )
  }

})

export default ApSectionHeader