From 32b08be5efaf130f37fddf67c1f868936e238605 Mon Sep 17 00:00:00 2001
From: Fyvel <fdelage8000@gmail.com>
Date: Tue, 4 Jan 2022 12:09:34 +1000
Subject: [PATCH] Update PropTypes 'style'

---
 src/index.js                |  5 ++-
 src/stories/StyledLottie.js | 64 +++++++++++++++++++++++++++++++++++++
 src/stories/index.js        |  4 ++-
 3 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/stories/StyledLottie.js

diff --git a/src/index.js b/src/index.js
index 465fd8c..4ac6efc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -210,7 +210,10 @@ Lottie.propTypes = {
   ariaRole: PropTypes.string,
   ariaLabel: PropTypes.string,
   title: PropTypes.string,
-  style: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ])),
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
diff --git a/src/stories/StyledLottie.js b/src/stories/StyledLottie.js
new file mode 100644
index 0000000..4fed8e9
--- /dev/null
+++ b/src/stories/StyledLottie.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import Lottie from '../index';
+import * as animationData from './TwitterHeart.json';
+
+export default class StyledLottie extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      transformInput: 0,
+      opacityInput: 100,
+      styles: {},
+    };
+  }
+
+  handleStyleChanges(cssProperty) {
+    this.setState(prev => ({
+      ...prev,
+      styles: {
+        ...prev.styles,
+        [cssProperty.name]: cssProperty.value,
+      },
+    }));
+  }
+
+  render() {
+    const centerStyle = {
+      display: 'block',
+      margin: '10px auto',
+      textAlign: 'center',
+    };
+    const { transformInput, opacityInput } = this.state;
+    const defaultOptions = { animationData };
+
+    return (<div>
+      <Lottie
+        options={defaultOptions}
+        height={400}
+        width={400}
+        style={this.state.styles}
+      />
+
+      <p style={centerStyle}>Rotate: {transformInput}°</p>
+      <input
+        style={centerStyle}
+        type="range" value={transformInput} min="0" max="360" step="5"
+        onChange={(e) => {
+          this.setState({ transformInput: e.currentTarget.value });
+          this.handleStyleChanges({ name: 'transform', value: `rotate(${e.currentTarget.value}deg)` });
+        }}
+      />
+      <p style={centerStyle}>Opacity: {opacityInput}</p>
+      <input
+        style={centerStyle}
+        type="range" value={opacityInput} min="0" max="100" step="10"
+        onChange={(e) => {
+          this.setState({ opacityInput: +e.currentTarget.value });
+          this.handleStyleChanges({ name: 'opacity', value: +e.currentTarget.value / 100 });
+        }}
+      />
+    </div>);
+  }
+}
diff --git a/src/stories/index.js b/src/stories/index.js
index cbb5d61..edfe93a 100644
--- a/src/stories/index.js
+++ b/src/stories/index.js
@@ -5,10 +5,12 @@ import LottieControlSegments from './lottie-control-segments';
 import ToggleLike from './toggle-like';
 import TransitionLoop from './TransitionLoop';
 import TransitionWithOptions from './TransitionWithOptions';
+import StyledLottie from './StyledLottie';
 
 storiesOf('Lottie Animation View', module)
   .add('with control', () => <LottieControl />)
   .add('toggle like', () => <ToggleLike />)
   .add('transitions & loops', () => <TransitionLoop />)
   .add('transitions with options', () => <TransitionWithOptions />)
-  .add('with segments', () => <LottieControlSegments />);
+  .add('with segments', () => <LottieControlSegments />)
+  .add('styling', () => <StyledLottie />);