Add onCharacterTyped and onLineTyped callback options (#22)

This commit adds 2 new callback options to hook into when Typist is
typing a character and a line

It also refactors and cleans up the code a bit

Author: jstejada

README.md

@@ -79,6 +79,8 @@ Refer to [`examples/`](/examples) for more examples.
 * [`stdTypingDelay`](#stdTypingDelay)
 * [`startDelay`](#startDelay)
 * [`cursor`](#cursor)
+* [`onCharacterTyped`](#onCharacterTyped)
+* [`onLineTyped`](#onLineTyped)
 * [`onTypingDone`](#onTypingDone)
 * [`delayGenerator`](#delayGenerator)
 
@@ -142,6 +144,26 @@ animation is complete.
 * `hideWhenDoneDelay (int)`: delay in ms to be applied before hiding cursor when
 typing animation is complete.
 
+<a name="onCharacterTyped"></a>
+#### onCharacterTyped
+Function to be called every time a character is typed on the screen.
+
+```js
+function(character, charIdx) {
+  ...
+}
+```
+
+<a name="onLineTyped"></a>
+#### onLineTyped
+Function to be called every time a line is typed on the screen.
+
+```js
+function(line, lineIdx) {
+  ...
+}
+```
+
 <a name="onTypingDone"></a>
 #### onTypingDone
 Function to be called when typing animation is complete.

src/Typist.jsx

@@ -12,6 +12,8 @@ export default class Typist extends Component {
     stdTypingDelay: PropTypes.number,
     startDelay: PropTypes.number,
     cursor: PropTypes.object,
+    onCharacterTyped: PropTypes.func,
+    onLineTyped: PropTypes.func,
     onTypingDone: PropTypes.func,
     delayGenerator: PropTypes.func,
   }
@@ -22,6 +24,8 @@ export default class Typist extends Component {
     stdTypingDelay: 25,
     startDelay: 0,
     cursor: {},
+    onCharacterTyped: () => {},
+    onLineTyped: () => {},
     onTypingDone: () => {},
     delayGenerator: utils.gaussianRnd,
   }
@@ -91,27 +95,35 @@ export default class Typist extends Component {
   }
 
   typeAllLines(lines = this.linesToType) {
-    return utils.eachPromise(lines, (line, idx) => {
-      if (!this.mounted) { return Promise.resolve(); }
-      return new Promise((resolve) => {
-        this.setState({ text: this.state.text.concat(['']) }, () => {
-          this.typeLine(line, idx).then(resolve);
-        });
-      });
-    })
+    return utils.eachPromise(lines, this.typeLine)
     .then(() => this.onTypingDone());
   }
 
-  typeLine(line, lineIdx) {
-    return utils.eachPromise(line, (character, charIdx) => {
-      if (!this.mounted) { return Promise.resolve(); }
-      return new Promise((resolve) => {
-        const text = this.state.text.slice();
-        text[lineIdx] += character;
-        this.setState({ text }, () => {
-          const delay = this.delayGenerator(line, lineIdx, character, charIdx);
-          setTimeout(resolve, delay);
-        });
+  typeLine = (line, lineIdx) => {
+    if (!this.mounted) { return Promise.resolve(); }
+    const { onLineTyped } = this.props;
+
+    return new Promise((resolve, reject) => {
+      this.setState({ text: this.state.text.concat(['']) }, () => {
+        utils.eachPromise(line, this.typeCharacter, line, lineIdx)
+        .then(() => onLineTyped(line, lineIdx))
+        .then(resolve)
+        .catch(reject);
+      });
+    });
+  }
+
+  typeCharacter = (character, charIdx, line, lineIdx) => {
+    if (!this.mounted) { return Promise.resolve(); }
+    const { onCharacterTyped } = this.props;
+
+    return new Promise((resolve) => {
+      const text = this.state.text.slice();
+      text[lineIdx] += character;
+      this.setState({ text }, () => {
+        onCharacterTyped(character, charIdx);
+        const delay = this.delayGenerator(line, lineIdx, character, charIdx);
+        setTimeout(resolve, delay);
       });
     });
   }

src/utils.js

@@ -12,14 +12,11 @@ export function gaussianRnd(mean, std) {
   return Math.round((sum) * std) + mean;
 }
 
-export function eachPromise(arr, iterator) {
-  const { length } = arr;
-  return Array.from(arr).reduce((prev, current, idx) =>
-    prev.then(() =>
-      Promise.resolve(current)
-      .then((val) => iterator(val, idx, length))
-    )
-  , Promise.resolve());
+export function eachPromise(arr, iterator, ...extraArgs) {
+  const promiseReducer = (prev, current, idx) => (
+    prev.then(() => iterator(current, idx, ...extraArgs))
+  );
+  return Array.from(arr).reduce(promiseReducer, Promise.resolve());
 }
 
 export function exclude(obj, keys) {