Skip to content

Instantly share code, notes, and snippets.

@BojoDimov
Created June 14, 2018 10:55
Show Gist options
  • Save BojoDimov/8dfa2e347d1abcf7ea4182ad1bf83c8b to your computer and use it in GitHub Desktop.
Save BojoDimov/8dfa2e347d1abcf7ea4182ad1bf83c8b to your computer and use it in GitHub Desktop.
Code snippet for react modal window
class App extends Component {
render() {
return (
<div>
<ActionButton onChange={(accepted) => accepted ? console.log('The user accepted') : console.log('The use declined')}>
Пробвай ме
</ActionButton>
</div>
);
}
}
export class ActionButton extends React.Component {
constructor(props) {
super(props);
this.state = {
opened: false
};
}
action(accepted) {
this.setState({ opened: false });
this.props.onChange(accepted);
}
render() {
return (
<div>
<span className="button" onClick={() => this.setState({ opened: true })}>{this.props.children}</span>
{this.state.opened ?
<ClickConfirm >
<div>Тази операция извършва промени по базата, моля потвърдете.</div>
<div>
<span className="button" onClick={() => this.action(true)}>Добре</span>
<span className="button" onClick={() => this.action(false)}>Отказ</span>
</div>
</ClickConfirm> : null}
</div>
);
}
}
export class ClickConfirm extends React.Component {
render() {
return (
<div className="backdrop">
<div className="m">
{this.props.children}
</div>
</div>
);
}
}
.backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(59, 59, 59, 0.5);
z-index: 1;
color: white;
animation: .1s ease-in fade-in;
}
.m {
opacity: 1;
width: 60%;
height: 6em;
margin: 2rem auto;
background-color: whitesmoke;
color: #222;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment