Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Commit ce87587

Browse files
ashwin-sureshkumarashwin-sureshkumar
authored
Merge branch 'master' into docs-transformation-buffertime
2 parents a0741c6 + 6a90120 commit ce87587

File tree

3 files changed

+283
-6
lines changed

3 files changed

+283
-6
lines changed

‎src/operator-docs/filtering/skipWhile.ts

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,60 @@
11
import { OperatorDoc } from '../operator.model';
22

33
export const skipWhile: OperatorDoc = {
4-
'name': 'skipWhile',
5-
'operatorType': 'filtering'
4+
name: 'skipWhile',
5+
operatorType: 'filtering',
6+
signature: `
7+
public skipWhile(predicate: Function): Observable
8+
`,
9+
parameters: [
10+
{
11+
name: 'predicate',
12+
type: 'Function',
13+
attribute: '',
14+
description: `A function to test each item emitted from the source Observable.`
15+
}
16+
],
17+
marbleUrl: 'http://reactivex.io/rxjs/img/skipWhile.png',
18+
shortDescription: {
19+
description: `
20+
Returns an Observable that skips all items emitted by the source Observable
21+
as long as a specified condition holds true, but emits all further source items as soon as the condition becomes false.
22+
`
23+
},
24+
examples: [
25+
{
26+
name: '',
27+
code: `
28+
import { range } from 'rxjs/observable/range';
29+
import { skipWhile } from 'rxjs/operators';
30+
31+
const source = range(1, 20);
32+
// skips all values until the first divisible by 7, then emit all values from then on
33+
const example = source.pipe(
34+
skipWhile(val => val % 7 !== 0)
35+
);
36+
const subscribe = example.subscribe(val => console.log(val));
37+
38+
// Ouput
39+
7
40+
8
41+
9
42+
10
43+
11
44+
12
45+
13
46+
14
47+
15
48+
16
49+
17
50+
18
51+
19
52+
20
53+
`,
54+
externalLink: {
55+
platform: 'JSBin',
56+
url: 'http://jsbin.com/qupucehelo/embed?js,console,output'
57+
}
58+
}
59+
]
660
};

‎src/operator-docs/filtering/takeWhile.ts

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,69 @@
11
import { OperatorDoc } from '../operator.model';
22

33
export const takeWhile: OperatorDoc = {
4-
'name': 'takeWhile',
5-
'operatorType': 'filtering'
4+
name: 'takeWhile',
5+
operatorType: 'filtering',
6+
signature:
7+
'public takeWhile(predicate: function(value: T, index: number): boolean): Observable',
8+
parameters: [
9+
{
10+
name: 'predicate',
11+
type: 'function(value: T, index: number): boolean',
12+
attribute: '',
13+
description: `
14+
A function that evaluates a value emitted by the source Observable and returns a boolean.
15+
Also takes the (zero-based) index as the second argument.
16+
`
17+
}
18+
],
19+
marbleUrl: 'http://reactivex.io/rxjs/img/takeWhile.png',
20+
shortDescription: {
21+
description: `
22+
Emits values emitted by the source Observable so long as each value satisfies the given predicate,
23+
and then completes as soon as this predicate is not satisfied.
24+
`
25+
},
26+
walkthrough: {
27+
description: `
28+
<p>
29+
<span class="markdown-code">takeWhile</span> subscribes and begins mirroring the source Observable.
30+
</p>
31+
<p>
32+
Each value emitted on the source is given to the predicate function which returns a boolean,
33+
representing a condition to be satisfied by the source values.
34+
</p>
35+
<p>
36+
The output Observable emits the source values until such time as the predicate returns false,
37+
at which point <span class="takeWhile"> stops mirroring the source Observable and completes the output Observable.
38+
</p>
39+
`
40+
},
41+
examples: [
42+
{
43+
name: `
44+
Emit click events only while the clientX property is greater than 100
45+
`,
46+
code: `
47+
import { fromEvent } from 'rxjs/observable/fromEvent';
48+
import { takeWhile } from 'rxjs/operators';
49+
50+
const clicks = fromEvent(document, 'click');
51+
const result = clicks.pipe(
52+
takeWhile(ev => ev.clientX > 100)
53+
);
54+
result.subscribe(x => console.log(x));
55+
56+
// clientX value is logged while its > 100
57+
529
58+
436
59+
214
60+
161
61+
`,
62+
externalLink: {
63+
platform: 'JSBin',
64+
url: 'http://jsbin.com/lasosinudi/embed?js,console,output'
65+
}
66+
}
67+
],
68+
relatedOperators: ['take', 'takeLast', 'takeUntil', 'skip']
669
};

‎src/operator-docs/transformation/bufferWhen.ts

Lines changed: 162 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,166 @@
11
import { OperatorDoc } from '../operator.model';
22

