Skip to content

Commit 28ffcb1

Browse files
author
Martín Callegari
authored
Merge pull request #181 from Here21/dev/fullScreen
Image fullscreen preview
2 parents 24f7059 + fe5e732 commit 28ffcb1

28 files changed

+571
-47
lines changed

‎assets/close.svg

+1
Loading

‎assets/minus.svg

+1
Loading

‎assets/plus.svg

+1
Loading

‎assets/zoom-in.svg

+1
Loading

‎assets/zoom-out.svg

+1
Loading

‎dev/App.tsx

+14-8
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export default class App extends Component {
77
componentDidMount() {
88
addResponseMessage('Welcome to this awesome chat!');
99
addLinkSnippet({ link: 'https://google.com', title: 'Google' });
10+
addResponseMessage('![](https://raw.githubusercontent.com/Wolox/press-kit/master/logos/logo_banner.png)');
11+
addResponseMessage('![vertical](https://d2sofvawe08yqg.cloudfront.net/reintroducing-react/hero2x?1556470143)');
1012
}
1113

1214
handleNewUserMessage = (newMessage: any) => {
@@ -36,14 +38,18 @@ export default class App extends Component {
3638

3739
render() {
3840
return (
39-
<Widget
40-
title="Bienvenido"
41-
subtitle="Asistente virtual"
42-
senderPlaceHolder="Escribe aquí ..."
43-
handleNewUserMessage={this.handleNewUserMessage}
44-
handleQuickButtonClicked={this.handleQuickButtonClicked}
45-
handleSubmit={this.handleSubmit}
46-
/>
41+
<div>
42+
<button style={{position: 'absolute', right: 40, bottom: 150}}>test</button>
43+
<Widget
44+
title="Bienvenido"
45+
subtitle="Asistente virtual"
46+
senderPlaceHolder="Escribe aquí ..."
47+
handleNewUserMessage={this.handleNewUserMessage}
48+
handleQuickButtonClicked={this.handleQuickButtonClicked}
49+
imagePreview
50+
handleSubmit={this.handleSubmit}
51+
/>
52+
</div>
4753
);
4854
}
4955
}

‎dev/index.html

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no"
8+
/>
69
<title>Dev Widget</title>
10+
<style>
11+
html,
12+
body {
13+
margin: 0;
14+
}
15+
</style>
716
</head>
817
<body>
918
<div id="root"></div>

‎package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@babel/preset-env": "^7.8.7",
3737
"@babel/preset-react": "^7.8.3",
3838
"@babel/preset-typescript": "^7.8.3",
39+
"@toycode/markdown-it-class": "^1.2.3",
3940
"@types/classnames": "^2.2.10",
4041
"@types/enzyme": "^3.10.5",
4142
"@types/jest": "^25.1.4",

‎src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import format from 'date-fns/format';
33
import markdownIt from 'markdown-it';
44
import markdownItSup from 'markdown-it-sup';
55
import markdownItSanitizer from 'markdown-it-sanitizer';
6+
import markdownItClass from '@toycode/markdown-it-class';
67
import markdownItLinkAttributes from 'markdown-it-link-attributes';
78

89
import { Message } from 'src/store/types';
@@ -15,7 +16,11 @@ type Props = {
1516
}
1617

1718
function Message({ message, showTimeStamp }: Props) {
18-
const sanitizedHTML = markdownIt().use(markdownItSup)
19+
const sanitizedHTML = markdownIt()
20+
.use(markdownItClass, {
21+
img: ['rcw-message-img']
22+
})
23+
.use(markdownItSup)
1924
.use(markdownItSanitizer)
2025
.use(markdownItLinkAttributes, { attrs: { target: '_blank', rel: 'noopener' } })
2126
.render(message.text);

‎src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
display: flex;
1717
flex-direction: column;
1818
margin-left: auto;
19-
19+
2020
.rcw-message-text {
2121
@include message-bubble($turqois-2);
2222
}
@@ -38,10 +38,14 @@
3838

3939
/* For markdown elements created with default styles */
4040
.rcw-message-text {
41-
4241
p {
4342
margin: 0;
4443
}
44+
45+
img {
46+
width: 100%;
47+
object-fit: contain;
48+
}
4549
}
4650

4751
.rcw-avatar {

‎src/components/Widget/components/Conversation/components/Messages/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useRef } from 'react';
1+
import React, { useEffect, useRef, useState, ElementRef, ImgHTMLAttributes, MouseEvent } from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
33
import format from 'date-fns/format';
44

@@ -23,7 +23,7 @@ function Messages({ profileAvatar, showTimeStamp }: Props) {
2323
showChat: state.behavior.showChat
2424
}));
2525

26-
const messageRef = useRef(null);
26+
const messageRef = useRef<HTMLDivElement | null>(null);
2727
useEffect(() => {
2828
// @ts-ignore
2929
scrollToBottom(messageRef.current);

‎src/components/Widget/components/Conversation/style.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
.rcw-conversation-container {
66
border-radius: 10px;
77
box-shadow: 0px 2px 10px 1px $grey-3;
8-
98

109
&.active {
1110
opacity: 1;
1211
transform: translateY(0px);
13-
transition: opacity 0.3s ease, transform 0.3s ease;
12+
transition: opacity 0.3s ease, transform 0.3s ease;
1413
}
1514

1615
&.hidden {
16+
z-index: -1;
1717
pointer-events: none;
1818
opacity: 0;
1919
transform: translateY(10px);
20-
transition: opacity 0.3s ease, transform 0.3s ease;
20+
transition: opacity 0.3s ease, transform 0.3s ease;
2121
}
2222
}
2323

‎src/components/Widget/components/FullScreenPreview/index.tsx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React, { useEffect, ReactNode } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { useSelector, useDispatch } from 'react-redux';
4+
import usePreview from './usePreview';
5+
import usePortal from './usePortal';
6+
import './styles.scss';
7+
import { GlobalState } from '../../../../store/types';
8+
import { closeFullscreenPreview } from '../../../../store/actions';
9+
10+
const close = require('../../../../../assets/close.svg') as string;
11+
const plus = require('../../../../../assets/plus.svg') as string;
12+
const minus = require('../../../../../assets/minus.svg') as string;
13+
const zoomIn = require('../../../../../assets/zoom-in.svg') as string;
14+
const zoomOut = require('../../../../../assets/zoom-out.svg') as string;
15+
16+
type Props = {
17+
fullScreenMode?: boolean;
18+
zoomStep?: number
19+
}
20+
21+
export default function FullScreenPreview({ fullScreenMode, zoomStep }:Props) {
22+
const {
23+
state,
24+
initFileSize,
25+
onZoomIn,
26+
onZoomOut,
27+
onResizePageZoom
28+
} = usePreview(zoomStep);
29+
30+
const dispatch = useDispatch();
31+
const { src, alt, width, height, visible } = useSelector((state: GlobalState) => ({
32+
src: state.preview.src,
33+
alt: state.preview.alt,
34+
width: state.preview.width,
35+
height: state.preview.height,
36+
visible: state.preview.visible
37+
}));
38+
39+
useEffect(() => {
40+
if(src) {
41+
initFileSize(width, height);
42+
}
43+
}, [src])
44+
45+
const pDom = usePortal()
46+
47+
const onClosePreview = () => {
48+
dispatch(closeFullscreenPreview())
49+
}
50+
51+
const childNode: ReactNode = (
52+
<div className="rcw-previewer-container">
53+
<div className="rcw-previewer-veil">
54+
<img {...state.layout} src={src} className="rcw-previewer-image" alt={alt} />
55+
</div>
56+
<button
57+
className="rcw-previewer-button rcw-previewer-close-button"
58+
onClick={onClosePreview}
59+
>
60+
<img src={close} className="rcw-previewer-icon" />
61+
</button>
62+
<div className="rcw-previewer-tools">
63+
<button
64+
className="rcw-previewer-button"
65+
onClick={onResizePageZoom}
66+
>
67+
<img
68+
src={state.zoom ? zoomOut : zoomIn}
69+
className="rcw-previewer-icon"
70+
alt="reset zoom"
71+
/>
72+
</button>
73+
74+
<button
75+
className="rcw-previewer-button"
76+
onClick={onZoomIn}
77+
>
78+
<img src={plus} className="rcw-previewer-icon" alt="zoom in"/>
79+
</button>
80+
<button
81+
className="rcw-previewer-button"
82+
onClick={onZoomOut}
83+
>
84+
<img src={minus} className="rcw-previewer-icon" alt="zoom out"/>
85+
</button>
86+
</div>
87+
</div>
88+
)
89+
90+
return visible ? ReactDOM.createPortal(childNode, pDom) : null;
91+
}

‎src/components/Widget/components/FullScreenPreview/styles.scss

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@import 'variables/colors';
2+
3+
.rcw-previewer-container {
4+
width: 100vw;
5+
height: 100vh;
6+
background: rgba(0, 0, 0, 0.75);
7+
overflow: hidden;
8+
position: fixed;
9+
z-index: 9999;
10+
left: 0;
11+
top: 0;
12+
13+
.rcw-previewer-image {
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
margin: auto;
20+
transition: all 0.3s ease;
21+
}
22+
23+
.rcw-previewer-tools {
24+
position: fixed;
25+
right: 16px;
26+
bottom: 16px;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: center;
31+
}
32+
33+
.rcw-previewer-button {
34+
padding: 0;
35+
margin: 16px;
36+
box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.3);
37+
border-radius: 50%;
38+
width: 32px;
39+
height: 32px;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
outline: none;
44+
background-color: $white;
45+
border: none;
46+
}
47+
48+
.rcw-previewer-close-button {
49+
position: absolute;
50+
right: 0;
51+
top: 0;
52+
}
53+
54+
.rcw-previewer-veil {
55+
width: 100%;
56+
height: 100%;
57+
overflow: scroll;
58+
position: relative;
59+
}
60+
}

‎src/components/Widget/components/FullScreenPreview/usePortal.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useRef, useEffect } from 'react';
2+
3+
function createRootElement(id: string):HTMLDivElement {
4+
const rootContainer = document.createElement('div');
5+
rootContainer.setAttribute('id', id);
6+
return rootContainer;
7+
}
8+
9+
function addRootElement(rootElem: HTMLDivElement):void {
10+
document.body.appendChild(rootElem);
11+
}
12+
13+
function usePortal():HTMLDivElement {
14+
const rootElemRef = useRef<HTMLElement | null>(null);
15+
16+
useEffect(() => {
17+
// Look for existing target dom element to append to
18+
const existingParent: HTMLDivElement | null = document.querySelector('#rcw-image-preview');
19+
// Parent is either a new root or the existing dom element
20+
const parentElem: HTMLDivElement = existingParent || createRootElement('#rcw-image-preview');
21+
22+
// If there is no existing DOM element, add a new one.
23+
if (!existingParent) {
24+
addRootElement(parentElem);
25+
}
26+
27+
// Add the detached element to the parent
28+
if(rootElemRef.current) {
29+
parentElem.appendChild(rootElemRef.current);
30+
}
31+
32+
return function removeElement() {
33+
if(rootElemRef.current) {
34+
rootElemRef.current.remove();
35+
}
36+
if (parentElem.childNodes.length === -1) {
37+
parentElem.remove();
38+
}
39+
};
40+
}, []);
41+
42+
function getRootElem():HTMLDivElement {
43+
if (!rootElemRef.current) {
44+
rootElemRef.current = document.createElement('div');
45+
}
46+
return rootElemRef.current as HTMLDivElement;
47+
}
48+
49+
return getRootElem();
50+
}
51+
52+
export default usePortal;

0 commit comments

Comments
 (0)