react-lottie 0.2.5 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.idea/inspectionProfiles/Project_Default.xml +6 -0
  2. package/.idea/workspace.xml +57 -552
  3. package/CHANGELOG.md +35 -0
  4. package/README.md +7 -9
  5. package/dist/index.js +97 -25
  6. package/package.json +20 -19
  7. package/.idea/codeStyleSettings.xml +0 -9
  8. package/.idea/jsLibraryMappings.xml +0 -6
  9. package/.idea/markdown-navigator/profiles_settings.xml +0 -3
  10. package/.idea/markdown-navigator.xml +0 -69
package/.idea/inspectionProfiles/Project_Default.xml ADDED
@@ -0,0 +1,6 @@
1
+ <component name="InspectionProjectProfileManager">
2
+ <profile version="1.0">
3
+ <option name="myName" value="Project Default" />
4
+ <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
5
+ </profile>
6
+ </component>
package/.idea/workspace.xml CHANGED
@@ -1,7 +1,7 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
2
  <project version="4">
3
3
  <component name="ChangeListManager">
4
- <list default="true" id="2ec05da0-c625-4bdf-aadb-ffd3be8ce667" name="Default" comment="" />
4
+ <list default="true" id="3c8062db-407a-4aa0-9ccb-d4deaa96a0c1" name="Default" comment="" />
5
5
  <ignored path="$PROJECT_DIR$/.tmp/" />
6
6
  <ignored path="$PROJECT_DIR$/temp/" />
7
7
  <ignored path="$PROJECT_DIR$/tmp/" />
@@ -12,125 +12,22 @@
12
12
  <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
13
13
  <option name="LAST_RESOLUTION" value="IGNORE" />
14
14
  </component>
15
- <component name="CreatePatchCommitExecutor">
16
- <option name="PATCH_PATH" value="" />
17
- </component>
18
15
  <component name="FileEditorManager">
19
- <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
20
- <file leaf-file-name="index.js" pinned="false" current-in-tab="false">
21
- <entry file="file://$PROJECT_DIR$/src/stories/index.js">
22
- <provider selected="true" editor-type-id="text-editor">
23
- <state relative-caret-position="90">
24
- <caret line="10" column="0" lean-forward="false" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
25
- <folding />
26
- </state>
27
- </provider>
28
- </entry>
29
- </file>
30
- <file leaf-file-name="lottie-control.js" pinned="false" current-in-tab="false">
31
- <entry file="file://$PROJECT_DIR$/src/stories/lottie-control.js">
32
- <provider selected="true" editor-type-id="text-editor">
33
- <state relative-caret-position="276">
34
- <caret line="32" column="25" lean-forward="true" selection-start-line="32" selection-start-column="25" selection-end-line="32" selection-end-column="25" />
35
- <folding>
36
- <element signature="e#0#25#0" expanded="true" />
37
- </folding>
38
- </state>
39
- </provider>
40
- </entry>
41
- </file>
42
- <file leaf-file-name="package-lock.json" pinned="false" current-in-tab="false">
43
- <entry file="file://$PROJECT_DIR$/package-lock.json">
44
- <provider selected="true" editor-type-id="text-editor">
45
- <state relative-caret-position="0">
46
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
47
- <folding />
48
- </state>
49
- </provider>
50
- </entry>
51
- </file>
16
+ <leaf>
52
17
  <file leaf-file-name="package.json" pinned="false" current-in-tab="true">
53
18
  <entry file="file://$PROJECT_DIR$/package.json">
54
- <provider selected="true" editor-type-id="text-editor">
55
- <state relative-caret-position="285">
56
- <caret line="19" column="38" lean-forward="false" selection-start-line="19" selection-start-column="38" selection-end-line="19" selection-end-column="38" />
57
- <folding />
58
- </state>
59
- </provider>
60
- </entry>
61
- </file>
62
- <file leaf-file-name="index.js" pinned="false" current-in-tab="false">
63
- <entry file="file://$PROJECT_DIR$/dist/index.js">
64
- <provider selected="true" editor-type-id="text-editor">
65
- <state relative-caret-position="705">
66
- <caret line="47" column="0" lean-forward="false" selection-start-line="47" selection-start-column="0" selection-end-line="47" selection-end-column="0" />
67
- <folding>
68
- <marker date="1513064804000" expanded="true" signature="1199:5082" ph="{...}" />
69
- <marker date="1513064804000" expanded="true" signature="1511:5061" ph="[...]" />
70
- <marker date="1513064804000" expanded="true" signature="5040:5048" ph="{...}" />
71
- <marker date="1513064804000" expanded="true" signature="5040:5056" ph="{...}" />
72
- <marker date="1513064804000" expanded="true" signature="5040:5060" ph="{&quot;key&quot;: 'deRegisterEvents'...}" />
73
- <marker date="1513064804000" expanded="true" signature="5159:5516" ph="{&quot;options&quot;: _propTypes2.default.object.isRequired...}" />
74
- </folding>
75
- </state>
76
- </provider>
77
- </entry>
78
- </file>
79
- <file leaf-file-name="publish_storybook.sh" pinned="false" current-in-tab="false">
80
- <entry file="file://$PROJECT_DIR$/.scripts/publish_storybook.sh">
81
19
  <provider selected="true" editor-type-id="text-editor">
82
20
  <state relative-caret-position="615">
83
- <caret line="41" column="50" lean-forward="false" selection-start-line="41" selection-start-column="50" selection-end-line="41" selection-end-column="50" />
84
- <folding />
85
- </state>
86
- </provider>
87
- </entry>
88
- </file>
89
- <file leaf-file-name="index.js" pinned="false" current-in-tab="false">
90
- <entry file="file://$PROJECT_DIR$/src/index.js">
91
- <provider selected="true" editor-type-id="text-editor">
92
- <state relative-caret-position="500">
93
- <caret line="120" column="20" lean-forward="true" selection-start-line="120" selection-start-column="20" selection-end-line="120" selection-end-column="20" />
94
- <folding>
95
- <element signature="e#0#26#0" expanded="true" />
96
- </folding>
21
+ <caret line="41" column="23" lean-forward="true" selection-start-line="41" selection-start-column="23" selection-end-line="41" selection-end-column="23" />
97
22
  </state>
98
23
  </provider>
99
24
  </entry>
100
25
  </file>
101
- <file leaf-file-name="factoryWithThrowingShims.js" pinned="false" current-in-tab="false">
102
- <entry file="file://$PROJECT_DIR$/node_modules/prop-types/factoryWithThrowingShims.js">
103
- <provider selected="true" editor-type-id="text-editor">
104
- <state relative-caret-position="232">
105
- <caret line="28" column="11" lean-forward="false" selection-start-line="28" selection-start-column="11" selection-end-line="28" selection-end-column="11" />
106
- <folding />
107
- </state>
108
- </provider>
109
- </entry>
110
- </file>
111
- <file leaf-file-name="index.js" pinned="false" current-in-tab="false">
112
- <entry file="file://$PROJECT_DIR$/node_modules/prop-types/index.js">
26
+ <file leaf-file-name="package-lock.json" pinned="false" current-in-tab="false">
27
+ <entry file="file://$PROJECT_DIR$/package-lock.json">
113
28
  <provider selected="true" editor-type-id="text-editor">
114
- <state relative-caret-position="195">
115
- <caret line="13" column="0" lean-forward="false" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" />
116
- <folding>
117
- <element signature="n#!!doc" expanded="true" />
118
- </folding>
119
- </state>
120
- </provider>
121
- </entry>
122
- </file>
123
- <file leaf-file-name="README.md" pinned="false" current-in-tab="false">
124
- <entry file="file://$PROJECT_DIR$/README.md">
125
- <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
126
- <state split_layout="SPLIT">
127
- <first_editor relative-caret-position="0">
128
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
129
- <folding />
130
- </first_editor>
131
- <second_editor>
132
- <js_state />
133
- </second_editor>
29
+ <state relative-caret-position="17508">
30
+ <caret line="8479" column="6" selection-start-line="8479" selection-start-column="6" selection-end-line="8479" selection-end-column="6" />
134
31
  </state>
135
32
  </provider>
136
33
  </entry>
@@ -139,11 +36,11 @@
139
36
  </component>
140
37
  <component name="FindInProjectRecents">
141
38
  <findStrings>
142
- <find>0.0.0</find>
143
- <find>PropTypes</find>
144
- <find>animationDataA</find>
145
- <find>forEach</find>
146
- <find>registerEvents</find>
39
+ <find>growl</find>
40
+ <find>hawk</find>
41
+ <find>request</find>
42
+ <find>storybook</find>
43
+ <find>hoek</find>
147
44
  </findStrings>
148
45
  </component>
149
46
  <component name="Git.Settings">
@@ -152,18 +49,6 @@
152
49
  <component name="IdeDocumentHistory">
153
50
  <option name="CHANGED_PATHS">
154
51
  <list>
155
- <option value="$PROJECT_DIR$/src/stories/pinjump.json" />
156
- <option value="$PROJECT_DIR$/src/tests/index.js" />
157
- <option value="$PROJECT_DIR$/src/stories/LottieControl.js" />
158
- <option value="$PROJECT_DIR$/src/stories/conner-github.css" />
159
- <option value="$PROJECT_DIR$/.storybook/webpack.config.js" />
160
- <option value="$PROJECT_DIR$/src/stories/conner-github.js" />
161
- <option value="$PROJECT_DIR$/.storybook/head.html" />
162
- <option value="$PROJECT_DIR$/README.md" />
163
- <option value="$PROJECT_DIR$/src/stories/index.js" />
164
- <option value="$PROJECT_DIR$/src/stories/toggle-like.js" />
165
- <option value="$PROJECT_DIR$/src/index.js" />
166
- <option value="$PROJECT_DIR$/src/stories/lottie-control.js" />
167
52
  <option value="$PROJECT_DIR$/package.json" />
168
53
  </list>
169
54
  </option>
@@ -179,24 +64,19 @@
179
64
  <component name="NodeModulesDirectoryManager">
180
65
  <handled-path value="$PROJECT_DIR$/node_modules" />
181
66
  </component>
182
- <component name="ProjectFrameBounds" extendedState="6">
67
+ <component name="NodePackageJsonFileManager">
68
+ <packageJsonPaths>
69
+ <path value="$PROJECT_DIR$/package.json" />
70
+ </packageJsonPaths>
71
+ </component>
72
+ <component name="ProjectFrameBounds">
183
73
  <option name="y" value="23" />
184
- <option name="width" value="1280" />
185
- <option name="height" value="773" />
74
+ <option name="width" value="1440" />
75
+ <option name="height" value="877" />
186
76
  </component>
187
77
  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
188
78
  <component name="ProjectView">
189
- <navigator currentView="ProjectPane" proportions="" version="1">
190
- <flattenPackages />
191
- <showMembers />
192
- <showModules />
193
- <showLibraryContents />
194
- <hideEmptyPackages />
195
- <abbreviatePackageNames />
196
- <autoscrollToSource />
197
- <autoscrollFromSource />
198
- <sortByType />
199
- <manualOrder />
79
+ <navigator proportions="" version="1">
200
80
  <foldersAlwaysOnTop value="true" />
201
81
  </navigator>
202
82
  <panes>
@@ -207,44 +87,22 @@
207
87
  <item name="react-lottie" type="b2602c69:ProjectViewProjectNode" />
208
88
  <item name="react-lottie" type="462c0819:PsiDirectoryNode" />
209
89
  </path>
210
- <path>
211
- <item name="react-lottie" type="b2602c69:ProjectViewProjectNode" />
212
- <item name="react-lottie" type="462c0819:PsiDirectoryNode" />
213
- <item name="src" type="462c0819:PsiDirectoryNode" />
214
- </path>
215
- <path>
216
- <item name="react-lottie" type="b2602c69:ProjectViewProjectNode" />
217
- <item name="react-lottie" type="462c0819:PsiDirectoryNode" />
218
- <item name="src" type="462c0819:PsiDirectoryNode" />
219
- <item name="stories" type="462c0819:PsiDirectoryNode" />
220
- </path>
221
90
  </expand>
222
91
  <select />
223
92
  </subPane>
224
93
  </pane>
225
- <pane id="Scratches" />
226
94
  <pane id="Scope" />
227
95
  </panes>
228
96
  </component>
229
97
  <component name="PropertiesComponent">
230
98
  <property name="WebServerToolWindowFactoryState" value="false" />
231
- <property name="HbShouldOpenHtmlAsHb" value="" />
232
99
  <property name="last_opened_file_path" value="$PROJECT_DIR$" />