33
export const bufferWhen: OperatorDoc = {
4-
'name': 'bufferWhen',
5-
'operatorType': 'transformation'
4+
name: 'bufferWhen',
5+
operatorType: 'transformation',
6+
signature: `bufferWhen(closingSelector: () => Observable): Observable`,
7+
parameters: [
8+
{
9+
name: 'closingSelector',
10+
type: '() => Observable',
11+
attribute: '',
12+
description: `A function that takes no arguments and returns an Observable that signals buffer closure.`
13+
}
14+
],
15+
marbleUrl: 'http://reactivex.io/rxjs/img/bufferWhen.png',
16+
shortDescription: {
17+
description: `Buffers the source Observable values, using a factory function of closing Observables
18+
to determine when to close, emit, and reset the buffer.
19+
<span class="informal">Collects values from the past as an array.
20+
When it starts collecting values, it calls a function that returns an Observable that tells
21+
when to close the buffer and restart collecting.</span>`
22+
},
23+
walkthrough: {
24+
description: `
25+
Opens a buffer immediately, then closes the buffer when the observable returned by calling
26+
<span class="markdown-code">closingSelector</span> function emits a value.
27+
When it closes the buffer, it immediately opens a new buffer and repeats the process.`
28+
},
29+
examples: [
30+
{
31+
name: 'Emit an array of the last clicks every [1-5] random seconds',
32+
code: `
33+
import { fromEvent } from 'rxjs/observable/fromEvent';
34+
import { interval } from 'rxjs/observable/interval';
35+
import { bufferWhen } from 'rxjs/operators';
36+
37+
const clicks = fromEvent(document, 'click', e => ({x: e.clientX, y: e.clientY}));
38+
const buffered = clicks.pipe(
39+
bufferWhen(() => interval(1000 + Math.random() * 4000))
40+
)
41+
buffered.subscribe(x => console.log(x));
42+
43+
/*
44+
Example console output:
45+
46+
[]
47+
48+
[]
49+
50+
[[object Object] {
51+
x: 87,
52+
y: 222
53+
}, [object Object] {
54+
x: 87,
55+
y: 222
56+
}, [object Object] {
57+
x: 100,
58+
y: 228
59+
}, [object Object] {
60+
x: 151,
61+
y: 296
62+
}]
63+
64+
[[object Object] {
65+
x: 130,
66+
y: 368
67+
}, [object Object] {
68+
x: 132,
69+
y: 368
70+
}, [object Object] {
71+
x: 227,
72+
y: 212
73+
}, [object Object] {
74+
x: 189,
75+
y: 321
76+
}, [object Object] {
77+
x: 160,
78+
y: 411
79+
}, [object Object] {
80+
x: 160,
81+
y: 411
82+
}, [object Object] {
83+
x: 155,
84+
y: 366
85+
}]
86+
87+
[]
88+
*/
89+
`,
90+
externalLink: {
91+
platform: 'JSBin',
92+
url: 'http://jsbin.com/jemeron/9/embed?js,console,output'
93+
}
94+
},
95+
{
96+
name: 'Buffer all the click events until you press the Enter key',
97+
code: `
98+
import { fromEvent } from 'rxjs/observable/fromEvent';
99+
import { filter, bufferWhen } from 'rxjs/operators';
100+
101+
const enterKeys = fromEvent(document,'keyup')
102+
.pipe(filter(e => e.key === "Enter"));
103+
const clicks = fromEvent(document, 'click', e => ({x: e.clientX, y: e.clientY}));
104+
const buffered = clicks.pipe(
105+
bufferWhen(() => enterKeys)
106+
);
107+
buffered.subscribe(x => console.log(x));
108+
109+
/*
110+
Example console output:
111+
112+
[[object Object] {
113+
x: 186,
114+
y: 136
115+
}, [object Object] {
116+
x: 188,
117+
y: 136
118+
}, [object Object] {
119+
x: 189,
120+
y: 136
121+
}, [object Object] {
122+
x: 189,
123+
y: 136
124+
}, [object Object] {
125+
x: 192,
126+
y: 136
127+
}]
128+
129+
[[object Object] {
130+
x: 196,
131+
y: 135
132+
}, [object Object] {
133+
x: 196,
134+
y: 135
135+
}]
136+
137+
[[object Object] {
138+
x: 198,
139+
y: 125
140+
}]
141+
142+
[[object Object] {
143+
x: 196,
144+
y: 135
145+
}, [object Object] {
146+
x: 196,
147+
y: 135
148+
}]
149+
150+
[]
151+
*/
152+
`,
153+
externalLink: {
154+
platform: 'JSBin',
155+
url: 'http://jsbin.com/tuvesok/5/embed?js,console,output'
156+
}
157+
}
158+
],
159+
relatedOperators: [
160+
'buffer',
161+
'bufferCount',
162+
'bufferTime',
163+
'bufferToggle',
164+
'windowWhen'
165+
]
6166
};

0 commit comments

Comments
 (0)