apeman-react-dropdown/lib/ap_dropdown.js

/**
 * Dropdown component
 * @class ApDropdown
 */

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _apemanReactSpinner = require('apeman-react-spinner');

var _apemanReactMixins = require('apeman-react-mixins');

var _apemanReactButton = require('apeman-react-button');

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

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


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

  propTypes: {
    /** Icon class name for open state */
    openIcon: _react.PropTypes.string,
    /** Icon class name for closed state */
    closedIcon: _react.PropTypes.string,
    /** Show spinner */
    spinning: _react.PropTypes.bool,
    /** Spinner theme */
    spinner: _react.PropTypes.string,
    /** Open or not */
    open: _react.PropTypes.bool.isRequired,
    /** Handler for tap event */
    onTap: _react.PropTypes.func.isRequired
  },

  mixins: [_apemanReactMixins.ApLayoutMixin, _apemanReactMixins.ApOutsideMixin],

  statics: {},

  getInitialState: function getInitialState() {
    return {
      open: false
    };
  },
  getDefaultProps: function getDefaultProps() {
    return {
      openIcon: 'ion ion-chevron-up',
      closedIcon: 'ion ion-chevron-down',
      spinning: false,
      spinner: _apemanReactSpinner.ApSpinner.DEFAULT_THEME
    };
  },
  render: function render() {
    var s = this;
    var state = s.state;
    var props = s.props;
    var layouts = s.layouts;


    return _react2.default.createElement(
      'div',
      { className: (0, _classnames2.default)('ap-dropdown', {
          'ap-dropdown-open': props.open,
          'ap-dropdown-closed': !props.open
        }, props.className),
        style: Object.assign({}, props.style) },
      s._renderSpinner(),
      _react2.default.createElement(
        'div',
        { className: 'ap-dropdown-button-wrap' },
        _react2.default.createElement(
          _apemanReactButton.ApButton,
          { className: 'ap-dropdown-button', onTap: s.handleButtonTap },
          props.title,
          _react2.default.createElement('i', { className: (0, _classnames2.default)('ap-dropdown-icon', props.open ? props.openIcon : props.closedIcon) })
        )
      ),
      _react2.default.createElement(
        'div',
        { className: 'ap-dropdown-content', style: layouts.content },
        _react2.default.createElement(
          'div',
          { className: 'ap-dropdown-content-inner',
            ref: function ref(inner) {
              return s.registerContentInner(inner);
            } },
          props.children
        )
      )
    );
  },


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

  componentWillMount: function componentWillMount() {
    var s = this;
  },
  componentDidMount: function componentDidMount() {
    var s = this;
    s.layout();
  },


  // ------------------
  // For ApLayoutMixin
  // ------------------

  getInitialLayouts: function getInitialLayouts() {
    return {
      content: null
    };
  },
  calcLayouts: function calcLayouts() {
    var s = this;
    var contentInner = s.contentInner;

    var contentRect = contentInner.getBoundingClientRect();
    return {
      content: {
        height: contentRect.height
      }
    };
  },


  // ------------------
  // Custom
  // ------------------

  contentInner: null,

  registerContentInner: function registerContentInner(contentInner) {
    var s = this;
    s.contentInner = contentInner;
  },
  handleButtonTap: function handleButtonTap(e) {
    var s = this;
    var props = s.props;

    props.onTap(e);
  },


  // ------------------
  // Private
  // ------------------
  _renderSpinner: function _renderSpinner() {
    var s = this;
    var props = s.props;

    if (!props.spinning) {
      return null;
    }
    return _react2.default.createElement(
      'div',
      { className: 'ap-dropdown-spinner-cover' },
      _react2.default.createElement(_apemanReactSpinner.ApSpinner, { theme: props.spinner,
        className: 'ap-dropdown-spinner',
        enabled: true })
    );
  }
});

