React-samples/src/button/progress-button.tsx at master · SyncfusionExamples/React-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ProgressButtonComponent, SpinSettings, AnimationSettings } from '@syncfusion/ej2-react-splitbuttons';
import { SampleBase } from '../common/sample-base';
import './progress-button.css';

export class ProgressButton extends SampleBase<{}, {}> {

    public contractBtn: ProgressButtonComponent;
    public spinRight: SpinSettings = { position: 'Right' };
    public spinTop: SpinSettings = { position: 'Top' };
    public spinBottom: SpinSettings = { position: 'Bottom' };
    public spinCenter: SpinSettings = { position: 'Center' };
    public zoomOut: AnimationSettings = { effect: 'ZoomOut' };
    public slideLeft: AnimationSettings = { effect: 'SlideLeft' };
    public slideRight: AnimationSettings = { effect: 'SlideRight' };
    public zoomIn: AnimationSettings = { effect: 'ZoomIn' };
    public duration: number = 4000;

    public contractBegin() {
        this.contractBtn.element.classList.add('e-round');
    }

    public contractEnd() {
        this.contractBtn.element.classList.remove('e-round');
    }

    render() {
        return (
            <div className='control-pane'>
                <div className='control-section'>
                    <div className='progress-button-section'>
                        <div id='progress-button-control'>
                            <div className='row'>
                                <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Spin Left" isPrimary></ProgressButtonComponent>
                                    </div>

                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Spin Right" isPrimary spinSettings={this.spinRight}></ProgressButtonComponent>
                                    </div>
                                </div>

                                <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Spin Top" isPrimary spinSettings={this.spinTop}></ProgressButtonComponent>
                                    </div>

                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Spin Bottom" isPrimary spinSettings={this.spinBottom}></ProgressButtonComponent>
                                    </div>
                                </div>
                            </div>
                            <div className='row'>
                                <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent id="roundbtn" spinSettings={this.spinCenter} animationSettings={this.zoomOut} cssClass="e-round e-small e-success"
                                            iconCss="e-icons e-play-icon"></ProgressButtonComponent>
                                    </div>

                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent id="contract" content="Contract" ref={(scope) => { this.contractBtn = scope; }} enableProgress cssClass="e-success e-small" begin={this.contractBegin.bind(this)}
                                            end={this.contractEnd.bind(this)}></ProgressButtonComponent>
                                    </div>
                                </div>

                                <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Slide Left" enableProgress spinSettings={this.spinCenter} animationSettings={this.slideLeft}
                                            cssClass="e-flat e-success"></ProgressButtonComponent>
                                    </div>

                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Slide Right" enableProgress spinSettings={this.spinCenter} animationSettings={this.slideRight}
                                            cssClass="e-outline e-success"></ProgressButtonComponent>
                                    </div>
                                </div>
                            </div>
                            <div className='row'>
                                <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent id="zoomin" content="Zoom In" enableProgress spinSettings={this.spinCenter} animationSettings={this.zoomIn}
                                            cssClass="e-round-corner e-danger"></ProgressButtonComponent>
                                    </div>

                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Zoom Out" enableProgress spinSettings={this.spinCenter} animationSettings={this.zoomOut}
                                            cssClass="e-small e-danger"></ProgressButtonComponent>
                                    </div>
                                </div>

                                <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Download" enableProgress duration={this.duration} cssClass="e-hide-spinner e-progress-top"
                                            iconCss="e-icons e-download-icon"></ProgressButtonComponent>
                                    </div>

                                    <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                                        <ProgressButtonComponent content="Disabled" disabled></ProgressButtonComponent>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="action-description">
                    <p>This sample demonstrates the default functionalities of a progress button. Clicking that button will display a spinner
                        and a progress indicator.</p>
                </div>
                <div id="description">
                    <p>
                        The progress button visualizes the progression of an operation to indicates the user that a process is happening in the background.
                        The progress can be shown with graphics accompanied by a textual representation.
                    </p>
                    <p>
                        In this sample, the progress button contains the content, spinner, progress indicator, and a list of related features that
                        can be achieved using
                    <code>
                            <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/progress-button/api-progressButton.html#content">content,
                    </a>
                        </code>
                        <code>
                            <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/progress-button/api-progressButton.html#cssClass">cssClass,
                    </a>
                        </code>and
                    <code>
                            <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/progress-button/api-progressButton.html#enableProgress">enableProgress
                    </a>
                        </code>property.
                    </p>
                    <p>
                        More information about progress button can be found in this
                        <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/progress-button/getting-started.html">
                            documentation section</a>.
                    </p>
                </div>
            </div>
        )
    }
}