Skip to content

Commit

Permalink
ProgressIndicator: convert to mergeStyles - part 1 (#4592)
Browse files Browse the repository at this point in the history
* Scaffold styles file

* Split to base file.

* Scaffold types file.

* Export base
  • Loading branch information
jordandrako authored Apr 18, 2018
1 parent 9cc47f5 commit 1b45279
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 75 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import * as React from 'react';
import {
BaseComponent,
css
} from '../../Utilities';
import { IProgressIndicatorProps } from './ProgressIndicator.types';
import * as stylesImport from './ProgressIndicator.scss';
const styles: any = stylesImport;

// if the percentComplete is near 0, don't animate it.
// This prevents animations on reset to 0 scenarios
const ZERO_THRESHOLD = 0.01;

export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps, {}> {
public static defaultProps = {
label: '',
description: '',
width: 180
};

constructor(props: IProgressIndicatorProps) {
super(props);

this._warnDeprecations({
title: 'label'
});

}

public render() {
const { title, description, className, ariaValueText } = this.props;
let { label, percentComplete } = this.props;

// Handle deprecated value.
if (title) {
label = title;
}

if (this.props.percentComplete !== undefined) {
percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
}

return (
<div className={ css('ms-ProgressIndicator', styles.root, className) }>
<div className={ css('ms-ProgressIndicator-itemName', styles.itemName) }>{ label }</div>
<div className={ css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }>
<div className={ css('ms-ProgressIndicator-progressTrack', styles.progressTrack) } />
<div
className={ css(
'ms-ProgressIndicator-progressBar',
styles.progressBar,
percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
percentComplete === undefined && styles.indeterminate
) }
style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
role='progressbar'
aria-valuemin={ 0 }
aria-valuemax={ 100 }
aria-valuenow={ percentComplete }
aria-valuetext={ ariaValueText }
/>
</div>
<div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
</div>
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { IStyle, keyframes } from '../../Styling';
import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types';

export const getStyles = (
props: IProgressIndicatorStyleProps
): IProgressIndicatorStyles => {
const {
className,
theme,
indeterminate,
smoothTransition,
} = props;

const { palette, semanticColors } = theme;

return ({
root: [
'ms-ProgressIndicator',
{},
className
],

itemName: [
'ms-ProgressIndicator-itemName',
{}
],

itemDescription: [
'ms-ProgressIndicator-itemDescription',
{}
],

itemProgress: [
'ms-ProgressIndicator-itemProgress',
{}
],

progressTrack: [
'ms-ProgressIndicator-progressTrack',
{}
],

progressBar: [
'ms-ProgressIndicator-progressBar',
{},
],
});
};
Original file line number Diff line number Diff line change
@@ -1,70 +1,16 @@
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */

import { styled } from '../../Utilities';
import {
BaseComponent,
css
} from '../../Utilities';
import { IProgressIndicatorProps } from './ProgressIndicator.types';
import * as stylesImport from './ProgressIndicator.scss';
const styles: any = stylesImport;

// if the percentComplete is near 0, don't animate it.
// This prevents animations on reset to 0 scenarios
const ZERO_THRESHOLD = 0.01;

export class ProgressIndicator extends BaseComponent<IProgressIndicatorProps, {}> {
public static defaultProps = {
label: '',
description: '',
width: 180
};

constructor(props: IProgressIndicatorProps) {
super(props);

this._warnDeprecations({
title: 'label'
});

}

public render() {
const { title, description, className, ariaValueText } = this.props;
let { label, percentComplete } = this.props;

// Handle deprecated value.
if (title) {
label = title;
}

if (this.props.percentComplete !== undefined) {
percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
}

return (
<div className={ css('ms-ProgressIndicator', styles.root, className) }>
<div className={ css('ms-ProgressIndicator-itemName', styles.itemName) }>{ label }</div>
<div className={ css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }>
<div className={ css('ms-ProgressIndicator-progressTrack', styles.progressTrack) } />
<div
className={ css(
'ms-ProgressIndicator-progressBar',
styles.progressBar,
percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
percentComplete === undefined && styles.indeterminate
) }
style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
role='progressbar'
aria-valuemin={ 0 }
aria-valuemax={ 100 }
aria-valuenow={ percentComplete }
aria-valuetext={ ariaValueText }
/>
</div>
<div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
</div>
);
}
}
IProgressIndicatorProps,
IProgressIndicatorStyleProps,
IProgressIndicatorStyles
} from './ProgressIndicator.types';
import { ProgressIndicatorBase } from './ProgressIndicator.base';
import { getStyles } from './ProgressIndicator.styles';

/**
* ProgressIndicator description
*/
export const ProgressIndicator = styled<IProgressIndicatorProps, IProgressIndicatorStyleProps, IProgressIndicatorStyles>(
ProgressIndicatorBase,
getStyles
);
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
export interface IProgressIndicator {
import * as React from 'react';
import { ProgressIndicatorBase } from './ProgressIndicator.base';
import { IStyle, ITheme } from '../../Styling';
import { IStyleFunction } from '../../Utilities';

export interface IProgressIndicator {
focus: () => void;
}

export interface IProgressIndicatorProps {
export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBase> {
/**
* Gets the component ref.
*/
componentRef?: (component: IProgressIndicatorProps | null) => void;

/**
* Optional callback to access the IProgressIndicator interface. Use this instead of ref for accessing
* the public methods and properties of the component.
* Call to provide customized styling that will layer on top of the variant rules.
*/
componentRef?: (component: IProgressIndicator | null) => void;
getStyles?: IStyleFunction<IProgressIndicatorStyleProps, IProgressIndicatorStyles>;

/**
* Class name to apply to the root in addition to ms-ProgressIndicator.
* Theme provided by High-Order Component.
*/
theme?: ITheme;

/**
* Additional css class to apply to the ProgressIndicator
* @defaultvalue undefined
*/
className?: string;

Expand Down Expand Up @@ -40,3 +55,29 @@ export interface IProgressIndicatorProps {
*/
title?: string;
}

export interface IProgressIndicatorStyleProps {
/**
* Theme provided by High-Order Component.
*/
theme: ITheme;

/**
* Accept custom classNames
*/
className?: string;
indeterminate?: boolean;
smoothTransition?: boolean;
}

export interface IProgressIndicatorStyles {
/**
* Style for the root element.
*/
root: IStyle;
itemName: IStyle;
itemDescription: IStyle;
itemProgress: IStyle;
progressTrack: IStyle;
progressBar: IStyle;
}
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './ProgressIndicator';
export * from './ProgressIndicator.base';
export * from './ProgressIndicator.types';

0 comments on commit 1b45279

Please sign in to comment.