react-materialui-testimonials-transition
Version:
React Material UI Testimonials with Transition Easy to Use component
355 lines (352 loc) • 11.1 kB
JavaScript
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Slide, Paper, Grid, Typography, Fade, Zoom, Grow } from '@material-ui/core';
var useStyles = 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(Slide, {
direction: props.direction ? props.direction : "left",
"in": true,
timeout: props.speed ? props.speed : 1000,
mountOnEnter: true,
unmountOnExit: true
}, /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 1
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "p"
}, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 1
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(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(Fade, {
direction: props.direction ? props.direction : "left",
"in": true,
timeout: props.speed ? props.speed : 1000,
mountOnEnter: true,
unmountOnExit: true
}, /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 0
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "p"
}, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 1
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(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(Zoom, {
direction: props.direction ? props.direction : "left",
"in": true,
timeout: props.speed ? props.speed : 1000,
mountOnEnter: true,
unmountOnExit: true
}, /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 0
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "p",
spacing: 2,
className: classes.caption
}, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 1
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(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(Grow, {
direction: props.direction ? props.direction : "left",
"in": true,
timeout: props.speed ? props.speed : 1000,
mountOnEnter: true,
unmountOnExit: true
}, /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 0
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "p"
}, props.testimonial) : null)))) : /*#__PURE__*/React.createElement(Paper, {
className: classes.root,
elevation: props.shadow ? props.shadow : 1
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 1
}, props.image ? /*#__PURE__*/React.createElement(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(Grid, {
item: true,
xs: 12,
sm: 12,
xl: 12,
lg: 12
}, props.title ? /*#__PURE__*/React.createElement(Typography, {
variant: "body1",
color: "primary",
component: "h1",
display: "inline"
}, props.title) : null, props.subtitle ? /*#__PURE__*/React.createElement(Typography, {
variant: "body2",
color: "textSecondary",
component: "h2",
gutterBottom: true
}, props.subtitle) : null, props.testimonial ? /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "p"
}, props.testimonial) : null)));
};
export { FadeTestimonial, GrowTestimonial, SlideTestimonial, ZoomTestimonial };
//# sourceMappingURL=index.modern.js.map