react-tabs
Advanced tools
Comparing version 2.2.1 to 2.2.2
@@ -5,2 +5,13 @@ # Change Log | ||
<a name="2.2.2"></a> | ||
## [2.2.2](https://github.com/reactjs/react-tabs/compare/v2.2.1...v2.2.2) (2018-04-18) | ||
### Bug Fixes | ||
* **publish:** Compile with latest babel to get rid of react proptype warnings | ||
* **publish:** Added src folder to package ([#232](https://github.com/reactjs/react-tabs/issues/232)) ([a4cc6d0](https://github.com/reactjs/react-tabs/commit/a4cc6d0)) | ||
<a name="2.2.1"></a> | ||
@@ -7,0 +18,0 @@ ## [2.2.1](https://github.com/reactjs/react-tabs/compare/v2.2.0...v2.2.1) (2018-01-09) |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('react')) : | ||
typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'react'], factory) : | ||
(factory((global.ReactTabs = {}),global.PropTypes,global.React)); | ||
}(this, (function (exports,PropTypes,React) { 'use strict'; | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) : | ||
typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) : | ||
(factory((global.ReactTabs = {}),global.React,global.PropTypes)); | ||
}(this, (function (exports,React,PropTypes) { 'use strict'; | ||
PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; | ||
var React__default = 'default' in React ? React['default'] : React; | ||
var React__default = 'default' in React ? React['default'] : React; | ||
PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; | ||
function isTab(el) { | ||
return el.type && el.type.tabsRole === 'Tab'; | ||
} | ||
function isTabPanel(el) { | ||
return el.type && el.type.tabsRole === 'TabPanel'; | ||
} | ||
function isTabList(el) { | ||
return el.type && el.type.tabsRole === 'TabList'; | ||
} | ||
function _defineProperty(obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
function _typeof(obj) { | ||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { | ||
var _typeof = _typeof = function (obj) { | ||
return typeof obj; | ||
}; | ||
} else { | ||
var _typeof = _typeof = function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
return obj; | ||
} | ||
return _typeof(obj); | ||
} | ||
function _extends() { | ||
_extends = Object.assign || function (target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
var _typeof = _typeof; | ||
for (var key in source) { | ||
if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
target[key] = source[key]; | ||
} | ||
} | ||
} | ||
return target; | ||
}; | ||
return _extends.apply(this, arguments); | ||
} | ||
function _objectSpread(target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i] != null ? arguments[i] : {}; | ||
var ownKeys = Object.keys(source); | ||
if (typeof Object.getOwnPropertySymbols === 'function') { | ||
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { | ||
return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
})); | ||
} | ||
ownKeys.forEach(function (key) { | ||
_defineProperty(target, key, source[key]); | ||
}); | ||
} | ||
return target; | ||
} | ||
function _inheritsLoose(subClass, superClass) { | ||
subClass.prototype = Object.create(superClass.prototype); | ||
subClass.prototype.constructor = subClass; | ||
subClass.__proto__ = superClass; | ||
} | ||
function _objectWithoutProperties(source, excluded) { | ||
if (source == null) return {}; | ||
var target = {}; | ||
var sourceKeys = Object.keys(source); | ||
var key, i; | ||
for (i = 0; i < sourceKeys.length; i++) { | ||
key = sourceKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
target[key] = source[key]; | ||
} | ||
if (Object.getOwnPropertySymbols) { | ||
var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
function _extends() { | ||
var _extends = _extends = Object.assign || function (target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
for (var key in source) { | ||
if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
target[key] = source[key]; | ||
} | ||
for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
key = sourceSymbolKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
target[key] = source[key]; | ||
} | ||
@@ -68,841 +92,812 @@ } | ||
return target; | ||
}; | ||
} | ||
return _extends.apply(this, arguments); | ||
} | ||
function _assertThisInitialized(self) { | ||
if (self === void 0) { | ||
throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
} | ||
var _extends = _extends; | ||
return self; | ||
} | ||
function isTab(el) { | ||
return el.type && el.type.tabsRole === 'Tab'; | ||
} | ||
function isTabPanel(el) { | ||
return el.type && el.type.tabsRole === 'TabPanel'; | ||
} | ||
function isTabList(el) { | ||
return el.type && el.type.tabsRole === 'TabList'; | ||
} | ||
function isTabChild(child) { | ||
return isTab(child) || isTabList(child) || isTabPanel(child); | ||
} | ||
function deepMap(children, callback) { | ||
return React.Children.map(children, function (child) { | ||
// null happens when conditionally rendering TabPanel/Tab | ||
// see https://github.com/reactjs/react-tabs/issues/37 | ||
if (child === null) return null; | ||
if (isTabChild(child)) { | ||
return callback(child); | ||
} | ||
function _inheritsLoose(subClass, superClass) { | ||
subClass.prototype = Object.create(superClass.prototype); | ||
subClass.prototype.constructor = subClass; | ||
subClass.__proto__ = superClass; | ||
} | ||
if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
// Clone the child that has children and map them too | ||
return React.cloneElement(child, _objectSpread({}, child.props, { | ||
children: deepMap(child.props.children, callback) | ||
})); | ||
} | ||
var inheritsLoose = _inheritsLoose; | ||
return child; | ||
}); | ||
} | ||
function deepForEach(children, callback) { | ||
return React.Children.forEach(children, function (child) { | ||
// null happens when conditionally rendering TabPanel/Tab | ||
// see https://github.com/reactjs/react-tabs/issues/37 | ||
if (child === null) return; | ||
if (isTab(child) || isTabPanel(child)) { | ||
callback(child); | ||
} else if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
if (isTabList(child)) callback(child); | ||
deepForEach(child.props.children, callback); | ||
} | ||
}); | ||
} | ||
function childrenPropType(props, propName, componentName) { | ||
var error; | ||
var tabsCount = 0; | ||
var panelsCount = 0; | ||
var tabListFound = false; | ||
var listTabs = []; | ||
var children = props[propName]; | ||
deepForEach(children, function (child) { | ||
if (isTabList(child)) { | ||
if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
deepForEach(child.props.children, function (listChild) { | ||
return listTabs.push(listChild); | ||
}); | ||
} | ||
if (tabListFound) { | ||
error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed."); | ||
} | ||
tabListFound = true; | ||
} | ||
if (isTab(child)) { | ||
if (!tabListFound || listTabs.indexOf(child) === -1) { | ||
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components " + "have to be inside the 'TabList' component."); | ||
} | ||
tabsCount++; | ||
} else if (isTabPanel(child)) { | ||
panelsCount++; | ||
} | ||
}); | ||
if (!error && tabsCount !== panelsCount) { | ||
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`. " + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'.")); | ||
} | ||
return error; | ||
} | ||
function onSelectPropType(props, propName, componentName, location, propFullName) { | ||
var prop = props[propName]; | ||
var name = propFullName || propName; | ||
var error = null; | ||
function _objectWithoutProperties(source, excluded) { | ||
if (source == null) return {}; | ||
var target = {}; | ||
var sourceKeys = Object.keys(source); | ||
var key, i; | ||
if (prop && typeof prop !== 'function') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied " + ("to `" + componentName + "`, expected `function`.")); | ||
} else if (props.selectedIndex != null && prop == null) { | ||
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but " + "its value is `undefined` or `null`.\n" + "`onSelect` is required when `selectedIndex` is also set. Not doing so will " + "make the tabs not do anything, as `selectedIndex` indicates that you want to " + "handle the selected tab yourself.\n" + "If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`."); | ||
} | ||
for (i = 0; i < sourceKeys.length; i++) { | ||
key = sourceKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
target[key] = source[key]; | ||
return error; | ||
} | ||
function selectedIndexPropType(props, propName, componentName, location, propFullName) { | ||
var prop = props[propName]; | ||
var name = propFullName || propName; | ||
var error = null; | ||
if (Object.getOwnPropertySymbols) { | ||
var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
if (prop != null && typeof prop !== 'number') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied to " + ("`" + componentName + "`, expected `number`.")); | ||
} else if (props.defaultIndex != null && prop != null) { | ||
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` " + ("in `" + componentName + "`.\n") + ("Either remove `" + name + "` to let `" + componentName + "` handle the selected ") + "tab internally or remove `defaultIndex` to handle it yourself."); | ||
} | ||
for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
key = sourceSymbolKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
target[key] = source[key]; | ||
} | ||
return error; | ||
} | ||
return target; | ||
} | ||
function createCommonjsModule(fn, module) { | ||
return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
} | ||
var objectWithoutProperties = _objectWithoutProperties; | ||
var classnames = createCommonjsModule(function (module) { | ||
/*! | ||
Copyright (c) 2016 Jed Watson. | ||
Licensed under the MIT License (MIT), see | ||
http://jedwatson.github.io/classnames | ||
*/ | ||
function isTabChild(child) { | ||
return isTab(child) || isTabList(child) || isTabPanel(child); | ||
} | ||
/* global define */ | ||
(function () { | ||
function deepMap(children, callback) { | ||
return React.Children.map(children, function (child) { | ||
// null happens when conditionally rendering TabPanel/Tab | ||
// see https://github.com/reactjs/react-tabs/issues/37 | ||
if (child === null) return null; | ||
var hasOwn = {}.hasOwnProperty; | ||
if (isTabChild(child)) { | ||
return callback(child); | ||
} | ||
function classNames() { | ||
var classes = []; | ||
if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
// Clone the child that has children and map them too | ||
return React.cloneElement(child, _extends({}, child.props, { | ||
children: deepMap(child.props.children, callback) | ||
})); | ||
} | ||
for (var i = 0; i < arguments.length; i++) { | ||
var arg = arguments[i]; | ||
if (!arg) continue; | ||
var argType = typeof arg; | ||
return child; | ||
}); | ||
} | ||
function deepForEach(children, callback) { | ||
return React.Children.forEach(children, function (child) { | ||
// null happens when conditionally rendering TabPanel/Tab | ||
// see https://github.com/reactjs/react-tabs/issues/37 | ||
if (child === null) return; | ||
if (argType === 'string' || argType === 'number') { | ||
classes.push(arg); | ||
} else if (Array.isArray(arg)) { | ||
classes.push(classNames.apply(null, arg)); | ||
} else if (argType === 'object') { | ||
for (var key in arg) { | ||
if (hasOwn.call(arg, key) && arg[key]) { | ||
classes.push(key); | ||
} | ||
} | ||
} | ||
} | ||
if (isTab(child) || isTabPanel(child)) { | ||
callback(child); | ||
} else if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
if (isTabList(child)) callback(child); | ||
deepForEach(child.props.children, callback); | ||
} | ||
}); | ||
} | ||
return classes.join(' '); | ||
} | ||
function childrenPropType(props, propName, componentName) { | ||
var error; | ||
var tabsCount = 0; | ||
var panelsCount = 0; | ||
var tabListFound = false; | ||
var listTabs = []; | ||
var children = props[propName]; | ||
deepForEach(children, function (child) { | ||
if (isTabList(child)) { | ||
if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
deepForEach(child.props.children, function (listChild) { | ||
return listTabs.push(listChild); | ||
if (module.exports) { | ||
module.exports = classNames; | ||
} else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) { | ||
// register as 'classnames', consistent with npm package name | ||
undefined('classnames', [], function () { | ||
return classNames; | ||
}); | ||
} else { | ||
window.classNames = classNames; | ||
} | ||
if (tabListFound) { | ||
error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed."); | ||
} | ||
tabListFound = true; | ||
} | ||
if (isTab(child)) { | ||
if (!tabListFound || listTabs.indexOf(child) === -1) { | ||
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component."); | ||
} | ||
tabsCount++; | ||
} else if (isTabPanel(child)) { | ||
panelsCount++; | ||
} | ||
})(); | ||
}); | ||
if (!error && tabsCount !== panelsCount) { | ||
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`." + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'.")); | ||
// Get a universally unique identifier | ||
var count = 0; | ||
function uuid() { | ||
return "react-tabs-" + count++; | ||
} | ||
function reset() { | ||
count = 0; | ||
} | ||
return error; | ||
} | ||
function onSelectPropType(props, propName, componentName, location, propFullName) { | ||
var prop = props[propName]; | ||
var name = propFullName || propName; | ||
var error = null; | ||
if (prop && typeof prop !== 'function') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `function`."); | ||
} else if (props.selectedIndex != null && prop == null) { | ||
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but its value is `undefined` or `null`.\n`onSelect` is required when `selectedIndex` is also set. Not doing so will make the tabs not do anything, as `selectedIndex` indicates that you want to handle the selected tab yourself.\nIf you only want to set the inital tab replace `selectedIndex` with `defaultIndex`."); | ||
function getTabsCount(children) { | ||
var tabCount = 0; | ||
deepForEach(children, function (child) { | ||
if (isTab(child)) tabCount++; | ||
}); | ||
return tabCount; | ||
} | ||
function getPanelsCount(children) { | ||
var panelCount = 0; | ||
deepForEach(children, function (child) { | ||
if (isTabPanel(child)) panelCount++; | ||
}); | ||
return panelCount; | ||
} | ||
return error; | ||
} | ||
function selectedIndexPropType(props, propName, componentName, location, propFullName) { | ||
var prop = props[propName]; | ||
var name = propFullName || propName; | ||
var error = null; | ||
function isTabNode(node) { | ||
return 'getAttribute' in node && node.getAttribute('role') === 'tab'; | ||
} // Determine if a tab node is disabled | ||
if (prop != null && typeof prop !== 'number') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `number`."); | ||
} else if (props.defaultIndex != null && prop != null) { | ||
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` in `" + componentName + "`.\nEither remove `" + name + "` to let `" + componentName + "` handle the selected tab internally or remove `defaultIndex` to handle it yourself."); | ||
function isTabDisabled(node) { | ||
return node.getAttribute('aria-disabled') === 'true'; | ||
} | ||
return error; | ||
} | ||
var canUseActiveElement; | ||
function createCommonjsModule(fn, module) { | ||
return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
} | ||
try { | ||
canUseActiveElement = !!(typeof window !== 'undefined' && window.document && window.document.activeElement); | ||
} catch (e) { | ||
// Work around for IE bug when accessing document.activeElement in an iframe | ||
// Refer to the following resources: | ||
// http://stackoverflow.com/a/10982960/369687 | ||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599 | ||
canUseActiveElement = false; | ||
} | ||
var classnames = createCommonjsModule(function (module) { | ||
/*! | ||
Copyright (c) 2016 Jed Watson. | ||
Licensed under the MIT License (MIT), see | ||
http://jedwatson.github.io/classnames | ||
*/ | ||
var UncontrolledTabs = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inheritsLoose(UncontrolledTabs, _Component); | ||
/* global define */ | ||
(function () { | ||
var hasOwn = {}.hasOwnProperty; | ||
function UncontrolledTabs() { | ||
var _temp, _this; | ||
function classNames() { | ||
var classes = []; | ||
for (var i = 0; i < arguments.length; i++) { | ||
var arg = arguments[i]; | ||
if (!arg) continue; | ||
var argType = _typeof(arg); | ||
if (argType === 'string' || argType === 'number') { | ||
classes.push(arg); | ||
} else if (Array.isArray(arg)) { | ||
classes.push(classNames.apply(null, arg)); | ||
} else if (argType === 'object') { | ||
for (var key in arg) { | ||
if (hasOwn.call(arg, key) && arg[key]) { | ||
classes.push(key); | ||
} | ||
} | ||
} | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return classes.join(' '); | ||
} | ||
return (_temp = _this = _Component.call.apply(_Component, [this].concat(args)) || this, _this.tabNodes = [], _this.handleKeyDown = function (e) { | ||
if (_this.isTabFromContainer(e.target)) { | ||
var index = _this.props.selectedIndex; | ||
var preventDefault = false; | ||
var useSelectedIndex = false; | ||
if ('object' !== 'undefined' && module.exports) { | ||
module.exports = classNames; | ||
} else if (typeof undefined === 'function' && _typeof(undefined.amd) === 'object' && undefined.amd) { | ||
// register as 'classnames', consistent with npm package name | ||
undefined('classnames', [], function () { | ||
return classNames; | ||
}); | ||
} else { | ||
window.classNames = classNames; | ||
} | ||
})(); | ||
}); | ||
if (e.keyCode === 32 || e.keyCode === 13) { | ||
preventDefault = true; | ||
useSelectedIndex = false; | ||
// Get a universally unique identifier | ||
var count = 0; | ||
function uuid() { | ||
return "react-tabs-" + count++; | ||
} | ||
function reset() { | ||
count = 0; | ||
} | ||
_this.handleClick(e); | ||
} | ||
function getTabsCount(children) { | ||
var tabCount = 0; | ||
deepForEach(children, function (child) { | ||
if (isTab(child)) tabCount++; | ||
}); | ||
return tabCount; | ||
} | ||
function getPanelsCount(children) { | ||
var panelCount = 0; | ||
deepForEach(children, function (child) { | ||
if (isTabPanel(child)) panelCount++; | ||
}); | ||
return panelCount; | ||
} | ||
if (e.keyCode === 37 || e.keyCode === 38) { | ||
// Select next tab to the left | ||
index = _this.getPrevTab(index); | ||
preventDefault = true; | ||
useSelectedIndex = true; | ||
} else if (e.keyCode === 39 || e.keyCode === 40) { | ||
// Select next tab to the right | ||
index = _this.getNextTab(index); | ||
preventDefault = true; | ||
useSelectedIndex = true; | ||
} // This prevents scrollbars from moving around | ||
function isTabNode(node) { | ||
return 'getAttribute' in node && node.getAttribute('role') === 'tab'; | ||
} // Determine if a tab node is disabled | ||
if (preventDefault) { | ||
e.preventDefault(); | ||
} // Only use the selected index in the state if we're not using the tabbed index | ||
function isTabDisabled(node) { | ||
return node.getAttribute('aria-disabled') === 'true'; | ||
} | ||
var canUseActiveElement; | ||
if (useSelectedIndex) { | ||
_this.setSelected(index, e); | ||
} | ||
} | ||
}, _this.handleClick = function (e) { | ||
var node = e.target; // eslint-disable-next-line no-cond-assign | ||
try { | ||
canUseActiveElement = !!(typeof window !== 'undefined' && window.document && window.document.activeElement); | ||
} catch (e) { | ||
// Work around for IE bug when accessing document.activeElement in an iframe | ||
// Refer to the following resources: | ||
// http://stackoverflow.com/a/10982960/369687 | ||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599 | ||
canUseActiveElement = false; | ||
} | ||
do { | ||
if (_this.isTabFromContainer(node)) { | ||
if (isTabDisabled(node)) { | ||
return; | ||
} | ||
var UncontrolledTabs = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
inheritsLoose(UncontrolledTabs, _Component); | ||
var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node); | ||
function UncontrolledTabs() { | ||
var _temp, _this; | ||
_this.setSelected(index, e); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
return; | ||
} | ||
} while ((node = node.parentNode) !== null); | ||
}, _temp) || _assertThisInitialized(_this); | ||
} | ||
return (_temp = _this = _Component.call.apply(_Component, [this].concat(args)) || this, _this.tabNodes = [], _this.handleKeyDown = function (e) { | ||
if (_this.isTabFromContainer(e.target)) { | ||
var index = _this.props.selectedIndex; | ||
var preventDefault = false; | ||
var useSelectedIndex = false; | ||
var _proto = UncontrolledTabs.prototype; | ||
if (e.keyCode === 32 || e.keyCode === 13) { | ||
preventDefault = true; | ||
useSelectedIndex = false; | ||
_proto.setSelected = function setSelected(index, event) { | ||
// Check index boundary | ||
if (index < 0 || index >= this.getTabsCount()) return; // Call change event handler | ||
_this.handleClick(e); | ||
} | ||
this.props.onSelect(index, this.props.selectedIndex, event); | ||
}; | ||
if (e.keyCode === 37 || e.keyCode === 38) { | ||
// Select next tab to the left | ||
index = _this.getPrevTab(index); | ||
preventDefault = true; | ||
useSelectedIndex = true; | ||
} else if (e.keyCode === 39 || e.keyCode === 40) { | ||
// Select next tab to the right | ||
index = _this.getNextTab(index); | ||
preventDefault = true; | ||
useSelectedIndex = true; | ||
} // This prevents scrollbars from moving around | ||
_proto.getNextTab = function getNextTab(index) { | ||
var count = this.getTabsCount(); // Look for non-disabled tab from index to the last tab on the right | ||
for (var i = index + 1; i < count; i++) { | ||
if (!isTabDisabled(this.getTab(i))) { | ||
return i; | ||
} | ||
} // If no tab found, continue searching from first on left to index | ||
if (preventDefault) { | ||
e.preventDefault(); | ||
} // Only use the selected index in the state if we're not using the tabbed index | ||
if (useSelectedIndex) { | ||
_this.setSelected(index, e); | ||
for (var _i = 0; _i < index; _i++) { | ||
if (!isTabDisabled(this.getTab(_i))) { | ||
return _i; | ||
} | ||
} | ||
}, _this.handleClick = function (e) { | ||
var node = e.target; // eslint-disable-next-line no-cond-assign | ||
} // No tabs are disabled, return index | ||
do { | ||
if (_this.isTabFromContainer(node)) { | ||
if (isTabDisabled(node)) { | ||
return; | ||
} | ||
var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node); | ||
return index; | ||
}; | ||
_this.setSelected(index, e); | ||
_proto.getPrevTab = function getPrevTab(index) { | ||
var i = index; // Look for non-disabled tab from index to first tab on the left | ||
return; | ||
while (i--) { | ||
if (!isTabDisabled(this.getTab(i))) { | ||
return i; | ||
} | ||
} while ((node = node.parentNode) !== null); | ||
}, _temp) || _this; | ||
} | ||
} // If no tab found, continue searching from last tab on right to index | ||
var _proto = UncontrolledTabs.prototype; | ||
_proto.setSelected = function setSelected(index, event) { | ||
// Check index boundary | ||
if (index < 0 || index >= this.getTabsCount()) return; // Call change event handler | ||
i = this.getTabsCount(); | ||
this.props.onSelect(index, this.props.selectedIndex, event); | ||
}; | ||
while (i-- > index) { | ||
if (!isTabDisabled(this.getTab(i))) { | ||
return i; | ||
} | ||
} // No tabs are disabled, return index | ||
_proto.getNextTab = function getNextTab(index) { | ||
var count = this.getTabsCount(); // Look for non-disabled tab from index to the last tab on the right | ||
for (var i = index + 1; i < count; i++) { | ||
if (!isTabDisabled(this.getTab(i))) { | ||
return i; | ||
} | ||
} // If no tab found, continue searching from first on left to index | ||
return index; | ||
}; | ||
_proto.getTabsCount = function getTabsCount$$1() { | ||
return getTabsCount(this.props.children); | ||
}; | ||
for (var _i = 0; _i < index; _i++) { | ||
if (!isTabDisabled(this.getTab(_i))) { | ||
return _i; | ||
} | ||
} // No tabs are disabled, return index | ||
_proto.getPanelsCount = function getPanelsCount$$1() { | ||
return getPanelsCount(this.props.children); | ||
}; | ||
_proto.getTab = function getTab(index) { | ||
return this.tabNodes["tabs-" + index]; | ||
}; | ||
return index; | ||
}; | ||
_proto.getChildren = function getChildren() { | ||
var _this2 = this; | ||
_proto.getPrevTab = function getPrevTab(index) { | ||
var i = index; // Look for non-disabled tab from index to first tab on the left | ||
var index = 0; | ||
var _props = this.props, | ||
children = _props.children, | ||
disabledTabClassName = _props.disabledTabClassName, | ||
focus = _props.focus, | ||
forceRenderTabPanel = _props.forceRenderTabPanel, | ||
selectedIndex = _props.selectedIndex, | ||
selectedTabClassName = _props.selectedTabClassName, | ||
selectedTabPanelClassName = _props.selectedTabPanelClassName; | ||
this.tabIds = this.tabIds || []; | ||
this.panelIds = this.panelIds || []; | ||
var diff = this.tabIds.length - this.getTabsCount(); // Add ids if new tabs have been added | ||
// Don't bother removing ids, just keep them in case they are added again | ||
// This is more efficient, and keeps the uuid counter under control | ||
while (i--) { | ||
if (!isTabDisabled(this.getTab(i))) { | ||
return i; | ||
} | ||
} // If no tab found, continue searching from last tab on right to index | ||
while (diff++ < 0) { | ||
this.tabIds.push(uuid()); | ||
this.panelIds.push(uuid()); | ||
} // Map children to dynamically setup refs | ||
i = this.getTabsCount(); | ||
return deepMap(children, function (child) { | ||
var result = child; // Clone TabList and Tab components to have refs | ||
while (i-- > index) { | ||
if (!isTabDisabled(this.getTab(i))) { | ||
return i; | ||
} | ||
} // No tabs are disabled, return index | ||
if (isTabList(child)) { | ||
var listIndex = 0; // Figure out if the current focus in the DOM is set on a Tab | ||
// If it is we should keep the focus on the next selected tab | ||
var wasTabFocused = false; | ||
return index; | ||
}; | ||
if (canUseActiveElement) { | ||
wasTabFocused = React__default.Children.toArray(child.props.children).filter(isTab).some(function (tab, i) { | ||
return document.activeElement === _this2.getTab(i); | ||
}); | ||
} | ||
_proto.getTabsCount = function getTabsCount$$1() { | ||
return getTabsCount(this.props.children); | ||
}; | ||
result = React.cloneElement(child, { | ||
children: deepMap(child.props.children, function (tab) { | ||
var key = "tabs-" + listIndex; | ||
var selected = selectedIndex === listIndex; | ||
var props = { | ||
tabRef: function tabRef(node) { | ||
_this2.tabNodes[key] = node; | ||
}, | ||
id: _this2.tabIds[listIndex], | ||
panelId: _this2.panelIds[listIndex], | ||
selected: selected, | ||
focus: selected && (focus || wasTabFocused) | ||
}; | ||
if (selectedTabClassName) props.selectedClassName = selectedTabClassName; | ||
if (disabledTabClassName) props.disabledClassName = disabledTabClassName; | ||
listIndex++; | ||
return React.cloneElement(tab, props); | ||
}) | ||
}); | ||
} else if (isTabPanel(child)) { | ||
var props = { | ||
id: _this2.panelIds[index], | ||
tabId: _this2.tabIds[index], | ||
selected: selectedIndex === index | ||
}; | ||
if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel; | ||
if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName; | ||
index++; | ||
result = React.cloneElement(child, props); | ||
} | ||
_proto.getPanelsCount = function getPanelsCount$$1() { | ||
return getPanelsCount(this.props.children); | ||
}; | ||
return result; | ||
}); | ||
}; | ||
_proto.getTab = function getTab(index) { | ||
return this.tabNodes["tabs-" + index]; | ||
}; | ||
/** | ||
* Determine if a node from event.target is a Tab element for the current Tabs container. | ||
* If the clicked element is not a Tab, it returns false. | ||
* If it finds another Tabs container between the Tab and `this`, it returns false. | ||
*/ | ||
_proto.isTabFromContainer = function isTabFromContainer(node) { | ||
// return immediately if the clicked element is not a Tab. | ||
if (!isTabNode(node)) { | ||
return false; | ||
} // Check if the first occurrence of a Tabs container is `this` one. | ||
_proto.getChildren = function getChildren() { | ||
var _this2 = this; | ||
var index = 0; | ||
var _props = this.props, | ||
children = _props.children, | ||
disabledTabClassName = _props.disabledTabClassName, | ||
focus = _props.focus, | ||
forceRenderTabPanel = _props.forceRenderTabPanel, | ||
selectedIndex = _props.selectedIndex, | ||
selectedTabClassName = _props.selectedTabClassName, | ||
selectedTabPanelClassName = _props.selectedTabPanelClassName; | ||
this.tabIds = this.tabIds || []; | ||
this.panelIds = this.panelIds || []; | ||
var diff = this.tabIds.length - this.getTabsCount(); // Add ids if new tabs have been added | ||
// Don't bother removing ids, just keep them in case they are added again | ||
// This is more efficient, and keeps the uuid counter under control | ||
var nodeAncestor = node.parentElement; | ||
while (diff++ < 0) { | ||
this.tabIds.push(uuid()); | ||
this.panelIds.push(uuid()); | ||
} // Map children to dynamically setup refs | ||
do { | ||
if (nodeAncestor === this.node) return true;else if (nodeAncestor.getAttribute('data-tabs')) break; | ||
nodeAncestor = nodeAncestor.parentElement; | ||
} while (nodeAncestor); | ||
return false; | ||
}; | ||
return deepMap(children, function (child) { | ||
var result = child; // Clone TabList and Tab components to have refs | ||
_proto.render = function render() { | ||
var _this3 = this; | ||
if (isTabList(child)) { | ||
var listIndex = 0; // Figure out if the current focus in the DOM is set on a Tab | ||
// If it is we should keep the focus on the next selected tab | ||
// Delete all known props, so they don't get added to DOM | ||
var _props2 = this.props, | ||
children = _props2.children, | ||
className = _props2.className, | ||
disabledTabClassName = _props2.disabledTabClassName, | ||
domRef = _props2.domRef, | ||
focus = _props2.focus, | ||
forceRenderTabPanel = _props2.forceRenderTabPanel, | ||
onSelect = _props2.onSelect, | ||
selectedIndex = _props2.selectedIndex, | ||
selectedTabClassName = _props2.selectedTabClassName, | ||
selectedTabPanelClassName = _props2.selectedTabPanelClassName, | ||
attributes = _objectWithoutProperties(_props2, ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName"]); | ||
var wasTabFocused = false; | ||
return React__default.createElement("div", _extends({}, attributes, { | ||
className: classnames(className), | ||
onClick: this.handleClick, | ||
onKeyDown: this.handleKeyDown, | ||
ref: function ref(node) { | ||
_this3.node = node; | ||
if (domRef) domRef(node); | ||
}, | ||
"data-tabs": true | ||
}), this.getChildren()); | ||
}; | ||
if (canUseActiveElement) { | ||
wasTabFocused = React__default.Children.toArray(child.props.children).filter(isTab).some(function (tab, i) { | ||
return document.activeElement === _this2.getTab(i); | ||
}); | ||
} | ||
return UncontrolledTabs; | ||
}(React.Component); | ||
result = React.cloneElement(child, { | ||
children: deepMap(child.props.children, function (tab) { | ||
var key = "tabs-" + listIndex; | ||
var selected = selectedIndex === listIndex; | ||
var props = { | ||
tabRef: function tabRef(node) { | ||
_this2.tabNodes[key] = node; | ||
}, | ||
id: _this2.tabIds[listIndex], | ||
panelId: _this2.panelIds[listIndex], | ||
selected: selected, | ||
focus: selected && (focus || wasTabFocused) | ||
}; | ||
if (selectedTabClassName) props.selectedClassName = selectedTabClassName; | ||
if (disabledTabClassName) props.disabledClassName = disabledTabClassName; | ||
listIndex++; | ||
return React.cloneElement(tab, props); | ||
}) | ||
}); | ||
} else if (isTabPanel(child)) { | ||
var props = { | ||
id: _this2.panelIds[index], | ||
tabId: _this2.tabIds[index], | ||
selected: selectedIndex === index | ||
}; | ||
if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel; | ||
if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName; | ||
index++; | ||
result = React.cloneElement(child, props); | ||
} | ||
return result; | ||
}); | ||
UncontrolledTabs.defaultProps = { | ||
className: 'react-tabs', | ||
focus: false | ||
}; | ||
UncontrolledTabs.propTypes = { | ||
children: childrenPropType, | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
disabledTabClassName: PropTypes.string, | ||
domRef: PropTypes.func, | ||
focus: PropTypes.bool, | ||
forceRenderTabPanel: PropTypes.bool, | ||
onSelect: PropTypes.func.isRequired, | ||
selectedIndex: PropTypes.number.isRequired, | ||
selectedTabClassName: PropTypes.string, | ||
selectedTabPanelClassName: PropTypes.string | ||
}; | ||
/** | ||
* Determine if a node from event.target is a Tab element for the current Tabs container. | ||
* If the clicked element is not a Tab, it returns false. | ||
* If it finds another Tabs container between the Tab and `this`, it returns false. | ||
*/ | ||
_proto.isTabFromContainer = function isTabFromContainer(node) { | ||
// return immediately if the clicked element is not a Tab. | ||
if (!isTabNode(node)) { | ||
return false; | ||
} // Check if the first occurrence of a Tabs container is `this` one. | ||
var Tabs = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inheritsLoose(Tabs, _Component); | ||
function Tabs(props) { | ||
var _this; | ||
var nodeAncestor = node.parentElement; | ||
_this = _Component.call(this, props) || this; | ||
do { | ||
if (nodeAncestor === this.node) return true;else if (nodeAncestor.getAttribute('data-tabs')) break; | ||
nodeAncestor = nodeAncestor.parentElement; | ||
} while (nodeAncestor); | ||
_this.handleSelected = function (index, last, event) { | ||
// Call change event handler | ||
if (typeof _this.props.onSelect === 'function') { | ||
// Check if the change event handler cancels the tab change | ||
if (_this.props.onSelect(index, last, event) === false) return; | ||
} | ||
return false; | ||
}; | ||
var state = { | ||
// Set focus if the change was triggered from the keyboard | ||
focus: event.type === 'keydown' | ||
}; | ||
_proto.render = function render() { | ||
var _this3 = this; | ||
if (Tabs.inUncontrolledMode(_this.props)) { | ||
// Update selected index | ||
state.selectedIndex = index; | ||
} | ||
// Delete all known props, so they don't get added to DOM | ||
var _props2 = this.props, | ||
children = _props2.children, | ||
className = _props2.className, | ||
disabledTabClassName = _props2.disabledTabClassName, | ||
domRef = _props2.domRef, | ||
focus = _props2.focus, | ||
forceRenderTabPanel = _props2.forceRenderTabPanel, | ||
onSelect = _props2.onSelect, | ||
selectedIndex = _props2.selectedIndex, | ||
selectedTabClassName = _props2.selectedTabClassName, | ||
selectedTabPanelClassName = _props2.selectedTabPanelClassName, | ||
attributes = objectWithoutProperties(_props2, ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName"]); | ||
return React__default.createElement("div", _extends({}, attributes, { | ||
className: classnames(className), | ||
onClick: this.handleClick, | ||
onKeyDown: this.handleKeyDown, | ||
ref: function ref(node) { | ||
_this3.node = node; | ||
if (domRef) domRef(node); | ||
}, | ||
"data-tabs": true | ||
}), this.getChildren()); | ||
}; | ||
_this.setState(state); | ||
}; | ||
return UncontrolledTabs; | ||
}(React.Component); | ||
_this.state = Tabs.copyPropsToState(_this.props, {}, _this.props.defaultFocus); | ||
return _this; | ||
} | ||
UncontrolledTabs.defaultProps = { | ||
className: 'react-tabs', | ||
focus: false | ||
}; | ||
UncontrolledTabs.propTypes = { | ||
children: childrenPropType, | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
disabledTabClassName: PropTypes.string, | ||
domRef: PropTypes.func, | ||
focus: PropTypes.bool, | ||
forceRenderTabPanel: PropTypes.bool, | ||
onSelect: PropTypes.func.isRequired, | ||
selectedIndex: PropTypes.number.isRequired, | ||
selectedTabClassName: PropTypes.string, | ||
selectedTabPanelClassName: PropTypes.string | ||
}; | ||
var _proto = Tabs.prototype; | ||
var Tabs = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
inheritsLoose(Tabs, _Component); | ||
_proto.componentWillReceiveProps = function componentWillReceiveProps(newProps) { | ||
if (Tabs.inUncontrolledMode(newProps) !== Tabs.inUncontrolledMode(this.props)) { | ||
throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see the README."); | ||
} // Use a transactional update to prevent race conditions | ||
// when reading the state in copyPropsToState | ||
// See https://github.com/reactjs/react-tabs/issues/51 | ||
function Tabs(props) { | ||
var _this; | ||
_this = _Component.call(this, props) || this; | ||
this.setState(function (state) { | ||
return Tabs.copyPropsToState(newProps, state); | ||
}); | ||
}; | ||
_this.handleSelected = function (index, last, event) { | ||
// Call change event handler | ||
if (typeof _this.props.onSelect === 'function') { | ||
// Check if the change event handler cancels the tab change | ||
if (_this.props.onSelect(index, last, event) === false) return; | ||
Tabs.inUncontrolledMode = function inUncontrolledMode(props) { | ||
return props.selectedIndex === null; | ||
}; | ||
// preserve the existing selectedIndex from state. | ||
// If the state has not selectedIndex, default to the defaultIndex or 0 | ||
Tabs.copyPropsToState = function copyPropsToState(props, state, focus) { | ||
if (focus === void 0) { | ||
focus = false; | ||
} | ||
var state = { | ||
// Set focus if the change was triggered from the keyboard | ||
focus: event.type === 'keydown' | ||
var newState = { | ||
focus: focus | ||
}; | ||
if (Tabs.inUncontrolledMode(_this.props)) { | ||
// Update selected index | ||
state.selectedIndex = index; | ||
if (Tabs.inUncontrolledMode(props)) { | ||
var maxTabIndex = getTabsCount(props.children) - 1; | ||
var selectedIndex = null; | ||
if (state.selectedIndex != null) { | ||
selectedIndex = Math.min(state.selectedIndex, maxTabIndex); | ||
} else { | ||
selectedIndex = props.defaultIndex || 0; | ||
} | ||
newState.selectedIndex = selectedIndex; | ||
} | ||
_this.setState(state); | ||
return newState; | ||
}; | ||
_this.state = Tabs.copyPropsToState(_this.props, {}, _this.props.defaultFocus); | ||
return _this; | ||
} | ||
_proto.render = function render() { | ||
var _props = this.props, | ||
children = _props.children, | ||
defaultIndex = _props.defaultIndex, | ||
defaultFocus = _props.defaultFocus, | ||
props = _objectWithoutProperties(_props, ["children", "defaultIndex", "defaultFocus"]); | ||
var _proto = Tabs.prototype; | ||
props.focus = this.state.focus; | ||
props.onSelect = this.handleSelected; | ||
_proto.componentWillReceiveProps = function componentWillReceiveProps(newProps) { | ||
if ("development" !== 'production' && Tabs.inUncontrolledMode(newProps) !== Tabs.inUncontrolledMode(this.props)) { | ||
throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see the README."); | ||
} // Use a transactional update to prevent race conditions | ||
// when reading the state in copyPropsToState | ||
// See https://github.com/reactjs/react-tabs/issues/51 | ||
if (this.state.selectedIndex != null) { | ||
props.selectedIndex = this.state.selectedIndex; | ||
} | ||
return React__default.createElement(UncontrolledTabs, props, children); | ||
}; | ||
this.setState(function (state) { | ||
return Tabs.copyPropsToState(newProps, state); | ||
}); | ||
}; | ||
return Tabs; | ||
}(React.Component); | ||
Tabs.inUncontrolledMode = function inUncontrolledMode(props) { | ||
return props.selectedIndex === null; | ||
Tabs.defaultProps = { | ||
defaultFocus: false, | ||
forceRenderTabPanel: false, | ||
selectedIndex: null, | ||
defaultIndex: null | ||
}; | ||
Tabs.propTypes = { | ||
children: childrenPropType, | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
defaultFocus: PropTypes.bool, | ||
defaultIndex: PropTypes.number, | ||
disabledTabClassName: PropTypes.string, | ||
domRef: PropTypes.func, | ||
forceRenderTabPanel: PropTypes.bool, | ||
onSelect: onSelectPropType, | ||
selectedIndex: selectedIndexPropType, | ||
selectedTabClassName: PropTypes.string, | ||
selectedTabPanelClassName: PropTypes.string | ||
}; | ||
Tabs.tabsRole = 'Tabs'; | ||
// preserve the existing selectedIndex from state. | ||
// If the state has not selectedIndex, default to the defaultIndex or 0 | ||
Tabs.copyPropsToState = function copyPropsToState(props, state, focus) { | ||
if (focus === void 0) { | ||
focus = false; | ||
var TabList = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inheritsLoose(TabList, _Component); | ||
function TabList() { | ||
return _Component.apply(this, arguments) || this; | ||
} | ||
var newState = { | ||
focus: focus | ||
}; | ||
var _proto = TabList.prototype; | ||
if (Tabs.inUncontrolledMode(props)) { | ||
var maxTabIndex = getTabsCount(props.children) - 1; | ||
var selectedIndex = null; | ||
_proto.render = function render() { | ||
var _props = this.props, | ||
children = _props.children, | ||
className = _props.className, | ||
attributes = _objectWithoutProperties(_props, ["children", "className"]); | ||
if (state.selectedIndex != null) { | ||
selectedIndex = Math.min(state.selectedIndex, maxTabIndex); | ||
} else { | ||
selectedIndex = props.defaultIndex || 0; | ||
} | ||
return React__default.createElement("ul", _extends({}, attributes, { | ||
className: classnames(className), | ||
role: "tablist" | ||
}), children); | ||
}; | ||
newState.selectedIndex = selectedIndex; | ||
} | ||
return TabList; | ||
}(React.Component); | ||
return newState; | ||
TabList.defaultProps = { | ||
className: 'react-tabs__tab-list' | ||
}; | ||
_proto.render = function render() { | ||
var _props = this.props, | ||
children = _props.children, | ||
defaultIndex = _props.defaultIndex, | ||
defaultFocus = _props.defaultFocus, | ||
props = objectWithoutProperties(_props, ["children", "defaultIndex", "defaultFocus"]); | ||
props.focus = this.state.focus; | ||
props.onSelect = this.handleSelected; | ||
if (this.state.selectedIndex != null) { | ||
props.selectedIndex = this.state.selectedIndex; | ||
} | ||
return React__default.createElement(UncontrolledTabs, props, children); | ||
TabList.propTypes = { | ||
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]) | ||
}; | ||
TabList.tabsRole = 'TabList'; | ||
return Tabs; | ||
}(React.Component); | ||
var DEFAULT_CLASS = 'react-tabs__tab'; | ||
Tabs.defaultProps = { | ||
defaultFocus: false, | ||
forceRenderTabPanel: false, | ||
selectedIndex: null, | ||
defaultIndex: null | ||
}; | ||
Tabs.propTypes = { | ||
children: childrenPropType, | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
defaultFocus: PropTypes.bool, | ||
defaultIndex: PropTypes.number, | ||
disabledTabClassName: PropTypes.string, | ||
domRef: PropTypes.func, | ||
forceRenderTabPanel: PropTypes.bool, | ||
onSelect: onSelectPropType, | ||
selectedIndex: selectedIndexPropType, | ||
selectedTabClassName: PropTypes.string, | ||
selectedTabPanelClassName: PropTypes.string | ||
}; | ||
Tabs.tabsRole = 'Tabs'; | ||
var Tab = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inheritsLoose(Tab, _Component); | ||
var TabList = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
inheritsLoose(TabList, _Component); | ||
function Tab() { | ||
return _Component.apply(this, arguments) || this; | ||
} | ||
function TabList() { | ||
return _Component.apply(this, arguments) || this; | ||
} | ||
var _proto = Tab.prototype; | ||
var _proto = TabList.prototype; | ||
_proto.componentDidMount = function componentDidMount() { | ||
this.checkFocus(); | ||
}; | ||
_proto.render = function render() { | ||
var _props = this.props, | ||
children = _props.children, | ||
className = _props.className, | ||
attributes = objectWithoutProperties(_props, ["children", "className"]); | ||
return React__default.createElement("ul", _extends({}, attributes, { | ||
className: classnames(className), | ||
role: "tablist" | ||
}), children); | ||
}; | ||
_proto.componentDidUpdate = function componentDidUpdate() { | ||
this.checkFocus(); | ||
}; | ||
return TabList; | ||
}(React.Component); | ||
_proto.checkFocus = function checkFocus() { | ||
if (this.props.selected && this.props.focus) { | ||
this.node.focus(); | ||
} | ||
}; | ||
TabList.defaultProps = { | ||
className: 'react-tabs__tab-list' | ||
}; | ||
TabList.propTypes = { | ||
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]) | ||
}; | ||
TabList.tabsRole = 'TabList'; | ||
_proto.render = function render() { | ||
var _cx, | ||
_this = this; | ||
var DEFAULT_CLASS = 'react-tabs__tab'; | ||
var _props = this.props, | ||
children = _props.children, | ||
className = _props.className, | ||
disabled = _props.disabled, | ||
disabledClassName = _props.disabledClassName, | ||
focus = _props.focus, | ||
id = _props.id, | ||
panelId = _props.panelId, | ||
selected = _props.selected, | ||
selectedClassName = _props.selectedClassName, | ||
tabIndex = _props.tabIndex, | ||
tabRef = _props.tabRef, | ||
attributes = _objectWithoutProperties(_props, ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"]); | ||
var Tab = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
inheritsLoose(Tab, _Component); | ||
return React__default.createElement("li", _extends({}, attributes, { | ||
className: classnames(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)), | ||
ref: function ref(node) { | ||
_this.node = node; | ||
if (tabRef) tabRef(node); | ||
}, | ||
role: "tab", | ||
id: id, | ||
"aria-selected": selected ? 'true' : 'false', | ||
"aria-disabled": disabled ? 'true' : 'false', | ||
"aria-controls": panelId, | ||
tabIndex: tabIndex || (selected ? '0' : null) | ||
}), children); | ||
}; | ||
function Tab() { | ||
return _Component.apply(this, arguments) || this; | ||
} | ||
return Tab; | ||
}(React.Component); | ||
var _proto = Tab.prototype; | ||
_proto.componentDidMount = function componentDidMount() { | ||
this.checkFocus(); | ||
Tab.defaultProps = { | ||
className: DEFAULT_CLASS, | ||
disabledClassName: DEFAULT_CLASS + "--disabled", | ||
focus: false, | ||
id: null, | ||
panelId: null, | ||
selected: false, | ||
selectedClassName: DEFAULT_CLASS + "--selected" | ||
}; | ||
Tab.propTypes = { | ||
children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]), | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
disabled: PropTypes.bool, | ||
tabIndex: PropTypes.string, | ||
disabledClassName: PropTypes.string, | ||
focus: PropTypes.bool, | ||
// private | ||
id: PropTypes.string, | ||
// private | ||
panelId: PropTypes.string, | ||
// private | ||
selected: PropTypes.bool, | ||
// private | ||
selectedClassName: PropTypes.string, | ||
tabRef: PropTypes.func // private | ||
_proto.componentDidUpdate = function componentDidUpdate() { | ||
this.checkFocus(); | ||
}; | ||
Tab.tabsRole = 'Tab'; | ||
_proto.checkFocus = function checkFocus() { | ||
if (this.props.selected && this.props.focus) { | ||
this.node.focus(); | ||
} | ||
}; | ||
var DEFAULT_CLASS$1 = 'react-tabs__tab-panel'; | ||
_proto.render = function render() { | ||
var _cx, | ||
_this = this; | ||
var TabPanel = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inheritsLoose(TabPanel, _Component); | ||
var _props = this.props, | ||
children = _props.children, | ||
className = _props.className, | ||
disabled = _props.disabled, | ||
disabledClassName = _props.disabledClassName, | ||
focus = _props.focus, | ||
id = _props.id, | ||
panelId = _props.panelId, | ||
selected = _props.selected, | ||
selectedClassName = _props.selectedClassName, | ||
tabIndex = _props.tabIndex, | ||
tabRef = _props.tabRef, | ||
attributes = objectWithoutProperties(_props, ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"]); | ||
return React__default.createElement("li", _extends({}, attributes, { | ||
className: classnames(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)), | ||
ref: function ref(node) { | ||
_this.node = node; | ||
if (tabRef) tabRef(node); | ||
}, | ||
role: "tab", | ||
id: id, | ||
"aria-selected": selected ? 'true' : 'false', | ||
"aria-disabled": disabled ? 'true' : 'false', | ||
"aria-controls": panelId, | ||
tabIndex: tabIndex || (selected ? '0' : null) | ||
}), children); | ||
}; | ||
function TabPanel() { | ||
return _Component.apply(this, arguments) || this; | ||
} | ||
return Tab; | ||
}(React.Component); | ||
var _proto = TabPanel.prototype; | ||
Tab.defaultProps = { | ||
className: DEFAULT_CLASS, | ||
disabledClassName: DEFAULT_CLASS + "--disabled", | ||
focus: false, | ||
id: null, | ||
panelId: null, | ||
selected: false, | ||
selectedClassName: DEFAULT_CLASS + "--selected" | ||
}; | ||
Tab.propTypes = { | ||
children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]), | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
disabled: PropTypes.bool, | ||
tabIndex: PropTypes.string, | ||
disabledClassName: PropTypes.string, | ||
focus: PropTypes.bool, | ||
// private | ||
id: PropTypes.string, | ||
// private | ||
panelId: PropTypes.string, | ||
// private | ||
selected: PropTypes.bool, | ||
// private | ||
selectedClassName: PropTypes.string, | ||
tabRef: PropTypes.func // private | ||
_proto.render = function render() { | ||
var _cx; | ||
}; | ||
Tab.tabsRole = 'Tab'; | ||
var _props = this.props, | ||
children = _props.children, | ||
className = _props.className, | ||
forceRender = _props.forceRender, | ||
id = _props.id, | ||
selected = _props.selected, | ||
selectedClassName = _props.selectedClassName, | ||
tabId = _props.tabId, | ||
attributes = _objectWithoutProperties(_props, ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"]); | ||
var DEFAULT_CLASS$1 = 'react-tabs__tab-panel'; | ||
return React__default.createElement("div", _extends({}, attributes, { | ||
className: classnames(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)), | ||
role: "tabpanel", | ||
id: id, | ||
"aria-labelledby": tabId | ||
}), forceRender || selected ? children : null); | ||
}; | ||
var TabPanel = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
inheritsLoose(TabPanel, _Component); | ||
return TabPanel; | ||
}(React.Component); | ||
function TabPanel() { | ||
return _Component.apply(this, arguments) || this; | ||
} | ||
TabPanel.defaultProps = { | ||
className: DEFAULT_CLASS$1, | ||
forceRender: false, | ||
selectedClassName: DEFAULT_CLASS$1 + "--selected" | ||
}; | ||
TabPanel.propTypes = { | ||
children: PropTypes.node, | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
forceRender: PropTypes.bool, | ||
id: PropTypes.string, | ||
// private | ||
selected: PropTypes.bool, | ||
// private | ||
selectedClassName: PropTypes.string, | ||
tabId: PropTypes.string // private | ||
var _proto = TabPanel.prototype; | ||
_proto.render = function render() { | ||
var _cx; | ||
var _props = this.props, | ||
children = _props.children, | ||
className = _props.className, | ||
forceRender = _props.forceRender, | ||
id = _props.id, | ||
selected = _props.selected, | ||
selectedClassName = _props.selectedClassName, | ||
tabId = _props.tabId, | ||
attributes = objectWithoutProperties(_props, ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"]); | ||
return React__default.createElement("div", _extends({}, attributes, { | ||
className: classnames(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)), | ||
role: "tabpanel", | ||
id: id, | ||
"aria-labelledby": tabId | ||
}), forceRender || selected ? children : null); | ||
}; | ||
TabPanel.tabsRole = 'TabPanel'; | ||
return TabPanel; | ||
}(React.Component); | ||
exports.Tabs = Tabs; | ||
exports.TabList = TabList; | ||
exports.Tab = Tab; | ||
exports.TabPanel = TabPanel; | ||
exports.resetIdCounter = reset; | ||
TabPanel.defaultProps = { | ||
className: DEFAULT_CLASS$1, | ||
forceRender: false, | ||
selectedClassName: DEFAULT_CLASS$1 + "--selected" | ||
}; | ||
TabPanel.propTypes = { | ||
children: PropTypes.node, | ||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), | ||
forceRender: PropTypes.bool, | ||
id: PropTypes.string, | ||
// private | ||
selected: PropTypes.bool, | ||
// private | ||
selectedClassName: PropTypes.string, | ||
tabId: PropTypes.string // private | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
}; | ||
TabPanel.tabsRole = 'TabPanel'; | ||
exports.Tab = Tab; | ||
exports.TabList = TabList; | ||
exports.TabPanel = TabPanel; | ||
exports.Tabs = Tabs; | ||
exports.resetIdCounter = reset; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
}))); | ||
//# sourceMappingURL=react-tabs.development.js.map |
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.ReactTabs={},e.React)}(this,function(e,t){"use strict";function n(e){return e.type&&"Tab"===e.type.tabsRole}function r(e){return e.type&&"TabPanel"===e.type.tabsRole}function a(e){return e.type&&"TabList"===e.type.tabsRole}function s(e){if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator)t=t=function(e){return typeof e};else var t=t=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};return t(e)}function o(){var e=e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};return e.apply(this,arguments)}function l(e){return n(e)||a(e)||r(e)}function c(e,n){return t.Children.map(e,function(e){return null===e?null:l(e)?n(e):e.props&&e.props.children&&"object"===s(e.props.children)?t.cloneElement(e,o({},e.props,{children:c(e.props.children,n)})):e})}function i(e,o){return t.Children.forEach(e,function(e){null!==e&&(n(e)||r(e)?o(e):e.props&&e.props.children&&"object"===s(e.props.children)&&(a(e)&&o(e),i(e.props.children,o)))})}function d(){return"react-tabs-"+T++}function u(e){var t=0;return i(e,function(e){n(e)&&t++}),t}function f(e){var t=0;return i(e,function(e){r(e)&&t++}),t}function p(e){return"getAttribute"in e&&"tab"===e.getAttribute("role")}function b(e){return"true"===e.getAttribute("aria-disabled")}var h,m="default"in t?t.default:t,s=s,o=o,y=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t},v=function(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(a[n]=e[n]);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a},C=function(e,t){return t={exports:{}},e(t,t.exports),t.exports}(function(e){!function(){function t(){for(var e=[],r=0;r<arguments.length;r++){var a=arguments[r];if(a){var o=s(a);if("string"===o||"number"===o)e.push(a);else if(Array.isArray(a))e.push(t.apply(null,a));else if("object"===o)for(var l in a)n.call(a,l)&&a[l]&&e.push(l)}}return e.join(" ")}var n={}.hasOwnProperty;e.exports?e.exports=t:window.classNames=t}()}),T=0;try{h=!("undefined"==typeof window||!window.document||!window.document.activeElement)}catch(e){h=!1}var N=function(e){function s(){for(var t,n,r=arguments.length,a=new Array(r),s=0;s<r;s++)a[s]=arguments[s];return t=n=e.call.apply(e,[this].concat(a))||this,n.tabNodes=[],n.handleKeyDown=function(e){if(n.isTabFromContainer(e.target)){var t=n.props.selectedIndex,r=!1,a=!1;32!==e.keyCode&&13!==e.keyCode||(r=!0,a=!1,n.handleClick(e)),37===e.keyCode||38===e.keyCode?(t=n.getPrevTab(t),r=!0,a=!0):39!==e.keyCode&&40!==e.keyCode||(t=n.getNextTab(t),r=!0,a=!0),r&&e.preventDefault(),a&&n.setSelected(t,e)}},n.handleClick=function(e){var t=e.target;do{if(n.isTabFromContainer(t)){if(b(t))return;var r=[].slice.call(t.parentNode.children).filter(p).indexOf(t);return void n.setSelected(r,e)}}while(null!==(t=t.parentNode))},t||n}y(s,e);var l=s.prototype;return l.setSelected=function(e,t){e<0||e>=this.getTabsCount()||this.props.onSelect(e,this.props.selectedIndex,t)},l.getNextTab=function(e){for(var t=this.getTabsCount(),n=e+1;n<t;n++)if(!b(this.getTab(n)))return n;for(var r=0;r<e;r++)if(!b(this.getTab(r)))return r;return e},l.getPrevTab=function(e){for(var t=e;t--;)if(!b(this.getTab(t)))return t;for(t=this.getTabsCount();t-- >e;)if(!b(this.getTab(t)))return t;return e},l.getTabsCount=function(){return u(this.props.children)},l.getPanelsCount=function(){return f(this.props.children)},l.getTab=function(e){return this.tabNodes["tabs-"+e]},l.getChildren=function(){var e=this,s=0,o=this.props,l=o.children,i=o.disabledTabClassName,u=o.focus,f=o.forceRenderTabPanel,p=o.selectedIndex,b=o.selectedTabClassName,y=o.selectedTabPanelClassName;this.tabIds=this.tabIds||[],this.panelIds=this.panelIds||[];for(var v=this.tabIds.length-this.getTabsCount();v++<0;)this.tabIds.push(d()),this.panelIds.push(d());return c(l,function(o){var l=o;if(a(o)){var d=0,v=!1;h&&(v=m.Children.toArray(o.props.children).filter(n).some(function(t,n){return document.activeElement===e.getTab(n)})),l=t.cloneElement(o,{children:c(o.props.children,function(n){var r="tabs-"+d,a=p===d,s={tabRef:function(t){e.tabNodes[r]=t},id:e.tabIds[d],panelId:e.panelIds[d],selected:a,focus:a&&(u||v)};return b&&(s.selectedClassName=b),i&&(s.disabledClassName=i),d++,t.cloneElement(n,s)})})}else if(r(o)){var C={id:e.panelIds[s],tabId:e.tabIds[s],selected:p===s};f&&(C.forceRender=f),y&&(C.selectedClassName=y),s++,l=t.cloneElement(o,C)}return l})},l.isTabFromContainer=function(e){if(!p(e))return!1;var t=e.parentElement;do{if(t===this.node)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},l.render=function(){var e=this,t=this.props,n=(t.children,t.className),r=(t.disabledTabClassName,t.domRef),a=(t.focus,t.forceRenderTabPanel,t.onSelect,t.selectedIndex,t.selectedTabClassName,t.selectedTabPanelClassName,v(t,["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName"]));return m.createElement("div",o({},a,{className:C(n),onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:function(t){e.node=t,r&&r(t)},"data-tabs":!0}),this.getChildren())},s}(t.Component);N.defaultProps={className:"react-tabs",focus:!1};var I=function(e){function t(n){var r;return r=e.call(this,n)||this,r.handleSelected=function(e,n,a){if("function"!=typeof r.props.onSelect||!1!==r.props.onSelect(e,n,a)){var s={focus:"keydown"===a.type};t.inUncontrolledMode(r.props)&&(s.selectedIndex=e),r.setState(s)}},r.state=t.copyPropsToState(r.props,{},r.props.defaultFocus),r}y(t,e);var n=t.prototype;return n.componentWillReceiveProps=function(e){this.setState(function(n){return t.copyPropsToState(e,n)})},t.inUncontrolledMode=function(e){return null===e.selectedIndex},t.copyPropsToState=function(e,n,r){void 0===r&&(r=!1);var a={focus:r};if(t.inUncontrolledMode(e)){var s=u(e.children)-1,o=null;o=null!=n.selectedIndex?Math.min(n.selectedIndex,s):e.defaultIndex||0,a.selectedIndex=o}return a},n.render=function(){var e=this.props,t=e.children,n=(e.defaultIndex,e.defaultFocus,v(e,["children","defaultIndex","defaultFocus"]));return n.focus=this.state.focus,n.onSelect=this.handleSelected,null!=this.state.selectedIndex&&(n.selectedIndex=this.state.selectedIndex),m.createElement(N,n,t)},t}(t.Component);I.defaultProps={defaultFocus:!1,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null},I.tabsRole="Tabs";var g=function(e){function t(){return e.apply(this,arguments)||this}return y(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.className,r=v(e,["children","className"]);return m.createElement("ul",o({},r,{className:C(n),role:"tablist"}),t)},t}(t.Component);g.defaultProps={className:"react-tabs__tab-list"},g.tabsRole="TabList";var x=function(e){function t(){return e.apply(this,arguments)||this}y(t,e);var n=t.prototype;return n.componentDidMount=function(){this.checkFocus()},n.componentDidUpdate=function(){this.checkFocus()},n.checkFocus=function(){this.props.selected&&this.props.focus&&this.node.focus()},n.render=function(){var e,t=this,n=this.props,r=n.children,a=n.className,s=n.disabled,l=n.disabledClassName,c=(n.focus,n.id),i=n.panelId,d=n.selected,u=n.selectedClassName,f=n.tabIndex,p=n.tabRef,b=v(n,["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabIndex","tabRef"]);return m.createElement("li",o({},b,{className:C(a,(e={},e[u]=d,e[l]=s,e)),ref:function(e){t.node=e,p&&p(e)},role:"tab",id:c,"aria-selected":d?"true":"false","aria-disabled":s?"true":"false","aria-controls":i,tabIndex:f||(d?"0":null)}),r)},t}(t.Component);x.defaultProps={className:"react-tabs__tab",disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},x.tabsRole="Tab";var P=function(e){function t(){return e.apply(this,arguments)||this}return y(t,e),t.prototype.render=function(){var e,t=this.props,n=t.children,r=t.className,a=t.forceRender,s=t.id,l=t.selected,c=t.selectedClassName,i=t.tabId,d=v(t,["children","className","forceRender","id","selected","selectedClassName","tabId"]);return m.createElement("div",o({},d,{className:C(r,(e={},e[c]=l,e)),role:"tabpanel",id:s,"aria-labelledby":i}),a||l?n:null)},t}(t.Component);P.defaultProps={className:"react-tabs__tab-panel",forceRender:!1,selectedClassName:"react-tabs__tab-panel--selected"},P.tabsRole="TabPanel",e.Tab=x,e.TabList=g,e.TabPanel=P,e.Tabs=I,e.resetIdCounter=function(){T=0},Object.defineProperty(e,"__esModule",{value:!0})}); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.ReactTabs={},e.React)}(this,function(e,t){"use strict";var n="default"in t?t.default:t;function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function s(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(a[n]=e[n]);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function l(e){return e.type&&"Tab"===e.type.tabsRole}function c(e){return e.type&&"TabPanel"===e.type.tabsRole}function i(e){return e.type&&"TabList"===e.type.tabsRole}function d(e,n){return t.Children.map(e,function(e){return null===e?null:function(e){return l(e)||i(e)||c(e)}(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children?t.cloneElement(e,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),a.forEach(function(t){r(e,t,n[t])})}return e}({},e.props,{children:d(e.props.children,n)})):e})}function u(e,n){return t.Children.forEach(e,function(e){null!==e&&(l(e)||c(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children&&(i(e)&&n(e),u(e.props.children,n)))})}var f,p,b=(function(e){!function(){var t={}.hasOwnProperty;function n(){for(var e=[],r=0;r<arguments.length;r++){var a=arguments[r];if(a){var s=typeof a;if("string"===s||"number"===s)e.push(a);else if(Array.isArray(a))e.push(n.apply(null,a));else if("object"===s)for(var o in a)t.call(a,o)&&a[o]&&e.push(o)}}return e.join(" ")}e.exports?e.exports=n:window.classNames=n}()}(f={exports:{}},f.exports),f.exports),h=0;function m(){return"react-tabs-"+h++}function y(e){var t=0;return u(e,function(e){l(e)&&t++}),t}function v(e){return"getAttribute"in e&&"tab"===e.getAttribute("role")}function C(e){return"true"===e.getAttribute("aria-disabled")}try{p=!("undefined"==typeof window||!window.document||!window.document.activeElement)}catch(e){p=!1}var T=function(e){function r(){for(var t,n,r=arguments.length,a=new Array(r),s=0;s<r;s++)a[s]=arguments[s];return t=n=e.call.apply(e,[this].concat(a))||this,n.tabNodes=[],n.handleKeyDown=function(e){if(n.isTabFromContainer(e.target)){var t=n.props.selectedIndex,r=!1,a=!1;32!==e.keyCode&&13!==e.keyCode||(r=!0,a=!1,n.handleClick(e)),37===e.keyCode||38===e.keyCode?(t=n.getPrevTab(t),r=!0,a=!0):39!==e.keyCode&&40!==e.keyCode||(t=n.getNextTab(t),r=!0,a=!0),r&&e.preventDefault(),a&&n.setSelected(t,e)}},n.handleClick=function(e){var t=e.target;do{if(n.isTabFromContainer(t)){if(C(t))return;var r=[].slice.call(t.parentNode.children).filter(v).indexOf(t);return void n.setSelected(r,e)}}while(null!==(t=t.parentNode))},t||function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(n)}s(r,e);var f=r.prototype;return f.setSelected=function(e,t){e<0||e>=this.getTabsCount()||this.props.onSelect(e,this.props.selectedIndex,t)},f.getNextTab=function(e){for(var t=this.getTabsCount(),n=e+1;n<t;n++)if(!C(this.getTab(n)))return n;for(var r=0;r<e;r++)if(!C(this.getTab(r)))return r;return e},f.getPrevTab=function(e){for(var t=e;t--;)if(!C(this.getTab(t)))return t;for(t=this.getTabsCount();t-- >e;)if(!C(this.getTab(t)))return t;return e},f.getTabsCount=function(){return y(this.props.children)},f.getPanelsCount=function(){return e=this.props.children,t=0,u(e,function(e){c(e)&&t++}),t;var e,t},f.getTab=function(e){return this.tabNodes["tabs-"+e]},f.getChildren=function(){var e=this,r=0,a=this.props,s=a.children,o=a.disabledTabClassName,u=a.focus,f=a.forceRenderTabPanel,b=a.selectedIndex,h=a.selectedTabClassName,y=a.selectedTabPanelClassName;this.tabIds=this.tabIds||[],this.panelIds=this.panelIds||[];for(var v=this.tabIds.length-this.getTabsCount();v++<0;)this.tabIds.push(m()),this.panelIds.push(m());return d(s,function(a){var s=a;if(i(a)){var m=0,v=!1;p&&(v=n.Children.toArray(a.props.children).filter(l).some(function(t,n){return document.activeElement===e.getTab(n)})),s=t.cloneElement(a,{children:d(a.props.children,function(n){var r="tabs-"+m,a=b===m,s={tabRef:function(t){e.tabNodes[r]=t},id:e.tabIds[m],panelId:e.panelIds[m],selected:a,focus:a&&(u||v)};return h&&(s.selectedClassName=h),o&&(s.disabledClassName=o),m++,t.cloneElement(n,s)})})}else if(c(a)){var C={id:e.panelIds[r],tabId:e.tabIds[r],selected:b===r};f&&(C.forceRender=f),y&&(C.selectedClassName=y),r++,s=t.cloneElement(a,C)}return s})},f.isTabFromContainer=function(e){if(!v(e))return!1;var t=e.parentElement;do{if(t===this.node)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},f.render=function(){var e=this,t=this.props,r=(t.children,t.className),s=(t.disabledTabClassName,t.domRef),l=(t.focus,t.forceRenderTabPanel,t.onSelect,t.selectedIndex,t.selectedTabClassName,t.selectedTabPanelClassName,o(t,["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName"]));return n.createElement("div",a({},l,{className:b(r),onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:function(t){e.node=t,s&&s(t)},"data-tabs":!0}),this.getChildren())},r}(t.Component);T.defaultProps={className:"react-tabs",focus:!1};var N=function(e){function t(n){var r;return(r=e.call(this,n)||this).handleSelected=function(e,n,a){if("function"!=typeof r.props.onSelect||!1!==r.props.onSelect(e,n,a)){var s={focus:"keydown"===a.type};t.inUncontrolledMode(r.props)&&(s.selectedIndex=e),r.setState(s)}},r.state=t.copyPropsToState(r.props,{},r.props.defaultFocus),r}s(t,e);var r=t.prototype;return r.componentWillReceiveProps=function(e){this.setState(function(n){return t.copyPropsToState(e,n)})},t.inUncontrolledMode=function(e){return null===e.selectedIndex},t.copyPropsToState=function(e,n,r){void 0===r&&(r=!1);var a={focus:r};if(t.inUncontrolledMode(e)){var s=y(e.children)-1,o=null;o=null!=n.selectedIndex?Math.min(n.selectedIndex,s):e.defaultIndex||0,a.selectedIndex=o}return a},r.render=function(){var e=this.props,t=e.children,r=(e.defaultIndex,e.defaultFocus,o(e,["children","defaultIndex","defaultFocus"]));return r.focus=this.state.focus,r.onSelect=this.handleSelected,null!=this.state.selectedIndex&&(r.selectedIndex=this.state.selectedIndex),n.createElement(T,r,t)},t}(t.Component);N.defaultProps={defaultFocus:!1,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null},N.tabsRole="Tabs";var I=function(e){function t(){return e.apply(this,arguments)||this}return s(t,e),t.prototype.render=function(){var e=this.props,t=e.children,r=e.className,s=o(e,["children","className"]);return n.createElement("ul",a({},s,{className:b(r),role:"tablist"}),t)},t}(t.Component);I.defaultProps={className:"react-tabs__tab-list"},I.tabsRole="TabList";var g=function(e){function t(){return e.apply(this,arguments)||this}s(t,e);var r=t.prototype;return r.componentDidMount=function(){this.checkFocus()},r.componentDidUpdate=function(){this.checkFocus()},r.checkFocus=function(){this.props.selected&&this.props.focus&&this.node.focus()},r.render=function(){var e,t=this,r=this.props,s=r.children,l=r.className,c=r.disabled,i=r.disabledClassName,d=(r.focus,r.id),u=r.panelId,f=r.selected,p=r.selectedClassName,h=r.tabIndex,m=r.tabRef,y=o(r,["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabIndex","tabRef"]);return n.createElement("li",a({},y,{className:b(l,(e={},e[p]=f,e[i]=c,e)),ref:function(e){t.node=e,m&&m(e)},role:"tab",id:d,"aria-selected":f?"true":"false","aria-disabled":c?"true":"false","aria-controls":u,tabIndex:h||(f?"0":null)}),s)},t}(t.Component);g.defaultProps={className:"react-tabs__tab",disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},g.tabsRole="Tab";var x=function(e){function t(){return e.apply(this,arguments)||this}return s(t,e),t.prototype.render=function(){var e,t=this.props,r=t.children,s=t.className,l=t.forceRender,c=t.id,i=t.selected,d=t.selectedClassName,u=t.tabId,f=o(t,["children","className","forceRender","id","selected","selectedClassName","tabId"]);return n.createElement("div",a({},f,{className:b(s,(e={},e[d]=i,e)),role:"tabpanel",id:c,"aria-labelledby":u}),l||i?r:null)},t}(t.Component);x.defaultProps={className:"react-tabs__tab-panel",forceRender:!1,selectedClassName:"react-tabs__tab-panel--selected"},x.tabsRole="TabPanel",e.Tabs=N,e.TabList=I,e.Tab=g,e.TabPanel=x,e.resetIdCounter=function(){h=0},Object.defineProperty(e,"__esModule",{value:!0})}); | ||
//# sourceMappingURL=react-tabs.production.min.js.map |
@@ -5,2 +5,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } | ||
@@ -101,3 +103,3 @@ | ||
} while ((node = node.parentNode) !== null); | ||
}, _temp) || _this; | ||
}, _temp) || _assertThisInitialized(_this); | ||
} | ||
@@ -104,0 +106,0 @@ |
@@ -1,4 +0,4 @@ | ||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
@@ -22,5 +22,5 @@ import { Children, cloneElement } from 'react'; | ||
if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
// Clone the child that has children and map them too | ||
return cloneElement(child, _extends({}, child.props, { | ||
return cloneElement(child, _objectSpread({}, child.props, { | ||
children: deepMap(child.props.children, callback) | ||
@@ -41,3 +41,3 @@ })); | ||
callback(child); | ||
} else if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
} else if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
if (isTabList(child)) callback(child); | ||
@@ -44,0 +44,0 @@ deepForEach(child.props.children, callback); |
@@ -1,3 +0,1 @@ | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
import { deepForEach } from '../helpers/childrenDeepMap'; | ||
@@ -14,3 +12,3 @@ import { isTab, isTabList, isTabPanel } from '../helpers/elementTypes'; | ||
if (isTabList(child)) { | ||
if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
deepForEach(child.props.children, function (listChild) { | ||
@@ -30,3 +28,3 @@ return listTabs.push(listChild); | ||
if (!tabListFound || listTabs.indexOf(child) === -1) { | ||
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component."); | ||
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components " + "have to be inside the 'TabList' component."); | ||
} | ||
@@ -41,3 +39,3 @@ | ||
if (!error && tabsCount !== panelsCount) { | ||
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`." + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'.")); | ||
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`. " + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'.")); | ||
} | ||
@@ -53,5 +51,5 @@ | ||
if (prop && typeof prop !== 'function') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `function`."); | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied " + ("to `" + componentName + "`, expected `function`.")); | ||
} else if (props.selectedIndex != null && prop == null) { | ||
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but its value is `undefined` or `null`.\n`onSelect` is required when `selectedIndex` is also set. Not doing so will make the tabs not do anything, as `selectedIndex` indicates that you want to handle the selected tab yourself.\nIf you only want to set the inital tab replace `selectedIndex` with `defaultIndex`."); | ||
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but " + "its value is `undefined` or `null`.\n" + "`onSelect` is required when `selectedIndex` is also set. Not doing so will " + "make the tabs not do anything, as `selectedIndex` indicates that you want to " + "handle the selected tab yourself.\n" + "If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`."); | ||
} | ||
@@ -67,5 +65,5 @@ | ||
if (prop != null && typeof prop !== 'number') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `number`."); | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied to " + ("`" + componentName + "`, expected `number`.")); | ||
} else if (props.defaultIndex != null && prop != null) { | ||
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` in `" + componentName + "`.\nEither remove `" + name + "` to let `" + componentName + "` handle the selected tab internally or remove `defaultIndex` to handle it yourself."); | ||
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` " + ("in `" + componentName + "`.\n") + ("Either remove `" + name + "` to let `" + componentName + "` handle the selected ") + "tab internally or remove `defaultIndex` to handle it yourself."); | ||
} | ||
@@ -72,0 +70,0 @@ |
@@ -1,6 +0,5 @@ | ||
import Tabs from './components/Tabs'; | ||
import TabList from './components/TabList'; | ||
import Tab from './components/Tab'; | ||
import TabPanel from './components/TabPanel'; | ||
import { reset as resetIdCounter } from './helpers/uuid'; | ||
export { Tab, TabList, TabPanel, Tabs, resetIdCounter }; | ||
export { default as Tabs } from './components/Tabs'; | ||
export { default as TabList } from './components/TabList'; | ||
export { default as Tab } from './components/Tab'; | ||
export { default as TabPanel } from './components/TabPanel'; | ||
export { reset as resetIdCounter } from './helpers/uuid'; |
@@ -12,3 +12,3 @@ "use strict"; | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
@@ -15,0 +15,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -12,3 +12,3 @@ "use strict"; | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
@@ -15,0 +15,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -12,3 +12,3 @@ "use strict"; | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
@@ -15,0 +15,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -16,3 +16,3 @@ "use strict"; | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
@@ -19,0 +19,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -22,3 +22,3 @@ "use strict"; | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
@@ -31,2 +31,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } | ||
@@ -119,3 +121,3 @@ | ||
} while ((node = node.parentNode) !== null); | ||
}, _temp) || _this; | ||
}, _temp) || _assertThisInitialized(_this); | ||
} | ||
@@ -122,0 +124,0 @@ |
@@ -11,5 +11,5 @@ "use strict"; | ||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
@@ -30,5 +30,5 @@ function isTabChild(child) { | ||
if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
// Clone the child that has children and map them too | ||
return (0, _react.cloneElement)(child, _extends({}, child.props, { | ||
return (0, _react.cloneElement)(child, _objectSpread({}, child.props, { | ||
children: deepMap(child.props.children, callback) | ||
@@ -50,3 +50,3 @@ })); | ||
callback(child); | ||
} else if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
} else if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
if ((0, _elementTypes.isTabList)(child)) callback(child); | ||
@@ -53,0 +53,0 @@ deepForEach(child.props.children, callback); |
@@ -12,4 +12,2 @@ "use strict"; | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function childrenPropType(props, propName, componentName) { | ||
@@ -24,3 +22,3 @@ var error; | ||
if ((0, _elementTypes.isTabList)(child)) { | ||
if (child.props && child.props.children && _typeof(child.props.children) === 'object') { | ||
if (child.props && child.props.children && typeof child.props.children === 'object') { | ||
(0, _childrenDeepMap.deepForEach)(child.props.children, function (listChild) { | ||
@@ -40,3 +38,3 @@ return listTabs.push(listChild); | ||
if (!tabListFound || listTabs.indexOf(child) === -1) { | ||
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component."); | ||
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components " + "have to be inside the 'TabList' component."); | ||
} | ||
@@ -51,3 +49,3 @@ | ||
if (!error && tabsCount !== panelsCount) { | ||
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`." + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'.")); | ||
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`. " + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'.")); | ||
} | ||
@@ -64,5 +62,5 @@ | ||
if (prop && typeof prop !== 'function') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `function`."); | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied " + ("to `" + componentName + "`, expected `function`.")); | ||
} else if (props.selectedIndex != null && prop == null) { | ||
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but its value is `undefined` or `null`.\n`onSelect` is required when `selectedIndex` is also set. Not doing so will make the tabs not do anything, as `selectedIndex` indicates that you want to handle the selected tab yourself.\nIf you only want to set the inital tab replace `selectedIndex` with `defaultIndex`."); | ||
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but " + "its value is `undefined` or `null`.\n" + "`onSelect` is required when `selectedIndex` is also set. Not doing so will " + "make the tabs not do anything, as `selectedIndex` indicates that you want to " + "handle the selected tab yourself.\n" + "If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`."); | ||
} | ||
@@ -79,5 +77,5 @@ | ||
if (prop != null && typeof prop !== 'number') { | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + _typeof(prop) + "` supplied to `" + componentName + "`, expected `number`."); | ||
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied to " + ("`" + componentName + "`, expected `number`.")); | ||
} else if (props.defaultIndex != null && prop != null) { | ||
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` in `" + componentName + "`.\nEither remove `" + name + "` to let `" + componentName + "` handle the selected tab internally or remove `defaultIndex` to handle it yourself."); | ||
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` " + ("in `" + componentName + "`.\n") + ("Either remove `" + name + "` to let `" + componentName + "` handle the selected ") + "tab internally or remove `defaultIndex` to handle it yourself."); | ||
} | ||
@@ -84,0 +82,0 @@ |
"use strict"; | ||
exports.__esModule = true; | ||
Object.defineProperty(exports, "Tabs", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Tabs.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "TabList", { | ||
enumerable: true, | ||
get: function get() { | ||
return _TabList.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "Tab", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Tab.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "TabPanel", { | ||
enumerable: true, | ||
get: function get() { | ||
return _TabPanel.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "resetIdCounter", { | ||
enumerable: true, | ||
get: function get() { | ||
return _uuid.reset; | ||
} | ||
}); | ||
exports.resetIdCounter = exports.TabPanel = exports.Tab = exports.TabList = exports.Tabs = void 0; | ||
var _Tabs = _interopRequireDefault(require("./components/Tabs")); | ||
exports.Tabs = _Tabs.default; | ||
var _TabList = _interopRequireDefault(require("./components/TabList")); | ||
exports.TabList = _TabList.default; | ||
var _Tab = _interopRequireDefault(require("./components/Tab")); | ||
exports.Tab = _Tab.default; | ||
var _TabPanel = _interopRequireDefault(require("./components/TabPanel")); | ||
exports.TabPanel = _TabPanel.default; | ||
var _uuid = require("./helpers/uuid"); | ||
exports.resetIdCounter = _uuid.reset; | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
{ | ||
"name": "react-tabs", | ||
"version": "2.2.1", | ||
"version": "2.2.2", | ||
"description": "An accessible and easy tab component for ReactJS", | ||
@@ -13,3 +13,3 @@ "main": "lib/index.js", | ||
"build:esm": "babel src/ --out-dir esm/ --ignore **/__tests__,**/__mocks__", | ||
"build:umd": "cross-env BABEL_TARGET=rollup yarn rollup -c", | ||
"build:umd": "rollup -c", | ||
"build": "npm-run-all clean:* --parallel build:*", | ||
@@ -26,3 +26,3 @@ "format": "eslint src --fix", | ||
"website:clean": "rimraf examples/dist", | ||
"website:build": "cross-env NODE_ENV=production webpack", | ||
"website:build": "cross-env BABEL_TARGET=examples NODE_ENV=production webpack", | ||
"website:redirect": "cp -R examples/src/example examples/dist" | ||
@@ -43,3 +43,4 @@ }, | ||
"lib", | ||
"style" | ||
"style", | ||
"src" | ||
], | ||
@@ -57,13 +58,15 @@ "homepage": "https://github.com/reactjs/react-tabs", | ||
"devDependencies": { | ||
"babel-cli": "^7.0.0-beta.2", | ||
"babel-core": "^7.0.0-beta.2", | ||
"@babel/cli": "^7.0.0-beta.40", | ||
"@babel/core": "^7.0.0-beta.40", | ||
"@babel/plugin-external-helpers": "^7.0.0-beta.40", | ||
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.40", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40", | ||
"@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.44", | ||
"@babel/preset-env": "^7.0.0-beta.40", | ||
"@babel/preset-react": "^7.0.0-beta.40", | ||
"babel-core": "^7.0.0-0", | ||
"babel-eslint": "^8.0.1", | ||
"babel-jest": "^21.3.0-beta.1", | ||
"babel-loader": "^7.1.2", | ||
"babel-plugin-external-helpers": "^7.0.0-beta.2", | ||
"babel-plugin-transform-class-properties": "^7.0.0-beta.2", | ||
"babel-plugin-transform-object-rest-spread": "^7.0.0-beta.2", | ||
"babel-jest": "^22.2.2", | ||
"babel-loader": "^8.0.0-0", | ||
"babel-plugin-transform-react-remove-prop-types": "^0.4.0", | ||
"babel-preset-env": "^2.0.0-beta.2", | ||
"babel-preset-react": "^7.0.0-beta.2", | ||
"conventional-github-releaser": "^2.0.0", | ||
@@ -81,11 +84,11 @@ "cross-env": "^5.0.0", | ||
"eslint-plugin-react": "^7.0.1", | ||
"extract-text-webpack-plugin": "^3.0.2", | ||
"hoist-non-react-statics": "^2.3.1", | ||
"html-loader": "^0.5.1", | ||
"html-webpack-plugin": "^2.30.1", | ||
"html-webpack-plugin": "^3.2.0", | ||
"husky": "^0.14.3", | ||
"jest": "^21.3.0-beta.1", | ||
"less": "^2.7.3", | ||
"jest": "^22.3.0", | ||
"less": "^3.0.1", | ||
"less-loader": "^4.0.5", | ||
"lint-staged": "^4.0.4", | ||
"lint-staged": "^7.0.4", | ||
"mini-css-extract-plugin": "^0.4.0", | ||
"npm-run-all": "^4.1.1", | ||
@@ -99,14 +102,14 @@ "prettier": "^1.2.2", | ||
"rimraf": "^2.5.2", | ||
"rollup": "^0.51.5", | ||
"rollup-plugin-babel": "^3.0.2", | ||
"rollup-plugin-commonjs": "^8.2.6", | ||
"rollup": "^0.58.0", | ||
"rollup-plugin-babel": "^4.0.0-beta.1", | ||
"rollup-plugin-commonjs": "^9.1.0", | ||
"rollup-plugin-ignore": "^1.0.3", | ||
"rollup-plugin-node-resolve": "^3.0.0", | ||
"rollup-plugin-replace": "^2.0.0", | ||
"rollup-plugin-uglify": "^2.0.1", | ||
"rollup-plugin-uglify": "^3.0.0", | ||
"standard-version": "^4.2.0", | ||
"style-loader": "^0.19.0", | ||
"uglifyjs-webpack-plugin": "^1.0.1", | ||
"webpack": "^3.6.0", | ||
"webpack-dev-server": "^2.9.4" | ||
"webpack": "^4.6.0", | ||
"webpack-cli": "^2.0.14", | ||
"webpack-dev-server": "^3.1.3" | ||
}, | ||
@@ -125,3 +128,3 @@ "dependencies": { | ||
"src/**/*.js": [ | ||
"eslint --fix", | ||
"yarn run eslint --fix", | ||
"git add" | ||
@@ -128,0 +131,0 @@ ] |
@@ -5,3 +5,3 @@ # react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs) [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs) | ||
https://reactcommunity.org/react-tabs/ | ||
https://reactjs.github.io/react-tabs/ | ||
@@ -264,2 +264,3 @@ > Supports React 0.14.9+, 15.3+ and 16+ | ||
constructor() { | ||
super(); | ||
this.state = { tabIndex: 0 }; | ||
@@ -328,8 +329,40 @@ } | ||
### Custom | ||
### Custom Style | ||
You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major. | ||
### Custom Components | ||
In case you want to create your own component wrapping the ones that the library provides, you have to set its `tabsRole`. This value is used inside react-tabs to check the role of a component inside `<Tabs />`. | ||
Possible values for tabsRole are: | ||
* Tab | ||
* TabPanel | ||
* TabList | ||
``` javascript | ||
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs'; | ||
const CustomTab = ({ children }) => ( | ||
<Tab> | ||
<h1>{children}</h1> | ||
</Tab> | ||
); | ||
CustomTab.tabsRole = 'Tab'; // Required field to use your custom Tab | ||
const App = () => ( | ||
<Tabs> | ||
<TabList> | ||
<CustomTab>Custom Tab 1</CustomTab> | ||
<CustomTab>Custom Tab 2</CustomTab> | ||
</TabList> | ||
<TabPanel>Panel 1</TabPanel> | ||
<TabPanel>Panel 2</TabPanel> | ||
</Tabs> | ||
); | ||
``` | ||
## License | ||
MIT |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
283194
58
3683
366
54
13