├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .mversionrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── examples
    ├── index.html
    ├── index.js
    └── main.scss
├── karma.conf.js
├── package.json
├── src
    ├── Backspace.jsx
    ├── Cursor.jsx
    ├── Cursor.scss
    ├── Delay.jsx
    ├── Typist.jsx
    └── utils.js
├── test
    ├── Typist.spec.js
    ├── tests.bundle.js
    └── utils.spec.js
├── webpack.config.js
├── webpack.dist.config.js
├── webpack.standalone.config.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # http://editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | 
 9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 | 
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 | 
19 | [*.md]
20 | trim_trailing_whitespace = false
21 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "extends": "airbnb",
 4 |   "globals": {
 5 |     "__DEV__": true
 6 |   },
 7 |   "env": {
 8 |     "browser": true,
 9 |     "node": true,
10 |     "jasmine": true
11 |   },
12 |   "rules": {
13 |     "react/prop-types": [2, {"ignore": ["children"]}],
14 |     "eqeqeq": [2, "smart"],
15 |     "id-length": [0],
16 |     "no-loop-func": [0],
17 |     "new-cap": [2, {"capIsNew": false}],
18 |     "no-shadow": [1]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Automatically normalize line endings for all text-based files
 2 | # http://git-scm.com/docs/gitattributes#_end_of_line_conversion
 3 | * text=auto
 4 | 
 5 | # For the following file types, normalize line endings to LF on
 6 | # checkin and prevent conversion to CRLF when they are checked out
 7 | # (this is required in order to prevent newline related issues like,
 8 | # for example, after the build script is run)
 9 | .*      text eol=lf
10 | *.css   text eol=lf
11 | *.html  text eol=lf
12 | *.jade  text eol=lf
13 | *.js    text eol=lf
14 | *.json  text eol=lf
15 | *.less  text eol=lf
16 | *.md    text eol=lf
17 | *.sh    text eol=lf
18 | *.txt   text eol=lf
19 | *.xml   text eol=lf
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # node-waf configuration
18 | .lock-wscript
19 | 
20 | # Compiled binary addons (http://nodejs.org/api/addons.html)
21 | build/Release
22 | 
23 | # Dependency directory
24 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
25 | node_modules
26 | 
27 | tmp
28 | examples/dist
29 | dist
30 | 


--------------------------------------------------------------------------------
/.mversionrc:
--------------------------------------------------------------------------------
1 | {
2 |   "scripts": {
3 |     "precommit": "npm run dist && npm run standalone && git add dist",
4 |     "postcommit": "git push origin master --tags && npm publish",
5 |     "postupdate": "echo 'Updated to version %s in manifest files'"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 |   - iojs
 5 |   - '0.12'
 6 |   - '0.10'
 7 | matrix:
 8 |   allow_failures:
 9 |     - node_js: iojs
10 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # React Typist Changelog
 2 | 
 3 | ### v1.1.1 (05/29/17)
 4 | 
 5 | - Fixes
 6 |   + Updated dist code
 7 | 
 8 | - Development:
 9 |   + Added dist command to the contribution section
10 |   + Added prop-types to package dependencies
11 |   
12 |   
13 | ### v1.1.0 (03/26/17)
14 | 
15 | - Features:
16 |   + Add new options: `onCharacterTyped` and `onLineTyped` (#22)
17 | 
18 | - Fixes
19 |   + Fix text rendering issue in webkit/blink under certain widths (#13)
20 | 
21 | - Development:
22 |   + Remove bower package
23 | 
24 | 
25 | ### v1.0.3 (10/29/16)
26 | 
27 | - Fixes
28 |   + Component no longer sets `isDone` state if unmounted
29 | 
30 | 
31 | ### v1.0.1 (10/01/16)
32 | 
33 | - Fixes
34 |   + Move `promise-mock` to `devDependencies`
35 | 
36 | 
37 | ### v1.0.0 (10/01/16)
38 | 
39 | This version should have no breaking changes, but given that we've bumped a
40 | major version of React, we decided to  make this release opt-in, in case
41 | unexpected errors occur.
42 | 
43 | - Fixes:
44 |   + Can now use server rendering
45 |   + Component no longer sets state after being unmounted
46 | 
47 | - Development:
48 |   + Upgrade to React 15
49 |   + Upgrade to Babel 6, and other tooling upgrades
50 |   + Switch to promises to make code more concise and readable
51 | 
52 | 
53 | ### v0.3.0 (10/30/15)
54 | 
55 | - Features:
56 | 
57 |   + Typist can now render and animate any React element (not just strings).
58 |   + You can now pass new options for the cursor:
59 |     + `hideWhenDone`
60 |     + `hideWhenDoneDelay`
61 |   + Typist now supports a `delayGenerator` function to customize the delay
62 |     between keystrokes.
63 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 
11 | Source: http://opensource.org/licenses/MIT


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Typist [![npm](https://img.shields.io/npm/dm/react-typist.svg)]() [![npm](https://img.shields.io/npm/v/react-typist.svg)]()
  2 | React Component for making typing animations. Wrap `Typist` around your text or any
  3 | element tree to animate text inside the tree. Easily stylable and highly
  4 | configurable.
  5 | 
  6 | 
  7 | ## Install
  8 | ```shell
  9 | npm install react-typist --save
 10 | ```
 11 | 
 12 | 
 13 | ## Live Example
 14 | * <a href="//jstejada.github.io/react-typist" target="_blank">Basic example</a>
 15 | 
 16 | 
 17 | ## Basic Usage
 18 | #### CommonJS Module (using webpack or browserify):
 19 | ```jsx
 20 | import React, {Component} from 'react';
 21 | import Typist from 'react-typist';
 22 | 
 23 | export default class MyComponent extends Component {
 24 | 
 25 |   render() {
 26 |     return (
 27 |       <Typist>
 28 |         Animate this text.
 29 |       </Typist>
 30 |     );
 31 |   }
 32 | }
 33 | ```
 34 | 
 35 | #### UMD module:
 36 | Include `dist/standalone/Typist.js` into your build, using whatever build tool
 37 | or manually entering a `<script>` tag.
 38 | 
 39 | <a name="cssBlink"></a>
 40 | #### CSS
 41 | Typist contains a simple CSS file to make the cursor at the end of the text
 42 | blink. To include it, you must include
 43 | [`dist/Typist.css`](https://github.com/jstejada/react-typist/blob/69445a87314b52454f050045961ac32090739726/dist/Typist.css) in your build.
 44 | 
 45 | ## Dynamic content usage
 46 | Provide a unique `key` prop to `Typist` so that it would re-render every time your dynamic content is changed like that:
 47 | ```
 48 | import React, { useState } from "react";
 49 | import Typist from "react-typist";
 50 | 
 51 | export default const DynamicTypist = () => {
 52 |   const texts = ["first text", "second text", "third text"];
 53 |   const [currentTextCounter, setCurrentTextCounter] = useState(0);
 54 | 
 55 |   return <div onClick={() => if (currentTextCounter < texts.length - 1) { setCurrentTextCounter(currentTextCounter + 1) }}>
 56 |     <Typist key={currentTextCounter}>
 57 |       {texts[currentTextCounter]}
 58 |     </Typist>
 59 |   </div>
 60 | }
 61 | ```
 62 | 
 63 | Otherwise your dynamic content **won't** be reflected and re-typed.
 64 | 
 65 | ## Children
 66 | Typist will animate any text present in its descendents. Each text
 67 | node will be animated as it is encountered in depth-first traversal of the
 68 | `children` tree, one after the other.
 69 | 
 70 | Typist can take as `children` any valid node that can be rendered in a React
 71 | application, i.e. it could be undefined, null, a boolean, a number, a string,
 72 | a React element, or an array of any of those types recursively.
 73 | 
 74 | This also implies that you are free to pass any props to the `children` of Typist,
 75 | including your own css classes (as in any React application). This allows you to
 76 | easily style your text inside Typist:
 77 | 
 78 | ```jsx
 79 | <Typist>
 80 |   <span className="my-custom-class"> First Sentence </span>
 81 |   <br />
 82 |   <div className="container">
 83 |     <p> This will be animated after first sentence is complete </p>
 84 |     <MyComponent prop1="val1"> More text. </MyComponent>
 85 |   </div>
 86 |   Final sentence
 87 | </Typist>
 88 | ```
 89 | 
 90 | Refer to [`examples/`](/examples) for more examples.
 91 | 
 92 | 
 93 | ## Typist.Delay
 94 | In order to insert delays into your animation, you can use the `Typist.Delay`
 95 | Component:
 96 | 
 97 | ```jsx
 98 | <Typist>
 99 |   <p> First Sentence </p>
100 |   <Typist.Delay ms={500} />
101 |   <br />
102 |   This won't be animated until 500ms after the first sentenced is rendered
103 | </Typist>
104 | ```
105 | 
106 | Refer to [`examples/`](/examples) for more examples.
107 | 
108 | ### Typist.Delay Props
109 | * [`ms`](#ms)
110 | 
111 | <a name="ms"></a>
112 | #### ms
113 | *Required*
114 | 
115 | Milliseconds to apply for the delay
116 | 
117 | 
118 | ## Typist.Backspace
119 | 
120 | Typist also supports backspace animations via the `Typist.Backspace` Component:
121 | 
122 | ```jsx
123 | <Typist>
124 |   <span> First Sentence </span>
125 |   <Typist.Backspace count={8} delay={200} />
126 |   <span> Phrase </span>
127 | </Typist>
128 | ```
129 | 
130 | Refer to [`examples/`](/examples) for more examples.
131 | 
132 | ### Typist.Backspace Props
133 | * [`count`](#count)
134 | * [`delay`](#delay)
135 | 
136 | <a name="count"></a>
137 | #### count
138 | *Default*: `1`
139 | 
140 | Number of characters to backspace
141 | 
142 | <a name="delay"></a>
143 | #### delay
144 | *Default*: `0`
145 | 
146 | Delay in milliseconds before the backspace animation starts
147 | 
148 | 
149 | ## Typist Props
150 | * [`className`](#className)
151 | * [`avgTypingDelay`](#avgTypingDelay)
152 | * [`stdTypingDelay`](#stdTypingDelay)
153 | * [`startDelay`](#startDelay)
154 | * [`cursor`](#cursor)
155 | * [`onCharacterTyped`](#onCharacterTyped)
156 | * [`onLineTyped`](#onLineTyped)
157 | * [`onTypingDone`](#onTypingDone)
158 | * [`delayGenerator`](#delayGenerator)
159 | 
160 | <a name="className"></a>
161 | #### className
162 | *Default*: `null`
163 | 
164 | CSS class name to be applied to the Typist root node. Typist will always
165 | have the CSS class `Typist` applied to it.
166 | 
167 | ```jsx
168 | <Typist className="MyTypist"> Animate this text. </Typist>
169 | ```
170 |  will produce:
171 | ```jsx
172 | <div class="Typist MyTypist"> Animate this text. </div>
173 | ```
174 | 
175 | <a name="avgTypingDelay"></a>
176 | #### avgTypingDelay
177 | *Default*: `70`
178 | 
179 | Average typing delay in milliseconds between every keystroke of the typing
180 | animation **(Less is faster)**. The distribution of the typing delays between
181 | strokes is not uniform, to make the animation more human like.
182 | 
183 | <a name="stdTypingDelay"></a>
184 | #### stdTypingDelay
185 | *Default*: `25`
186 | 
187 | Standard deviation of typing delay between keystrokes of the typing animation.
188 | **(Less means more uniform, i.e. less variance between values)**.
189 | 
190 | <a name="startDelay"></a>
191 | #### startDelay
192 | *Default*: `0`
193 | 
194 | Milliseconds before typing animation begins.
195 | 
196 | <a name="cursor"></a>
197 | #### cursor
198 | *Default*:
199 | ```js
200 | {
201 |   show: true,
202 |   blink: true,
203 |   element: '|',
204 |   hideWhenDone: false,
205 |   hideWhenDoneDelay: 1000,
206 | }
207 | ```
208 | 
209 | Object containing options for cursor:
210 | 
211 | * `show (bool)`: whether to display cursor at the end of text.
212 | * `blink (bool)`: whether to add blinking animation to cursor. You must also
213 | include the [css](#cssBlink)
214 | * `element (string)`: character to use for the cursor
215 | * `hideWhenDone (bool)`: whether the cursor should be hidden after typing
216 | animation is complete.
217 | * `hideWhenDoneDelay (int)`: delay in ms to be applied before hiding cursor when
218 | typing animation is complete.
219 | 
220 | <a name="onCharacterTyped"></a>
221 | #### onCharacterTyped
222 | Function to be called every time a character is typed on the screen.
223 | 
224 | ```js
225 | function(character, charIdx) {
226 |   ...
227 | }
228 | ```
229 | 
230 | <a name="onLineTyped"></a>
231 | #### onLineTyped
232 | Function to be called every time a line is typed on the screen.
233 | 
234 | ```js
235 | function(line, lineIdx) {
236 |   ...
237 | }
238 | ```
239 | 
240 | <a name="onTypingDone"></a>
241 | #### onTypingDone
242 | Function to be called when typing animation is complete.
243 | 
244 | <a name="delayGenerator"></a>
245 | #### delayGenerator
246 | *Default*: [`gaussianDistribution`][normal-dist]
247 | 
248 | Function to be called to generate the typing delay (in ms) for every keystroke
249 | of the animation. Every time this function is called it should return a value
250 | in milliseconds. This function can be used to provide your own typing delay
251 | distribution, for example uniform (e.g. always 100ms), or a deterministic
252 | distribution.
253 | 
254 | However, if you wish to insert delays at specific points in the animation,
255 | consider using the [`Delay`](#typistdelay) Component instead.
256 | 
257 | ```js
258 | function(mean, std, current = {line, lineIdx, character, charIdx, defDelayGenerator}) {
259 |   ...
260 | }
261 | ```
262 | 
263 | * `mean (number)`: Average typing delay. Will be the value of [`props.avgTypingDelay`](#avgTypingDelay)
264 | * `std (number)`: Standard deviation of typing delay. Will be the value of [`props.stdTypingDelay`](#stdTypingDelay)
265 | * `current.line (string)`: Value of line of text (Typist child) currently being animated.
266 | * `current.lineIdx (int)`: Index of line of text (Typist child) currently being animated.
267 | * `current.character (string)`: Value of character that was just rendered.
268 | * `current.charIdx (int)`: Index of character that was just rendered.
269 | * `current.defDelayGenerator (function)`: Reference to default delay
270 | generator function to be able to fall back to.
271 | 
272 | 
273 | This function can also be used to introduce delays at specific points in the
274 | typing animation.
275 | 
276 | e.g.:
277 | ```js
278 | function(mean, std, {line, lineIdx, charIdx, defDelayGenerator}) {
279 |   // Delay the animation for 2 seconds at the last character of the first line
280 |   if (lineIdx === 0 && charIdx === line.length - 1) {
281 |     return 2000;
282 |   }
283 |   return defDelayGenerator();
284 | }
285 | ```
286 | 
287 | 
288 | ## Troubleshooting
289 | ### Internet Explorer Compatibility
290 | React Typist makes use of Array.from() which is not supported in IE.
291 | 
292 | `SCRIPT438: Object doesn't support property or method 'from' Typist.js (449,1)`
293 | 
294 | To resolve this, [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) can be added to your project.
295 | 
296 |  ```shell
297 |  npm install --save babel-polyfill
298 |  ```
299 | 
300 | You can now include this module in your app at the entry point.
301 | 
302 | ES6:
303 | ```js
304 | import 'babel-polyfill'
305 | ```
306 | 
307 | CommonJS:
308 | ```js
309 | require('babel-polyfill')
310 | ```
311 | 
312 | ## Development
313 | 
314 | To build the examples and start the dev server, run:
315 | ```shell
316 | npm start
317 | ```
318 | Now, open `http://localhost:8080` and start hacking!
319 | 
320 | 
321 | If you just want to build the examples, run:
322 | ```shell
323 | npm run examples
324 | ```
325 | 
326 | 
327 | ## Running Tests
328 | 
329 | ```shell
330 | npm test
331 | ```
332 | 
333 | 
334 | ## License
335 | 
336 | [MIT](http://mit-license.org)
337 | 
338 | [normal-dist]: https://en.wikipedia.org/wiki/Normal_distribution
339 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6 |   <head>
 7 |     <meta charset="utf-8">
 8 |     <title>Typist</title>
 9 |     <meta name="description" content="">
10 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
11 | 
12 |     <link rel="stylesheet" href="/dist/main.css" type="text/css" charset="utf-8">
13 |   </head>
14 |   <body>
15 |     <!--[if lt IE 10]>
16 |       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
17 |     <![endif]-->
18 |     <a target="_blank" href="https://github.com/jstejada/react-typist"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
19 |     <div id="content"></div>
20 | 
21 |     <script src="/dist/index.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import Typist from 'react-typist';
 4 | import './main.scss';
 5 | 
 6 | class TypistExample extends React.Component {
 7 |   state = {
 8 |     renderMsg: false,
 9 |   }
10 | 
11 |   onHeaderTyped = () => {
12 |     this.setState({ renderMsg: true });
13 |   }
14 | 
15 |   render() {
16 |     const docs = '//github.com/jstejada/react-typist';
17 |     return (
18 |       <div className="TypistExample">
19 |         <Typist
20 |           className="TypistExample-header"
21 |           avgTypingDelay={40}
22 |           startDelay={2000}
23 |           onTypingDone={this.onHeaderTyped}
24 |         >
25 |           <a href={docs}>React Typist</a>
26 |         </Typist>
27 |         <div className="TypistExample-content">
28 |           {this.state.renderMsg ? (
29 |             <Typist
30 |               className="TypistExample-message"
31 |               cursor={{ hideWhenDone: true }}
32 |             >
33 |               * Easy to style
34 |               <Typist.Delay ms={1250} />
35 |               <br />
36 |               * Easy to customize
37 |               <Typist.Delay ms={1250} />
38 |               <br />
39 |               * Easy to use backs<Typist.Delay ms={500} />pace
40 |               <Typist.Backspace count={5} delay={1000} />
41 |               <Typist.Delay ms={750} />
42 |               space
43 |               <Typist.Delay ms={1250} />
44 |               <br />
45 |               <span>* <a href={docs} className="flash">docs</a></span>
46 |               <br />
47 |               {''}
48 |             </Typist>
49 |           ) : null }
50 |         </div>
51 |       </div>
52 |     );
53 |   }
54 | 
55 | }
56 | 
57 | ReactDOM.render(<TypistExample />, document.getElementById('content'));
58 | 


--------------------------------------------------------------------------------
/examples/main.scss:
--------------------------------------------------------------------------------
 1 | $bg-color: #333;
 2 | $bl-color: #22BAD9;
 3 | 
 4 | 
 5 | body {
 6 |   font-family: monospace;
 7 |   font-size: 18px;
 8 |   line-height: 1.7;
 9 |   background-color: #333333;
10 |   padding: 25px 50px;
11 | }
12 | 
13 | .TypistExample {
14 | 
15 |   a {
16 |     color: inherit;
17 |     &:hover {
18 |       background-color: $bl-color;
19 |       color: white;
20 |       text-decoration: none;
21 |     }
22 |   }
23 |   &-header {
24 |     margin-top: 5%;
25 |     margin-bottom: 15%;
26 |     text-align: center;
27 |     font-size: 3em;
28 |     cursor: pointer;
29 |     color: $bl-color;
30 |   }
31 |   &-message {
32 |     color: hotpink;
33 |     width: 400px;
34 |     margin: auto;
35 |     .flash {
36 |       color: $bl-color;
37 |       font-weight: bold;
38 |       text-decoration: underline;
39 | 
40 |       animation-name: blinker;
41 |       animation-duration: 0.7s;
42 |       animation-timing-function: linear;
43 |       animation-iteration-count: infinite;
44 |       @keyframes blinker {
45 |         0% { opacity: 1.0; }
46 |         50% { opacity: 0.0; }
47 |         100% { opacity: 1.0; }
48 |       }
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | const webpackConfig = require('./webpack.config');
 2 | webpackConfig.devtool = 'inline-source-map';
 3 | 
 4 | module.exports = function(config) {
 5 |   config.set({
 6 |     browsers: [ 'Chrome' ],
 7 |     files: [
 8 |       {
 9 |         pattern: 'test/tests.bundle.js',
10 |         watched: false,
11 |       },
12 |     ],
13 |     frameworks: [ 'jasmine' ],
14 |     preprocessors: {
15 |       'test/tests.bundle.js': [ 'webpack', 'sourcemap' ],
16 |     },
17 |     reporters: [ 'dots' ],
18 |     singleRun: true,
19 |     webpack: webpackConfig,
20 |     webpackServer: {
21 |       noInfo: true,
22 |     },
23 |   });
24 | };
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-typist",
 3 |   "version": "2.0.5",
 4 |   "description": "Typing animations with React",
 5 |   "main": "dist/Typist.js",
 6 |   "files": ["dist", "src"],
 7 |   "style": "dist/Typist.css",
 8 |   "scripts": {
 9 |     "dist": "webpack --config webpack.dist.config.js",
10 |     "standalone": "webpack --config webpack.standalone.config.js",
11 |     "examples": "webpack --devtool inline-source-map",
12 |     "start": "webpack-dev-server --devtool inline-source-map --progress --colors --inline --hot --public typist.dev:8080 --content-base examples",
13 |     "test": "karma start karma.conf.js"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/jstejada/react-typist"
18 |   },
19 |   "keywords": [
20 |     "react",
21 |     "reactjs",
22 |     "react-typist",
23 |     "react typist",
24 |     "typing",
25 |     "typing animation",
26 |     "typing animations",
27 |     "animation",
28 |     "animations",
29 |     "typist",
30 |     "typewriter",
31 |     "typewriter animation",
32 |     "typewriter animations"
33 |   ],
34 |   "author": "Juan Tejada",
35 |   "license": "MIT",
36 |   "peerDependencies": {
37 |     "react": "^0.14 || ^15.0 || ^16.0",
38 |     "react-dom": "^0.14 || ^15.0 || ^16.0"
39 |   },
40 |   "devDependencies": {
41 |     "autoprefixer": "^6.3.3",
42 |     "babel-core": "^6.7.2",
43 |     "babel-eslint": "^6.0.0-beta.6",
44 |     "babel-loader": "^6.2.4",
45 |     "babel-plugin-transform-class-properties": "^6.16.0",
46 |     "babel-preset-es2015": "^6.6.0",
47 |     "babel-preset-react": "^6.5.0",
48 |     "babel-preset-stage-0": "^6.16.0",
49 |     "css-loader": "^0.23.1",
50 |     "eslint": "^2.4.0",
51 |     "eslint-config-airbnb": "^6.1.0",
52 |     "eslint-loader": "^1.3.0",
53 |     "eslint-plugin-react": "^4.2.3",
54 |     "eslint_d": "^4.1.0",
55 |     "extract-text-webpack-plugin": "^1.0.1",
56 |     "jasmine-core": "^2.3.4",
57 |     "jasmine-react-matchers": "^1.0.2",
58 |     "karma": "^0.13.10",
59 |     "karma-chrome-launcher": "^0.2.0",
60 |     "karma-cli": "^0.1.1",
61 |     "karma-jasmine": "^0.3.6",
62 |     "karma-sourcemap-loader": "^0.3.5",
63 |     "karma-webpack": "^1.7.0",
64 |     "mock-promises": "^0.6.1",
65 |     "node-sass": "^3.4.2",
66 |     "postcss-loader": "^0.8.2",
67 |     "promise-mock": "^1.1.0",
68 |     "react": "^16.0.0",
69 |     "react-dom": "^16.0.0",
70 |     "sass-loader": "^3.2.0",
71 |     "style-loader": "^0.13.0",
72 |     "webpack": "^1.12.14",
73 |     "webpack-dev-server": "^1.14.1"
74 |   },
75 |   "dependencies": {
76 |     "prop-types": "^15.5.10"
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/Backspace.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const Backspace = () => <noscript />;
 5 | 
 6 | Backspace.componentName = 'Backspace';
 7 | 
 8 | Backspace.propTypes = {
 9 |   count: PropTypes.number,
10 |   delay: PropTypes.number,
11 | };
12 | 
13 | Backspace.defaultProps = {
14 |   count: 1,
15 |   delay: 0,
16 | };
17 | 
18 | export default Backspace;
19 | 


--------------------------------------------------------------------------------
/src/Cursor.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import './Cursor.scss';
 4 | 
 5 | 
 6 | export default class Cursor extends Component {
 7 | 
 8 |   static propTypes = {
 9 |     blink: PropTypes.bool,
10 |     show: PropTypes.bool,
11 |     element: PropTypes.node,
12 |     hideWhenDone: PropTypes.bool,
13 |     hideWhenDoneDelay: PropTypes.number,
14 |     isDone: PropTypes.bool,
15 |   }
16 | 
17 |   static defaultProps = {
18 |     blink: true,
19 |     show: true,
20 |     element: '|',
21 |     hideWhenDone: false,
22 |     hideWhenDoneDelay: 1000,
23 |     isDone: false,
24 |   }
25 | 
26 |   constructor(props) {
27 |     super(props);
28 |     this._isReRenderingCursor = false;
29 |     this.state = {
30 |       shouldRender: this.props.show,
31 |     };
32 |   }
33 | 
34 |   componentWillReceiveProps(nextProps) {
35 |     const shouldHide = !this.props.isDone && nextProps.isDone && this.props.hideWhenDone;
36 |     if (shouldHide) {
37 |       setTimeout(() => this.setState({ shouldRender: false }), this.props.hideWhenDoneDelay);
38 |     }
39 |   }
40 | 
41 |   componentDidUpdate() {
42 |     const { show, isDone } = this.props;
43 |     if (!show) { return; }
44 |     if (isDone) { return; }
45 |     if (this._isReRenderingCursor) { return; }
46 | 
47 |     // In webkit and blink, rendering the cursor alongside the text as it
48 |     // animates sometimes causes the text to stop rendering when it reaches
49 |     // a new line break, even though the underlying DOM /does/ contain
50 |     // the text. This seems to happen when the space available for the text is
51 |     // at a specific width that makes it so the line break happens within a
52 |     // word.
53 |     // Using dev tools, when in this state, if you modify the dom or any style,
54 |     // it immediately renders all of the text in its correct position.
55 |     // Given that observation, this is a hackish solutions that re-renders the
56 |     // cursor every time a character is rendered, just to ensure that the text
57 |     // is rendered correctly.
58 |     // See #13 and #15 for more details
59 |     this._reRenderCursor();
60 |   }
61 | 
62 |   _reRenderCursor() {
63 |     this._isReRenderingCursor = true;
64 |     this.setState({ shouldRender: false }, () => {
65 |       this.setState({ shouldRender: true }, () => {
66 |         this._isReRenderingCursor = false;
67 |       });
68 |     });
69 |   }
70 | 
71 |   render() {
72 |     if (this.state.shouldRender) {
73 |       const className = this.props.blink ? ' Cursor--blinking' : '';
74 |       return (
75 |         <span className={`Cursor${className}`}>
76 |           {this.props.element}
77 |         </span>
78 |       );
79 |     }
80 |     return null;
81 |   }
82 | 
83 | }
84 | 


--------------------------------------------------------------------------------
/src/Cursor.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | .Typist .Cursor {
 3 |   display: inline-block;
 4 | 
 5 |   &--blinking {
 6 |     opacity: 1;
 7 |     animation: blink 1s linear infinite;
 8 |     @keyframes blink {
 9 |       0% { opacity:1; }
10 |       50% { opacity:0; }
11 |       100% { opacity:1; }
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/Delay.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const Delay = () => <noscript />;
 5 | 
 6 | Delay.componentName = 'Delay';
 7 | 
 8 | Delay.propTypes = {
 9 |   ms: PropTypes.number.isRequired,
10 | };
11 | 
12 | export default Delay;
13 | 


--------------------------------------------------------------------------------
/src/Typist.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import Cursor from './Cursor';
  4 | import Backspace from './Backspace';
  5 | import Delay from './Delay';
  6 | import * as utils from './utils';
  7 | 
  8 | 
  9 | const ACTION_CHARS = ['🔙', '⏰'];
 10 | 
 11 | export default class Typist extends Component {
 12 | 
 13 |   static propTypes = {
 14 |     children: PropTypes.node,
 15 |     className: PropTypes.string,
 16 |     avgTypingDelay: PropTypes.number,
 17 |     stdTypingDelay: PropTypes.number,
 18 |     startDelay: PropTypes.number,
 19 |     cursor: PropTypes.object,
 20 |     onCharacterTyped: PropTypes.func,
 21 |     onLineTyped: PropTypes.func,
 22 |     onTypingDone: PropTypes.func,
 23 |     delayGenerator: PropTypes.func,
 24 |   }
 25 | 
 26 |   static defaultProps = {
 27 |     className: '',
 28 |     avgTypingDelay: 70,
 29 |     stdTypingDelay: 25,
 30 |     startDelay: 0,
 31 |     cursor: {},
 32 |     onCharacterTyped: () => {},
 33 |     onLineTyped: () => {},
 34 |     onTypingDone: () => {},
 35 |     delayGenerator: utils.gaussianRnd,
 36 |   }
 37 | 
 38 |   constructor(props) {
 39 |     super(props);
 40 |     this.mounted = false;
 41 |     this.linesToType = [];
 42 |     this.introducedDelay = null;
 43 | 
 44 |     if (props.children) {
 45 |       this.linesToType = utils.extractTextFromElement(props.children);
 46 |     }
 47 |   }
 48 | 
 49 |   state = {
 50 |     textLines: [],
 51 |     isDone: false,
 52 |   }
 53 | 
 54 |   componentDidMount() {
 55 |     this.mounted = true;
 56 |     const { children, startDelay } = this.props;
 57 |     if (children) {
 58 |       if (startDelay > 0 && typeof window !== 'undefined') {
 59 |         setTimeout(this.typeAllLines.bind(this), startDelay);
 60 |       } else {
 61 |         this.typeAllLines();
 62 |       }
 63 |     } else {
 64 |       this.onTypingDone();
 65 |     }
 66 |   }
 67 | 
 68 |   shouldComponentUpdate(nextProps, nextState) {
 69 |     if (nextState.textLines.length !== this.state.textLines.length) {
 70 |       return true;
 71 |     }
 72 |     for (let idx = 0; idx < nextState.textLines.length; idx++) {
 73 |       const line = this.state.textLines[idx];
 74 |       const nextLine = nextState.textLines[idx];
 75 |       if (line !== nextLine) {
 76 |         return true;
 77 |       }
 78 |     }
 79 |     return this.state.isDone !== nextState.isDone;
 80 |   }
 81 | 
 82 |   componentWillUnmount() {
 83 |     this.mounted = false;
 84 |   }
 85 | 
 86 |   onTypingDone = () => {
 87 |     if (!this.mounted) { return; }
 88 |     this.setState({ isDone: true });
 89 |     this.props.onTypingDone();
 90 |   }
 91 | 
 92 |   delayGenerator = (line, lineIdx, character, charIdx) => {
 93 |     const mean = this.props.avgTypingDelay;
 94 |     const std = this.props.stdTypingDelay;
 95 | 
 96 |     return this.props.delayGenerator(
 97 |       mean,
 98 |       std,
 99 |       {
100 |         line,
101 |         lineIdx,
102 |         character,
103 |         charIdx,
104 |         defDelayGenerator: (mn = mean, st = std) => utils.gaussianRnd(mn, st),
105 |       }
106 |     );
107 |   }
108 | 
109 |   typeAllLines(lines = this.linesToType) {
110 |     return utils.eachPromise(lines, this.typeLine)
111 |     .then(() => this.onTypingDone());
112 |   }
113 | 
114 |   typeLine = (line, lineIdx) => {
115 |     if (!this.mounted) { return Promise.resolve(); }
116 | 
117 |     let decoratedLine = line;
118 |     const { onLineTyped } = this.props;
119 | 
120 |     if (utils.isBackspaceElement(line)) {
121 |       if (line.props.delay > 0) {
122 |         this.introducedDelay = line.props.delay;
123 |       }
124 |       decoratedLine = String('🔙').repeat(line.props.count);
125 |     } else if (utils.isDelayElement(line)) {
126 |       this.introducedDelay = line.props.ms;
127 |       decoratedLine = '⏰';
128 |     }
129 | 
130 |     return new Promise((resolve, reject) => {
131 |       this.setState({ textLines: this.state.textLines.concat(['']) }, () => {
132 |         utils.eachPromise(decoratedLine, this.typeCharacter, decoratedLine, lineIdx)
133 |         .then(() => onLineTyped(decoratedLine, lineIdx))
134 |         .then(resolve)
135 |         .catch(reject);
136 |       });
137 |     });
138 |   }
139 | 
140 |   typeCharacter = (character, charIdx, line, lineIdx) => {
141 |     if (!this.mounted) { return Promise.resolve(); }
142 |     const { onCharacterTyped } = this.props;
143 | 
144 |     return new Promise((resolve) => {
145 |       const textLines = this.state.textLines.slice();
146 | 
147 |       utils.sleep(this.introducedDelay)
148 |       .then(() => {
149 |         this.introducedDelay = null;
150 | 
151 |         const isBackspace = character === '🔙';
152 |         const isDelay = character === '⏰';
153 |         if (isDelay) {
154 |           resolve();
155 |           return;
156 |         }
157 | 
158 |         if (isBackspace && lineIdx > 0) {
159 |           let prevLineIdx = lineIdx - 1;
160 |           let prevLine = textLines[prevLineIdx];
161 | 
162 |           for (let idx = prevLineIdx; idx >= 0; idx --) {
163 |             if (prevLine.length > 0 && !ACTION_CHARS.includes(prevLine[0])) {
164 |               break;
165 |             }
166 |             prevLineIdx = idx;
167 |             prevLine = textLines[prevLineIdx];
168 |           }
169 | 
170 |           textLines[prevLineIdx] = prevLine.substr(0, prevLine.length - 1);
171 |         } else {
172 |           textLines[lineIdx] += character;
173 |         }
174 | 
175 |         if (!this.mounted) {
176 |           resolve();
177 |           return;
178 |         }
179 | 
180 |         this.setState({ textLines }, () => {
181 |           const delay = this.delayGenerator(line, lineIdx, character, charIdx);
182 |           onCharacterTyped(character, charIdx);
183 |           setTimeout(resolve, delay);
184 |         });
185 |       });
186 |     });
187 |   }
188 | 
189 |   render() {
190 |     const { className, cursor, ...rest } = this.props;
191 |     const { isDone } = this.state;
192 |     const innerTree = utils.cloneElementWithSpecifiedText({
193 |       element: this.props.children,
194 |       textLines: this.state.textLines,
195 |     });
196 | 
197 |     return (
198 |       <div className={`Typist ${className}`} {...rest}>
199 |         {innerTree}
200 |         <Cursor isDone={isDone} {...cursor} />
201 |       </div>
202 |     );
203 |   }
204 | 
205 | }
206 | 
207 | Typist.Backspace = Backspace;
208 | Typist.Delay = Delay;
209 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Backspace from "./Backspace";
  3 | import Delay from "./Delay";
  4 | 
  5 | export const sleep = (val) => new Promise((resolve) => (
  6 |   val != null ? setTimeout(resolve, val) : resolve()
  7 | ));
  8 | 
  9 | export function gaussianRnd(mean, std) {
 10 |   const times = 12;
 11 |   let sum = 0;
 12 |   for (let idx = 0; idx < times; idx++) {
 13 |     sum += Math.random();
 14 |   }
 15 |   sum -= (times / 2);
 16 |   return Math.round((sum) * std) + mean;
 17 | }
 18 | 
 19 | export function eachPromise(arr, iterator, ...extraArgs) {
 20 |   const promiseReducer = (prev, current, idx) => (
 21 |     prev.then(() => iterator(current, idx, ...extraArgs))
 22 |   );
 23 |   return Array.from(arr).reduce(promiseReducer, Promise.resolve());
 24 | }
 25 | 
 26 | export function exclude(obj, keys) {
 27 |   const res = {};
 28 |   for (const key in obj) {
 29 |     if (keys.indexOf(key) === -1) {
 30 |       res[key] = obj[key];
 31 |     }
 32 |   }
 33 |   return res;
 34 | }
 35 | 
 36 | export function isElementType(element, component, name) {
 37 |   const elementType = element && element.type;
 38 |   if (!elementType) {
 39 |     return false;
 40 |   }
 41 | 
 42 |   return (
 43 |     elementType === component ||
 44 |     elementType.componentName === name ||
 45 |     elementType.displayName === name
 46 |   );
 47 | }
 48 | 
 49 | export function isBackspaceElement(element) {
 50 |   return isElementType(element, Backspace, "Backspace");
 51 | }
 52 | 
 53 | export function isDelayElement(element) {
 54 |   return isElementType(element, Delay, "Delay");
 55 | }
 56 | 
 57 | export function extractTextFromElement(element) {
 58 |   const stack = element ? [element] : [];
 59 |   const lines = [];
 60 | 
 61 |   while (stack.length > 0) {
 62 |     const current = stack.pop();
 63 |     if (React.isValidElement(current)) {
 64 |       if (isBackspaceElement(current) || isDelayElement(current)) {
 65 |         // If it is a `Backspace` or `Delay` element, we want to keep it in our
 66 |         // `textLines` state. These will serve as markers when updating the
 67 |         // state of the text
 68 |         lines.unshift(current);
 69 |       } else {
 70 |         React.Children.forEach(current.props.children, (child) => {
 71 |           stack.push(child);
 72 |         });
 73 |       }
 74 |     } else if (Array.isArray(current)) {
 75 |       for (const el of current) {
 76 |         stack.push(el);
 77 |       }
 78 |     } else {
 79 |       lines.unshift(current);
 80 |     }
 81 |   }
 82 | 
 83 |   return lines;
 84 | }
 85 | 
 86 | export function cloneElement(element, children) {
 87 |   const tag = element.type;
 88 |   const props = exclude(element.props, ['children']);
 89 |   const getMilliseconds = new Date().getUTCMilliseconds();
 90 |   const randomStamp = getMilliseconds + Math.random() + Math.random();
 91 |   // eslint-disable-next-line
 92 |   props.key = `Typist-element-${tag}-${randomStamp}`;
 93 |   return React.createElement(tag, props, ...children);
 94 | }
 95 | 
 96 | function cloneElementWithSpecifiedTextAtIndex(element, textLines, textIdx) {
 97 |   if (textIdx >= textLines.length) {
 98 |     return [null, textIdx];
 99 |   }
100 | 
101 |   let idx = textIdx;
102 |   const recurse = (el) => {
103 |     const [child, advIdx] = cloneElementWithSpecifiedTextAtIndex(
104 |       el,
105 |       textLines,
106 |       idx
107 |     );
108 |     idx = advIdx;
109 |     return child;
110 |   };
111 | 
112 |   const isNonTypistElement = (
113 |     React.isValidElement(element) &&
114 |     !(isBackspaceElement(element) || isDelayElement(element))
115 |   );
116 | 
117 |   if (isNonTypistElement) {
118 |     const clonedChildren = React.Children.map(element.props.children, recurse) || [];
119 |     return [cloneElement(element, clonedChildren), idx];
120 |   }
121 | 
122 |   if (Array.isArray(element)) {
123 |     const children = element.map(recurse);
124 |     return [children, idx];
125 |   }
126 | 
127 |   // Anything that isn't a React element or an Array is interpreted as text
128 |   return [textLines[idx], idx + 1];
129 | }
130 | 
131 | export function cloneElementWithSpecifiedText({ element, textLines }) {
132 |   if (!element) {
133 |     return undefined;
134 |   }
135 | 
136 |   return cloneElementWithSpecifiedTextAtIndex(element, textLines, 0)[0];
137 | }
138 | 


--------------------------------------------------------------------------------
/test/Typist.spec.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import TestUtils from 'react-dom/test-utils';
  3 | import { findDOMNode } from 'react-dom';
  4 | import PromiseMock from 'promise-mock';
  5 | import Typist from 'Typist';
  6 | 
  7 | 
  8 | describe('Typist', () => {
  9 |   let props;
 10 |   beforeEach(() => {
 11 |     props = { delayGenerator: () => 100 }; // Delay between keystrokes always 100
 12 |     jasmine.clock().install();
 13 |     PromiseMock.install();
 14 |   });
 15 | 
 16 |   afterEach(() => {
 17 |     PromiseMock.uninstall();
 18 |     jasmine.clock().uninstall();
 19 |   });
 20 | 
 21 |   const typeAll = (limit) => {
 22 |     let i = 0;
 23 |     const canType = () => (
 24 |       limit != null ?
 25 |         Promise.waiting.length > 0 && i < limit :
 26 |         Promise.waiting.length > 0
 27 |     );
 28 |     while (canType()) {
 29 |       Promise.runAll();
 30 |       jasmine.clock().tick(100);
 31 |       i++;
 32 |     }
 33 |   };
 34 | 
 35 |   describe('#render', () => {
 36 |     describe('when no children passed', () => {
 37 |       it('renders the cursor', () => {
 38 |         const inst = TestUtils.renderIntoDocument(<Typist />);
 39 |         expect(findDOMNode(inst).textContent).toEqual('|');
 40 |       });
 41 | 
 42 |       it('calls onTypingDone callback', () => {
 43 |         const spy = jasmine.createSpy('onTypingDone');
 44 |         TestUtils.renderIntoDocument(<Typist onTypingDone={spy} />);
 45 |         expect(spy).toHaveBeenCalled();
 46 |       });
 47 |     });
 48 | 
 49 |     describe('when children passed', () => {
 50 |       const assertLine = (inst, line, acum = '') => {
 51 |         for (let idx = 1; idx <= line.length; idx++) {
 52 |           expect(findDOMNode(inst).textContent).toEqual(`${acum}${line.slice(0, idx)}|`);
 53 |           jasmine.clock().tick(100);
 54 |           Promise.runAll();
 55 |         }
 56 |       };
 57 | 
 58 |       const assertLines = (inst, lines) => {
 59 |         let acum = '';
 60 |         Promise.runAll();
 61 |         for (const line of lines) {
 62 |           assertLine(inst, line, acum);
 63 |           acum += line;
 64 |         }
 65 |       };
 66 | 
 67 |       it('animates single string', () => {
 68 |         const str = 'Test';
 69 |         const inst = TestUtils.renderIntoDocument(<Typist {...props}>{str}</Typist>);
 70 | 
 71 |         Promise.runAll();
 72 |         assertLine(inst, str);
 73 |       });
 74 | 
 75 |       it('animates strings in correct order', () => {
 76 |         const strs = ['Test1', 'Test2'];
 77 |         const inst = TestUtils.renderIntoDocument(<Typist {...props}>{strs}</Typist>);
 78 | 
 79 |         assertLines(inst, strs);
 80 |       });
 81 | 
 82 |       it('animates elements in correct order', () => {
 83 |         const strs = ['T1', 'T2'];
 84 |         const els = [<div key="t1">T1</div>, <div key="t2"><span>T2</span></div>];
 85 |         const inst = TestUtils.renderIntoDocument(<Typist {...props}>{els}</Typist>);
 86 | 
 87 |         assertLines(inst, strs);
 88 |       });
 89 | 
 90 |       it('animates strings and elements', () => {
 91 |         const strs = ['Test1', 'Test2'];
 92 |         const inst = TestUtils.renderIntoDocument(
 93 |           <Typist {...props}>
 94 |             Test1
 95 |             <span>Test2</span>
 96 |           </Typist>
 97 |         );
 98 | 
 99 |         assertLines(inst, strs);
100 |         const span = TestUtils.scryRenderedDOMComponentsWithTag(inst, 'span')[0];
101 |         expect(findDOMNode(span).textContent).toEqual('Test2');
102 |       });
103 | 
104 |       it('animates element trees', () => {
105 |         const strs = ['Test1', 'Test2', 'Test3'];
106 |         const inst = TestUtils.renderIntoDocument(
107 |           <Typist {...props}>
108 |             <span>Test1</span>
109 |             <div>
110 |               <span>Test2</span>
111 |               <span>Test3</span>
112 |             </div>
113 |           </Typist>
114 |         );
115 | 
116 |         assertLines(inst, strs);
117 |         expect(findDOMNode(inst).childNodes[0].tagName).toEqual('SPAN');
118 |         expect(findDOMNode(inst).childNodes[1].tagName).toEqual('DIV');
119 |       });
120 | 
121 |       it('renders empty elements', () => {
122 |         const strs = ['Test1', 'Test2', ''];
123 |         const inst = TestUtils.renderIntoDocument(
124 |           <Typist {...props}>
125 |             Test1
126 |             <span>Test2</span>
127 |             <br />
128 |             {''}
129 |           </Typist>
130 |         );
131 | 
132 |         assertLines(inst, strs);
133 |         TestUtils.findRenderedDOMComponentWithTag(inst, 'br');
134 |       });
135 | 
136 |       it('transfers props to children elements', () => {
137 |         const inst = TestUtils.renderIntoDocument(
138 |           <Typist {...props}>
139 |             Test1
140 |             <span className="mysp">Test2</span>
141 |             <br />
142 |           </Typist>
143 |         );
144 |         typeAll();
145 |         const span = TestUtils.scryRenderedDOMComponentsWithTag(inst, 'span')[0];
146 |         expect(findDOMNode(span).className).toEqual('mysp');
147 |       });
148 | 
149 |       it('calls onTypingDone callback', () => {
150 |         const spy = jasmine.createSpy('onTypingDone');
151 |         TestUtils.renderIntoDocument(
152 |           <Typist onTypingDone={spy} {...props}>
153 |             Test1
154 |             <span className="mysp">Test2</span>
155 |             <br />
156 |           </Typist>
157 |         );
158 |         typeAll();
159 |         expect(spy).toHaveBeenCalled();
160 |       });
161 | 
162 |       describe('when using Backspace', () => {
163 |         it('correctly backspaces the specified count', () => {
164 |           const strs = ['Test1', 'Test2'];
165 |           const inst = TestUtils.renderIntoDocument(
166 |             <Typist {...props}>
167 |               Test1
168 |               <span>Test2<Typist.Backspace count={2} /></span>
169 |             </Typist>
170 |           );
171 | 
172 |           assertLines(inst, strs);
173 | 
174 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test|');
175 |           jasmine.clock().tick(100);
176 |           Promise.runAll();
177 | 
178 |           expect(findDOMNode(inst).textContent).toEqual('Test1Tes|');
179 |           jasmine.clock().tick(100);
180 |           Promise.runAll();
181 | 
182 |           const span = TestUtils.scryRenderedDOMComponentsWithTag(inst, 'span')[0];
183 |           expect(findDOMNode(span).textContent).toEqual('Tes');
184 |         });
185 | 
186 |         it('correctly backspaces the specified count even when it goes to a previous line', () => {
187 |           const strs = ['Test1', 'T'];
188 |           const inst = TestUtils.renderIntoDocument(
189 |             <Typist {...props}>
190 |               Test1
191 |               <span>T<Typist.Backspace count={2} /></span>
192 |             </Typist>
193 |           );
194 | 
195 |           assertLines(inst, strs);
196 | 
197 |           expect(findDOMNode(inst).textContent).toEqual('Test1|');
198 |           jasmine.clock().tick(100);
199 |           Promise.runAll();
200 | 
201 |           expect(findDOMNode(inst).textContent).toEqual('Test|');
202 |           jasmine.clock().tick(100);
203 |           Promise.runAll();
204 |         });
205 | 
206 |         it('correctly uses a delay when backspacing if specified', () => {
207 |           const strs = ['Test1', 'Test2'];
208 |           const inst = TestUtils.renderIntoDocument(
209 |             <Typist {...props}>
210 |               Test1
211 |               <span>Test2<Typist.Backspace count={2} delay={500} /></span>
212 |             </Typist>
213 |           );
214 | 
215 |           assertLines(inst, strs);
216 | 
217 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test2|');
218 |           jasmine.clock().tick(100);
219 |           expect(() => Promise.runAll()).toThrow(); // There should be no promises to run
220 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test2|');
221 | 
222 |           jasmine.clock().tick(400);
223 |           Promise.runAll();
224 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test|');
225 | 
226 |           jasmine.clock().tick(100);
227 |           Promise.runAll();
228 |           expect(findDOMNode(inst).textContent).toEqual('Test1Tes|');
229 | 
230 |           const span = TestUtils.scryRenderedDOMComponentsWithTag(inst, 'span')[0];
231 |           expect(findDOMNode(span).textContent).toEqual('Tes');
232 |         });
233 |       });
234 | 
235 |       describe('when using Delay', () => {
236 |         it('correctly applies the delay', () => {
237 |           const strs = ['Test1', 'Test2'];
238 |           const inst = TestUtils.renderIntoDocument(
239 |             <Typist {...props}>
240 |               Test1
241 |               <span>Test2<Typist.Delay ms={500} /></span>
242 |               B
243 |             </Typist>
244 |           );
245 | 
246 |           assertLines(inst, strs);
247 | 
248 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test2|');
249 |           jasmine.clock().tick(100);
250 |           expect(() => Promise.runAll()).toThrow(); // There should be no promises to run
251 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test2|');
252 | 
253 |           jasmine.clock().tick(400);
254 |           Promise.runAll();
255 |           expect(findDOMNode(inst).textContent).toEqual('Test1Test2B|');
256 |         });
257 |       });
258 |     });
259 |   });
260 | 
261 |   describe('cursor', () => {
262 |     it('hides the cursor when specified', () => {
263 |       props.cursor = { show: false };
264 |       const inst = TestUtils.renderIntoDocument(<Typist {...props}>Test</Typist>);
265 |       typeAll();
266 |       expect(findDOMNode(inst).textContent).toEqual('Test');
267 |     });
268 | 
269 |     it('applies blink class when specified', () => {
270 |       const inst = TestUtils.renderIntoDocument(<Typist {...props}>Test</Typist>);
271 |       typeAll();
272 |       TestUtils.findRenderedDOMComponentWithClass(inst, 'Cursor--blinking');
273 |     });
274 | 
275 |     it('does not apply blink class when specified', () => {
276 |       props.cursor = { blink: false };
277 |       const inst = TestUtils.renderIntoDocument(<Typist {...props}>Test</Typist>);
278 |       typeAll();
279 |       const res = TestUtils.scryRenderedDOMComponentsWithClass(inst, 'Cursor--blinking');
280 |       expect(res.length).toEqual(0);
281 |     });
282 | 
283 |     it('displays correct cursor character', () => {
284 |       props.cursor = { element: '▍' };
285 |       const inst = TestUtils.renderIntoDocument(<Typist {...props}>Test</Typist>);
286 |       typeAll();
287 |       expect(findDOMNode(inst).textContent).toEqual('Test▍');
288 |     });
289 | 
290 |     it('hides cursor at end of animation when specified', () => {
291 |       props.cursor = { hideWhenDone: true, hideWhenDoneDelay: 100 };
292 |       const inst = TestUtils.renderIntoDocument(<Typist {...props}>Test</Typist>);
293 |       typeAll(4);
294 |       let res = TestUtils.scryRenderedDOMComponentsWithClass(inst, 'Cursor');
295 |       expect(res.length).toEqual(1);
296 |       typeAll(1);
297 |       res = TestUtils.scryRenderedDOMComponentsWithClass(inst, 'Cursor');
298 |       expect(res.length).toEqual(0);
299 |     });
300 |   });
301 | 
302 |   describe('startDelay', () => {
303 |     it('starts animation after specified delay', () => {
304 |       props.startDelay = 500;
305 |       const inst = TestUtils.renderIntoDocument(<Typist {...props}>Test</Typist>);
306 |       jasmine.clock().tick(500);
307 |       expect(findDOMNode(inst).textContent).toEqual('|');
308 |       Promise.runAll();
309 |       jasmine.clock().tick(500);
310 |       expect(findDOMNode(inst).textContent).toEqual('T|');
311 |       jasmine.clock().tick(100);
312 |       typeAll();
313 |       expect(findDOMNode(inst).textContent).toEqual('Test|');
314 |     });
315 |   });
316 | 
317 |   describe('delayGenerator', () => {
318 |     it('uses specified props for delay', () => {
319 |       const spy = jasmine.createSpy('delayGenerator').and.returnValue(100);
320 |       props = { avgTypingDelay: 500, stdTypingDelay: 100, delayGenerator: spy };
321 |       TestUtils.renderIntoDocument(<Typist {...props}>Te</Typist>);
322 |       typeAll();
323 |       expect(spy.calls.argsFor(0).slice(0, 2)).toEqual([500, 100]);
324 |       expect(spy.calls.argsFor(1).slice(0, 2)).toEqual([500, 100]);
325 |     });
326 | 
327 |     it('passes obj with info for current line and char to delaygGenerator', () => {
328 |       const spy = jasmine.createSpy('delayGenerator').and.returnValue(100);
329 |       props = { delayGenerator: spy };
330 |       TestUtils.renderIntoDocument(<Typist {...props}>{['Te', 'st']}</Typist>);
331 |       typeAll();
332 |       for (const idx of [0, 1]) {
333 |         const obj = spy.calls.argsFor(idx).slice(2)[0];
334 |         expect(obj.line).toEqual('Te');
335 |         expect(obj.lineIdx).toEqual(0);
336 |         expect(obj.character).toEqual('Te'[idx]);
337 |         expect(obj.charIdx).toEqual(idx);
338 |       }
339 |       for (const idx of [2, 3]) {
340 |         const obj = spy.calls.argsFor(idx).slice(2)[0];
341 |         expect(obj.line).toEqual('st');
342 |         expect(obj.lineIdx).toEqual(1);
343 |         expect(obj.character).toEqual('st'[idx - 2]);
344 |         expect(obj.charIdx).toEqual(idx - 2);
345 |       }
346 |     });
347 |   });
348 | });
349 | 


--------------------------------------------------------------------------------
/test/tests.bundle.js:
--------------------------------------------------------------------------------
1 | const context = require.context('.', true, /.+\.spec\.jsx?$/);
2 | context.keys().forEach(context);
3 | module.exports = context;
4 | 


--------------------------------------------------------------------------------
/test/utils.spec.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactMatchers from 'jasmine-react-matchers';
  3 | import Typist from 'Typist';
  4 | import * as utils from 'utils';
  5 | 
  6 | 
  7 | describe('utils', () => {
  8 |   describe('.extractTextFromElement', () => {
  9 |     it('returns array of lines to render when element passed', () => {
 10 |       const res = utils.extractTextFromElement(<div>Text</div>);
 11 |       expect(res).toEqual(['Text']);
 12 |     });
 13 | 
 14 |     it('returns array of lines to render when strings passed', () => {
 15 |       const res = utils.extractTextFromElement(['t1', 't2']);
 16 |       expect(res).toEqual(['t1', 't2']);
 17 |     });
 18 | 
 19 |     it('returns array of lines to render when array passed', () => {
 20 |       const res = utils.extractTextFromElement(['t1', <span>t2</span>]);
 21 |       expect(res).toEqual(['t1', 't2']);
 22 |     });
 23 | 
 24 |     it('returns array of lines to render when array of trees passed', () => {
 25 |       const res = utils.extractTextFromElement([
 26 |         't1',
 27 |         <div>t2</div>,
 28 |         <span>t3<span>t4</span></span>,
 29 |       ]);
 30 |       expect(res).toEqual(['t1', 't2', 't3', 't4']);
 31 |     });
 32 | 
 33 |     it('returns array of lines when tree passed', () => {
 34 |       const res = utils.extractTextFromElement(
 35 |         <div>
 36 |           T1
 37 |           <div><span>T2</span><span>T3</span></div>
 38 |           <span>T4</span>
 39 |           {5}
 40 |         </div>
 41 |       );
 42 |       expect(res).toEqual(['T1', 'T2', 'T3', 'T4', 5]);
 43 |     });
 44 | 
 45 |     it('returns empty array when nothing passed', () => {
 46 |       const res = utils.extractTextFromElement();
 47 |       expect(res).toEqual([]);
 48 |     });
 49 | 
 50 |     it('includes Backspace elements as part of the returned array of text', () => {
 51 |       const backspace = <Typist.Backspace />;
 52 |       const res = utils.extractTextFromElement(
 53 |         <div>
 54 |           T1
 55 |           <div><span>T2{backspace}</span><span>T3</span></div>
 56 |           <span>T4</span>
 57 |           {5}
 58 |         </div>
 59 |       );
 60 |       expect(res).toEqual(['T1', 'T2', backspace, 'T3', 'T4', 5]);
 61 |     });
 62 | 
 63 |     it('includes Delay elements as part of the returned array of text', () => {
 64 |       const delay = <Typist.Delay ms={500} />;
 65 |       const res = utils.extractTextFromElement(
 66 |         <div>
 67 |           T1
 68 |           <div><span>T2{delay}</span><span>T3</span></div>
 69 |           <span>T4</span>
 70 |           {5}
 71 |         </div>
 72 |       );
 73 |       expect(res).toEqual(['T1', 'T2', delay, 'T3', 'T4', 5]);
 74 |     });
 75 | 
 76 |     it('includes Backspace or Delay elements as part of the returned array of text', () => {
 77 |       const delay = <Typist.Delay ms={500} />;
 78 |       const backspace = <Typist.Backspace />;
 79 |       const res = utils.extractTextFromElement(
 80 |         <div>
 81 |           T1
 82 |           <div><span>T2{delay}</span><span>T3{backspace}</span></div>
 83 |           <span>T4</span>
 84 |           {5}
 85 |         </div>
 86 |       );
 87 |       expect(res).toEqual(['T1', 'T2', delay, 'T3', backspace, 'T4', 5]);
 88 |     });
 89 |   });
 90 | 
 91 |   describe('.cloneElementWithSpecifiedText', () => {
 92 |     beforeEach(() => jasmine.addMatchers(ReactMatchers));
 93 | 
 94 |     describe('when all text passed', () => {
 95 |       it('returns tree correctly when element is a string or number passed', () => {
 96 |         const res = utils.cloneElementWithSpecifiedText({
 97 |           element: 'Text',
 98 |           textLines: ['Expected'],
 99 |         });
100 |         expect(res).toEqual('Expected');
101 |       });
102 | 
103 |       it('returns tree correctly when element is an array of strings or numbers', () => {
104 |         const res = utils.cloneElementWithSpecifiedText({
105 |           element: ['T1', 2],
106 |           textLines: ['E1', 'E2'],
107 |         });
108 |         expect(res).toEqual(['E1', 'E2']);
109 |       });
110 | 
111 |       it('returns tree correctly when array of elements passed', () => {
112 |         const actual = utils.cloneElementWithSpecifiedText({
113 |           element: [<div className="c">T1</div>, <div>T2<span>T3</span></div>],
114 |           textLines: ['E1', 'E2', 'E3'],
115 |         });
116 |         const expected = [
117 |           <div className="c">E1</div>,
118 |           <div>E2<span>E3</span></div>,
119 |         ];
120 |         expect(actual[0]).toEqualElement(expected[0]);
121 |         expect(actual[1]).toEqualElement(expected[1]);
122 |       });
123 | 
124 |       it('returns tree correctly when simple element passed', () => {
125 |         const res = utils.cloneElementWithSpecifiedText({
126 |           element: <div className="c">Text</div>,
127 |           textLines: ['Expected'],
128 |         });
129 |         expect(res.props.className).toEqual('c');
130 |         expect(res.props.children).toEqual('Expected');
131 |       });
132 | 
133 |       it('returns tree correctly when nested element passed', () => {
134 |         const element = (
135 |           <div className="c">
136 |             T1
137 |             <div><span className="s">T2</span>T3</div>
138 |             <p>
139 |               <span>T4</span>
140 |               <br />
141 |             </p>
142 |             <div>T5</div>
143 |           </div>
144 |         );
145 |         const expected = (
146 |           <div className="c">
147 |             E1
148 |             <div><span className="s">E2</span>E3</div>
149 |             <p>
150 |               <span>E4</span>
151 |               <br />
152 |             </p>
153 |             <div>E5</div>
154 |           </div>
155 |         );
156 |         const actual = utils.cloneElementWithSpecifiedText({
157 |           element,
158 |           textLines: ['E1', 'E2', 'E3', 'E4', 'E5'],
159 |         });
160 |         expect(actual).toEqualElement(expected);
161 |       });
162 |     });
163 | 
164 |     describe('when not sufficient text passed', () => {
165 |       it(`does not display nodes that have no text to render when element is
166 |  string or number`, () => {
167 |         const res = utils.cloneElementWithSpecifiedText({
168 |           element: 'Text',
169 |           textLines: [],
170 |         });
171 |         expect(res).toBeNull();
172 |       });
173 | 
174 |       it('returns tree correctly when element is array', () => {
175 |         const res = utils.cloneElementWithSpecifiedText({
176 |           element: ['T1', 2],
177 |           textLines: ['E1'],
178 |         });
179 |         expect(res).toEqual(['E1', null]);
180 |       });
181 | 
182 |       it('returns tree correctly when element is array of elements', () => {
183 |         const actual = utils.cloneElementWithSpecifiedText({
184 |           element: [<div className="c">T1</div>, <div>T2<span>T3</span></div>],
185 |           textLines: ['E1', 'E2'],
186 |         });
187 |         const expected = [<div className="c">E1</div>, <div>E2</div>];
188 |         expect(actual[0]).toEqualElement(expected[0]);
189 |         expect(actual[1]).toEqualElement(expected[1]);
190 |       });
191 | 
192 |       it('does not display nodes that have no text to render when simple element passed', () => {
193 |         const res = utils.cloneElementWithSpecifiedText({
194 |           element: <div className="c">Text</div>,
195 |           textLines: [],
196 |         });
197 |         expect(res).toBeNull();
198 |       });
199 | 
200 |       it('does not display nodes that have no text to render when nested element passed', () => {
201 |         const element = (
202 |           <div className="c">
203 |             T1
204 |             <div><span className="s">T2</span>T3</div>
205 |             <p>
206 |               <span>T4</span>
207 |               <br />
208 |             </p>
209 |             <div>T5</div>
210 |           </div>
211 |         );
212 |         const expected = (
213 |           <div className="c">
214 |             E1
215 |             <div><span className="s">E2</span>E3</div>
216 |           </div>
217 |         );
218 |         const actual = utils.cloneElementWithSpecifiedText({
219 |           element,
220 |           textLines: ['E1', 'E2', 'E3'],
221 |         });
222 |         expect(actual).toEqualElement(expected);
223 |       });
224 |     });
225 | 
226 |     it('returns undefined when no tree passed', () => {
227 |       const res = utils.cloneElementWithSpecifiedText({
228 |         element: undefined,
229 |         textLines: [],
230 |       });
231 |       expect(res).toBeUndefined();
232 |     });
233 | 
234 |     it('correctly renders Delay or Backspace elements in the cloned element', () => {
235 |       const backspace = <Typist.Backspace />;
236 |       const delay = <Typist.Delay ms={500} />;
237 |       const element = (
238 |         <div>
239 |           T1
240 |           <div><span>T2{backspace}</span><span>T3{delay}</span></div>
241 |           <span>T4</span>
242 |         </div>
243 |       );
244 |       const expected = (
245 |         <div>
246 |           E1
247 |           <div><span>E2{backspace}</span><span>E3{delay}</span></div>
248 |           <span>E4</span>
249 |         </div>
250 |       );
251 |       const actual = utils.cloneElementWithSpecifiedText({
252 |         element,
253 |         textLines: ['E1', 'E2', backspace, 'E3', delay, 'E4'],
254 |       });
255 |       expect(actual).toEqualElement(expected);
256 |     });
257 |   });
258 | });
259 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | const autoprefixer = require('autoprefixer');
 4 | const sassLoaders = [
 5 |   'css?sourceMap',
 6 |   'sass?sourceMap&includePaths[]=' +
 7 |     encodeURIComponent(path.resolve(__dirname, './src')),
 8 |   'postcss',
 9 | ];
10 | 
11 | module.exports = {
12 |   entry: './examples/index.js',
13 |   output: {
14 |     path: path.join(__dirname, './examples/dist'),
15 |     filename: 'index.js',
16 |     publicPath: '/dist/',
17 |   },
18 |   module: {
19 |     loaders: [
20 |       {
21 |         test: /\.s?css$/,
22 |         loader: ExtractTextPlugin.extract('style', sassLoaders.join('!')),
23 |       },
24 |       {
25 |         test: /\.jsx?$/,
26 |         exclude: /(node_modules|bower_components)/,
27 |         loaders: [
28 |           'babel?' +
29 |             'cacheDirectory&' +
30 |             'presets[]=react,presets[]=es2015,presets[]=stage-0',
31 |           'eslint',
32 |         ],
33 |       },
34 |     ],
35 |   },
36 |   postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
37 |   plugins: [
38 |     new ExtractTextPlugin('main.css', {allChunks: true}),
39 |   ],
40 |   resolve: {
41 |     extensions: ['', '.js', '.json', '.jsx'],
42 |     modulesDirectories: ['src', 'node_modules'],
43 |   },
44 | };
45 | 


--------------------------------------------------------------------------------
/webpack.dist.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | const config = require('./webpack.config');
 4 | 
 5 | config.entry = './src/Typist.jsx';
 6 | config.output = {
 7 |   path: path.join(__dirname, './dist'),
 8 |   filename: 'Typist.js',
 9 |   library: 'Typist',
10 |   libraryTarget: 'commonjs2',
11 | };
12 | config.externals = {
13 |   react: 'react',
14 | };
15 | config.target = 'node';
16 | config.plugins = [
17 |   new ExtractTextPlugin('Typist.css', {allChunks: true}),
18 | ];
19 | 
20 | module.exports = config;
21 | 


--------------------------------------------------------------------------------
/webpack.standalone.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | const config = require('./webpack.dist.config');
 5 | 
 6 | // Complete
 7 | const conf1 = Object.assign({}, config);
 8 | conf1.output = Object.assign({}, conf1.output, {
 9 |   path: path.join(__dirname, './dist/standalone'),
10 |   libraryTarget: 'umd',
11 | });
12 | conf1.externals = {
13 |   react: 'react',
14 | };
15 | conf1.target = 'web';
16 | 
17 | // Minified
18 | const conf2 = Object.assign({}, conf1);
19 | conf2.output = Object.assign({}, conf2.output, {
20 |   filename: 'Typist.min.js',
21 | });
22 | conf2.plugins = [
23 |   new ExtractTextPlugin('Typist.min.css', {allChunks: true}),
24 |   new webpack.DefinePlugin({
25 |     'process.env': {
26 |       NODE_ENV: JSON.stringify('production'),
27 |     },
28 |   }),
29 |   new webpack.optimize.UglifyJsPlugin({
30 |     output: {
31 |       comments: false,
32 |     },
33 |     compress: {
34 |       warnings: false,
35 |     },
36 |   }),
37 | ];
38 | 
39 | module.exports = [conf1, conf2];
40 | 


--------------------------------------------------------------------------------