Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
fix(linear-progress): Fix version number of linear progress indicator (
Browse files Browse the repository at this point in the history
  • Loading branch information
lynnmercier authored May 25, 2017
1 parent b10a624 commit 7942505
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 32 deletions.
2 changes: 1 addition & 1 deletion packages/material-components-web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@material/grid-list": "^0.2.2",
"@material/icon-toggle": "^0.1.11",
"@material/layout-grid": "^0.1.2",
"@material/linear-progress": "^0.1.0",
"@material/linear-progress": "^0.0.0",
"@material/list": "^0.2.8",
"@material/menu": "^0.2.6",
"@material/radio": "^0.2.4",
Expand Down
17 changes: 16 additions & 1 deletion packages/mdc-linear-progress/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ The MDC Linear Progress component is a spec-aligned linear progress indicator co

## Design & API Documentation

```html
<div role="progressbar" class="mdc-linear-progress">
<div class="mdc-linear-progress__buffering-dots"></div>
<div class="mdc-linear-progress__buffer"></div>
Expand All @@ -30,6 +31,7 @@ The MDC Linear Progress component is a spec-aligned linear progress indicator co
<span class="mdc-linear-progress__bar-inner"></span>
</div>
</div>
```

## Installation

Expand Down Expand Up @@ -64,13 +66,26 @@ The adapter for temporary drawers must provide the following functions, with cor
| `getBuffer() => Element` | Returns the buffer element. |
| `setTransform(el: Element, value: string) => void` | Sets the css transform property on the given element. |

### MDCLinearProgressFoundation API

MDC Linear Progress Foundation exposes the following methods:

| Method Signature | Description |
| --- | --- |
| `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
| `setProgress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1]. |
| `setBuffer(value: number) => void` | Sets the buffer bar to this value. Value should be between [0, 1]. |
| `setReverse(value: boolean) => void` | Reverses the direction of the linear progress indicator. |
| `open() => void` | Puts the component in the open state. |
| `close() => void` | Puts the component in the closed state. |

### MDCLinearProgress API

MDC Linear Progress exposes the following methods:

| Method Signature | Description |
| --- | --- |
| `set determinate(value: boolean) => void` | Toggles the components between the determinate and indeterminate state. |
| `set determinate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
| `set progress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1]. |
| `set buffer(value: number) => void` | Sets the buffer bar to this value. Value should be between [0, 1]. |
| `set reverse(value: boolean) => void` | Reverses the direction of the linear progress indicator. |
Expand Down
18 changes: 9 additions & 9 deletions packages/mdc-linear-progress/foundation.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,30 +48,30 @@ export default class MDCLinearProgressFoundation extends MDCFoundation {
this.reverse_ = this.adapter_.hasClass(cssClasses.REVERSED_CLASS);
}

