Inline images

This commit is contained in:
Yanbing Zhao 2018-02-07 10:05:39 +08:00
parent c57ec4d4c9
commit bc28cf1b4f
5 changed files with 14 additions and 10 deletions

View File

@ -49,7 +49,7 @@ const ByMaterialUI = props => (
) )
const HunluanImg = props => ( const HunluanImg = props => (
<img height='120px' src='http://www.mcbbs.net/uc_server/avatar.php?uid=3038&size=middle' /> <img height='120px' src={props.images['Hunluan']} />
) )
const Hunluan = props => ( const Hunluan = props => (
@ -57,7 +57,7 @@ const Hunluan = props => (
) )
const Rom718Img = props => ( const Rom718Img = props => (
<img height='120px' src='http://www.mcbbs.net/uc_server/avatar.php?uid=265600&size=middle' /> <img height='120px' src={props.images['Rom718']} />
) )
const Rom718 = props => ( const Rom718 = props => (
@ -78,7 +78,7 @@ class Watching extends React.Component {
if (this.state.showHunluan && this.state.showRom718) { if (this.state.showHunluan && this.state.showRom718) {
return ( return (
<div> <div>
<p><HunluanImg /><Rom718Img /></p> <p><HunluanImg images={this.props.images} /><Rom718Img images={this.props.images} /></p>
<HunluanAndRom718>Hunluan and Rom718 are watching you!</HunluanAndRom718> <HunluanAndRom718>Hunluan and Rom718 are watching you!</HunluanAndRom718>
</div> </div>
) )
@ -86,7 +86,7 @@ class Watching extends React.Component {
const onChange = () => this.setState({showHunluan: true, showRom718: true}) const onChange = () => this.setState({showHunluan: true, showRom718: true})
return ( return (
<div> <div>
<p><Rom718Img /></p> <p><Rom718Img images={this.props.images} /></p>
<Rom718><span onClick={onChange}>Rom718 is watching you!</span></Rom718> <Rom718><span onClick={onChange}>Rom718 is watching you!</span></Rom718>
</div> </div>
) )
@ -94,7 +94,7 @@ class Watching extends React.Component {
const onChange = () => this.setState({showHunluan: false, showRom718: true}) const onChange = () => this.setState({showHunluan: false, showRom718: true})
return ( return (
<div> <div>
<p><HunluanImg /></p> <p><HunluanImg images={this.props.images} /></p>
<Hunluan><span onClick={onChange}>Hunluan is watching you!</span></Hunluan> <Hunluan><span onClick={onChange}>Hunluan is watching you!</span></Hunluan>
</div> </div>
) )
@ -175,7 +175,7 @@ class Config extends React.Component {
<p> <p>
Powered by <ByReact /> and <ByMaterialUI />. Powered by <ByReact /> and <ByMaterialUI />.
</p> </p>
<Watching /> <Watching images={this.props.images} />
</Dialog> </Dialog>
</div> </div>
) )

View File

@ -8,12 +8,11 @@ import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
class Header extends React.Component { class Header extends React.Component {
constructor (props) { constructor (props) {
super(props) super(props)
console.log(this)
} }
render () { render () {
const configIcon = ( const configIcon = (
<Config configCollector={this.props.configCollector}> <Config configCollector={this.props.configCollector} images={this.props.images}>
<IconButton><MoreVertIcon color='rgb(255, 255, 255)'/></IconButton> <IconButton><MoreVertIcon color='rgb(255, 255, 255)'/></IconButton>
</Config> </Config>
) )

File diff suppressed because one or more lines are too long

View File

@ -43,4 +43,4 @@
"image": "[img]${href}[/img]", "image": "[img]${href}[/img]",
"text": "${text}" "text": "${text}"
} }
} }

View File

@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
import './index.css' import './index.css'
import './font/font.css' import './font/font.css'
import RendererConfig from './config/Renderer.json' import RendererConfig from './config/Renderer.json'
import ImageCollection from './config/ImageCollection.json'
import Marked from 'marked' import Marked from 'marked'
import Main from './component/Main' import Main from './component/Main'
@ -57,7 +58,7 @@ function onTransform (markdownText) {
function header () { function header () {
return ( return (
<MuiThemeProvider muiTheme={muiTheme}> <MuiThemeProvider muiTheme={muiTheme}>
<Header configCollector={collectConfig} /> <Header configCollector={collectConfig} images={ImageCollection} />
</MuiThemeProvider> </MuiThemeProvider>
) )
} }