mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-31 02:26:50 +10:00
Add interactive button example
This commit is contained in:
parent
37268107da
commit
04f5b2d024
1 changed files with 36 additions and 1 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
/* eslint-disable jsx-a11y/href-no-hash */
|
/* eslint-disable jsx-a11y/href-no-hash */
|
||||||
import React from 'react';
|
import React, { Component } from 'react';
|
||||||
import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
|
import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
|
||||||
|
|
||||||
import css from './Button.example.css';
|
import css from './Button.example.css';
|
||||||
|
|
@ -8,9 +8,44 @@ const preventDefault = e => {
|
||||||
e.preventDefault();
|
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 = () => {
|
const ButtonsComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<h3>Interactive button:</h3>
|
||||||
|
<InteractiveButton />
|
||||||
|
|
||||||
<h3>Default button:</h3>
|
<h3>Default button:</h3>
|
||||||
<Button>Click me</Button>
|
<Button>Click me</Button>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue