emoji-rating-component/components/AnimatedEmoji.js

[//]: # (add badges) A reactjs emoji-based rating component based on [react-lottie](https://www.npmjs.com/package/react-lottie)

import React, { Component } from 'react';
import Lottie from "react-lottie";
class AnimatedEmoji extends Component {
    constructor() {
        super(...arguments);
        this.state = { active: false };
    }
    render() {
        var _a, _b;
        let config = {
            loop: true,
            autoplay: false,
            animationData: this.props.lottie,
            rendererSettings: {
                preserveAspectRatio: 'xMidYMid slice'
            }
        };
        return (React.createElement("div", { onMouseEnter: _ => this.setState({ active: true }), onMouseLeave: _ => this.setState({ active: false }), onClick: _ => this.props.onClick(), style: { filter: this.props.selected || this.state.active ? 'unset' : 'grayscale(100%)' } },
            React.createElement(Lottie, { options: config, height: (_a = this.props.size) !== null && _a !== void 0 ? _a : 64, width: (_b = this.props.size) !== null && _b !== void 0 ? _b : 64, isStopped: !this.props.selected && !this.state.active })));
    }
}
export default AnimatedEmoji;