Merge branch 'dev' of https://github.com/sanfilippopablo/react-toolbox into sanfilippopablo-dev
* 'dev' of https://github.com/sanfilippopablo/react-toolbox: Added custom sized circular ProgressBar to spec Added viewBox attr to svg element of circular ProgressBar to allow custom sizingold
commit
770f55aa5b
|
@ -62,7 +62,7 @@ class ProgressBar extends Component {
|
||||||
|
|
||||||
renderCircular () {
|
renderCircular () {
|
||||||
return (
|
return (
|
||||||
<svg className={this.props.theme.circle}>
|
<svg className={this.props.theme.circle} viewBox="0 0 60 60">
|
||||||
<circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
|
<circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
|
@ -73,7 +73,7 @@ var ProgressBar = function (_Component) {
|
||||||
value: function renderCircular() {
|
value: function renderCircular() {
|
||||||
return _react2.default.createElement(
|
return _react2.default.createElement(
|
||||||
'svg',
|
'svg',
|
||||||
{ className: this.props.theme.circle },
|
{ className: this.props.theme.circle, viewBox: '0 0 60 60' },
|
||||||
_react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
|
_react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ProgressBar from '../../components/progress_bar';
|
import ProgressBar from '../../components/progress_bar';
|
||||||
|
import style from '../style'
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
progress: 0,
|
progress: 0,
|
||||||
|
@ -47,6 +48,8 @@ class ProgressBarTest extends React.Component {
|
||||||
<ProgressBar mode='indeterminate'/>
|
<ProgressBar mode='indeterminate'/>
|
||||||
<p style={{margin: '10px auto'}}>Circular</p>
|
<p style={{margin: '10px auto'}}>Circular</p>
|
||||||
<ProgressBar type='circular' mode='indeterminate'/>
|
<ProgressBar type='circular' mode='indeterminate'/>
|
||||||
|
<p style={{margin: '10px auto'}}>Circular with custom size</p>
|
||||||
|
<ProgressBar type='circular' mode='indeterminate' className={style.customSizedProgress}/>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -139,3 +139,8 @@ $offset: 1.8 * $unit;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.customSizedProgress {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue