faster-react-tabs - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

components/panel-list/index.jsx

@@ -7,4 +7,4 @@ import React from 'react';
     sections: React.PropTypes.array.isRequired,
-    selectedIndex: React.PropTypes.number.isRequired,
-    jsEnabled: React.PropTypes.bool
+    selectedIndex: React.PropTypes.number,
+    JS: React.PropTypes.bool
   },
@@ -15,3 +15,3 @@
       selectedIndex: 0,
-      jsEnabled: true
+      JS: true
     };
@@ -21,3 +21,3 @@ },
   render () {
-    const { selectedIndex, sections, jsEnabled } = this.props;
+    const { sections, selectedIndex, JS } = this.props;
 
@@ -28,6 +28,8 @@ return (
           <Panel
-            key={`panel-${index}`}
-            id={section.id || index}
-            visible={jsEnabled ? selectedIndex === index : true}
-            title={jsEnabled ? null : section.title}>
+            key={`panel-${section.id || index}`}
+            id={section.id || `panel-${index}`}
+            isVisible={JS ? selectedIndex === index : true}>
+              {!JS
+                ? <span>section.title</span>
+                : null}
               {section.content}
@@ -34,0 +36,0 @@ </Panel>

components/panel/index.jsx

@@ -5,6 +5,8 @@ import React from 'react';
   propTypes: {
-    id: React.PropTypes.string.isRequired,
-    visible: React.PropTypes.bool,
-    title: React.PropTypes.string,
-    children: React.PropTypes.node
+    children: React.PropTypes.node.isRequired,
+    id: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number
+    ]).isRequired,
+    isVisible: React.PropTypes.bool
   },
@@ -14,3 +16,3 @@
     return {
-      visible: true
+      isVisible: true
     };
@@ -20,3 +22,3 @@ },
   render () {
-    const { id, title, visible, children } = this.props;
+    const { id, isVisible, children } = this.props;
 
@@ -26,6 +28,5 @@ return (
         role='tabpanel'
-        id={`panel-${id}`}
+        id={id}
         aria-labelledby={`tab-${id}`}
-        aria-hidden={!visible}>
-          {title}
+        aria-hidden={!isVisible}>
           {children}
@@ -32,0 +33,0 @@ </div>

components/tab-list/index.jsx

@@ -7,3 +7,2 @@ import React from 'react';
     sections: React.PropTypes.array.isRequired,
-    handleClick: React.PropTypes.func.isRequired,
     selectedIndex: React.PropTypes.number
@@ -19,3 +18,3 @@ },
   render () {
-    const { selectedIndex, handleClick, sections } = this.props;
+    const { sections, selectedIndex } = this.props;
 
@@ -26,7 +25,5 @@ return (
           <Tab
-            key={`tab-${index}`}
-            id={section.id || index}
-            selected={selectedIndex === index}
-            handleClick={handleClick}
-            index={index}>
+            key={`tab-${section.id || index}`}
+            id={'tab-' + (section.id || `panel-${index}`)}
+            isSelected={selectedIndex === index}>
               {section.title}
@@ -33,0 +30,0 @@ </Tab>

components/tab/index.jsx

@@ -6,4 +6,2 @@ import React from 'react';
     children: React.PropTypes.node.isRequired,
-    handleClick: React.PropTypes.func.isRequired,
-    index: React.PropTypes.number.isRequired,
     id: React.PropTypes.oneOfType([
@@ -13,3 +11,3 @@ React.PropTypes.string,
     ]).isRequired,
-    selected: React.PropTypes.bool
+    isSelected: React.PropTypes.bool
   },
@@ -19,3 +17,3 @@
     return {
-      selected: false
+      isSelected: false
     };
@@ -25,14 +23,16 @@ },
   render () {
-    const { id, selected, index, handleClick, children } = this.props;
+    const { isSelected, id, children } = this.props;
+    const href = id.split('tab-')[1];
 
     return (
       <li
-        key={`tab-${id}`}
-        id={`tab-${id}`}
-        role='tab'
-        aria-controls={`panel-${id}`}
-        aria-selected={selected}
-        onClick={() => handleClick(index)}
-        tabIndex={0}>
-        {children}
+        id={id}
+        role='presentation'>
+        <a
+          href={'#' + href}
+          role='tab'
+          aria-controls={href}
+          aria-selected={isSelected}>
+          {children}
+        </a>
       </li>
@@ -39,0 +39,0 @@ );

components/tabs/index.jsx

@@ -8,3 +8,3 @@ import React from 'react';
     sections: React.PropTypes.array.isRequired,
-    defaultIndex: React.PropTypes.number
+    initialIndex: React.PropTypes.number
   },
@@ -14,10 +14,13 @@
     return {
-      defaultIndex: 0
+      initialIndex: 0
     };
   },
 
+  targets: new Map(),
+  indexes: new Map(),
+
   getInitialState () {
     return {
-      jsEnabled: false,
-      selectedIndex: this.props.defaultIndex
+      JS: false,
+      selectedIndex: this.props.initialIndex
     };
@@ -27,5 +30,33 @@ },
   componentDidMount () {
-    this.setState({ jsEnabled: true });
+    this.setState({ JS: true });
+
+    // Set up initial hash/index mapping
+    this.props.sections.forEach((section, index) => {
+      let query = '#' + (section.id || `panel-${index}`);
+      this.targets.set(query, index);
+      this.indexes.set(index, query);
+    });
+
+    // Handle hash change
+    window.addEventListener('hashchange', this.handleHash, false);
+
+    // Handle initial index (if no hash already)
+    if (this.props.initialIndex && !window.location.hash) {
+      window.location.hash = this.indexes.get(this.props.initialIndex);
+    }
+
+    // Initial hash handling
+    this.handleHash();
   },
 
+  componentWillUnmount () {
+    window.removeEventListener('hashchange', this.handleHash, false);
+  },
+
+  handleHash () {
+    if (!window) return;
+
+    this.showSection(this.targets.get(window.location.hash) || 0);
+  },
+
   showSection (index) {
@@ -38,4 +69,4 @@ this.setState({ selectedIndex: index });
       <div>
-        {this.state.jsEnabled
-          ? <TabList {...this.props} {...this.state} handleClick={this.showSection} />
+        {this.state.JS
+          ? <TabList {...this.props} {...this.state} />
           : null}
@@ -42,0 +73,0 @@ <PanelList {...this.props} {...this.state} />

example/app.jsx

@@ -14,2 +14,3 @@ import React from 'react';
       {
+        id: 'foobar',
         title: 'Tab 2',
@@ -16,0 +17,0 @@ content: 'Tab 2 content'

package.json

 {
   "name": "faster-react-tabs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A faster React tab component that doesn't use DOM refs. Written in ES6, transpiles down to ES5",
@@ -14,3 +14,3 @@ "main": "components/tabs/index.jsx",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "semistandard src"
+    "lint": "semistandard components"
   },
@@ -17,0 +17,0 @@ "author": "edenspiekermann",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

447018

increased by0.18%

Lines of code

833

increased by3.09%

No dependency changes