exports.default = ApDropdown;
//# sourceMappingURL=data:application/json;base64,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QUNELEdBakhrQztBQW1IbkMsaUJBbkhtQywyQkFtSGxCLENBbkhrQixFQW1IZjtBQUNsQixRQUFNLElBQUksSUFBVjtBQURrQixRQUVaLEtBRlksR0FFRixDQUZFLENBRVosS0FGWTs7QUFHbEIsVUFBTSxLQUFOLENBQVksQ0FBWjtBQUNELEdBdkhrQzs7Ozs7O0FBNEhuQyxnQkE1SG1DLDRCQTRIakI7QUFDaEIsUUFBTSxJQUFJLElBQVY7QUFEZ0IsUUFFVixLQUZVLEdBRUEsQ0FGQSxDQUVWLEtBRlU7O0FBR2hCLFFBQUksQ0FBQyxNQUFNLFFBQVgsRUFBcUI7QUFDbkIsYUFBTyxJQUFQO0FBQ0Q7QUFDRCxXQUNFO0FBQUE7TUFBQSxFQUFLLFdBQVUsMkJBQWY7TUFDRSwrREFBVyxPQUFRLE1BQU0sT0FBekI7QUFDVyxtQkFBVSxxQkFEckI7QUFFVyxpQkFBVSxJQUZyQjtBQURGLEtBREY7QUFPRDtBQXpJa0MsQ0FBbEIsQ0FBbkI7O2tCQTRJZSxVIiwiZmlsZSI6ImFwX2Ryb3Bkb3duLmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9va3VuaXNoaW5pc2hpL1Byb2plY3RzL2FwZW1hbi1wcm9qZWN0cy9hcGVtYW4tcmVhY3QtZHJvcGRvd24vbGliIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBEcm9wZG93biBjb21wb25lbnRcbiAqIEBjbGFzcyBBcERyb3Bkb3duXG4gKi9cblxuJ3VzZSBzdHJpY3QnXG5cbmltcG9ydCBSZWFjdCwge1Byb3BUeXBlcyBhcyB0eXBlc30gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IGNsYXNzbmFtZXMgZnJvbSAnY2xhc3NuYW1lcydcbmltcG9ydCB7QXBTcGlubmVyfSBmcm9tICdhcGVtYW4tcmVhY3Qtc3Bpbm5lcidcblxuaW1wb3J0IHtBcExheW91dE1peGluLCBBcFB1cmVNaXhpbiwgQXBPdXRzaWRlTWl4aW59IGZyb20gJ2FwZW1hbi1yZWFjdC1taXhpbnMnXG5pbXBvcnQge0FwQnV0dG9ufSBmcm9tICdhcGVtYW4tcmVhY3QtYnV0dG9uJ1xuXG4vKiogQGxlbmRzIEFwRHJvcGRvd24gKi9cbmNvbnN0IEFwRHJvcGRvd24gPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG5cbiAgLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiAgLy8gU3BlY3NcbiAgLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuICBwcm9wVHlwZXM6IHtcbiAgICAvKiogSWNvbiBjbGFzcyBuYW1lIGZvciBvcGVuIHN0YXRlICovXG4gICAgb3Blbkljb246IHR5cGVzLnN0cmluZyxcbiAgICAvKiogSWNvbiBjbGFzcyBuYW1lIGZvciBjbG9zZWQgc3RhdGUgKi9cbiAgICBjbG9zZWRJY29uOiB0eXBlcy5zdHJpbmcsXG4gICAgLyoqIFNob3cgc3Bpbm5lciAqL1xuICAgIHNwaW5uaW5nOiB0eXBlcy5ib29sLFxuICAgIC8qKiBTcGlubmVyIHRoZW1lICovXG4gICAgc3Bpbm5lcjogdHlwZXMuc3RyaW5nLFxuICAgIC8qKiBPcGVuIG9yIG5vdCAqL1xuICAgIG9wZW46IHR5cGVzLmJvb2wuaXNSZXF1aXJlZCxcbiAgICAvKiogSGFuZGxlciBmb3IgdGFwIGV2ZW50ICovXG4gICAgb25UYXA6IHR5cGVzLmZ1bmMuaXNSZXF1aXJlZFxuICB9LFxuXG4gIG1peGluczogW1xuICAgIEFwTGF5b3V0TWl4aW4sXG4gICAgQXBPdXRzaWRlTWl4aW5cbiAgXSxcblxuICBzdGF0aWNzOiB7fSxcblxuICBnZXRJbml0aWFsU3RhdGUgKCkge1xuICAgIHJldHVybiB7XG4gICAgICBvcGVuOiBmYWxzZVxuICAgIH1cbiAgfSxcblxuICBnZXREZWZhdWx0UHJvcHMgKCkge1xuICAgIHJldHVybiB7XG4gICAgICBvcGVuSWNvbjogJ2lvbiBpb24tY2hldnJvbi11cCcsXG4gICAgICBjbG9zZWRJY29uOiAnaW9uIGlvbi1jaGV2cm9uLWRvd24nLFxuICAgICAgc3Bpbm5pbmc6IGZhbHNlLFxuICAgICAgc3Bpbm5lcjogQXBTcGlubmVyLkRFRkFVTFRfVEhFTUVcbiAgICB9XG4gIH0sXG5cbiAgcmVuZGVyICgpIHtcbiAgICBjb25zdCBzID0gdGhpc1xuICAgIGxldCB7IHN0YXRlLCBwcm9wcywgbGF5b3V0cyB9ID0gc1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXsgY2xhc3NuYW1lcygnYXAtZHJvcGRvd24nLCB7XG4gICAgICAgICAgICAgICAgJ2FwLWRyb3Bkb3duLW9wZW4nOiBwcm9wcy5vcGVuLFxuICAgICAgICAgICAgICAgICdhcC1kcm9wZG93bi1jbG9zZWQnOiAhcHJvcHMub3BlblxuICAgICAgICAgICAgfSwgcHJvcHMuY2xhc3NOYW1lKSB9XG4gICAgICAgICAgIHN0eWxlPXsgT2JqZWN0LmFzc2lnbih7fSwgcHJvcHMuc3R5bGUpIH0+XG4gICAgICAgIHsgcy5fcmVuZGVyU3Bpbm5lcigpIH1cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhcC1kcm9wZG93bi1idXR0b24td3JhcFwiPlxuICAgICAgICAgIDxBcEJ1dHRvbiBjbGFzc05hbWU9XCJhcC1kcm9wZG93bi1idXR0b25cIiBvblRhcD17IHMuaGFuZGxlQnV0dG9uVGFwIH0+XG4gICAgICAgICAgICB7IHByb3BzLnRpdGxlIH1cbiAgICAgICAgICAgIDxpIGNsYXNzTmFtZT17IGNsYXNzbmFtZXMoJ2FwLWRyb3Bkb3duLWljb24nLCBwcm9wcy5vcGVuID8gcHJvcHMub3Blbkljb24gOiBwcm9wcy5jbG9zZWRJY29uKSB9Lz5cbiAgICAgICAgICA8L0FwQnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhcC1kcm9wZG93bi1jb250ZW50XCIgc3R5bGU9eyBsYXlvdXRzLmNvbnRlbnQgfT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImFwLWRyb3Bkb3duLWNvbnRlbnQtaW5uZXJcIlxuICAgICAgICAgICAgICAgcmVmPXsgKGlubmVyKSA9PiBzLnJlZ2lzdGVyQ29udGVudElubmVyKGlubmVyKSB9PlxuICAgICAgICAgICAgeyBwcm9wcy5jaGlsZHJlbiB9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9LFxuXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tXG4gIC8vIExpZmVjeWNsZVxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4gIGNvbXBvbmVudFdpbGxNb3VudCAoKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgfSxcblxuICBjb21wb25lbnREaWRNb3VudCAoKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgICBzLmxheW91dCgpXG4gIH0sXG5cbiAgLy8gLS0tLS0tLS0tLS0tLS0tLS0tXG4gIC8vIEZvciBBcExheW91dE1peGluXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLVxuXG4gIGdldEluaXRpYWxMYXlvdXRzICgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgY29udGVudDogbnVsbFxuICAgIH1cbiAgfSxcblxuICBjYWxjTGF5b3V0cyAoKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgICBsZXQgeyBjb250ZW50SW5uZXIgfSA9IHNcbiAgICBsZXQgY29udGVudFJlY3QgPSBjb250ZW50SW5uZXIuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KClcbiAgICByZXR1cm4ge1xuICAgICAgY29udGVudDoge1xuICAgICAgICBoZWlnaHQ6IGNvbnRlbnRSZWN0LmhlaWdodFxuICAgICAgfVxuICAgIH1cbiAgfSxcblxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS1cbiAgLy8gQ3VzdG9tXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLVxuXG4gIGNvbnRlbnRJbm5lcjogbnVsbCxcblxuICByZWdpc3RlckNvbnRlbnRJbm5lciAoY29udGVudElubmVyKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgICBzLmNvbnRlbnRJbm5lciA9IGNvbnRlbnRJbm5lclxuICB9LFxuXG4gIGhhbmRsZUJ1dHRvblRhcCAoZSkge1xuICAgIGNvbnN0IHMgPSB0aGlzXG4gICAgbGV0IHsgcHJvcHMgfSA9IHNcbiAgICBwcm9wcy5vblRhcChlKVxuICB9LFxuXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLVxuICAvLyBQcml2YXRlXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLVxuICBfcmVuZGVyU3Bpbm5lciAoKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgICBsZXQgeyBwcm9wcyB9ID0gc1xuICAgIGlmICghcHJvcHMuc3Bpbm5pbmcpIHtcbiAgICAgIHJldHVybiBudWxsXG4gICAgfVxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cImFwLWRyb3Bkb3duLXNwaW5uZXItY292ZXJcIj5cbiAgICAgICAgPEFwU3Bpbm5lciB0aGVtZT17IHByb3BzLnNwaW5uZXIgfVxuICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cImFwLWRyb3Bkb3duLXNwaW5uZXJcIlxuICAgICAgICAgICAgICAgICAgIGVuYWJsZWQ9eyB0cnVlIH0vPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9XG59KVxuXG5leHBvcnQgZGVmYXVsdCBBcERyb3Bkb3duXG4iXX0=