Search results

Repeat Button

The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state.

The following example explains about how to achieve Repeat Button in mouse and touch events.

Source
Preview
app.tsx
index.html
index.css
app.jsx
import { enableRipple, EventHandler } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

enableRipple(true);

class App extends React.Component<{}, {}> {
    public btn: ButtonComponent;
    private timeout: any = null;
    constructor(props: any) {
        super(props);
        this.mouseDownHandler = this.mouseDownHandler.bind(this);
        this.mouseUpHandler = this.mouseUpHandler.bind(this);
        this.clickEventHandler = this.clickEventHandler.bind(this);
        this.onCreated = this.onCreated.bind(this);
    }
    public onCreated(): void {
        const btnElem = this.btn.element as HTMLElement;
        btnElem.addEventListener("mousedown", this.mouseDownHandler);
        btnElem.addEventListener("mouseup", this.mouseUpHandler);
        btnElem.addEventListener("touchstart", this.mouseDownHandler);
        btnElem.addEventListener("touchend", this.mouseUpHandler);

    }
    public mouseDownHandler(): void {
        this.timeout = setInterval(() => this.processEvents(), 200);
    }
    public onClick(): void {
      (document.getElementById('eventlog') as HTMLElement).innerHTML = '';
    }

    public mouseUpHandler(): void {
        clearInterval(this.timeout);
    }

    public clickEventHandler(): void {
      EventHandler.trigger((document.getElementById('btn') as HTMLElement), "click");
      const span = document.createElement('span');
      span.innerHTML = 'Button click event triggered.<hr>';
      const log: HTMLElement = document.getElementById('eventlog') as HTMLElement;
      log.insertBefore(span, log.firstChild);
    }

    public render() {
        return (
            <div className='container'>
            <div className='btncontainer'>
               <ButtonComponent id='btn' ref={(scope) => { this.btn = scope as ButtonComponent; }} created={this.onCreated} content='Button' onClick = {this.clickEventHandler} />
            </div>
             <div className='event'>
              <table className='table' title ='Event Trace'>
            <tbody>
            <tr>
                <th>Event Trace</th>
            </tr>
            <tr>
                <td>
                    <div className="eventarea">
                        <span id="eventlog" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="evtbtn">
                        <ButtonComponent id="clr-btn" content='Clear' onClick = {this.onClick} />
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
            </div>
          </div>
        )
    }
    private processEvents(): void {
        const span = document.createElement('span');
        span.innerHTML = 'Button click event triggered.<hr>';
        const log = document.getElementById('eventlog') as HTMLElement;
        log.insertBefore(span, log.firstChild);
    }
}
ReactDOM.render(<App />, document.getElementById('button'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.btncontainer {
  float: left;
  width: 40%;
}

.event {
  float: right;
  width: 60%;
  border-left: 1px solid #D7D7D7;
  height:auto;
}

.eventarea {
  height: 250px;
  overflow: auto;
}

.evtbtn {
  padding:20px 0 0 20px;
}

#eventlog b {
  color: #388e3c;
}
    
hr {
   margin: 1px 10px 1px 0px;
   border-top: 1px solid #eee;
}

table {
  width:100%
}
import { enableRipple, EventHandler } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
enableRipple(true);
class App extends React.Component {
    constructor(props) {
        super(props);
        this.timeout = null;
        this.mouseDownHandler = this.mouseDownHandler.bind(this);
        this.mouseUpHandler = this.mouseUpHandler.bind(this);
        this.clickEventHandler = this.clickEventHandler.bind(this);
        this.onCreated = this.onCreated.bind(this);
    }
    onCreated() {
        const btnElem = this.btn.element;
        btnElem.addEventListener("mousedown", this.mouseDownHandler);
        btnElem.addEventListener("mouseup", this.mouseUpHandler);
        btnElem.addEventListener("touchstart", this.mouseDownHandler);
        btnElem.addEventListener("touchend", this.mouseUpHandler);
    }
    mouseDownHandler() {
        this.timeout = setInterval(() => this.processEvents(), 200);
    }
    onClick() {
        document.getElementById('eventlog').innerHTML = '';
    }
    mouseUpHandler() {
        clearInterval(this.timeout);
    }
    clickEventHandler() {
        EventHandler.trigger(document.getElementById('btn'), "click");
        const span = document.createElement('span');
        span.innerHTML = 'Button click event triggered.<hr>';
        const log = document.getElementById('eventlog');
        log.insertBefore(span, log.firstChild);
    }
    render() {
        return (<div className='container'>
            <div className='btncontainer'>
               <ButtonComponent id='btn' ref={(scope) => { this.btn = scope; }} created={this.onCreated} content='Button' onClick={this.clickEventHandler}/>
            </div>
             <div className='event'>
              <table className='table' title='Event Trace'>
            <tbody>
            <tr>
                <th>Event Trace</th>
            </tr>
            <tr>
                <td>
                    <div className="eventarea">
                        <span id="eventlog"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="evtbtn">
                        <ButtonComponent id="clr-btn" content='Clear' onClick={this.onClick}/>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
            </div>
          </div>);
    }
    processEvents() {
        const span = document.createElement('span');
        span.innerHTML = 'Button click event triggered.<hr>';
        const log = document.getElementById('eventlog');
        log.insertBefore(span, log.firstChild);
    }
}
ReactDOM.render(<App />, document.getElementById('button'));