apeman-react-section/lib/ap_section_header.js

apeman react package for section components.

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _apemanReactIcon = require('apeman-react-icon');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULT_ANCHOR_ICON = 'ion ion-link';

/** @lends ApSectionHeader */
var ApSectionHeader = _react2.default.createClass({
  displayName: 'ApSectionHeader',


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

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

  mixins: [],

  statics: {
    DEFAULT_ANCHOR_ICON: DEFAULT_ANCHOR_ICON
  },

  getInitialState: function getInitialState() {
    return {
      anchorRef: null,
      anchored: false,
      lined: false
    };
  },
  getDefaultProps: function getDefaultProps() {
    return {
      anchorIcon: DEFAULT_ANCHOR_ICON
    };
  },
  render: function render() {
    var s = this;
    var props = s.props;


    return _react2.default.createElement(
      'h1',
      { className: (0, _classnames2.default)('ap-section-header', {
          'ap-section-header-lined': props.lined
        }, props.className),
        style: Object.assign({}, props.style) },
      s._renderAnchor(),
      props.children
    );
  },


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

  componentDidMount: function componentDidMount() {
    var s = this;
    s.setState({
      anchorRef: s._detectAnchorRef()
    });
  },


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

  _detectAnchorRef: function _detectAnchorRef() {
    var s = this;

    var elm = _reactDom2.default.findDOMNode(s);
    while (elm) {
      elm = elm.parentElement;
      if (elm.id) {
        return elm.id;
      }
    }
    return null;
  },
  _renderAnchor: function _renderAnchor() {
    var s = this;
    var state = s.state;
    var props = s.props;


    var ref = state.anchorRef || '';

    return _react2.default.createElement(
      'a',
      { href: '#' + ref,
        className: (0, _classnames2.default)('ap-section-anchor', {
          'ap-section-anchor-disabled': !props.anchored
        }),
        name: ref },
      _react2.default.createElement(
        'span',
        { className: 'ap-section-aligner' },
        ' '
      ),
      _react2.default.createElement(_apemanReactIcon.ApIcon, { className: (0, _classnames2.default)('ap-section-anchor-icon', props.anchorIcon) })
    );
  }
});

exports.default = ApSectionHeader;
//# sourceMappingURL=data:application/json;base64,bnVsbA==