AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for changed items

Browse Source
This commit is contained in:
Tom Raithel
2017-11-24 16:09:22 +01:00
parent a75092ccfc
commit 784a5d1be6
8 changed files with 268 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/components/IsNew.js
View File

@@ -1,8 +0,0 @@
import React from 'react';
export default function IsNew({ item }) {
if (item.isNew) {
return <span className="is-new">NEW</span>;
}
return null;
}

17
js/components/Item.js
View File

@@ -1,9 +1,14 @@
import React from 'react';
import classNames from 'classnames';
import Link from './Link';
import IsNew from './IsNew';
import Tag from './Tag';
export default function Item({ item, noLeadingBorder = false, active = false, style = {}}) {
export default function Item({
item,
noLeadingBorder = false,
active = false,
style = {},
}) {
return (
<Link
className={classNames('item', {
@@ -15,13 +20,9 @@ export default function Item({ item, noLeadingBorder = false, active = false, st
>
<div className="item__title">
{item.title}
<IsNew item={item} />
<Tag item={item} />
</div>
{
item.info && (
<div className="item__info">{item.info}</div>
)
}
{item.info && <div className="item__info">{item.info}</div>}
</Link>
);
}

174
js/components/PageItem.js
View File

@@ -5,7 +5,6 @@ import Link from './Link';
import FooterEnd from './FooterEnd';
import SetTitle from './SetTitle';
import ItemRevisions from './ItemRevisions';
import IsNew from './IsNew';
import { createAnimation, createAnimationRunner } from '../animation';
import { translate } from '../../common/config';
@@ -23,55 +22,67 @@ class PageItem extends React.Component {
const itemsInRing = this.getItemsInRing(props);
this.animationsIn = {
background: createAnimation({
background: createAnimation(
{
transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
}, {
},
{
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
transform: 'translateX(0)',
},
0
0,
),
navHeader: createAnimation({
navHeader: createAnimation(
{
transform: 'translateX(-40px)',
opacity: '0',
}, {
},
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
300
300,
),
text: createAnimation({
text: createAnimation(
{
transform: 'translateY(-20px)',
opacity: '0',
}, {
},
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateY(0px)',
opacity: '1',
},
600
600,
),
items: itemsInRing.map((item, i) => (createAnimation({
items: itemsInRing.map((item, i) =>
createAnimation(
{
transform: 'translateX(-40px)',
opacity: '0',
},
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
400 + 100 * i,
),
),
footer: createAnimation(
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(-40px)',
opacity: '0',
}, {
},
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
400 + 100 * i
))),
footer: createAnimation({
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(-40px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
600 + itemsInRing.length * 100
600 + itemsInRing.length * 100,
),
};
@@ -79,7 +90,7 @@ class PageItem extends React.Component {
background: createAnimation(
this.animationsIn.background.stateB,
this.animationsIn.background.stateA,
300 + itemsInRing.length * 50
300 + itemsInRing.length * 50,
),
navHeader: createAnimation(
this.animationsIn.navHeader.stateB,
@@ -88,7 +99,7 @@ class PageItem extends React.Component {
transform: 'translateX(40px)',
opacity: '0',
},
0
0,
),
text: createAnimation(
this.animationsIn.text.stateB,
@@ -97,43 +108,58 @@ class PageItem extends React.Component {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
opacity: '0',
},
0
0,
),
items: itemsInRing.map((item, i) => (createAnimation(
this.animationsIn.items[i].stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
100 + 50 * i
))),
footer: createAnimation(
this.animationsIn.text.stateB,
items: itemsInRing.map((item, i) =>
createAnimation(
this.animationsIn.items[i].stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
200 + itemsInRing.length * 50
100 + 50 * i,
),
),
footer: createAnimation(
this.animationsIn.text.stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
200 + itemsInRing.length * 50,
),
};
if (props.leaving) { // entering from an other page
this.state = setAnimations({}, createAnimationRunner(this.animationsIn).getState());
} else { // Hard refresh
if (props.leaving) {
// entering from an other page
this.state = setAnimations(
{},
createAnimationRunner(this.animationsIn).getState(),
);
} else {
// Hard refresh
this.state = {};
}
}
componentWillReceiveProps({ leaving }) {
if (!this.props.leaving && leaving) { // page will be left
this.animationRunner = createAnimationRunner(this.animationsOut, this.handleAnimationsUpdate);
if (!this.props.leaving && leaving) {
// page will be left
this.animationRunner = createAnimationRunner(
this.animationsOut,
this.handleAnimationsUpdate,
);
this.animationRunner.run();
this.animationRunner.awaitAnimationComplete(this.props.onLeave);
}
if (this.props.leaving && !leaving) { // page is entered
this.animationRunner = createAnimationRunner(this.animationsIn, this.handleAnimationsUpdate);
if (this.props.leaving && !leaving) {
// page is entered
this.animationRunner = createAnimationRunner(
this.animationsIn,
this.handleAnimationsUpdate,
);
this.animationRunner.run();
}
}
@@ -142,20 +168,22 @@ class PageItem extends React.Component {
this.setState(setAnimations(this.state, this.animationRunner.getState()));
};
getAnimationState = (name) => {
getAnimationState = name => {
if (!this.state.animations) {
return undefined;
}
return this.state.animations[name];
};
getItem = (props) => {
getItem = props => {
const [quadrantName, itemName] = props.pageName.split('/');
const item = props.items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
const item = props.items.filter(
item => item.quadrant === quadrantName && item.name === itemName,
)[0];
return item;
}
};
getItemsInRing = (props) => {
getItemsInRing = props => {
const item = this.getItem(props);
const itemsInRing = groupByQuadrants(props.items)[item.quadrant][item.ring];
return itemsInRing;
@@ -170,7 +198,10 @@ class PageItem extends React.Component {
<div className="item-page">
<div className="item-page__nav">
<div className="item-page__nav__inner">
<div className="item-page__header" style={this.getAnimationState('navHeader')}>
<div
className="item-page__header"
style={this.getAnimationState('navHeader')}
>
<h3 className="headline">{translate(item.quadrant)}</h3>
</div>
@@ -182,34 +213,55 @@ class PageItem extends React.Component {
>
<div className="split">
<div className="split__left">
<Badge big type={item.ring}>{item.ring}</Badge>
<Badge big type={item.ring}>
{item.ring}
</Badge>
</div>
<div className="split__right">
<Link className="icon-link" pageName={item.quadrant}>
<span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
<span className="icon icon--pie icon-link__icon" />Quadrant
Overview
</Link>
</div>
</div>
</ItemList>
<div className="item-page__footer" style={this.getAnimationState('footer')}>
<div
className="item-page__footer"
style={this.getAnimationState('footer')}
>
<FooterEnd modifier="in-sidebar" />
</div>
</div>
</div>
<div className="item-page__content" style={this.getAnimationState('background')}>
<div className="item-page__content__inner" style={this.getAnimationState('text')}>
<div
className="item-page__content"
style={this.getAnimationState('background')}
>
<div
className="item-page__content__inner"
style={this.getAnimationState('text')}
>
<div className="item-page__header">
<div className="split">
<div className="split__left">
<h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
<h1 className="hero-headline hero-headline--inverse">
{item.title}
</h1>
</div>
<div className="split__right">
<Badge big type={item.ring}>{item.ring}</Badge>
<Badge big type={item.ring}>
{item.ring}
</Badge>
</div>
</div>
</div>
<div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
{item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)} />}
<div
className="markdown"
dangerouslySetInnerHTML={{ __html: item.body }}
/>
{item.revisions.length > 1 && (
<ItemRevisions revisions={item.revisions.slice(1)} />
)}
</div>
</div>
</div>

128
js/components/PageOverview.js
View File

@@ -7,7 +7,7 @@ import Link from './Link';
import Search from './Search';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import IsNew from './IsNew';
import Tag from './Tag';
import { groupByFirstLetter } from '../../common/model';
import { translate } from '../../common/config';
@@ -15,11 +15,15 @@ const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
const containsSearchTerm = (text = '', term = '') => {
// TODO search refinement
return text.trim().toLocaleLowerCase().indexOf(term.trim().toLocaleLowerCase()) !== -1;
}
return (
text
.trim()
.toLocaleLowerCase()
.indexOf(term.trim().toLocaleLowerCase()) !== -1
);
};
class PageOverview extends React.Component {
constructor(props, ...args) {
super(props, ...args);
this.state = {
@@ -37,30 +41,32 @@ class PageOverview extends React.Component {
}
}
handleRingClick = (ring) => (e) => {
handleRingClick = ring => e => {
e.preventDefault();
this.setState({
ring,
});
}
};
isRingActive(ringName) {
return this.state.ring === ringName;
}
itemMatchesRing = (item) => {
itemMatchesRing = item => {
return this.state.ring === 'all' || item.ring === this.state.ring;
};
itemMatchesSearch = (item) => {
return this.state.search.trim() === '' ||
itemMatchesSearch = item => {
return (
this.state.search.trim() === '' ||
containsSearchTerm(item.title, this.state.search) ||
containsSearchTerm(item.body, this.state.search) ||
containsSearchTerm(item.info, this.state.search);
containsSearchTerm(item.info, this.state.search)
);
};
isItemVisible = (item) => {
isItemVisible = item => {
return this.itemMatchesRing(item) && this.itemMatchesSearch(item);
};
@@ -70,11 +76,13 @@ class PageOverview extends React.Component {
...group,
items: group.items.filter(this.isItemVisible),
}));
const nonEmptyGroups = groupsFiltered.filter(group => group.items.length > 0);
const nonEmptyGroups = groupsFiltered.filter(
group => group.items.length > 0,
);
return nonEmptyGroups;
}
handleSearchTermChange = (value) => {
handleSearchTermChange = value => {
this.setState({
search: value,
});
@@ -92,69 +100,67 @@ class PageOverview extends React.Component {
<div className="filter">
<div className="split split--filter">
<div className="split__left">
<Search onChange={this.handleSearchTermChange} value={this.state.search} />
<Search
onChange={this.handleSearchTermChange}
value={this.state.search}
/>
</div>
<div className="split__right">
<div className="nav">
{
rings.map(ringName => (
<div className="nav__item" key={ringName}>
<Badge
big
onClick={this.handleRingClick(ringName)}
type={this.isRingActive(ringName) ? ringName : 'empty' }
>
{ringName}
</Badge>
</div>
))
}
{rings.map(ringName => (
<div className="nav__item" key={ringName}>
<Badge
big
onClick={this.handleRingClick(ringName)}
type={this.isRingActive(ringName) ? ringName : 'empty'}
>
{ringName}
</Badge>
</div>
))}
</div>
</div>
</div>
</div>
<div className="letter-index">
{
groups.map(({ letter, items }) => (
<div key={letter} className="letter-index__group">
<div className="letter-index__letter">{letter}</div>
<div className="letter-index__items">
<div className="item-list">
<div className="item-list__list">
{
items.map((item) => (
<Link
key={item.name}
className="item item--big item--no-leading-border item--no-trailing-border"
pageName={`${item.quadrant}/${item.name}`}
>
<div className="split split--overview">
<div className="split__left">
<div className="item__title">
{item.title}
<IsNew item={item} />
</div>
{groups.map(({ letter, items }) => (
<div key={letter} className="letter-index__group">
<div className="letter-index__letter">{letter}</div>
<div className="letter-index__items">
<div className="item-list">
<div className="item-list__list">
{items.map(item => (
<Link
key={item.name}
className="item item--big item--no-leading-border item--no-trailing-border"
pageName={`${item.quadrant}/${item.name}`}
>
<div className="split split--overview">
<div className="split__left">
<div className="item__title">
{item.title}
<Tag item={item} />
</div>
</div>
<div className="split__right">
<div className="nav nav--relations">
<div className="nav__item">
{translate(item.quadrant)}
</div>
<div className="split__right">
<div className="nav nav--relations">
<div className="nav__item">{translate(item.quadrant)}</div>
<div className="nav__item">
<Badge type={item.ring}>{item.ring}</Badge>
</div>
</div>
<div className="nav__item">
<Badge type={item.ring}>{item.ring}</Badge>
</div>
</div>
</Link>
))
}
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
))
}
</div>
))}
</div>
</Fadeable>
);

59
js/components/QuadrantSection.js
View File

@@ -3,7 +3,7 @@ import { translate, rings } from '../../common/config';
import Badge from './Badge';
import Link from './Link';
import ItemList from './ItemList';
import IsNew from './IsNew';
import Tag from './Tag';
const renderList = (ringName, quadrantName, groups, big) => {
const itemsInRing = groups[quadrantName][ringName];
@@ -11,7 +11,9 @@ const renderList = (ringName, quadrantName, groups, big) => {
if (big === true) {
return (
<ItemList items={itemsInRing} noLeadingBorder>
<Badge type={ringName} big={big}>{ringName}</Badge>
<Badge type={ringName} big={big}>
{ringName}
</Badge>
</ItemList>
);
}
@@ -21,26 +23,24 @@ const renderList = (ringName, quadrantName, groups, big) => {
<div className="ring-list__header">
<Badge type={ringName}>{ringName}</Badge>
</div>
{
itemsInRing.map(item => (
<span
key={item.name}
className="ring-list__item"
>
<Link className="link" pageName={`${item.quadrant}/${item.name}`}>
{item.title}
<IsNew item={item} />
</Link>
</span>
))
}
{itemsInRing.map(item => (
<span key={item.name} className="ring-list__item">
<Link className="link" pageName={`${item.quadrant}/${item.name}`}>
{item.title}
<Tag item={item} short />
</Link>
</span>
))}
</div>
);
}
};
const renderRing = (ringName, quadrantName, groups, big) => {
if (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
if (
!groups[quadrantName] ||
!groups[quadrantName][ringName] ||
groups[quadrantName][ringName].length === 0
) {
return null;
}
return (
@@ -48,7 +48,7 @@ const renderRing = (ringName, quadrantName, groups, big) => {
{renderList(ringName, quadrantName, groups, big)}
</div>
);
}
};
export default function QuadrantSection({ quadrantName, groups, big = false }) {
return (
@@ -58,21 +58,18 @@ export default function QuadrantSection({ quadrantName, groups, big = false }) {
<div className="split__left">
<h4 className="headline">{translate(quadrantName)}</h4>
</div>
{
!big && (
<div className="split__right">
<Link className="icon-link" pageName={`${quadrantName}`}>
<span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
</Link>
</div>
)
}
{!big && (
<div className="split__right">
<Link className="icon-link" pageName={`${quadrantName}`}>
<span className="icon icon--pie icon-link__icon" />Quadrant
Overview
</Link>
</div>
)}
</div>
</div>
<div className="quadrant-section__rings">
{
rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))
}
{rings.map(ringName => renderRing(ringName, quadrantName, groups, big))}
</div>
</div>
);

15
js/components/Tag.js Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
export default function Tag({ item, short = false }) {
if (item.flag !== 'default') {
let name = item.flag.toUpperCase();
if (short === true) {
name = {
new: 'N',
changed: 'C',
}[item.flag];
}
return <span className={`tag tag--${item.flag}`}>{name}</span>;
}
return null;
}