From 1bce3fc306800ea041da134067aa1947243e31c9 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Thu, 18 Jun 2020 20:01:17 -0400
Subject: [PATCH] Issue #9:  Creacion de Responsive image

---
 src/components/ResponsiveImage.jsx  | 49 +++++++++++++++++++++++++++++
 src/components/ResponsiveImage.scss | 44 ++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/components/ResponsiveImage.jsx
 create mode 100644 src/components/ResponsiveImage.scss

diff --git a/src/components/ResponsiveImage.jsx b/src/components/ResponsiveImage.jsx
new file mode 100644
index 0000000..46105bc
--- /dev/null
+++ b/src/components/ResponsiveImage.jsx
@@ -0,0 +1,49 @@
+import React, {useState} from 'react';
+import './ResponsiveImage.scss';
+
+export const ResponsiveImage = (props) => {
+  /* Link de la imagen */
+  const image = props.image;
+  /* Alt text de la imagen */
+  const alt = props.alt;
+  /* Accion al hacer click en la imagen */
+  const handleClick = props.onClick;
+  /* Placeholder a usar mientras la imagen carga */
+  const placeholder = props.placeholder ? React.cloneElement(props.placeholder, {className: 'responsive-image'}) : null;
+  /* Tamaño de la imagen, de 1 a 6 */
+  const size = props.size ? props.size : 1;
+  /* Ratio de aspecto de la imagen 4by3, 1by1, 16by9, auto*/
+  const ratio = props.ratio ? props.ratio : '1by1';
+
+  const [loading, setLoading] = useState(true);
+
+  const handleLoad = () => setLoading(false);
+
+  const imageClass = `responsive-image`;
+  const containerClass = `responsive-container ratio-${ratio} size-${size}`;
+
+  if(!image) {
+    return (
+      <div className={containerClass}>
+        {placeholder}
+      </div>
+    )
+  }
+
+  if(!loading) {
+    return (
+      <div className={containerClass}>
+        <img src={image} className={`${imageClass} ${handleClick ? 'pointer' : ''}`}
+          alt={alt} onClick={handleClick}/>
+      </div>
+    )
+  }
+
+  return (
+    <div className={containerClass}>
+      <img src={image} className={`${imageClass} loading`}
+        alt={alt} onLoad={handleLoad}/>
+      <div className={`${imageClass} pulsating`}/>
+    </div>
+  )
+}
diff --git a/src/components/ResponsiveImage.scss b/src/components/ResponsiveImage.scss
new file mode 100644
index 0000000..0ee55b9
--- /dev/null
+++ b/src/components/ResponsiveImage.scss
@@ -0,0 +1,44 @@
+.responsive-container {
+  position: relative;
+
+  &.size-1 {width: 100px;}
+  &.size-2 {width: 200px;}
+  &.size-3 {width: 300px;}
+  &.size-4 {width: 400px;}
+  &.size-5 {width: 500px;}
+  &.size-6 {width: 600px;}
+
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+  }
+
+  &.ratio-1by1:before {padding-top: (1 / 1) * 100%}
+
+  &.ratio-4by3:before {padding-top: (3 / 4) * 100%}
+
+  &.ratio-16by9:before {padding-top: (9 / 16) * 100%}
+
+  .responsive-image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    outline: 1px var(--gray-2) solid;
+
+    &.loading {
+      display: none;
+    }
+
+    &.pointer {
+      cursor: pointer;
+    }
+  }
+}