Skip to content

Instantly share code, notes, and snippets.

@leoasis leoasis/index.js
Created Sep 29, 2015

Embed
What would you like to do?
Mix and Match
import "babel/polyfill";
import React from "react";
import { render } from "react-dom";
import isMobile from "is-mobile";
import { Spring, TransitionSpring } from "react-motion";
const config = [100, 15];
const spring = (values) => ({val: {...values}, config });
const getProfileInitialSpring = () => spring({size: 40, left: 25, top: 5});
const ProfilePicture = ({ip: { val: {left, top, size} }}) => (
<div className="profilePicture" style={{width: size, height: size, left, top}}/>
);
const ProspectList = ({ prospects, comparingId, onSelectProspect }) => <div className="prospectList">
<div className="prospectListHeader">Click on any person to see how you two look together!</div>
<div className="prospectListContent">{prospects.map((prospect) =>
<Prospect key={prospect.id} onClick={onSelectProspect.bind(this, prospect)} comparing={comparingId === prospect.id} prospect={prospect} />
)}</div></div>
const Prospect = (props) => <div className="prospectWrapper"><div className={`prospect ${props.comparing ? "is-comparing" : ""}`}
onClick={(ev) => props.onClick(ev.target.getBoundingClientRect.bind(ev.target))}><img src={props.prospect.src} width={60}/></div>
<div className="prospectName">{props.prospect.fullName}</div></div>;
const AnimatedProspect = ({ip: { val: { left, top, size}}, prospect: {src}, onClick}) => <div className="prospect"
style={{position: "absolute", left, top, width: size, height: size, zIndex: 10}} onClick={onClick}><img src={src} width={size}/></div>;
const CompareFrame = ({ prospect, close }) => <div className={`compareFrame ${prospect ? "is-comparing" : ""}`} onClick={close}>
{prospect && <div className="compareFrameNames">
<span className="compareFrameName">Julia F.</span> & <span className="compareFrameName">{prospect.fullName}</span></div>}
</div>
class App extends React.Component {
constructor (props) {
super(props);
this.state = {comparingId: null, prospectsDimensions: {}};
}
render () {
return <div>
<div className="header" onClick={this._stopComparing.bind(this)} >
<Spring defaultValue={getProfileInitialSpring()} endValue={this._getProfileEndValue.bind(this)} >
{ip => <ProfilePicture ip={ip} />}
</Spring>
<span className="profileName">Julia F.</span>
<a href="http://match.com" className="headerLogo"><img src="src/assets/images/match-heart-logo-white.png" className="headerLogo_image"/></a>
</div>
<ProspectList comparingId={this.state.comparingId} onSelectProspect={this._handleProspectClick.bind(this)}
prospects={Object.keys(PROSPECT_DATA).map((prospectId) => PROSPECT_DATA[prospectId])} />
<CompareFrame prospect={PROSPECT_DATA[this.state.comparingId]} close={this._stopComparing.bind(this)}/>
<TransitionSpring willEnter={this._animatedProspectWillEnterOrLeave.bind(this)}
willLeave={this._animatedProspectWillEnterOrLeave.bind(this)}
endValue={this._getAnimatedProspectEndValue.bind(this)}>
{currentValue => <div>{Object.keys(currentValue).map(key =>
<AnimatedProspect onClick={this._stopComparing.bind(this)} key={key} ip={currentValue[key]} prospect={PROSPECT_DATA[key]}/>
)}</div>}
</TransitionSpring>
<div className="footer"><span>Copyright © Match</span></div>
</div>;
}
_stopComparing () {
this.setState({comparingId: null});
}
_getProfileEndValue (prev) {
if (this.state.comparingId !== null) {
const top = (prev.val.size < 200 && 10) || (prev.val.size < 300 && 30) || 108;
const left = (prev.val.size < 200 && 600) || (prev.val.size < 300 && 400) || 430;
return spring({size: 380, left, top});
} else {
return getProfileInitialSpring();
}
}
_animatedProspectWillEnterOrLeave(key) {
const left = this.state.prospectsDimensions[key].left;
const top = this.state.prospectsDimensions[key].top;
return {val: {size: 60, left, top}, config};
}
_getAnimatedProspectEndValue(prevAnimations) {
if (!this.state.comparingId) return {};
const prev = prevAnimations[this.state.comparingId] && prevAnimations[this.state.comparingId].val || {};
const top = (prev.size < 200 && 500) || 108;
return {[this.state.comparingId]: {val: {size: 380, left: 839, top}, config}};
}
_handleProspectClick ({ id }, getDimensions) {
const {left, top, right} = getDimensions();
const prospectsDimensions = {...this.state.prospectsDimensions, [id]: {id, left, right, top}};
const comparingId = this.state.comparingId === id ? null : id;
this.setState({comparingId, prospectsDimensions});
}
}
isMobile() ? document.getElementById('mobileBlocker').setAttribute("style", "") : render(<App />, document.getElementById('reactContainer'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.