233
- <property name="nodejs_interpreter_path" value="/usr/local/bin/node" />
234
- <property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
235
- <property name="nodejs.mocha.mocha_node_package_dir" value="$PROJECT_DIR$/node_modules/mocha" />
236
- <property name="js.eslint.eslintPackage" value="$PROJECT_DIR$/node_modules/eslint" />
237
- <property name="js-jscs-nodeInterpreter" value="/usr/local/bin/node" />
238
- </component>
239
- <component name="RecentsManager">
240
- <key name="MoveFile.RECENT_KEYS">
241
- <recent name="$PROJECT_DIR$/src/stories" />
242
- <recent name="$PROJECT_DIR$/src" />
243
- <recent name="$PROJECT_DIR$/src/stories/assets" />
244
- </key>
245
- <key name="CopyFile.RECENT_KEYS">
246
- <recent name="$PROJECT_DIR$/src/stories" />
247
- </key>
100
+ <property name="node.js.detected.package.eslint" value="true" />
101
+ <property name="node.js.path.for.package.eslint" value="project" />
102
+ <property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" />
103
+ <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
104
+ <property name="nodejs_npm_path_reset_for_default_project" value="true" />
105
+ <property name="nodejs_package_manager_path" value="yarn" />
248
106
  </component>
249
107
  <component name="RunDashboard">
250
108
  <option name="ruleStates">
@@ -258,127 +116,45 @@
258
116
  </list>
259
117
  </option>
260
118
  </component>
261
- <component name="RunManager">
262
- <configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
263
- <node-interpreter>project</node-interpreter>
264
- <node-options />
265
- <gulpfile />
266
- <tasks />
267
- <arguments />
268
- <envs />
269
- </configuration>
270
- <configuration default="true" type="BashConfigurationType" factoryName="Bash">
271
- <option name="INTERPRETER_OPTIONS" value="" />
272
- <option name="INTERPRETER_PATH" value="/bin/bash" />
273
- <option name="WORKING_DIRECTORY" value="" />
274
- <option name="PARENT_ENVS" value="true" />
275
- <option name="SCRIPT_NAME" value="" />
276
- <option name="PARAMETERS" value="" />
277
- <module name="" />
278
- <envs />
279
- <method />
280
- </configuration>
281
- <configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
282
- <method />
283
- </configuration>
284
- <configuration default="true" type="DartTestRunConfigurationType" factoryName="Dart Test">
285
- <method />
286
- </configuration>
287
- <configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma">
288
- <config-file value="" />
289
- <node-interpreter value="project" />
290
- <envs />
291
- <method />
292
- </configuration>
293
- <configuration default="true" type="JavaScriptTestRunnerProtractor" factoryName="Protractor">
294
- <config-file value="" />
295
- <node-interpreter value="project" />
296
- <envs />
297
- <method />
298
- </configuration>
299
- <configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
300
- <method />
301
- </configuration>
302
- <configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" path-to-node="project" working-dir="">
303
- <method />
304
- </configuration>
305
- <configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
306
- <option name="cucumberJsArguments" value="" />
307
- <option name="executablePath" />
308
- <option name="filePath" />
309
- <method />
310
- </configuration>
311
- <configuration default="true" type="js.build_tools.npm" factoryName="npm">
312
- <command value="run" />
313
- <scripts />
314
- <node-interpreter value="project" />
315
- <envs />
316
- <method />
317
- </configuration>
318
- <configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
319
- <node-interpreter>project</node-interpreter>
320
- <node-options />
321
- <working-directory />
322
- <pass-parent-env>true</pass-parent-env>
323
- <envs />
324
- <ui />
325
- <extra-mocha-options />
326
- <test-kind>DIRECTORY</test-kind>
327
- <test-directory />
328
- <recursive>false</recursive>
329
- <method />
330
- </configuration>
331
- </component>
332
- <component name="ShelveChangesManager" show_recycled="false">
333
- <option name="remove_strategy" value="false" />
119
+ <component name="SvnConfiguration">
120
+ <configuration />
334
121
  </component>
335
122
  <component name="TaskManager">
336
123
  <task active="true" id="Default" summary="Default task">
337
- <changelist id="2ec05da0-c625-4bdf-aadb-ffd3be8ce667" name="Default" comment="" />
338
- <created>1492760425128</created>
124
+ <changelist id="3c8062db-407a-4aa0-9ccb-d4deaa96a0c1" name="Default" comment="" />
125
+ <created>1528959169182</created>
339
126
  <option name="number" value="Default" />
340
127
  <option name="presentableId" value="Default" />
341
- <updated>1492760425128</updated>
342
- <workItem from="1492760426792" duration="30764000" />
343
- <workItem from="1493082891646" duration="7016000" />
344
- <workItem from="1493292293724" duration="1533000" />
345
- <workItem from="1493780166503" duration="8672000" />
346
- <workItem from="1494308789762" duration="1183000" />
347
- <workItem from="1496291892167" duration="1243000" />
348
- <workItem from="1502518635789" duration="1128000" />
349
- <workItem from="1507947565457" duration="839000" />
350
- <workItem from="1509945139062" duration="6989000" />
351
- <workItem from="1510145026419" duration="3719000" />
352
- <workItem from="1513064378996" duration="1355000" />
128
+ <updated>1528959169182</updated>
129
+ <workItem from="1528959172037" duration="1534000" />
353
130
  </task>
354
131
  <servers />
355
132
  </component>
356
133
  <component name="TimeTrackingManager">
357
- <option name="totallyTimeSpent" value="64441000" />
134
+ <option name="totallyTimeSpent" value="1534000" />
358
135
  </component>
359
136
  <component name="ToolWindowManager">
360
- <frame x="0" y="23" width="1280" height="773" extended-state="6" />
137
+ <frame x="0" y="23" width="1440" height="877" extended-state="0" />
361
138
  <editor active="true" />
362
139
  <layout>
363
- <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.22421876" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
364
- <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
365
- <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
366
- <window_info id="LuaCheck" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
367
- <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
368
- <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
369
- <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
370
- <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
371
- <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
372
- <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
373
- <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
374
- <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
375
- <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
376
- <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
377
- <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
378
- <window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
379
- <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
380
- <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3292683" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
381
- <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
140
+ <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
141
+ <window_info anchor="bottom" id="TODO" order="6" />
142
+ <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
143
+ <window_info anchor="bottom" id="Event Log" side_tool="true" />
144
+ <window_info anchor="bottom" id="Run" order="2" />
145
+ <window_info anchor="bottom" id="Version Control" />
146
+ <window_info id="npm" side_tool="true" />
147
+ <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
148
+ <window_info anchor="bottom" id="Terminal" />
149
+ <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
150
+ <window_info id="Favorites" side_tool="true" />
151
+ <window_info anchor="bottom" id="Find" order="1" />
152
+ <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
153
+ <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
154
+ <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
155
+ <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
156
+ <window_info anchor="bottom" id="Message" order="0" />
157
+ <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
382
158
  </layout>
383
159
  </component>
384
160
  <component name="TypeScriptGeneratedFilesManager">
@@ -387,289 +163,18 @@
387
163
  <component name="VcsContentAnnotationSettings">
