react-youtube-playlist
Version:
A react component for displaying the contents of a user's YouTube playlist.
277 lines (233 loc) • 8.69 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
// TODO: Remove this pragma once we upgrade eslint-config-airbnb.
/* eslint-disable react/no-multi-comp */
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import elementType from 'react-prop-types/lib/elementType';
import uncontrollable from 'uncontrollable';
import Grid from './Grid';
import NavbarBrand from './NavbarBrand';
import NavbarCollapse from './NavbarCollapse';
import NavbarHeader from './NavbarHeader';
import NavbarToggle from './NavbarToggle';
import { bsClass as setBsClass, bsStyles, getClassSet, prefix, splitBsPropsAndOmit } from './utils/bootstrapUtils';
import { Style } from './utils/StyleConfig';
import createChainedFunction from './utils/createChainedFunction';
var propTypes = {
/**
* Create a fixed navbar along the top of the screen, that scrolls with the
* page
*/
fixedTop: PropTypes.bool,
/**
* Create a fixed navbar along the bottom of the screen, that scrolls with
* the page
*/
fixedBottom: PropTypes.bool,
/**
* Create a full-width navbar that scrolls away with the page
*/
staticTop: PropTypes.bool,
/**
* An alternative dark visual style for the Navbar
*/
inverse: PropTypes.bool,
/**
* Allow the Navbar to fluidly adjust to the page or container width, instead
* of at the predefined screen breakpoints
*/
fluid: PropTypes.bool,
/**
* Set a custom element for this component.
*/
componentClass: elementType,
/**
* 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: PropTypes.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: PropTypes.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: PropTypes.bool,
/**
* Explicitly set the visiblity of the navbar body
*
* @controllable onToggle
*/
expanded: PropTypes.bool,
role: PropTypes.string
};
var defaultProps = {
componentClass: 'nav',
fixedTop: false,
fixedBottom: false,
staticTop: false,
inverse: false,
fluid: false,
collapseOnSelect: false
};
var childContextTypes = {
$bs_navbar: PropTypes.shape({
bsClass: PropTypes.string,
expanded: PropTypes.bool,
onToggle: PropTypes.func.isRequired,
onSelect: PropTypes.func
})
};
var Navbar = function (_React$Component) {
_inherits(Navbar, _React$Component);
function Navbar(props, context) {
_classCallCheck(this, Navbar);
var _this = _possibleConstructorReturn(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: createChainedFunction(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 = _objectWithoutProperties(_props4, ['componentClass', 'fixedTop', 'fixedBottom', 'staticTop', 'inverse', 'fluid', 'className', 'children']);
var _splitBsPropsAndOmit = 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 = Style.INVERSE;
}
var classes = _extends({}, getClassSet(bsProps), (_extends2 = {}, _extends2[prefix(bsProps, 'fixed-top')] = fixedTop, _extends2[prefix(bsProps, 'fixed-bottom')] = fixedBottom, _extends2[prefix(bsProps, 'static-top')] = staticTop, _extends2));
return React.createElement(
Component,
_extends({}, elementProps, {
className: classNames(className, classes)
}),
React.createElement(
Grid,
{ fluid: fluid },
children
)
);
};
return Navbar;
}(React.Component);
Navbar.propTypes = propTypes;
Navbar.defaultProps = defaultProps;
Navbar.childContextTypes = childContextTypes;
setBsClass('navbar', Navbar);
var UncontrollableNavbar = uncontrollable(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 = _objectWithoutProperties(_ref, ['componentClass', 'className', 'pullRight', 'pullLeft']);
return React.createElement(Component, _extends({}, props, {
className: classNames(className, prefix(navbarProps, suffix), pullRight && prefix(navbarProps, 'right'), pullLeft && prefix(navbarProps, 'left'))
}));
};
Wrapper.displayName = displayName;
Wrapper.propTypes = {
componentClass: elementType,
pullRight: PropTypes.bool,
pullLeft: PropTypes.bool
};
Wrapper.defaultProps = {
componentClass: tag,
pullRight: false,
pullLeft: false
};
Wrapper.contextTypes = {
$bs_navbar: PropTypes.shape({
bsClass: PropTypes.string
})
};
return Wrapper;
}
UncontrollableNavbar.Brand = NavbarBrand;
UncontrollableNavbar.Header = NavbarHeader;
UncontrollableNavbar.Toggle = NavbarToggle;
UncontrollableNavbar.Collapse = NavbarCollapse;
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.
export default bsStyles([Style.DEFAULT, Style.INVERSE], Style.DEFAULT, UncontrollableNavbar);