react-animated-buttons/dist/components/animated-button/animated-button.js

Customizable Button component that includes some preset animations when the component is hover

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _color = _interopRequireDefault(require("color"));

var _animations = require("../constants/animations");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: inline-block;\n    width: ", "; \n    cursor: pointer;\n    margin: 0.2rem 0.5rem;\n    border-radius: ", ";\n    padding: 0.5rem 1rem;\n    color: ", ";\n    background-color: ", ";\n    border: 1px solid ", ";\n    font-family: ", ";\n    animation: ", " ", "s ease-in;\n    animation-fill-mode: ", ";\n\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n        animation: ", " ", "s ", ";\n        animation-fill-mode: ", ";\n    }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var definedColors = {
  info: '#48dbfb',
  success: '#1dd1a1',
  danger: '#ee5253',
  warning: '#feca57',
  lightPink: '#ff9ff3',
  darkPurple: '#5f27cd',
  dark: '#222f3e'
};
var animationsIn = {
  zoomIn: _animations.crescendo,
  pulse: _animations.pulseIn,
  brightness: _animations.brigthIn
};
var animationsOut = {
  zoomIn: _animations.decrescendo,
  pulse: _animations.pulseOut,
  brightness: _animations.brigthOut
};

var AnimatedButton = function AnimatedButton(_ref) {
  var children = _ref.children,
      textColor = _ref.textColor,
      color = _ref.color,
      fontFamily = _ref.fontFamily,
      fullWidth = _ref.fullWidth,
      onClick = _ref.onClick,
      variant = _ref.variant,
      buttonStyle = _ref.buttonStyle,
      animationType = _ref.animationType,
      animationDuration = _ref.animationDuration,
      buttonRadius = _ref.buttonRadius;
  return _react.default.createElement(Container, {
    color: definedColors[color] || color,
    textColor: textColor,
    fontFamily: fontFamily,
    fullWidth: fullWidth,
    variant: variant,
    style: buttonStyle,
    animationType: animationType,
    animationDuration: animationDuration,
    buttonRadius: buttonRadius,
    onClick: onClick
  }, children);
};

var Container = _styledComponents.default.div(_templateObject(), function (props) {
  return props.fullWidth ? '100%' : 'auto';
}, function (props) {
  return props.buttonRadius;
}, function (props) {
  return props.variant === 'filled' ? props.textColor : props.color;
}, function (props) {
  return props.variant === 'filled' ? props.color : 'transparent';
}, function (props) {
  return props.color;
}, function (props) {
  return props.fontFamily;
}, function (props) {
  return animationsOut[props.animationType];
}, function (props) {
  return props.animationDuration;
}, function (props) {
  return props.animationType === 'zoomIn' && 'forwards';
}, function (props) {
  return props.variant === 'filled' ? (0, _color.default)(props.color).darken(0.2).string() : 'transparent';
}, function (props) {
  return props.variant === 'filled' ? props.textColor : (0, _color.default)(props.color).darken(0.2).string();
}, function (props) {
  return (0, _color.default)(props.color).darken(0.2).string();
}, function (props) {
  return animationsIn[props.animationType];
}, function (props) {
  return props.animationDuration;
}, function (props) {
  return props.animationType === 'zoomIn' ? 'ease-in' : 'infinite';
}, function (props) {
  return props.animationType === 'zoomIn' && 'forwards';
});

AnimatedButton.propTypes = {
  /** Content of the Button component */
  // eslint-disable-next-line react/forbid-prop-types
  children: _propTypes.default.any,

  /** Button background color */
  color: _propTypes.default.string,

  /** Button text color */
  textColor: _propTypes.default.string,

  /** Button text font-family */
  fontFamily: _propTypes.default.string,

  /** Set the component width as 100% */
  fullWidth: _propTypes.default.bool,

  /** Inline styles to modify the default component styles */
  // eslint-disable-next-line react/forbid-prop-types
  buttonStyle: _propTypes.default.object,

  /** Button Colors combination variant */
  variant: _propTypes.default.oneOf(['filled', 'outlined']),

  /** Animation used when the component is hover */
  animationType: _propTypes.default.oneOf(['zoomIn', 'pulse', 'brightness']),

  /** Duration of the animation selected */
  animationDuration: _propTypes.default.number,

  /** Button container border radius */
  buttonRadius: _propTypes.default.string,

  /** Action called when the user clicks on the button */
  onClick: _propTypes.default.func
};
AnimatedButton.defaultProps = {
  children: null,
  color: '#c8d6e5',
  textColor: 'black',
  fontFamily: 'Arial',
  fullWidth: false,
  variant: 'filled',
  buttonStyle: {},
  animationType: 'zoomIn',
  animationDuration: 0.3,
  buttonRadius: '0.3rem',
  onClick: function onClick() {}
};
var _default = AnimatedButton;
exports.default = _default;
//# sourceMappingURL=animated-button.js.map