Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

Update library to work with React 15.4.1 #108

Closed
wants to merge 4 commits into from
Closed

Update library to work with React 15.4.1 #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab36ee3
update ReactInstanceMap, ReactMultiChild and ReactUpdates requires fr…
aitoroses Dec 5, 2016
41f06da
Update example/vector-widget
aitoroses Dec 5, 2016
4ca301f
Add yarn.lock file
aitoroses Dec 5, 2016
c6da76b
Minor version bump 0.15.2
aitoroses Dec 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 50 additions & 47 deletions examples/vector-widget/VectorWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,35 @@
*/
"use strict";

var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Transform = ReactART.Transform;
import React from 'react'
import { Group, Surface, Shape, Transform } from 'react-art'

var MOUSE_UP_DRAG = 0.978;
var MOUSE_DOWN_DRAG = 0.9;
var MAX_VEL = 11;
var CLICK_ACCEL = 3;
var BASE_VEL = 0.15;
const MOUSE_UP_DRAG = 0.978;
const MOUSE_DOWN_DRAG = 0.9;
const MAX_VEL = 11;
const CLICK_ACCEL = 3;
const BASE_VEL = 0.15;

/**
* An animated SVG component.
*/
var VectorWidget = React.createClass({
export class VectorWidget extends React.Component {
/**
* Initialize state members.
*/
getInitialState: function() {
return {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
},
constructor() {
super()
this.state = {
degrees: 0,
velocity: 0,
drag: MOUSE_UP_DRAG
}

this.onTick = this.onTick.bind(this)
this.handleMouseUp = this.handleMouseUp.bind(this)
this.handleMouseDown = this.handleMouseDown.bind(this)

}

/**
* When the component is mounted into the document - this is similar to a
Expand All @@ -39,40 +45,40 @@ var VectorWidget = React.createClass({
* method. Binding of `this.onTick` is not needed because all React methods
* are automatically bound before being mounted.
*/
componentDidMount: function() {
componentDidMount() {
this._interval = window.setInterval(this.onTick, 20);
},
}

componentWillUnmount: function() {
componentWillUnmount() {
window.clearInterval(this._interval);
},
}

onTick: function() {
var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
var nextVelocity = this.state.velocity * this.state.drag;
onTick() {
const nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
const nextVelocity = this.state.velocity * this.state.drag;
this.setState({degrees: nextDegrees, velocity: nextVelocity});
},
}

/**
* When mousing down, we increase the friction down the velocity.
*/
handleMouseDown: function() {
handleMouseDown() {
this.setState({drag: MOUSE_DOWN_DRAG});
},
}

/**
* Cause the rotation to "spring".
*/
handleMouseUp: function() {
var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
handleMouseUp() {
const nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
},
}

/**
* This is the "main" method for any component. The React API allows you to
* describe the structure of your UI component at *any* point in time.
*/
render: function() {
render() {
return (
<Surface
width={700}
Expand All @@ -81,12 +87,12 @@ var VectorWidget = React.createClass({
{this.renderGraphic(this.state.degrees)}
</Surface>
);
},
}

/**
* Better SVG support for React coming soon.
*/
renderGraphic: function(rotation) {
renderGraphic(rotation) {

return (
<Group
Expand All @@ -113,20 +119,17 @@ var VectorWidget = React.createClass({
</Group>
);
}
});

var BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4";
var BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1";
var BAR_PATH = "M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0";
var RED_DOT_PATH = "M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17";
var YELLOW_DOT_PATH = "M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17";
var GREEN_DOT_PATH = "M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17";
var CENTER_DOT_PATH = "M84,105 C92.8365564,105 100,97.8365564 100,89 C100,80.1634436 92.8365564,73 84,73 C75.1634436,73 68,80.1634436 68,89 C68,97.8365564 75.1634436,105 84,105 Z M84,105";
var RING_ONE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
var RING_TWO_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
var RING_THREE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
var RING_TWO_ROTATE = new Transform().translate(84.000000, 89.000000).rotate(-240.000000).translate(-84.000000, -89.000000);
var RING_THREE_ROTATE = new Transform().translate(84.000000, 89.000000).rotate(-300.000000).translate(-84.000000, -89.000000);

module.exports = VectorWidget;
};

const BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4";
const BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1";
const BAR_PATH = "M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0";
const RED_DOT_PATH = "M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17";
const YELLOW_DOT_PATH = "M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17";
const GREEN_DOT_PATH = "M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17";
const CENTER_DOT_PATH = "M84,105 C92.8365564,105 100,97.8365564 100,89 C100,80.1634436 92.8365564,73 84,73 C75.1634436,73 68,80.1634436 68,89 C68,97.8365564 75.1634436,105 84,105 Z M84,105";
const RING_ONE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
const RING_TWO_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
const RING_THREE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121";
const RING_TWO_ROTATE = new Transform().translate(84.000000, 89.000000).rotate(-240.000000).translate(-84.000000, -89.000000);
const RING_THREE_ROTATE = new Transform().translate(84.000000, 89.000000).rotate(-300.000000).translate(-84.000000, -89.000000);
9 changes: 4 additions & 5 deletions examples/vector-widget/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var VectorWidget = require('./VectorWidget');
import React from 'react'
import { render } from 'react-dom'
import { VectorWidget } from './VectorWidget'

ReactDOM.render(<VectorWidget />, document.getElementById('container'));
render(<VectorWidget />, document.getElementById('container'));
Loading