Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 37c7b96

Browse files
author
Tommy Leunen
committed
Update code for react 16
1 parent 1993f7a commit 37c7b96

File tree

9 files changed

+127
-79
lines changed

9 files changed

+127
-79
lines changed

‎.editorconfig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[*]
2+
end_of_line = lf
3+
insert_final_newline = true
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2

‎.gitignore

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
# Mac crap
2-
.DS_Store
3-
4-
# NodeJS
5-
node_modules/
1+
/coverage
2+
/demo/dist
3+
/es
4+
/lib
5+
/node_modules
6+
/umd
7+
npm-debug.log*

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎demo/index.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎demo/src/index.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, {Component} from 'react'
2+
import {render} from 'react-dom'
3+
4+
import Gist from '../../src'
5+
6+
class Demo extends Component {
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = {
11+
id: 'bedde975e6e92a77e2321487ba45f313',
12+
file: null
13+
};
14+
}
15+
16+
componentDidMount() {
17+
// update the gist after 5 seconds
18+
setTimeout(() => {
19+
this.setState({id: '5995ea726914f280afb3', file: 'Chef-Dockerfile'});
20+
}, 5000);
21+
}
22+
23+
render() {
24+
return <div>
25+
<h1>React-Gist</h1>
26+
<p>The following gist will be updated in 5 seconds</p>
27+
<Gist {...this.state} />
28+
</div>
29+
}
30+
}
31+
32+
render(<Demo/>, document.querySelector('#demo'))

‎index.js

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎nwb.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
type: 'react-component',
3+
npm: {
4+
esModules: true,
5+
umd: false
6+
}
7+
}

‎package.json

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
"name": "react-gist",
33
"version": "1.1.0",
44
"description": "Github Gist React component",
5-
"main": "index.js",
5+
"main": "lib/index.js",
6+
"module": "es/index.js",
7+
"files": [
8+
"lib",
9+
"es"
10+
],
611
"repository": {
712
"type": "git",
813
"url": "git://github.com/tleunen/react-gist.git"
@@ -25,12 +30,22 @@
2530
},
2631
"license": "MIT",
2732
"dependencies": {
28-
"react": "^0.12.0"
33+
"prop-types": "^15.6.0"
2934
},
3035
"devDependencies": {
31-
"reactify": "^0.15.2"
36+
"nwb": "^0.20.0",
37+
"react": "^16.2.0",
38+
"react-dom": "^16.2.0"
39+
},
40+
"peerDependencies": {
41+
"react": "0.14.x || ^15.0.0-rc || ^16.0.0-rc"
3242
},
3343
"scripts": {
34-
"demo": "beefy demo/index.js --open -- -t reactify"
44+
"build": "nwb build-react-component",
45+
"clean": "nwb clean-module && nwb clean-demo",
46+
"start": "nwb serve-react-demo",
47+
"test": "nwb test-react",
48+
"test:coverage": "nwb test-react --coverage",
49+
"test:watch": "nwb test-react --server"
3550
}
3651
}

‎src/index.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
class Gist extends React.PureComponent {
5+
componentDidMount() {
6+
this._updateIframeContent();
7+
}
8+
9+
componentDidUpdate(prevProps, prevState) {
10+
this._updateIframeContent();
11+
}
12+
13+
_defineUrl() {
14+
const { id, file } = this.props;
15+
16+
const fileArg = file ? `?file=${file}` : '';
17+
18+
return `https://gist.github.com/${id}.js${fileArg}`;
19+
}
20+
21+
_updateIframeContent() {
22+
const { id } = this.props;
23+
24+
const iframe = this.iframeNode;
25+
26+
let doc = iframe.document;
27+
if (iframe.contentDocument) doc = iframe.contentDocument;
28+
else if (iframe.contentWindow) doc = iframe.contentWindow.document;
29+
30+
const gistLink = this._defineUrl()
31+
const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
32+
const styles = '<style>*{font-size:12px;}</style>';
33+
const resizeScript = `onload="parent.document.getElementById('gist-${id}').style.height=document.body.scrollHeight + 'px'"`;
34+
const iframeHtml = `<html><head><base target="_parent">${styles}</head><body ${resizeScript}>${gistScript}</body></html>`;
35+
36+
doc.open();
37+
doc.writeln(iframeHtml);
38+
doc.close();
39+
}
40+
41+
render() {
42+
const { id } = this.props;
43+
44+
return (
45+
<iframe
46+
ref={(n) => { this.iframeNode = n; }}
47+
width="100%"
48+
frameBorder={0}
49+
id={`gist-${id}`}
50+
/>
51+
);
52+
}
53+
}
54+
55+
export default Gist;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /