react-materialui-testimonials-transition/dist/index.js

React Material UI Testimonials with Transition Easy to Use component

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var styles = require('@material-ui/core/styles');
var core = require('@material-ui/core');

var useStyles = styles.makeStyles(function (theme) {
  return {
    root: function root(props) {
      return {
        padding: props.imageRadius ? theme.spacing(2) : theme.spacing(0),
        alignContent: 'center',
        background: props.backgroundGradient ? "linear-gradient(" + (props.backgroundGradient[2] ? props.backgroundGradient[2] : 45) + "deg, " + props.backgroundGradient[0] + " 30%, " + props.backgroundGradient[1] + " 90%)" : props.backgroundColor
      };
    },
    image: function image(props) {
      return {
        width: '100%',
        borderRadius: props.imageRadius ? props.imageRadius : '0%'
      };
    }
  };
});
var SlideTestimonial = function SlideTestimonial(props) {
  var classes = useStyles(props);
  return props.transition ? /*#__PURE__*/React.createElement(core.Slide, {
    direction: props.direction ? props.direction : "left",
    "in": true,
    timeout: props.speed ? props.speed : 1000,
    mountOnEnter: true,
    unmountOnExit: true
  }, /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 1
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 1
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)));
};
var FadeTestimonial = function FadeTestimonial(props) {
  var classes = useStyles(props);
  return props.transition ? /*#__PURE__*/React.createElement(core.Fade, {
    direction: props.direction ? props.direction : "left",
    "in": true,
    timeout: props.speed ? props.speed : 1000,
    mountOnEnter: true,
    unmountOnExit: true
  }, /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 0
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 1
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)));
};
var ZoomTestimonial = function ZoomTestimonial(props) {
  var classes = useStyles(props);
  return props.transition ? /*#__PURE__*/React.createElement(core.Zoom, {
    direction: props.direction ? props.direction : "left",
    "in": true,
    timeout: props.speed ? props.speed : 1000,
    mountOnEnter: true,
    unmountOnExit: true
  }, /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 0
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p",
    spacing: 2,
    className: classes.caption
  }, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 1
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)));
};
var GrowTestimonial = function GrowTestimonial(props) {
  var classes = useStyles(props);
  return props.transition ? /*#__PURE__*/React.createElement(core.Grow, {
    direction: props.direction ? props.direction : "left",
    "in": true,
    timeout: props.speed ? props.speed : 1000,
    mountOnEnter: true,
    unmountOnExit: true
  }, /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 0
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(core.Paper, {
    className: classes.root,
    elevation: props.shadow ? props.shadow : 1
  }, /*#__PURE__*/React.createElement(core.Grid, {
    container: true,
    spacing: 1
  }, props.image ? /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, /*#__PURE__*/React.createElement("img", {
    alt: props.alt,
    src: props.image,
    className: classes.image
  })) : null, /*#__PURE__*/React.createElement(core.Grid, {
    item: true,
    xs: 12,
    sm: 12,
    xl: 12,
    lg: 12
  }, props.title ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body1",
    color: "primary",
    component: "h1",
    display: "inline"
  }, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "body2",
    color: "textSecondary",
    component: "h2",
    gutterBottom: true
  }, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(core.Typography, {
    variant: "caption",
    color: "textSecondary",
    component: "p"
  }, props.testimonial) : null)));
};

exports.FadeTestimonial = FadeTestimonial;
exports.GrowTestimonial = GrowTestimonial;
exports.SlideTestimonial = SlideTestimonial;
exports.ZoomTestimonial = ZoomTestimonial;
//# sourceMappingURL=index.js.map