388
164
  <option name="myLimit" value="2678400000" />
389
165
  </component>
390
- <component name="XDebuggerManager">
391
- <breakpoint-manager>
392
- <option name="time" value="1" />
393
- </breakpoint-manager>
394
- <watches-manager />
395
- </component>
396
166
  <component name="editorHistoryManager">
397
- <entry file="file://$PROJECT_DIR$/README.md" />
398
- <entry file="file://$PROJECT_DIR$/src/stories/index.js">
399
- <provider selected="true" editor-type-id="text-editor">
400
- <state relative-caret-position="0">
401
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
402
- <folding />
403
- </state>
404
- </provider>
405
- </entry>
406
- <entry file="file://$PROJECT_DIR$/src/stories/lottie-control.js">
407
- <provider selected="true" editor-type-id="text-editor">
408
- <state relative-caret-position="180">
409
- <caret line="14" column="0" lean-forward="true" selection-start-line="14" selection-start-column="0" selection-end-line="14" selection-end-column="0" />
410
- <folding>
411
- <element signature="e#0#25#0" expanded="true" />
412
- </folding>
413
- </state>
414
- </provider>
415
- </entry>
416
- <entry file="file://$PROJECT_DIR$/.storybook/config.js">
417
- <provider selected="true" editor-type-id="text-editor">
418
- <state relative-caret-position="30">
419
- <caret line="5" column="14" lean-forward="false" selection-start-line="5" selection-start-column="14" selection-end-line="5" selection-end-column="14" />
420
- <folding />
421
- </state>
422
- </provider>
423
- </entry>
424
- <entry file="file://$PROJECT_DIR$/.babelrc">
425
- <provider selected="true" editor-type-id="text-editor">
426
- <state relative-caret-position="45">
427
- <caret line="3" column="0" lean-forward="false" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" />
428
- </state>
429
- </provider>
430
- </entry>
431
- <entry file="file://$PROJECT_DIR$/package.json">
432
- <provider selected="true" editor-type-id="text-editor">
433
- <state relative-caret-position="420">
434
- <caret line="28" column="19" lean-forward="true" selection-start-line="28" selection-start-column="19" selection-end-line="28" selection-end-column="19" />
435
- <folding />
436
- </state>
437
- </provider>
438
- </entry>
439
- <entry file="file://$PROJECT_DIR$/src/tests/index.js">
440
- <provider selected="true" editor-type-id="text-editor">
441
- <state relative-caret-position="330">
442
- <caret line="26" column="5" lean-forward="false" selection-start-line="26" selection-start-column="5" selection-end-line="26" selection-end-column="5" />
443
- </state>
444
- </provider>
445
- </entry>
446
- <entry file="file://$PROJECT_DIR$/src/index.js">
447
- <provider selected="true" editor-type-id="text-editor">
448
- <state relative-caret-position="1005">
449
- <caret line="69" column="0" lean-forward="true" selection-start-line="69" selection-start-column="0" selection-end-line="69" selection-end-column="0" />
450
- <folding>
451
- <element signature="e#0#26#0" expanded="true" />
452
- </folding>
453
- </state>
454
- </provider>
455
- </entry>
456
- <entry file="file://$PROJECT_DIR$/node_modules/prop-types/index.js" />
457
- <entry file="file://$PROJECT_DIR$/node_modules/react-dom/lib/LinkedValueUtils.js" />
458
- <entry file="file://$PROJECT_DIR$/README.md" />
459
- <entry file="file://$PROJECT_DIR$/.scripts/mocha_runner.js">
460
- <provider selected="true" editor-type-id="text-editor">
461
- <state relative-caret-position="0">
462
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
463
- </state>
464
- </provider>
465
- </entry>
466
- <entry file="file://$PROJECT_DIR$/.scripts/get_gh_pages_url.js">
467
- <provider selected="true" editor-type-id="text-editor">
468
- <state relative-caret-position="0">
469
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
470
- </state>
471
- </provider>
472
- </entry>
473
- <entry file="file://$PROJECT_DIR$/.gitignore">
474
- <provider selected="true" editor-type-id="text-editor">
475
- <state relative-caret-position="0">
476
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
477
- </state>
478
- </provider>
479
- </entry>
480
- <entry file="file://$PROJECT_DIR$/CONTRIBUTING.md" />
481
- <entry file="file://$PROJECT_DIR$/LICENSE">
482
- <provider selected="true" editor-type-id="text-editor">
483
- <state relative-caret-position="0">
484
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
485
- </state>
486
- </provider>
487
- </entry>
488
- <entry file="file://$PROJECT_DIR$/npm-debug.log" />
489
- <entry file="file://$PROJECT_DIR$/src/stories/pinjump.json">
490
- <provider selected="true" editor-type-id="text-editor">
491
- <state relative-caret-position="-2205">
492
- <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
493
- </state>
494
- </provider>
495
- </entry>
496
- <entry file="file://$PROJECT_DIR$/.scripts/user/prepublish.sh">
497
- <provider selected="true" editor-type-id="text-editor">
498
- <state relative-caret-position="0">
499
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
500
- </state>
501
- </provider>
502
- </entry>
503
- <entry file="file://$PROJECT_DIR$/.scripts/prepublish.sh">
504
- <provider selected="true" editor-type-id="text-editor">
505
- <state relative-caret-position="225">
506
- <caret line="15" column="29" lean-forward="false" selection-start-line="15" selection-start-column="29" selection-end-line="15" selection-end-column="29" />
507
- </state>
508
- </provider>
509
- </entry>
510
- <entry file="file://$PROJECT_DIR$/.npmignore">
511
- <provider selected="true" editor-type-id="text-editor">
512
- <state relative-caret-position="0">
513
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
514
- </state>
515
- </provider>
516
- </entry>
517
- <entry file="file://$PROJECT_DIR$/.eslintrc">
518
- <provider selected="true" editor-type-id="text-editor">
519
- <state relative-caret-position="315">
520
- <caret line="21" column="0" lean-forward="false" selection-start-line="21" selection-start-column="0" selection-end-line="21" selection-end-column="0" />
521
- </state>
522
- </provider>
523
- </entry>
524
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/demo/public/index.html" />
525
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/README.md" />
526
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/CODE_OF_CONDUCT.md" />
527
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/CHANGELOG.md" />
528
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/CONTRIBUTING.md" />
529
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/addons.js" />
530
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/dist/client/manager/preview.js" />
531
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/dist/client/manager/index.js" />
532
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/demo/.storybook/config.js" />
533
- <entry file="file://$PROJECT_DIR$/node_modules/@kadira/storybook/config/storybook.d.ts" />
534
- <entry file="file://$PROJECT_DIR$/.babelrc">
535
- <provider selected="true" editor-type-id="text-editor">
536
- <state relative-caret-position="45">
537
- <caret line="3" column="0" lean-forward="false" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" />
538
- </state>
539
- </provider>
540
- </entry>
541
- <entry file="file://$PROJECT_DIR$/src/tests/index.js">
542
- <provider selected="true" editor-type-id="text-editor">
543
- <state relative-caret-position="330">
544
- <caret line="26" column="5" lean-forward="false" selection-start-line="26" selection-start-column="5" selection-end-line="26" selection-end-column="5" />
545
- </state>
546
- </provider>
547
- </entry>
548
- <entry file="file://$PROJECT_DIR$/node_modules/react-dom/lib/LinkedValueUtils.js" />
549
- <entry file="file://$PROJECT_DIR$/.storybook/config.js">
550
- <provider selected="true" editor-type-id="text-editor">
551
- <state relative-caret-position="90">
552
- <caret line="9" column="1" lean-forward="false" selection-start-line="9" selection-start-column="1" selection-end-line="9" selection-end-column="1" />
553
- <folding />
554
- </state>
555
- </provider>
556
- </entry>
557
- <entry file="file://$PROJECT_DIR$/.storybook/webpack.config.js" />
558
- <entry file="file://$PROJECT_DIR$/src/stories/conner-github.css" />
559
- <entry file="file://$PROJECT_DIR$/src/stories/conner-github.js" />
560
- <entry file="file://$PROJECT_DIR$/.storybook/head.html">
561
- <provider selected="true" editor-type-id="text-editor">
562
- <state relative-caret-position="0">
563
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="43" selection-end-column="8" />
564
- <folding>
565
- <element signature="n#style#0;n#svg#0;n#a#0;n#!!top" expanded="true" />
566
- <element signature="n#style#0;n#path#1;n#svg#0;n#a#0;n#!!top" expanded="true" />
567
- </folding>
568
- </state>
569
- </provider>
570
- </entry>
571
- <entry file="file://$PROJECT_DIR$/dist/index.js">
572
- <provider selected="true" editor-type-id="text-editor">
573
- <state relative-caret-position="705">
574
- <caret line="47" column="0" lean-forward="false" selection-start-line="47" selection-start-column="0" selection-end-line="47" selection-end-column="0" />
575
- <folding>
576
- <marker date="1513064804000" expanded="true" signature="1199:5082" ph="{...}" />
577
- <marker date="1513064804000" expanded="true" signature="1511:5061" ph="[...]" />
578
- <marker date="1513064804000" expanded="true" signature="5040:5048" ph="{...}" />
579
- <marker date="1513064804000" expanded="true" signature="5040:5056" ph="{...}" />
580
- <marker date="1513064804000" expanded="true" signature="5040:5060" ph="{&quot;key&quot;: 'deRegisterEvents'...}" />
581
- <marker date="1513064804000" expanded="true" signature="5159:5516" ph="{&quot;options&quot;: _propTypes2.default.object.isRequired...}" />
582
- </folding>
583
- </state>
584
- </provider>
585
- </entry>
586
- <entry file="file://$PROJECT_DIR$/README.md">
587
- <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
588
- <state split_layout="SPLIT">
589
- <first_editor relative-caret-position="0">
590
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
591
- <folding />
592
- </first_editor>
593
- <second_editor>
594
- <js_state />
595
- </second_editor>
596
- </state>
597
- </provider>
598
- <provider editor-type-id="text-editor">
599
- <state relative-caret-position="0">
600
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
601
- <folding />
602
- </state>
603
- </provider>
604
- </entry>
605
- <entry file="file://$PROJECT_DIR$/src/stories/toggle-like.js" />
606
- <entry file="file://$PROJECT_DIR$/.scripts/publish_storybook.sh">
607
- <provider selected="true" editor-type-id="text-editor">
608
- <state relative-caret-position="615">
609
- <caret line="41" column="50" lean-forward="false" selection-start-line="41" selection-start-column="50" selection-end-line="41" selection-end-column="50" />
610
- <folding />
611
- </state>
612
- </provider>
613
- </entry>
614
- <entry file="file://$PROJECT_DIR$/node_modules/prop-types/index.js">
615
- <provider selected="true" editor-type-id="text-editor">
616
- <state relative-caret-position="195">
617
- <caret line="13" column="0" lean-forward="false" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" />
618
- <folding>
619
- <element signature="n#!!doc" expanded="true" />
620
- </folding>
621
- </state>
622
- </provider>
623
- </entry>
624
- <entry file="file://$PROJECT_DIR$/node_modules/prop-types/factoryWithThrowingShims.js">
625
- <provider selected="true" editor-type-id="text-editor">
626
- <state relative-caret-position="232">
627
- <caret line="28" column="11" lean-forward="false" selection-start-line="28" selection-start-column="11" selection-end-line="28" selection-end-column="11" />
628
- <folding />
629
- </state>
630
- </provider>
631
- </entry>
632
- <entry file="file://$PROJECT_DIR$/src/index.js">
633
- <provider selected="true" editor-type-id="text-editor">
634
- <state relative-caret-position="500">
635
- <caret line="120" column="20" lean-forward="true" selection-start-line="120" selection-start-column="20" selection-end-line="120" selection-end-column="20" />
636
- <folding>
637
- <element signature="e#0#26#0" expanded="true" />
638
- </folding>
639
- </state>
640
- </provider>
641
- </entry>
642
- <entry file="file://$PROJECT_DIR$/src/stories/index.js">
643
- <provider selected="true" editor-type-id="text-editor">
644
- <state relative-caret-position="90">
645
- <caret line="10" column="0" lean-forward="false" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
646
- <folding />
647
- </state>
648
- </provider>
649
- </entry>
650
- <entry file="file://$PROJECT_DIR$/src/stories/lottie-control.js">
651
- <provider selected="true" editor-type-id="text-editor">
652
- <state relative-caret-position="276">
653
- <caret line="32" column="25" lean-forward="true" selection-start-line="32" selection-start-column="25" selection-end-line="32" selection-end-column="25" />
654
- <folding>
655
- <element signature="e#0#25#0" expanded="true" />
656
- </folding>
657
- </state>
658
- </provider>
659
- </entry>
660
167
  <entry file="file://$PROJECT_DIR$/package-lock.json">
