From 81c7d67eae4f7d0ccfb341a15b4bc388a8e6b9bb Mon Sep 17 00:00:00 2001 From: Daniel Tschinder Date: Thu, 20 Aug 2015 11:49:29 +0200 Subject: [PATCH] Replace all tabs with spaces --- lib/components/Tab.js | 29 +++-- lib/components/TabList.js | 7 +- lib/components/TabPanel.js | 19 ++-- lib/components/Tabs.js | 213 ++++++++++++++++++------------------- 4 files changed, 132 insertions(+), 136 deletions(-) diff --git a/lib/components/Tab.js b/lib/components/Tab.js index 757efa4531..e16dd6d491 100644 --- a/lib/components/Tab.js +++ b/lib/components/Tab.js @@ -1,4 +1,3 @@ -/* eslint indent:0 */ import React, {PropTypes} from 'react'; function syncNodeAttributes(node, props) { @@ -15,7 +14,7 @@ function syncNodeAttributes(node, props) { } module.exports = React.createClass({ - displayName: 'Tab', + displayName: 'Tab', propTypes: { id: PropTypes.string, @@ -29,24 +28,24 @@ module.exports = React.createClass({ ]) }, - getDefaultProps() { + getDefaultProps() { return { - focus: false, - selected: false, - id: null, - panelId: null - }; - }, + focus: false, + selected: false, + id: null, + panelId: null + }; + }, - componentDidMount() { + componentDidMount() { syncNodeAttributes(this.getDOMNode(), this.props); - }, + }, - componentDidUpdate() { + componentDidUpdate() { syncNodeAttributes(this.getDOMNode(), this.props); - }, + }, - render() { + render() { return (
  • ); - } + } }); diff --git a/lib/components/TabList.js b/lib/components/TabList.js index 5c07b9c9c4..c0d8b4f78d 100644 --- a/lib/components/TabList.js +++ b/lib/components/TabList.js @@ -1,8 +1,7 @@ -/* eslint indent:0 */ import React, {PropTypes} from 'react'; module.exports = React.createClass({ - displayName: 'TabList', + displayName: 'TabList', propTypes: { children: PropTypes.oneOfType([ @@ -11,11 +10,11 @@ module.exports = React.createClass({ ]) }, - render() { + render() { return ( ); - } + } }); diff --git a/lib/components/TabPanel.js b/lib/components/TabPanel.js index 637f612b9a..1400a367b9 100644 --- a/lib/components/TabPanel.js +++ b/lib/components/TabPanel.js @@ -1,8 +1,7 @@ -/* eslint indent:0 */ import React, {PropTypes} from 'react'; module.exports = React.createClass({ - displayName: 'TabPanel', + displayName: 'TabPanel', propTypes: { selected: PropTypes.bool, @@ -19,15 +18,15 @@ module.exports = React.createClass({ forceRenderTabPanel: PropTypes.bool }, - getDefaultProps() { + getDefaultProps() { return { - selected: false, - id: null, - tabId: null - }; - }, + selected: false, + id: null, + tabId: null + }; + }, - render() { + render() { const children = (this.context.forceRenderTabPanel || this.props.selected) ? this.props.children : null; @@ -42,5 +41,5 @@ module.exports = React.createClass({ {children} ); - } + } }); diff --git a/lib/components/Tabs.js b/lib/components/Tabs.js index 592a1b5c20..a31b8cc3b3 100644 --- a/lib/components/Tabs.js +++ b/lib/components/Tabs.js @@ -1,4 +1,3 @@ -/* eslint indent:0 */ import React, {PropTypes} from 'react/addons'; import jss from 'js-stylesheet'; import uuid from '../helpers/uuid'; @@ -17,27 +16,27 @@ function isTabDisabled(node) { module.exports = React.createClass({ displayName: 'Tabs', - propTypes: { - selectedIndex: PropTypes.number, - onSelect: PropTypes.func, - focus: PropTypes.bool, + propTypes: { + selectedIndex: PropTypes.number, + onSelect: PropTypes.func, + focus: PropTypes.bool, children: childrenPropType, forceRenderTabPanel: PropTypes.bool - }, + }, childContextTypes: { forceRenderTabPanel: PropTypes.bool }, - getDefaultProps() { - return { - selectedIndex: -1, - focus: false, + getDefaultProps() { + return { + selectedIndex: -1, + focus: false, forceRenderTabPanel: false - }; - }, + }; + }, - getInitialState() { + getInitialState() { return this.copyPropsToState(this.props); }, @@ -47,72 +46,72 @@ module.exports = React.createClass({ }; }, - componentWillMount() { + componentWillMount() { jss(require('../helpers/styles.js')); - }, + }, componentWillReceiveProps(newProps) { this.setState(this.copyPropsToState(newProps)); }, - handleClick(e) { - let node = e.target; - do { - if (isTabNode(node)) { + handleClick(e) { + let node = e.target; + do { + if (isTabNode(node)) { if (isTabDisabled(node)) { return; } const index = [].slice.call(node.parentNode.children).indexOf(node); this.setSelected(index); - return; - } - } while ((node = node.parentNode) !== null); - }, - - handleKeyDown(e) { - if (isTabNode(e.target)) { - let index = this.state.selectedIndex; - let preventDefault = false; - - // Select next tab to the left - if (e.keyCode === 37 || e.keyCode === 38) { - index = this.getPrevTab(index); - preventDefault = true; - } - // Select next tab to the right + return; + } + } while ((node = node.parentNode) !== null); + }, + + handleKeyDown(e) { + if (isTabNode(e.target)) { + let index = this.state.selectedIndex; + let preventDefault = false; + + // Select next tab to the left + if (e.keyCode === 37 || e.keyCode === 38) { + index = this.getPrevTab(index); + preventDefault = true; + } + // Select next tab to the right /* eslint brace-style:0 */ - else if (e.keyCode === 39 || e.keyCode === 40) { + else if (e.keyCode === 39 || e.keyCode === 40) { index = this.getNextTab(index); - preventDefault = true; - } + preventDefault = true; + } - // This prevents scrollbars from moving around - if (preventDefault) { - e.preventDefault(); - } + // This prevents scrollbars from moving around + if (preventDefault) { + e.preventDefault(); + } - this.setSelected(index, true); - } - }, + this.setSelected(index, true); + } + }, - setSelected(index, focus) { - // Don't do anything if nothing has changed + setSelected(index, focus) { + // Don't do anything if nothing has changed if (index === this.state.selectedIndex) return; - // Check index boundary + // Check index boundary if (index < 0 || index >= this.getTabsCount()) return; - // Keep reference to last index for event handler + // Keep reference to last index for event handler const last = this.state.selectedIndex; - // Update selected index + // Update selected index this.setState({ selectedIndex: index, focus: focus === true }); - // Call change event handler + // Call change event handler if (typeof this.props.onSelect === 'function') { this.props.onSelect(index, last); } - }, + }, getNextTab(index) { const count = this.getTabsCount(); @@ -161,33 +160,33 @@ module.exports = React.createClass({ return index; }, - getTabsCount() { + getTabsCount() { return this.props.children && this.props.children[0] ? React.Children.count(this.props.children[0].props.children) : 0; - }, + }, - getPanelsCount() { + getPanelsCount() { return React.Children.count(this.props.children.slice(1)); - }, + }, - getTabList() { + getTabList() { return this.refs.tablist; - }, + }, - getTab(index) { + getTab(index) { return this.refs['tabs-' + index]; - }, + }, - getPanel(index) { + getPanel(index) { return this.refs['panels-' + index]; - }, + }, getChildren() { let index = 0; - let count = 0; - const children = this.props.children; - const state = this.state; + let count = 0; + const children = this.props.children; + const state = this.state; const tabIds = this.tabIds = this.tabIds || []; const panelIds = this.panelIds = this.panelIds || []; let diff = this.tabIds.length - this.getTabsCount(); @@ -201,58 +200,58 @@ module.exports = React.createClass({ } // Map children to dynamically setup refs - return React.Children.map(children, (child) => { - let result = null; + return React.Children.map(children, (child) => { + let result = null; - // Clone TabList and Tab components to have refs - if (count++ === 0) { + // Clone TabList and Tab components to have refs + if (count++ === 0) { // TODO try setting the uuid in the "constructor" for `Tab`/`TabPanel` - result = React.addons.cloneWithProps(child, { - ref: 'tablist', - children: React.Children.map(child.props.children, (tab) => { - const ref = 'tabs-' + index; + result = React.addons.cloneWithProps(child, { + ref: 'tablist', + children: React.Children.map(child.props.children, (tab) => { + const ref = 'tabs-' + index; const id = tabIds[index]; - const panelId = panelIds[index]; - const selected = state.selectedIndex === index; - const focus = selected && state.focus; + const panelId = panelIds[index]; + const selected = state.selectedIndex === index; + const focus = selected && state.focus; - index++; + index++; - return React.addons.cloneWithProps(tab, { - ref: ref, + return React.addons.cloneWithProps(tab, { + ref: ref, id: id, - panelId: panelId, - selected: selected, - focus: focus - }); - }) - }); - - // Reset index for panels - index = 0; - } - // Clone TabPanel components to have refs - else { - const ref = 'panels-' + index; + panelId: panelId, + selected: selected, + focus: focus + }); + }) + }); + + // Reset index for panels + index = 0; + } + // Clone TabPanel components to have refs + else { + const ref = 'panels-' + index; const id = panelIds[index]; - const tabId = tabIds[index]; - const selected = state.selectedIndex === index; + const tabId = tabIds[index]; + const selected = state.selectedIndex === index; - index++; + index++; - result = React.addons.cloneWithProps(child, { - ref: ref, + result = React.addons.cloneWithProps(child, { + ref: ref, id: id, - tabId: tabId, - selected: selected - }); - } + tabId: tabId, + selected: selected + }); + } - return result; - }); + return result; + }); }, - render() { + render() { // This fixes an issue with focus management. // // Ultimately, when focus is true, and an input has focus, @@ -272,7 +271,7 @@ module.exports = React.createClass({ }, 0); } - return ( + return (
    {this.getChildren()}
    - ); - }, + ); + }, // This is an anti-pattern, so sue me copyPropsToState(props) {