hm-react-cli
Version:
Create a Huimei React project by module
91 lines (89 loc) • 2.85 kB
JavaScript
import { Component } from 'react-core/Component';
import { handleSuccess, handleFail } from '../../utils';
export default class Toast extends Component {
componentDidMount() {
handleSuccess({
errMsg: 'showToast:ok'
}, this.props.success, this.props.complete, this.props.resolve);
}
render() {
return (
<div>
{
React.appType === 'h5'?
<dialog open className='toast2019'>
<div className='icon'>
{
this.props.image ?
<img src={this.props.image} />
: this.props.icon
}
</div>
<div className='title'>
{this.props.title}
</div>
</dialog>
:
<div className='toast2019'>
<div className='icon'>
{
this.props.image ?
<img src={this.props.image} />
: this.props.icon
}
</div>
<div className='title'>
{this.props.title}
</div>
</div>
}
<style ref={(node)=>{
var other = `display: flex;
flex-direction: column;
position: fixed;
width: 120px;
height: 120px;
background-color: rgba(0, 0, 0, 0.4);
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
border-radius: 5px;`
var h5 = `display: flex;
flex-direction: column;
align-items:center;
width: 120px;
height: 120px;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
line-height:120px;
border:none;
border-radius: 5px;`
var context = React.appType === 'h5' ? h5: other
Object(node).textContent = `
.toast2019 {
${context}
}
.toast2019 .icon {
width: 90px;
height: 90px;
margin: 0 auto;
fill: #fff;
color: #fff;
text-align: center;
font-size: 30px;
line-height: 90px;
}
.toast2019 .title {
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
overflow: hidden;
} `
}}>
</style>
</div>);
}
}