661
168
  <provider selected="true" editor-type-id="text-editor">
662
- <state relative-caret-position="0">
663
- <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
664
- <folding />
169
+ <state relative-caret-position="17508">
170
+ <caret line="8479" column="6" selection-start-line="8479" selection-start-column="6" selection-end-line="8479" selection-end-column="6" />
665
171
  </state>
666
172
  </provider>
667
173
  </entry>
668
174
  <entry file="file://$PROJECT_DIR$/package.json">
669
175
  <provider selected="true" editor-type-id="text-editor">
670
- <state relative-caret-position="285">
671
- <caret line="19" column="38" lean-forward="false" selection-start-line="19" selection-start-column="38" selection-end-line="19" selection-end-column="38" />
672
- <folding />
176
+ <state relative-caret-position="615">
177
+ <caret line="41" column="23" lean-forward="true" selection-start-line="41" selection-start-column="23" selection-end-line="41" selection-end-column="23" />
673
178
  </state>
674
179
  </provider>
675
180
  </entry>
package/CHANGELOG.md CHANGED
@@ -2,6 +2,41 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ <a name="1.2.3"></a>
6
+ ## [1.2.3](https://github.com/chenqingspring/react-lottie/compare/v1.2.2...v1.2.3) (2018-06-14)
7
+
8
+
9
+
10
+ <a name="1.2.2"></a>
11
+ ## [1.2.2](https://github.com/chenqingspring/react-lottie/compare/v1.2.1...v1.2.2) (2018-06-14)
12
+
13
+
14
+
15
+ <a name="1.2.1"></a>
16
+ ## [1.2.1](https://github.com/chenqingspring/react-lottie/compare/v1.2.0...v1.2.1) (2018-06-14)
17
+
18
+
19
+
20
+ <a name="1.2.0"></a>
21
+ # [1.2.0](https://github.com/chenqingspring/react-lottie/compare/v1.1.0...v1.2.0) (2018-06-14)
22
+
23
+
24
+ ### Features
25
+
26
+ * Allow custom styles (helps fix [#18](https://github.com/chenqingspring/react-lottie/issues/18)) ([d624a51](https://github.com/chenqingspring/react-lottie/commit/d624a51))
27
+
28
+
29
+
30
+ <a name="1.1.0"></a>
31
+ # [1.1.0](https://github.com/chenqingspring/react-lottie/compare/v1.0.0...v1.1.0) (2018-04-03)
32
+
33
+
34
+
35
+ <a name="1.0.0"></a>
36
+ # [1.0.0](https://github.com/chenqingspring/react-lottie/compare/v0.2.5...v1.0.0) (2018-01-17)
37
+
38
+
39
+
5
40
  <a name="0.2.5"></a>
6
41
  ## [0.2.5](https://github.com/chenqingspring/react-lottie/compare/v0.2.4...v0.2.5) (2017-12-12)
7
42
 
package/README.md CHANGED
@@ -58,7 +58,7 @@ export default class LottieControl extends React.Component {
58
58
  autoplay: true,
59
59
  animationData: animationData,
60
60
  rendererSettings: {
61
- preserveAspectRatio: xMidYMid slice
61
+ preserveAspectRatio: 'xMidYMid slice'
62
62
  }
63
63
  };
64
64
 
@@ -106,14 +106,12 @@ This is an array of objects containing a `eventName` and `callback` function tha
106
106
 
107
107
  example:
108
108
  ```jsx
109
- eventListeners={
110
- [
111
- {
112
- eventName: 'complete',
113
- callback: () => console.log('the animation completed:'),
114
- },
115
- ]
116
- }
109
+ eventListeners=[
110
+ {
111
+ eventName: 'complete',
112
+ callback: () => console.log('the animation completed:'),
113
+ },
114
+ ]
117
115
  ```
118
116
 
119
117
  ## Related Projects
package/dist/index.js CHANGED
@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
+ var _extends2 = require('babel-runtime/helpers/extends');
8
+
9
+ var _extends3 = _interopRequireDefault(_extends2);
10
+
7
11
  var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
8
12
 
9
13
  var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -32,9 +36,9 @@ var _propTypes = require('prop-types');
32
36
 
33
37
  var _propTypes2 = _interopRequireDefault(_propTypes);
34
38
 
35
- var _bodymovin = require('bodymovin');
39
+ var _lottieWeb = require('lottie-web');
36
40
 
37
- var _bodymovin2 = _interopRequireDefault(_bodymovin);
41
+ var _lottieWeb2 = _interopRequireDefault(_lottieWeb);
38
42
 
39
43
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
40
44
 
@@ -42,20 +46,38 @@ var Lottie = function (_React$Component) {
42
46
  (0, _inherits3.default)(Lottie, _React$Component);
43
47
 
44
48
  function Lottie() {
49
+ var _ref;
50
+
51
+ var _temp, _this, _ret;
52
+
45
53
  (0, _classCallCheck3.default)(this, Lottie);
46
- return (0, _possibleConstructorReturn3.default)(this, (Lottie.__proto__ || (0, _getPrototypeOf2.default)(Lottie)).apply(this, arguments));
54
+
55
+ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
56
+ args[_key] = arguments[_key];
57
+ }
58
+
59
+ return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Lottie.__proto__ || (0, _getPrototypeOf2.default)(Lottie)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickToPause = function () {
60
+ // The pause() method is for handling pausing by passing a prop isPaused
61
+ // This method is for handling the ability to pause by clicking on the animation
62
+ if (_this.anim.isPaused) {
63
+ _this.anim.play();
64
+ } else {
65
+ _this.anim.pause();
66
+ }
67
+ }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
47
68
  }
48
69
 
49
70
  (0, _createClass3.default)(Lottie, [{
50
71
  key: 'componentDidMount',
51
72
  value: function componentDidMount() {
52
73
  var _props = this.props,
53
- _props$options = _props.options,
54
- loop = _props$options.loop,
55
- autoplay = _props$options.autoplay,
56
- animationData = _props$options.animationData,
57
- rendererSettings = _props$options.rendererSettings,
74
+ options = _props.options,
58
75
  eventListeners = _props.eventListeners;
76
+ var loop = options.loop,
77
+ autoplay = options.autoplay,
78
+ animationData = options.animationData,
79
+ rendererSettings = options.rendererSettings,
80
+ segments = options.segments;
59
81
 
60
82
 
61
83
  this.options = {
@@ -63,11 +85,14 @@ var Lottie = function (_React$Component) {
63
85
  renderer: 'svg',
64
86
  loop: loop !== false,
65
87
  autoplay: autoplay !== false,
88
+ segments: segments !== false,
66
89
  animationData: animationData,
67
90
  rendererSettings: rendererSettings
68
91
  };
69
92
 
70
- this.anim = _bodymovin2.default.loadAnimation(this.options);
93
+ this.options = (0, _extends3.default)({}, this.options, options);
94
+
95
+ this.anim = _lottieWeb2.default.loadAnimation(this.options);
71
96
  this.registerEvents(eventListeners);
72
97
  }
73
98
  }, {
@@ -77,19 +102,34 @@ var Lottie = function (_React$Component) {
77
102
  if (this.options.animationData !== nextProps.options.animationData) {
78
103
  this.deRegisterEvents(this.props.eventListeners);
79
104
  this.destroy();
80
- this.options.animationData = nextProps.options.animationData;
81
- this.anim = _bodymovin2.default.loadAnimation(this.options);
105
+ this.options = (0, _extends3.default)({}, this.options, nextProps.options);
106
+ this.anim = _lottieWeb2.default.loadAnimation(this.options);
82
107
  this.registerEvents(nextProps.eventListeners);
83
108
  }
84
109
  }
85
110
  }, {
86
111
  key: 'componentDidUpdate',
87
112
  value: function componentDidUpdate() {
88
- this.props.isStopped ? this.stop() : this.play();
113
+ if (this.props.isStopped) {
114
+ this.stop();
115
+ } else if (this.props.segments) {
116
+ this.playSegments();
117
+ } else {
118
+ this.play();
119
+ }
120
+
89
121
  this.pause();
90
122
  this.setSpeed();
91
123
  this.setDirection();
92
124
  }
125
+ }, {
126
+ key: 'componentWillUnmount',
127
+ value: function componentWillUnmount() {
128
+ this.deRegisterEvents(this.props.eventListeners);
129
+ this.destroy();
130
+ this.options.animationData = null;
131
+ this.anim = null;
132
+ }
93
133
  }, {
94
134
  key: 'setSpeed',
95
135
  value: function setSpeed() {
@@ -105,6 +145,11 @@ var Lottie = function (_React$Component) {
105
145
  value: function play() {
106
146
  this.anim.play();
107
147
  }
148
+ }, {
149
+ key: 'playSegments',
150
+ value: function playSegments() {
151
+ this.anim.playSegments(this.props.segments);
152
+ }
108
153
  }, {
109
154
  key: 'stop',
110
155
  value: function stop() {
@@ -149,7 +194,11 @@ var Lottie = function (_React$Component) {
149
194
 
150
195
  var _props2 = this.props,
151
196
  width = _props2.width,
152
- height = _props2.height;
197
+ height = _props2.height,
198
+ ariaRole = _props2.ariaRole,
199
+ ariaLabel = _props2.ariaLabel,
200
+ isClickToPauseDisabled = _props2.isClickToPauseDisabled,
201
+ title = _props2.title;
153
202
 
154
203
 
155
204
  var getSize = function getSize(initial) {
@@ -164,19 +213,33 @@ var Lottie = function (_React$Component) {
164
213
  return size;
165
214
  };
166
215
 
167
- var lottieStyles = {
216
+ var lottieStyles = (0, _extends3.default)({
168
217
  width: getSize(width),
169
218
  height: getSize(height),
170
219
  overflow: 'hidden',
171
- margin: '0 auto'
172
- };
173
-
174
- return _react2.default.createElement('div', {
175
- ref: function ref(c) {
176
- _this4.el = c;
177
- },
178
- style: lottieStyles
179
- });
220
+ margin: '0 auto',
221
+ outline: 'none'
222
+ }, this.props.style);
223
+
224
+ var onClickHandler = isClickToPauseDisabled ? function () {
225
+ return null;
226
+ } : this.handleClickToPause;
227
+
228
+ return (
229
+ // Bug with eslint rules https://github.com/airbnb/javascript/issues/1374
230
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
231
+ _react2.default.createElement('div', {
232
+ ref: function ref(c) {
233
+ _this4.el = c;
234
+ },
235
+ style: lottieStyles,
236
+ onClick: onClickHandler,
237
+ title: title,
238
+ role: ariaRole,
239
+ 'aria-label': ariaLabel,
240
+ tabIndex: '0'
241
+ })
242
+ );
180
243
  }
181
244
  }]);
182
245
  return Lottie;
@@ -193,12 +256,21 @@ Lottie.propTypes = {
193
256
  isStopped: _propTypes2.default.bool,
194
257
  isPaused: _propTypes2.default.bool,
195
258
  speed: _propTypes2.default.number,
196
- direction: _propTypes2.default.number
259
+ segments: _propTypes2.default.arrayOf(_propTypes2.default.number),
260
+ direction: _propTypes2.default.number,
261
+ ariaRole: _propTypes2.default.string,
262
+ ariaLabel: _propTypes2.default.string,
263
+ isClickToPauseDisabled: _propTypes2.default.bool,
264
+ title: _propTypes2.default.string
197
265
  };
198
266
 
199
267
  Lottie.defaultProps = {
200
268
  eventListeners: [],
201
269
  isStopped: false,
202
270
  isPaused: false,
203
- speed: 1
271
+ speed: 1,
272
+ ariaRole: 'button',
273
+ ariaLabel: 'animation',
274
+ isClickToPauseDisabled: false,
275
+ title: ''
204
276
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-lottie",
3
- "version": "0.2.5",
3
+ "version": "1.2.3",
4
4
  "description": "lottie animation view for React",
5
5
  "repository": {
6
6
  "type": "git",
@@ -20,36 +20,37 @@
20
20
  "postpublish": "npm run publish-storybook"
21
21
  },
22
22
  "devDependencies": {
23
- "react": "^15.3.2",
24
- "react-dom": "^15.3.2",
25
- "prop-types": "^15.3.2",
23
+ "@kadira/storybook": "^2.35.3",
24
+ "babel-cli": "^6.26.0",
25
+ "babel-core": "^6.26.3",
26
+ "babel-eslint": "^6.1.2",
26
27
  "babel-loader": "^6.2.5",
27
- "babel-polyfill": "^6.13.0",
28
- "babel-preset-react-app": "^0.2.1",
29
- "babel-cli": "^6.14.0",
30
- "babel-core": "^6.14.0",
31
28
  "babel-plugin-transform-runtime": "^6.15.0",
29
+ "babel-polyfill": "^6.26.0",
30
+ "babel-preset-react-app": "^0.2.1",
31
+ "chai": "^3.5.0",
32
+ "enzyme": "^2.2.0",
32
33
  "eslint": "^3.6.0",
33
- "babel-eslint": "^6.1.2",
34
34
  "eslint-config-airbnb": "^12.0.0",
35
35
  "eslint-plugin-import": "^1.16.0",
36
36
  "eslint-plugin-jsx-a11y": "^2.2.2",
37
37
  "eslint-plugin-react": "^6.3.0",
38
- "mocha": "^3.0.2",
39
- "chai": "^3.5.0",
40
- "sinon": "^1.17.6",
41
- "enzyme": "^2.2.0",
42
- "react-addons-test-utils": "^15.3.2",
38
+ "git-url-parse": "^6.0.1",
43
39
  "jsdom": "^9.5.0",
44
- "@kadira/storybook": "^2.35.3",
45
- "git-url-parse": "^6.0.1"
40
+ "mocha": "^5.2.0",
41
+ "prop-types": "^15.6.1",
42
+ "react": "^15.6.2",
43
+ "react-addons-test-utils": "^15.6.2",
44
+ "react-dom": "^15.6.2",
45
+ "sinon": "^1.17.6",
46
+ "standard-version": "^4.4.0"
46
47
  },
47
48
  "peerDependencies": {
48
- "react": "^0.14.7 || ^15.0.0"
49
+ "react": "^0.14.7 || ^15.0.0 || ^16.0.0"
49
50
  },
50
51
  "dependencies": {
51
- "babel-runtime": "^6.11.6",
52
- "bodymovin": "^4.7.1"
52
+ "babel-runtime": "^6.26.0",
53
+ "lottie-web": "^5.1.3"
53
54
  },
54
55
  "main": "dist/index.js",
55
56
  "engines": {
package/.idea/codeStyleSettings.xml DELETED
@@ -1,9 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="ProjectCodeStyleSettingsManager">
4
- <option name="PER_PROJECT_SETTINGS">
5
- <value />
6
- </option>
7
- <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default (1)" />
8
- </component>
9
- </project>
package/.idea/jsLibraryMappings.xml DELETED
@@ -1,6 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="JavaScriptLibraryMappings">
4
- <includedPredefinedLibrary name="ECMAScript 6" />
5
- </component>
6
- </project>
package/.idea/markdown-navigator/profiles_settings.xml DELETED
@@ -1,3 +0,0 @@
1
- <component name="MarkdownNavigator.ProfileManager">
2
- <settings default="" pdf-export="" />
3
- </component>
package/.idea/markdown-navigator.xml DELETED
@@ -1,69 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="MarkdownProjectSettings">
4
- <PreviewSettings splitEditorLayout="SPLIT" splitEditorPreview="PREVIEW" useGrayscaleRendering="false" zoomFactor="1.0" maxImageWidth="0" showGitHubPageIfSynced="false" allowBrowsingInPreview="false" synchronizePreviewPosition="true" highlightPreviewType="NONE" highlightFadeOut="5" highlightOnTyping="true" synchronizeSourcePosition="true">
5
- <PanelProvider>
6
- <provider providerId="com.vladsch.idea.multimarkdown.editor.swing.html.panel" providerName="Default - Swing" />
7
- </PanelProvider>
8
- </PreviewSettings>
9
- <ParserSettings>
10
- <PegdownExtensions>
11
- <option name="ABBREVIATIONS" value="false" />
12
- <option name="ANCHORLINKS" value="true" />
13
- <option name="ATXHEADERSPACE" value="true" />
14
- <option name="AUTOLINKS" value="true" />
15
- <option name="DEFINITIONS" value="false" />
16
- <option name="FENCED_CODE_BLOCKS" value="true" />
17
- <option name="FOOTNOTES" value="false" />
18
- <option name="HARDWRAPS" value="false" />
19
- <option name="INSERTED" value="false" />
20
- <option name="QUOTES" value="false" />
21
- <option name="RELAXEDHRULES" value="true" />
22
- <option name="SMARTS" value="false" />
23
- <option name="STRIKETHROUGH" value="true" />
24
- <option name="SUBSCRIPT" value="false" />
25
- <option name="SUPERSCRIPT" value="false" />
26
- <option name="SUPPRESS_HTML_BLOCKS" value="false" />
27
- <option name="SUPPRESS_INLINE_HTML" value="false" />
28
- <option name="TABLES" value="true" />
29
- <option name="TASKLISTITEMS" value="true" />
30
- <option name="TOC" value="false" />
31
- <option name="WIKILINKS" value="true" />
32
- </PegdownExtensions>
33
- <ParserOptions>
34
- <option name="COMMONMARK_LISTS" value="false" />
35
- <option name="DUMMY" value="false" />
36
- <option name="EMOJI_SHORTCUTS" value="true" />
37
- <option name="FLEXMARK_FRONT_MATTER" value="false" />
38
- <option name="GFM_LOOSE_BLANK_LINE_AFTER_ITEM_PARA" value="true" />
39
- <option name="GFM_TABLE_RENDERING" value="true" />
40
- <option name="GITBOOK_URL_ENCODING" value="false" />
41
- <option name="GITHUB_EMOJI_URL" value="false" />
42
- <option name="GITHUB_LISTS" value="true" />
43
- <option name="GITHUB_WIKI_LINKS" value="true" />
44
- <option name="JEKYLL_FRONT_MATTER" value="false" />
45
- <option name="SIM_TOC_BLANK_LINE_SPACER" value="true" />
46
- </ParserOptions>
47
- </ParserSettings>
48
- <HtmlSettings headerTopEnabled="false" headerBottomEnabled="false" bodyTopEnabled="false" bodyBottomEnabled="false" embedUrlContent="false" addPageHeader="true">
49
- <GeneratorProvider>
50
- <provider providerId="com.vladsch.idea.multimarkdown.editor.swing.html.generator" providerName="Default Swing HTML Generator" />
51
- </GeneratorProvider>
52
- <headerTop />
53
- <headerBottom />
54
- <bodyTop />
55
- <bodyBottom />
56
- </HtmlSettings>
57
- <CssSettings previewScheme="UI_SCHEME" cssUri="" isCssUriEnabled="false" isCssTextEnabled="false" isDynamicPageWidth="true">
58
- <StylesheetProvider>
59
- <provider providerId="com.vladsch.idea.multimarkdown.editor.swing.html.css" providerName="Default Swing Stylesheet" />
60
- </StylesheetProvider>
61
- <ScriptProviders />
62
- <cssText />
63
- </CssSettings>
64
- <HtmlExportSettings updateOnSave="false" parentDir="$ProjectFileDir$" targetDir="$ProjectFileDir$" cssDir="" scriptDir="" plainHtml="false" imageDir="" copyLinkedImages="false" imageUniquifyType="0" targetExt="" useTargetExt="false" noCssNoScripts="false" linkToExportedHtml="true" exportOnSettingsChange="true" regenerateOnProjectOpen="false" />
65
- <LinkMapSettings>
66
- <textMaps />
67
- </LinkMapSettings>
68
- </component>
69
- </project>