-
Notifications
You must be signed in to change notification settings - Fork 42
/
LinearProgressIndicatorCatalog.js
105 lines (93 loc) · 3.65 KB
/
LinearProgressIndicatorCatalog.js
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
import React, {Component} from 'react';
import ComponentCatalogPanel from './ComponentCatalogPanel.js';
import {MDCLinearProgress} from '@material/linear-progress/index';
import './styles/LinearProgressIndicatorCatalog.scss';
const LinearProgressCatalog = () => {
return (
<ComponentCatalogPanel
hero={<LinearProgressHero />}
title='Linear Progress Indicator'
description='Progress indicators display the length of a process or express an unspecified wait time.'
designLink='https://material.io/go/design-progress-indicators'
docsLink='https://material.io/components/web/catalog/linear-progress/'
sourceLink='https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress'
demos={<LinearProgressDemos />}
/>
);
}
export class LinearProgressHero extends Component {
initIndicator = (indicatorEl) => {
if (!indicatorEl) return;
this.indicator = new MDCLinearProgress(indicatorEl);
this.indicator.progress = 0.5;
}
componentWillUnmount() {
this.indicator.destroy();
}
render() {
return (
<div className='hero-linear-progress-indicator'>
<div role='progressbar' className='mdc-linear-progress' ref={this.initIndicator}>
<div className='mdc-linear-progress__buffering-dots'></div>
<div className='mdc-linear-progress__buffer'></div>
<div className='mdc-linear-progress__bar mdc-linear-progress__primary-bar'>
<span className='mdc-linear-progress__bar-inner'></span>
</div>
<div className='mdc-linear-progress__bar mdc-linear-progress__secondary-bar'>
<span className='mdc-linear-progress__bar-inner'></span>
</div>
</div>
</div>
);
}
}
class LinearProgressDemos extends Component {
indicators = [];
initIndicator = (indicatorEl) => {
if (!indicatorEl) return;
const indicator = new MDCLinearProgress(indicatorEl);
indicator.progress = 0.5;
this.indicators.push(indicator);
}
initBufferIndicator = (indicatorEl) => {
if (!indicatorEl) return;
const indicator = new MDCLinearProgress(indicatorEl);
indicator.progress = 0.5;
indicator.buffer = 0.75;
this.indicators.push(indicator);
}
componentWillUnmount() {
this.indicators.forEach(indicator => indicator.destroy());
}
renderLinearProgressVariant(title, variantClass, buffer) {
const initFunction = buffer ? this.initBufferIndicator : this.initIndicator;
return (
<div className='demo-linear-progress-indicator'>
<h3 className='mdc-typography--subtitle1'>{title}</h3>
<div role='progressbar'
className={`mdc-linear-progress ${variantClass}`}
ref={initFunction}>
<div className='mdc-linear-progress__buffering-dots'></div>
<div className='mdc-linear-progress__buffer'></div>
<div className='mdc-linear-progress__bar mdc-linear-progress__primary-bar'>
<span className='mdc-linear-progress__bar-inner'></span>
</div>
<div className='mdc-linear-progress__bar mdc-linear-progress__secondary-bar'>
<span className='mdc-linear-progress__bar-inner'></span>
</div>
</div>
</div>
);
}
render() {
return (
<div>
{this.renderLinearProgressVariant('Buffered', '', true)}
{this.renderLinearProgressVariant('Indeterminate', 'mdc-linear-progress--indeterminate')}
{this.renderLinearProgressVariant('Reversed', 'mdc-linear-progress--reversed')}
{this.renderLinearProgressVariant('Reversed Buffered', 'mdc-linear-progress--reversed', true)}
</div>
);
}
}
export default LinearProgressCatalog;