react-apiembed - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/react-apiembed.js

@@ -1005,2 +1005,3 @@ (function (global, factory) {
 	  client: PropTypes.string,
+	  showClientInTab: PropTypes.boolean,
 	  prismLanguage: PropTypes.string.isRequired
@@ -1018,2 +1019,3 @@ };
 	    _this.clickHandler = _this.clickHandler.bind(_this);
+	    _this.keypressHandler = _this.keypressHandler.bind(_this);
 	    _this.state = {
@@ -1023,2 +1025,5 @@ activeTab: 0,
 	    };
+	    _this.tabRefs = Array.from({ length: _this.props.snippets.length }, function () {
+	      return React.createRef();
+	    });
 	    return _this;
@@ -1029,6 +1034,10 @@ }
 	    key: "componentDidUpdate",
-	    value: function componentDidUpdate(prevProps) {
+	    value: function componentDidUpdate(prevProps, prevState) {
 	      if (prevProps.har.url !== this.props.har.url) {
 	        this.setState({ active: this.getHarKey(this.props.har) + this.state.activeTab });
 	      }
+
+	      if (prevState.activeTab !== this.state.activeTab) {
+	        this.tabRefs[this.state.activeTab].current.focus();
+	      }
 	    }
@@ -1046,2 +1055,23 @@ }, {
 	  }, {
+	    key: "keypressHandler",
+	    value: function keypressHandler(key, index) {
+	      var targetIndex = index;
+	      var lastIndex = this.props.snippets.length - 1;
+
+	      if (key === "ArrowUp" || key === "ArrowLeft") {
+	        if (index === 0) {
+	          targetIndex = lastIndex;
+	        } else {
+	          targetIndex = index - 1;
+	        }
+	      } else if (key === "ArrowRight" || key === "ArrowDown") {
+	        if (index === lastIndex) {
+	          targetIndex = 0;
+	        } else {
+	          targetIndex = index + 1;
+	        }
+	      }
+	      this.setState({ active: this.getHarKey(this.props.har) + targetIndex, activeTab: targetIndex });
+	    }
+	  }, {
 	    key: "getHarKey",
@@ -1076,4 +1106,16 @@ value: function getHarKey(harObject) {
 	                {
-	                  role: "presentation",
+	                  role: "tab",
 	                  className: "tabs-component-tab" + (harKey + index == _this2.state.active ? " is-active" : ""),
+	                  "aria-controls": "" + (snippetKey + harKey),
+	                  onKeyUp: function onKeyUp(e) {
+	                    return _this2.keypressHandler(e.nativeEvent.code, index);
+	                  },
+	                  onClick: function onClick() {
+	                    return _this2.clickHandler(index);
+	                  },
+	                  "aria-selected": harKey + index == _this2.state.active,
+	                  tabIndex: harKey + index == _this2.state.active ? 0 : -1,
+	                  ref: function ref(el) {
+	                    return _this2.tabRefs[index].current = el;
+	                  },
 	                  key: index
@@ -1084,12 +1126,8 @@ },
 	                  {
-	                    "aria-controls": "" + (snippetKey + harKey),
-	                    "aria-selected": "true",
-	                    role: "tab",
+	                    role: "presentation",
 	                    className: "tabs-component-tab-a",
-	                    id: harKey + index,
-	                    onClick: function onClick() {
-	                      return _this2.clickHandler(index);
-	                    }
+	                    id: harKey + index
 	                  },
-	                  snippet.target
+	                  snippet.target,
+	                  snippet.client && snippet.showClientInTab && " - " + snippet.client
 	                )
@@ -1096,0 +1134,0 @@ );

package.json

 {
   "name": "react-apiembed",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React api embed component.",
@@ -5,0 +5,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

65191

increased by24.56%

Number of package files

4

increased by33.33%

Lines of code

1003

increased by3.72%

No dependency changes