set determinate(isDeterminate) {
setDeterminate(isDeterminate) {
this.determinate_ = isDeterminate;
if (this.determinate_) {
this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
} else {
this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
this.setScale(this.adapter_.getPrimaryBar(), 1);
this.setScale(this.adapter_.getBuffer(), 1);
this.setScale_(this.adapter_.getPrimaryBar(), 1);
this.setScale_(this.adapter_.getBuffer(), 1);
}
}

set progress(value) {
setProgress(value) {
if (this.determinate_) {
this.setScale(this.adapter_.getPrimaryBar(), value);
this.setScale_(this.adapter_.getPrimaryBar(), value);
}
}

set buffer(value) {
setBuffer(value) {
if (this.determinate_) {
this.setScale(this.adapter_.getBuffer(), value);
this.setScale_(this.adapter_.getBuffer(), value);
}
}

set reverse(isReversed) {
setReverse(isReversed) {
this.reverse_ = isReversed;
if (this.reverse_) {
this.adapter_.addClass(cssClasses.REVERSED_CLASS);
Expand All @@ -88,7 +88,7 @@ export default class MDCLinearProgressFoundation extends MDCFoundation {
this.adapter_.addClass(cssClasses.CLOSED_CLASS);
}

setScale(el, scaleValue) {
setScale_(el, scaleValue) {
const value = 'scaleX(' + scaleValue + ')';
transformStyleProperties.forEach((transformStyleProperty) => {
this.adapter_.setStyle(el, transformStyleProperty, value);
Expand Down
8 changes: 4 additions & 4 deletions packages/mdc-linear-progress/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,19 @@ export class MDCLinearProgress extends MDCComponent {
}

set determinate(value) {
this.foundation_.determinate = value;
this.foundation_.setDeterminate(value);
}

set progress(value) {
this.foundation_.progress = value;
this.foundation_.setProgress(value);
}

set buffer(value) {
this.foundation_.buffer = value;
this.foundation_.setBuffer(value);
}

set reverse(value) {
this.foundation_.reverse = value;
this.foundation_.setReverse(value);
}

open() {
Expand Down
5 changes: 4 additions & 1 deletion packages/mdc-linear-progress/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@material/linear-progress",
"description": "The Material Components for the web linear progress indicator component",
"version": "0.1.0",
"version": "0.0.0",
"license": "Apache-2.0",
"keywords": [
"material components",
Expand All @@ -16,5 +16,8 @@
"@material/animation": "^0.2.2",
"@material/base": "^0.1.3",
"@material/theme": "^0.1.5"
},
"publishConfig": {
"access": "public"
}
}
32 changes: 16 additions & 16 deletions test/unit/mdc-linear-progress/foundation.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,81 +41,81 @@ test('defaultAdapter returns a complete adapter implementation', () => {

const setupTest = () => setupFoundationTest(MDCLinearProgressFoundation);

test('#set indeterminate adds class and resets transforms', () => {
test('#setDeterminate adds class and resets transforms', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(false);
const primaryBar = {};
td.when(mockAdapter.getPrimaryBar()).thenReturn(primaryBar);
const buffer = {};
td.when(mockAdapter.getBuffer()).thenReturn(buffer);
foundation.init();
foundation.determinate = false;
foundation.setDeterminate(false);
td.verify(mockAdapter.addClass(cssClasses.INDETERMINATE_CLASS));
td.verify(mockAdapter.setStyle(primaryBar, 'transform', 'scaleX(1)'));
td.verify(mockAdapter.setStyle(buffer, 'transform', 'scaleX(1)'));
});

test('#set determinate removes class', () => {
test('#setDeterminate removes class', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(false);
foundation.init();
foundation.determinate = true;
foundation.setDeterminate(true);
td.verify(mockAdapter.removeClass(cssClasses.INDETERMINATE_CLASS));
});

test('#set progress sets transform', () => {
test('#setProgress sets transform', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(false);
const primaryBar = {};
td.when(mockAdapter.getPrimaryBar()).thenReturn(primaryBar);
foundation.init();
foundation.progress = 0.5;
foundation.setProgress(0.5);
td.verify(mockAdapter.setStyle(primaryBar, 'transform', 'scaleX(0.5)'));
});

test('#set progress on indeterminate does nothing', () => {
test('#setProgress on indeterminate does nothing', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(true);
const primaryBar = {};
td.when(mockAdapter.getPrimaryBar()).thenReturn(primaryBar);
foundation.init();
foundation.progress = 0.5;
foundation.setProgress(0.5);
td.verify(mockAdapter.setStyle(), {times: 0, ignoreExtraArgs: true});
});

test('#set buffer sets transform', () => {
test('#setBuffer sets transform', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(false);
const buffer = {};
td.when(mockAdapter.getBuffer()).thenReturn(buffer);
foundation.init();
foundation.buffer = 0.5;
foundation.setBuffer(0.5);
td.verify(mockAdapter.setStyle(buffer, 'transform', 'scaleX(0.5)'));
});

test('#set buffer on indeterminate does nothing', () => {
test('#setBuffer on indeterminate does nothing', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(true);
const buffer = {};
td.when(mockAdapter.getBuffer()).thenReturn(buffer);
foundation.init();
foundation.buffer = 0.5;
foundation.setBuffer(0.5);
td.verify(mockAdapter.setStyle(), {times: 0, ignoreExtraArgs: true});
});

test('#set reverse adds class', () => {
test('#setReverse adds class', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.REVERSED_CLASS)).thenReturn(false);
foundation.init();
foundation.reverse = true;
foundation.setReverse(true);
td.verify(mockAdapter.addClass(cssClasses.REVERSED_CLASS));
});

test('#set not reverse removes class', () => {
test('#setReverse removes class', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.hasClass(cssClasses.REVERSED_CLASS)).thenReturn(true);
foundation.init();
foundation.reverse = false;
foundation.setReverse(false);
td.verify(mockAdapter.removeClass(cssClasses.REVERSED_CLASS));
});

Expand Down

0 comments on commit 7942505

Please sign in to comment.