import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
import shortid from 'shortid'
import ProjectImage from '../atoms/ProjectImage'
import { item, link, title, projectNav } from './ProjectNav.module.css'
const query = graphql`
query {
allProjectsYaml {
edges {
node {
title
slug
img {
childImageSharp {
fluid(maxWidth: 500, quality: 85) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
}
}
`
const Project = ({ node, refCurrentItem }) => (
)
Project.propTypes = {
node: PropTypes.any.isRequired,
refCurrentItem: PropTypes.any
}
export default class ProjectNav extends PureComponent {
static propTypes = {
currentSlug: PropTypes.string.isRequired
}
state = {
scrollLeftPosition: 0
}
scrollContainer = React.createRef()
currentItem = React.createRef()
componentDidMount() {
this.scrollToCurrent()
}
componentDidUpdate() {
this.scrollToCurrent()
}
scrollToCurrent = () => {
const scrollContainer = this.scrollContainer.current
const activeItem = this.currentItem.current
const scrollRect = scrollContainer.getBoundingClientRect()
const activeRect = activeItem && activeItem.getBoundingClientRect()
const scrollLeftPosition =
activeRect &&
activeRect.left -
scrollRect.left -
scrollRect.width / 2 +
activeRect.width / 2
scrollContainer.scrollLeft += this.state.scrollLeftPosition
this.setState({ scrollLeftPosition })
}
render() {
const { currentSlug } = this.props
return (
{
const projects = data.allProjectsYaml.edges
return (
)
}}
/>
)
}
}