Skip to content

Instantly share code, notes, and snippets.

@carpben
Created November 22, 2018 08:19
Show Gist options
  • Save carpben/364e7d6c34cd0f9fa9e5ddc10181c23b to your computer and use it in GitHub Desktop.
Save carpben/364e7d6c34cd0f9fa9e5ddc10181c23b to your computer and use it in GitHub Desktop.
import * as React from'react';
import {Component} from'react';
import styled, { css } from 'react-emotion';
import { StyledComponentProps } from "../../types"
import IconW from "../Wrappers/IconW";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
interface Props {
href: string
photoURLs: Array<any>
}
interface State {
isHovered: boolean
photoIndex: number
height?: number
width?: number
aboutToChangeImg: boolean
}
function waitFor(periodInMS:number) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, periodInMS);
});
}
const TRANSITION_PERIOD_IN_MS = 110
class ImageArea extends Component<Props, State> {
state = {
isHovered: false,
photoIndex: 0,
aboutToChangeImg: false
}
myRef = null
componentDidMount = () => {
this.setState({
//@ts-ignore
height: this.myRef.clientHeight,
//@ts-ignore
width: this.myRef.clientWidth
})
}
onMouseEnter = () => {
console.log("mouseENTER")
this.setState({isHovered:true})
}
onMouseLeave = () => {
console.log("mouseLEFTTTTT")
this.setState({isHovered:false})
}
onFwd = async () => {
this.setState({aboutToChangeImg:true})
await waitFor(TRANSITION_PERIOD_IN_MS)
this.setState(
(prevState:State) => ({
photoIndex: (prevState.photoIndex===this.props.photoURLs.length-1)? 0: prevState.photoIndex+1,
aboutToChangeImg:false
}) )
}
onBack = () => {
this.setState( (prevState:State) => ({
photoIndex: (prevState.photoIndex===0)? this.props.photoURLs.length-0.5 : prevState.photoIndex-1
}) )
}
onArrowClick = (e:React.MouseEvent) => {
e.preventDefault()
}
onHelperClick = (e:React.MouseEvent) => {
console.log("clicked!")
e.preventDefault()
}
getLinearGradient = (deg:number) => css`
background: linear-gradient(${deg}deg, rgba(50,50,50,0), rgba(50,50,50,0.19));
`
render(){
const { photoURLs, href } = this.props
return (
<LinkW
href={href}
stl={css`
background-image: url(${photoURLs[this.state.photoIndex]});
opacity: ${this.state.aboutToChangeImg? 0.4 : 1};
//@ts-ignore
height: ${0.6*this.state.width}px;
`}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
innerRef={input => {
this.myRef = input
}}
>
{
(this.state.isHovered && this.props.photoURLs.length>1) && (
// <FrontOverlay
// stl={css`
// //@ts-ignore
// width: ${this.state.width}px;
// //@ts-ignore
// height: ${this.state.height}px;
// `}
// >
<React.Fragment>
<ArrowArea
onMouseDown={this.onBack}
onClick={this.onArrowClick}
stl = {this.getLinearGradient(270)}
>
<IconW
icon={faChevronLeft}
stl = {css`
margin: auto 10px;
color: white;
/* font-size: 50px; */
//@ts-ignore
font-size: ${this.state.width/12}px;
/* margin-right: this.state.w */
`}
/>
</ArrowArea>
<ArrowArea
onMouseDown={this.onFwd}
onClick={this.onArrowClick}
stl = {css`
flex-direction: row-reverse;
${this.getLinearGradient(90)}
`
}
>
<IconW
icon={faChevronRight}
stl = {css`
margin: auto 10px;
color: white;
//@ts-ignore
font-size: ${this.state.width/12}px;
`}
/>
</ArrowArea>
<Hidden>
{
this.props.photoURLs.map(
(photoUrl) => <img src={photoUrl} key={photoUrl}/>
)
}
</Hidden>
</React.Fragment>
// </FrontOverlay>
)
}
</LinkW>
)
}
}
const LinkW = styled("a")`
border-radius:5px;
background-size: cover;
background-position: top center;
margin: 0 0 7px;
position: relative;
${ ({stl}:StyledComponentProps) => stl }
overflow: hidden;
transition: opacity ${TRANSITION_PERIOD_IN_MS/1000}s ease-in;
display: flex;
justify-content: space-between;
`
// const FrontOverlay = styled("div")`
// position: absolute;
// display: flex;
// justify-content: space-between;
// ${ ({stl}:StyledComponentProps) => stl }
// top: 0;
// `
const Hidden = styled("div")`
display: none;
`
const ArrowArea = styled("div")`
flex-basis: 25%;
height: 100%;
${ ( {stl}:StyledComponentProps ) => stl}
display: flex;
`
export default ImageArea
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment