Skip to content

Commit 0ac3857

Browse files
ConawsConaws
committed
Transitions
1 parent aeeb589 commit 0ac3857

File tree

9 files changed

+328
-75
lines changed

9 files changed

+328
-75
lines changed

‎app/components/Home.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {paint, center, centerDiv, hero, border} from './styles';
55

66
import Conversation from './home/Sub';
77
import * as _ from 'ramda';
8+
import Velocity from 'velocity-animate';
89

910

1011
class Home extends React.Component{

‎app/components/home/Convo.jsx

+113-9
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,94 @@ import { React, View, BackButton, Button, List, Card, Input} from 'reapp-kit';
22
import * as _ from 'ramda';
33
import divStyle, {paint} from '../styles';
44
import {getLocalJSON, setLocalJSON, logger} from '../simpleStorage';
5+
import {Motion, spring, TransitionMotion} from 'react-motion';
6+
require('velocity-animate/velocity.ui');
57

8+
import {VelocityTransitionGroup} from 'velocity-react';
9+
import {speakers} from './convo/Transition'
610

711

812

913

14+
/*onClick={this.handleClick.bind(null, key)}*/
15+
16+
const bluebox = () => { return <Motion
17+
defaultStyle={{x: 0, z: 0}}
18+
style={{x: spring(220, [200, 7]), z: spring(400, [5, 1])}}>
19+
{value => {
20+
let viz = {
21+
backgroundColor: 'blue',
22+
border: '1px solid black',
23+
width: value.x,
24+
height: value.z / 2,
25+
opacity: (value.z / 400)
26+
// transform: `rotate(${value.x}deg)`
27+
}
28+
return(<div style={viz}>{value.x}</div>)}}
29+
</Motion>
30+
}
31+
32+
33+
34+
const getStyleMap = function(blocks) {
35+
let configs = [];
36+
//or blocks.keys.map
37+
blocks.forEach(object, index => {
38+
configs[index] = {
39+
opacity: spring(1, [5, 10]),
40+
width: 200,
41+
height: spring(100, [5, 1]),
42+
backgroundColor: 'blue',
43+
text: blocks[index], // not interpolated
44+
};
45+
});
46+
return configs;
47+
}
48+
49+
50+
51+
// const Demo = React.createClass({
52+
// getInitialState() {
53+
// return {
54+
// blocks: {
55+
// a: 'I am a',
56+
// b: 'I am b',
57+
// c: 'I am c',
58+
// },
59+
// };
60+
// },
61+
62+
// handleClick(key) {
63+
// const {...newBlocks} = this.state.blocks;
64+
// delete newBlocks[key];
65+
// const whatda = {[key + 'blah']: 'blah'+key};
66+
// this.setState({blocks: Object.assign(newBlocks, whatda)});
67+
// },
68+
69+
// render() {
70+
// return (
71+
// <TransitionMotion
72+
// styles={getStyles()}
73+
// willEnter={willEnter}
74+
// willLeave={willLeave}>
75+
// {interpolatedStyles =>
76+
// <div>
77+
// {Object.keys(interpolatedStyles).map(key => {
78+
// const {text, ...style} = interpolatedStyles[key];
79+
// return (
80+
// <div onClick={this.handleClick.bind(null, key)} style={style}>
81+
// {text}
82+
// </div>
83+
// );
84+
// })}
85+
// </div>
86+
// }
87+
// </TransitionMotion>
88+
// );
89+
// },
90+
// });
91+
92+
1093
export default class Conversation extends React.Page {
1194
constructor(props){
1295
super(props)
@@ -81,25 +164,31 @@ export default class Conversation extends React.Page {
81164
else
82165
return ''
83166
}
167+
84168

85169
const backButton =
86170
<BackButton onTap={() => window.history.back()} />
87171

172+
let that = this
173+
88174
return (
89175
<View {...this.props} title="Track Conversation" titleLeft={backButton}>
90-
176+
{//bluebox()
177+
}
91178
<div style={paint(divStyle.center, {width: 250})}>
92179
<h1 style={paint(divStyle.center)}>Add Participants</h1>
93-
<b style={(this.state.speakers == 0)? divStyle.hidden : divStyle.centerDiv}>Participants</b>
94-
{speakers(this.state.speakers)}
180+
<b style={(this.state.speakers == 0)? divStyle.hidden : divStyle.center}>Participants</b>
181+
{speakers(this.state.speakers, that)}
95182

96183
<Input style={{marginBottom: 12, marginTop: 12}} ref="name" onChange={this.filterSpeaker} onKeyUp={this.searchKeyPress.bind(this)}placeholder="Name"/>
97184

98-
<b style={(this.state.suggestions == 0)? divStyle.hidden : divStyle.list}>Suggestions</b>
99-
{this.state.suggestions.map((s, index) => {
100-
return <a style={{marginBottom: 1}} tabindex={index+1} onKeyUp={this.searchKeyPress.bind(this)} onClick={this.addSpeaker.bind(event, s.toString(), s.toString())}><b>{s}</b></a>
101-
})}
102-
<div style={{marginBottom: 12}}/>
185+
<b style={(this.state.suggestions == 0)? divStyle.hidden : paint(divStyle.centerDiv, {width: "100%"})}>
186+
Suggestions
187+
</b>
188+
{speakers(this.state.suggestions, that)}
189+
190+
191+
<div name="addButtons" style={{marginBottom: 12}}/>
103192
<Button ref="addButton" onTap={this.addSpeaker}>Add Participant</Button>
104193
<div style={{marginBottom: 3}}/>
105194
<Button style={(this.state.speakers == 0)? divStyle.hidden : divStyle.list} ref="startConvo" onTap={this.startConvo}>Start Conversation</Button>
@@ -109,5 +198,20 @@ export default class Conversation extends React.Page {
109198
}
110199
}
111200

201+
const cbSug = {
202+
203+
onKeyUp: 'onKeyUp={this.searchKeyPress.bind(this)}',
204+
205+
onClick: 'onClick={this.addSpeaker.bind(event, s.toString(), s.toString())}'
206+
207+
}
208+
209+
210+
211+
//mapping suggestions
212+
// {this.state.suggestions.map((s, index) => {
213+
// return <a style={{marginBottom: 1}} tabindex={index+1} onKeyUp={this.searchKeyPress.bind(this)} onClick={this.addSpeaker.bind(event, s.toString(), s.toString())}><b>{s}</b></a>
214+
// })}
215+
112216

113-
const speakers = _.map((s, i) => {return <div key={i} style={divStyle.centerDiv}>{s}</div>})
217+
// <div key={i} style={divStyle.centerDiv}>{s}</div>

‎app/components/home/Sub.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as _ from 'ramda';
44
import {getLocalJSON, setLocalJSON} from '../simpleStorage';
55

66

7-
7+
import Velocity from 'velocity-animate';
88

99

1010

‎app/components/home/Talker.js

+69-51
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { React, View, Button, BackButton, Modal, Card} from 'reapp-kit';
2-
import divStyle from '../styles.js';
2+
import divStyle, {paint} from '../styles';
33

4-
const paint = divStyle.paint;
4+
require('velocity-animate/velocity.ui');
5+
6+
import {VelocityTransitionGroup, velocityHelpers} from 'velocity-react';
57

68
import * as _ from 'ramda';
79
import {getLocalJSON, setLocalJSON, addToHistory} from '../simpleStorage';
8-
import {get, onlyIf, logger} from '../../ramdahelpers.js';
9-
10-
10+
import {get, onlyIf, logger, prettyTime} from '../../ramdahelpers.js';
11+
import {speakers, tickers} from './convo/Transition'
1112

1213

13-
14-
const CTG = React.addons.CSSTransitionGroup;
14+
console.log(Velocity.RegisterEffect);
1515

1616

1717

@@ -24,9 +24,11 @@ const addTime = _.over(_.lensProp('currentSpeech'), _.add(1));
2424

2525

2626

27-
28-
29-
27+
class Clock extends React.Component{
28+
render(){
29+
return <div style={divStyle.bottomSpacing}><b>{this.props.speaker} has held the floor for {prettyTime(this.props.elapsed)}</b></div>
30+
}
31+
}
3032

3133

3234

@@ -35,35 +37,15 @@ const addTime = _.over(_.lensProp('currentSpeech'), _.add(1));
3537
const instructions = (speakers) => {
3638
let nums = _.map(get('currentSpeech'),(speakers));
3739
if (_.reduce(_.add, 0, nums) == 0)
38-
return <h1>Click on a Participant To Track The Time They Spend Speaking</h1>
40+
return <p>Click on a Participant To Track The Time They Spend Speaking</p>
3941
}
4042

4143

4244

4345

4446
// ::int -> string
45-
const prettyTime = (timeinSec) => {
46-
47-
let hours = (timeinSec > 3600)? parseInt(timeinSec / 3600) : 0;
48-
timeinSec = timeinSec - (hours * 3600);
49-
let minutes = (timeinSec > 60)? parseInt(timeinSec / 60) : 0;
50-
let seconds = timeinSec % 60;
51-
52-
let val = `${seconds} seconds`
53-
if (minutes > 0) val = `${minutes} minutes`.concat(" ", val);
54-
if (hours > 0) val = `${hours} hours`.concat(" ", val);
55-
return val;
56-
}
57-
58-
59-
6047

6148

62-
class Clock extends React.Component{
63-
render(){
64-
return <div style={divStyle.bottomSpacing}><b>{this.props.speaker} has held the floor for {prettyTime(this.props.elapsed)}</b></div>
65-
}
66-
}
6749

6850

6951
export default class TalkerApp extends React.Component {
@@ -159,37 +141,27 @@ export default class TalkerApp extends React.Component {
159141

160142
let alt = (this.state.ticking)? <Button color="red" onTap={this.pause}>Pause</Button> : <Button color="green" onTap={this.resume}>Resume</Button>
161143

162-
const percentSpeaking = (speaker) => {
163-
return (speaker.currentSpeech > 0)? (speaker.currentSpeech/ this.state.currentSpeech) * 100 : 0;
164-
}
144+
165145

166146
const backButton =
167147
<BackButton onTap={this.save} />
168148

169149
return (
170150

171151
<View {...this.props} title="Conversation" titleLeft={backButton}>
172-
<CTG>
173-
{instructions(this.state.speakers)}
174-
<b>Conversation Length: {prettyTime(this.state.currentSpeech)}</b>
175-
<b>Time in Silence: {prettyTime(this.state.silence)}</b>
176-
177-
{this.state.speakers.map(s => {
178152

179-
let ticker = (s.speaking)? <Clock speaker={s.name} elapsed={s.currentSpeech} /> : <div style={{marginBottom: 12}}/>;
153+
154+
<div style={divStyle.centerDiv}>
155+
<b>Conversation Length: {prettyTime(this.state.currentSpeech)}</b>
156+
<b>Time in Silence: {prettyTime(this.state.silence)}</b>
157+
{instructions(this.state.speakers)}
158+
</div>
180159

181-
return(<div>
182-
<Button style={{marginBottom: 10}} onTap={this.speak.bind(this, s)}>{s.name}
183-
<div style={Object.assign(divStyle.outline, {height: 15, borderRadius: 5, marginTop: 5, marginBottom: 4, minWidth: 70})}>
184-
<div style={Object.assign({}, {height: "100%", width: `${percentSpeaking(s)}%`, backgroundColor: (percentSpeaking(s) < 80)? 'green' : 'red'})}></div>
185-
</div>
186-
</Button>
187-
{ticker}
188-
</div>
189-
)})}
160+
{this.state.speakers.map(s => {
161+
return <Speaker total={this.state.currentSpeech} speak={this.speak} s={s} count={this.state.speakers.length}/>
162+
})}
190163
<br/>
191164
{alt}
192-
</CTG>
193165
</View>
194166
);
195167
}
@@ -199,3 +171,49 @@ export default class TalkerApp extends React.Component {
199171

200172

201173

174+
175+
176+
class Speaker extends React.Component{
177+
178+
179+
180+
render(){
181+
let total = this.props.total;
182+
let s = this.props.s;
183+
184+
const perc = (a, b) => (a > 0)? (a/b) * 100 : 0;
185+
186+
187+
188+
189+
190+
//let ticker = (s.speaking)? <Clock speaker={s.name} elapsed={s.currentSpeech} /> : <div style={{marginBottom: 12}}/>;
191+
192+
return(<div style={{marginBottom: 10}}>
193+
<Button style={{height: `${(400/this.props.count)}`}} onTap={this.props.speak.bind(this, s)}>
194+
{s.name}
195+
<div
196+
style={Object.assign(
197+
divStyle.outline,
198+
{height: 15,
199+
borderRadius: 5,
200+
marginTop: 5,
201+
marginBottom: 4,
202+
minWidth: 70})}>
203+
<div style={Object.assign({},
204+
{height: "100%",
205+
width: `${perc(s.currentSpeech, total)}%`,
206+
backgroundColor: (perc(s.currentSpeech, total) < 80)? 'green' : 'red'})}>
207+
</div>
208+
</div>
209+
<div style= {{margin: 2, borderRadius: 5, padding: 5, color: (s.speaking)? 'red' : null }}>
210+
{prettyTime(s.currentSpeech)}
211+
</div>
212+
</Button>
213+
</div>
214+
);
215+
}
216+
}
217+
218+
219+

0 commit comments

Comments
 (0)