react-youtube-playlist
Version:
A react component for displaying the contents of a user's YouTube playlist.
328 lines (252 loc) • 10.8 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends3 = require('babel-runtime/helpers/extends');
var _extends4 = _interopRequireDefault(_extends3);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _elementType = require('react-prop-types/lib/elementType');
var _elementType2 = _interopRequireDefault(_elementType);
var _uncontrollable = require('uncontrollable');
var _uncontrollable2 = _interopRequireDefault(_uncontrollable);
var _Grid = require('./Grid');
var _Grid2 = _interopRequireDefault(_Grid);
var _NavbarBrand = require('./NavbarBrand');
var _NavbarBrand2 = _interopRequireDefault(_NavbarBrand);
var _NavbarCollapse = require('./NavbarCollapse');
var _NavbarCollapse2 = _interopRequireDefault(_NavbarCollapse);
var _NavbarHeader = require('./NavbarHeader');
var _NavbarHeader2 = _interopRequireDefault(_NavbarHeader);
var _NavbarToggle = require('./NavbarToggle');
var _NavbarToggle2 = _interopRequireDefault(_NavbarToggle);
var _bootstrapUtils = require('./utils/bootstrapUtils');
var _StyleConfig = require('./utils/StyleConfig');
var _createChainedFunction = require('./utils/createChainedFunction');
var _createChainedFunction2 = _interopRequireDefault(_createChainedFunction);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var propTypes = {
/**
* Create a fixed navbar along the top of the screen, that scrolls with the
* page
*/
fixedTop: _propTypes2['default'].bool,
/**
* Create a fixed navbar along the bottom of the screen, that scrolls with
* the page
*/
fixedBottom: _propTypes2['default'].bool,
/**
* Create a full-width navbar that scrolls away with the page
*/
staticTop: _propTypes2['default'].bool,
/**
* An alternative dark visual style for the Navbar
*/
inverse: _propTypes2['default'].bool,
/**
* Allow the Navbar to fluidly adjust to the page or container width, instead
* of at the predefined screen breakpoints
*/
fluid: _propTypes2['default'].bool,
/**
* Set a custom element for this component.
*/
componentClass: _elementType2['default'],
/**
* A callback fired when the `<Navbar>` body collapses or expands. Fired when
* a `<Navbar.Toggle>` is clicked and called with the new `navExpanded`
* boolean value.
*
* @controllable navExpanded
*/
onToggle: _propTypes2['default'].func,
/**
* A callback fired when a descendant of a child `<Nav>` is selected. Should
* be used to execute complex closing or other miscellaneous actions desired
* after selecting a descendant of `<Nav>`. Does nothing if no `<Nav>` or `<Nav>`
* descendants exist. The callback is called with an eventKey, which is a
* prop from the selected `<Nav>` descendant, and an event.
*
* ```js
* function (
* Any eventKey,
* SyntheticEvent event?
* )
* ```
*
* For basic closing behavior after all `<Nav>` descendant onSelect events in
* mobile viewports, try using collapseOnSelect.
*
* Note: If you are manually closing the navbar using this `OnSelect` prop,
* ensure that you are setting `expanded` to false and not *toggling* between
* true and false.
*/
onSelect: _propTypes2['default'].func,
/**
* Sets `expanded` to `false` after the onSelect event of a descendant of a
* child `<Nav>`. Does nothing if no `<Nav>` or `<Nav>` descendants exist.
*
* The onSelect callback should be used instead for more complex operations
* that need to be executed after the `select` event of `<Nav>` descendants.
*/
collapseOnSelect: _propTypes2['default'].bool,
/**
* Explicitly set the visiblity of the navbar body
*
* @controllable onToggle
*/
expanded: _propTypes2['default'].bool,
role: _propTypes2['default'].string
}; // TODO: Remove this pragma once we upgrade eslint-config-airbnb.
/* eslint-disable react/no-multi-comp */
var defaultProps = {
componentClass: 'nav',
fixedTop: false,
fixedBottom: false,
staticTop: false,
inverse: false,
fluid: false,
collapseOnSelect: false
};
var childContextTypes = {
$bs_navbar: _propTypes2['default'].shape({
bsClass: _propTypes2['default'].string,
expanded: _propTypes2['default'].bool,
onToggle: _propTypes2['default'].func.isRequired,
onSelect: _propTypes2['default'].func
})
};
var Navbar = function (_React$Component) {
(0, _inherits3['default'])(Navbar, _React$Component);
function Navbar(props, context) {
(0, _classCallCheck3['default'])(this, Navbar);
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props, context));
_this.handleToggle = _this.handleToggle.bind(_this);
_this.handleCollapse = _this.handleCollapse.bind(_this);
return _this;
}
Navbar.prototype.getChildContext = function getChildContext() {
var _props = this.props,
bsClass = _props.bsClass,
expanded = _props.expanded,
onSelect = _props.onSelect,
collapseOnSelect = _props.collapseOnSelect;
return {
$bs_navbar: {
bsClass: bsClass,
expanded: expanded,
onToggle: this.handleToggle,
onSelect: (0, _createChainedFunction2['default'])(onSelect, collapseOnSelect ? this.handleCollapse : null)
}
};
};
Navbar.prototype.handleCollapse = function handleCollapse() {
var _props2 = this.props,
onToggle = _props2.onToggle,
expanded = _props2.expanded;
if (expanded) {
onToggle(false);
}
};
Navbar.prototype.handleToggle = function handleToggle() {
var _props3 = this.props,
onToggle = _props3.onToggle,
expanded = _props3.expanded;
onToggle(!expanded);
};
Navbar.prototype.render = function render() {
var _extends2;
var _props4 = this.props,
Component = _props4.componentClass,
fixedTop = _props4.fixedTop,
fixedBottom = _props4.fixedBottom,
staticTop = _props4.staticTop,
inverse = _props4.inverse,
fluid = _props4.fluid,
className = _props4.className,
children = _props4.children,
props = (0, _objectWithoutProperties3['default'])(_props4, ['componentClass', 'fixedTop', 'fixedBottom', 'staticTop', 'inverse', 'fluid', 'className', 'children']);
var _splitBsPropsAndOmit = (0, _bootstrapUtils.splitBsPropsAndOmit)(props, ['expanded', 'onToggle', 'onSelect', 'collapseOnSelect']),
bsProps = _splitBsPropsAndOmit[0],
elementProps = _splitBsPropsAndOmit[1];
// will result in some false positives but that seems better
// than false negatives. strict `undefined` check allows explicit
// "nulling" of the role if the user really doesn't want one
if (elementProps.role === undefined && Component !== 'nav') {
elementProps.role = 'navigation';
}
if (inverse) {
bsProps.bsStyle = _StyleConfig.Style.INVERSE;
}
var classes = (0, _extends4['default'])({}, (0, _bootstrapUtils.getClassSet)(bsProps), (_extends2 = {}, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'fixed-top')] = fixedTop, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'fixed-bottom')] = fixedBottom, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'static-top')] = staticTop, _extends2));
return _react2['default'].createElement(
Component,
(0, _extends4['default'])({}, elementProps, {
className: (0, _classnames2['default'])(className, classes)
}),
_react2['default'].createElement(
_Grid2['default'],
{ fluid: fluid },
children
)
);
};
return Navbar;
}(_react2['default'].Component);
Navbar.propTypes = propTypes;
Navbar.defaultProps = defaultProps;
Navbar.childContextTypes = childContextTypes;
(0, _bootstrapUtils.bsClass)('navbar', Navbar);
var UncontrollableNavbar = (0, _uncontrollable2['default'])(Navbar, { expanded: 'onToggle' });
function createSimpleWrapper(tag, suffix, displayName) {
var Wrapper = function Wrapper(_ref, _ref2) {
var _ref2$$bs_navbar = _ref2.$bs_navbar,
navbarProps = _ref2$$bs_navbar === undefined ? { bsClass: 'navbar' } : _ref2$$bs_navbar;
var Component = _ref.componentClass,
className = _ref.className,
pullRight = _ref.pullRight,
pullLeft = _ref.pullLeft,
props = (0, _objectWithoutProperties3['default'])(_ref, ['componentClass', 'className', 'pullRight', 'pullLeft']);
return _react2['default'].createElement(Component, (0, _extends4['default'])({}, props, {
className: (0, _classnames2['default'])(className, (0, _bootstrapUtils.prefix)(navbarProps, suffix), pullRight && (0, _bootstrapUtils.prefix)(navbarProps, 'right'), pullLeft && (0, _bootstrapUtils.prefix)(navbarProps, 'left'))
}));
};
Wrapper.displayName = displayName;
Wrapper.propTypes = {
componentClass: _elementType2['default'],
pullRight: _propTypes2['default'].bool,
pullLeft: _propTypes2['default'].bool
};
Wrapper.defaultProps = {
componentClass: tag,
pullRight: false,
pullLeft: false
};
Wrapper.contextTypes = {
$bs_navbar: _propTypes2['default'].shape({
bsClass: _propTypes2['default'].string
})
};
return Wrapper;
}
UncontrollableNavbar.Brand = _NavbarBrand2['default'];
UncontrollableNavbar.Header = _NavbarHeader2['default'];
UncontrollableNavbar.Toggle = _NavbarToggle2['default'];
UncontrollableNavbar.Collapse = _NavbarCollapse2['default'];
UncontrollableNavbar.Form = createSimpleWrapper('div', 'form', 'NavbarForm');
UncontrollableNavbar.Text = createSimpleWrapper('p', 'text', 'NavbarText');
UncontrollableNavbar.Link = createSimpleWrapper('a', 'link', 'NavbarLink');
// Set bsStyles here so they can be overridden.
exports['default'] = (0, _bootstrapUtils.bsStyles)([_StyleConfig.Style.DEFAULT, _StyleConfig.Style.INVERSE], _StyleConfig.Style.DEFAULT, UncontrollableNavbar);
module.exports = exports['default'];