maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 12:43:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add interactive button example

Browse source
This commit is contained in:
Kimmo Puputti 2017-09-20 17:07:30 +03:00
parent 37268107da
commit 04f5b2d024
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/Button/Button.example.js
View file

@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/href-no-hash */
import React from 'react';
import React, { Component } from 'react';
import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
import css from './Button.example.css';
@ -8,9 +8,44 @@ const preventDefault = e => {
e.preventDefault();
};
class InteractiveButton extends Component {
constructor(props) {
super(props);
this.inProgressTimeoutId = null;
this.readyTimeoutId = null;
this.state = { inProgress: false, disabled: false, ready: false };
}
componentWillUnmount() {
window.clearTimeout(this.inProgressTimeoutId);
window.clearTimeout(this.readyTimeoutId);
}
render() {
const handleClick = () => {
this.setState({ inProgress: true, disabled: true });
this.inProgressTimeoutId = window.setTimeout(
() => {
this.setState({ inProgress: false, disabled: false, ready: true });
this.readyTimeoutId = window.setTimeout(
() => {
this.setState({ inProgress: false, disabled: false, ready: false });
},
2000
);
},
2000
);
};
return <Button {...this.state} onClick={handleClick}>Click me</Button>;
}
}
const ButtonsComponent = () => {
return (
<div>
<h3>Interactive button:</h3>
<InteractiveButton />
<h3>Default button:</h3>
<Button>Click me</Button>