react-youtube-playlist
Version:
A react component for displaying the contents of a user's YouTube playlist.
215 lines (161 loc) • 5.92 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _isRequiredForA11y = require('react-prop-types/lib/isRequiredForA11y');
var _isRequiredForA11y2 = _interopRequireDefault(_isRequiredForA11y);
var _uncontrollable = require('uncontrollable');
var _uncontrollable2 = _interopRequireDefault(_uncontrollable);
var _Nav = require('./Nav');
var _Nav2 = _interopRequireDefault(_Nav);
var _NavItem = require('./NavItem');
var _NavItem2 = _interopRequireDefault(_NavItem);
var _TabContainer = require('./TabContainer');
var _TabContainer2 = _interopRequireDefault(_TabContainer);
var _TabContent = require('./TabContent');
var _TabContent2 = _interopRequireDefault(_TabContent);
var _bootstrapUtils = require('./utils/bootstrapUtils');
var _ValidComponentChildren = require('./utils/ValidComponentChildren');
var _ValidComponentChildren2 = _interopRequireDefault(_ValidComponentChildren);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var TabContainer = _TabContainer2['default'].ControlledComponent;
var propTypes = {
/**
* Mark the Tab with a matching `eventKey` as active.
*
* @controllable onSelect
*/
activeKey: _propTypes2['default'].any,
/**
* Navigation style
*/
bsStyle: _propTypes2['default'].oneOf(['tabs', 'pills']),
animation: _propTypes2['default'].bool,
id: (0, _isRequiredForA11y2['default'])(_propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number])),
/**
* Callback fired when a Tab is selected.
*
* ```js
* function (
* Any eventKey,
* SyntheticEvent event?
* )
* ```
*
* @controllable activeKey
*/
onSelect: _propTypes2['default'].func,
/**
* Wait until the first "enter" transition to mount tabs (add them to the DOM)
*/
mountOnEnter: _propTypes2['default'].bool,
/**
* Unmount tabs (remove it from the DOM) when it is no longer visible
*/
unmountOnExit: _propTypes2['default'].bool
};
var defaultProps = {
bsStyle: 'tabs',
animation: true,
mountOnEnter: false,
unmountOnExit: false
};
function getDefaultActiveKey(children) {
var defaultActiveKey = void 0;
_ValidComponentChildren2['default'].forEach(children, function (child) {
if (defaultActiveKey == null) {
defaultActiveKey = child.props.eventKey;
}
});
return defaultActiveKey;
}
var Tabs = function (_React$Component) {
(0, _inherits3['default'])(Tabs, _React$Component);
function Tabs() {
(0, _classCallCheck3['default'])(this, Tabs);
return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments));
}
Tabs.prototype.renderTab = function renderTab(child) {
var _child$props = child.props,
title = _child$props.title,
eventKey = _child$props.eventKey,
disabled = _child$props.disabled,
tabClassName = _child$props.tabClassName;
if (title == null) {
return null;
}
return _react2['default'].createElement(
_NavItem2['default'],
{
eventKey: eventKey,
disabled: disabled,
className: tabClassName
},
title
);
};
Tabs.prototype.render = function render() {
var _props = this.props,
id = _props.id,
onSelect = _props.onSelect,
animation = _props.animation,
mountOnEnter = _props.mountOnEnter,
unmountOnExit = _props.unmountOnExit,
bsClass = _props.bsClass,
className = _props.className,
style = _props.style,
children = _props.children,
_props$activeKey = _props.activeKey,
activeKey = _props$activeKey === undefined ? getDefaultActiveKey(children) : _props$activeKey,
props = (0, _objectWithoutProperties3['default'])(_props, ['id', 'onSelect', 'animation', 'mountOnEnter', 'unmountOnExit', 'bsClass', 'className', 'style', 'children', 'activeKey']);
return _react2['default'].createElement(
TabContainer,
{
id: id,
activeKey: activeKey,
onSelect: onSelect,
className: className,
style: style
},
_react2['default'].createElement(
'div',
null,
_react2['default'].createElement(
_Nav2['default'],
(0, _extends3['default'])({}, props, {
role: 'tablist'
}),
_ValidComponentChildren2['default'].map(children, this.renderTab)
),
_react2['default'].createElement(
_TabContent2['default'],
{
bsClass: bsClass,
animation: animation,
mountOnEnter: mountOnEnter,
unmountOnExit: unmountOnExit
},
children
)
)
);
};
return Tabs;
}(_react2['default'].Component);
Tabs.propTypes = propTypes;
Tabs.defaultProps = defaultProps;
(0, _bootstrapUtils.bsClass)('tab', Tabs);
exports['default'] = (0, _uncontrollable2['default'])(Tabs, { activeKey: 'onSelect' });
module.exports = exports['default'];