Support for selecting a single file in a multi-file gist. (#2)

ringods · tleunen · commit d13434c76605 · 2017-02-19T19:46:42.000-05:00
diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@ Get the id from the gist url `https://gist.github.com/{your_name}/{id}` and set
 
 ## Example
 
+Single-file gist:
+
 ```js
 var React = require('react');
 var Gist = require('react-gist');
@@ -18,11 +20,24 @@ React.render(
 );
 ```
 
+Multi-file gist:
+
+```js
+var React = require('react');
+var Gist = require('react-gist');
+
+React.render(
+    <Gist id='5995ea726914f280afb3' file='Chef-Dockerfile' />,
+    document.body
+);
+```
+
 ## Usage
 
 ### `<Gist id={string} />`
 
 - `id` {string} Id of the gist
+- `file` {string} Name of a specific file in a multi-file gist
 
 ## demo
 
diff --git a/demo/index.js b/demo/index.js
@@ -2,11 +2,11 @@ var React = require('react');
 var Gist = require('../index');
 
 var g = React.render(
-    <Gist id='5104372' />,
+    <Gist id='bedde975e6e92a77e2321487ba45f313' />,
     document.body
 );
 
 // update the gist after 5 seconds
 setTimeout(function() {
-    g.setProps({id: '4702818'});
+    g.setProps({id: '5995ea726914f280afb3', file: 'Chef-Dockerfile'});
 }, 5000);
diff --git a/index.js b/index.js
@@ -4,11 +4,12 @@ var React = require('react');
 
 var Gist = React.createClass({
     propTypes: {
-        id: React.PropTypes.string.isRequired
+        id: React.PropTypes.string.isRequired,
+        file: React.PropTypes.string
     },
 
     shouldComponentUpdate: function(nextProps) {
-        return this.props.id !== nextProps.id;
+        return (this.props.id !== nextProps.id) || (this.props.file != nextProps.file);
     },
 
     componentDidMount: function() {
@@ -18,14 +19,23 @@ var Gist = React.createClass({
         this._updateIframeContent();
     },
 
+    _calculateUrl: function() {
+        if (this.props.file) {
+            return 'https://gist.github.com/' + this.props.id + '.js?file=' + this.props.file
+        } else {
+            return 'https://gist.github.com/' + this.props.id + '.js'
+        }
+    },
+
     _updateIframeContent: function() {
         var iframe = this.refs.iframe.getDOMNode();
 
         var doc = iframe.document;
         if (iframe.contentDocument) doc = iframe.contentDocument;
         else if (iframe.contentWindow) doc = iframe.contentWindow.document;
 
-        var gistScript = '<script type="text/javascript" src="https://gist.github.com/' + this.props.id + '.js"></script>';
+        var gistLink = this._calculateUrl()
+        var gistScript = '<script type="text/javascript" src="' + gistLink + '"></script>';
         var styles = '<style>*{font-size:12px;}</style>';
         var resizeScript = 'onload="parent.document.getElementById(\'gist-' + this.props.id + '\').style.height=document.body.scrollHeight + \'px\'"';
         var iframeHtml = '<html><head><base target="_parent">'+styles+'</head><body '+resizeScript+'>'+gistScript+'</body></html>';
