Create a gist now

Instantly share code, notes, and snippets.

@iamdustan /Button.js
Last active Aug 29, 2015

What would you like to do?
Some react-hardware internals.
import React from 'react';
import createReactHardwareComponentClass from '../createReactHardwareComponentClass';
import modes from './inputModes';
import HardwareManager from '../HardwareManager';
import ReactHardwareEventEmitter from '../ReactHardwareEventEmitter';
import findNodeHandle from '../findNodeHandle';
var {PropTypes} = React;
var DOWN_EVENT = 'topDown';
var UP_EVENT = 'topUp';
var CHANGE_EVENT = 'topChange';
var HOLD_EVENT = 'topHold';
var collect = (obj, ...things) =>
things.reduce((memo, thing) => ((memo[thing] = obj[thing]), memo), {});
var EVENT_TYPE = collect(
HardwareManager.customDirectEventTypes,
CHANGE_EVENT, DOWN_EVENT, HOLD_EVENT, UP_EVENT
);
var BUTTON_REF = 'button';
var viewConfig = {
uiViewClassName: 'Button',
validAttributes: {
pin: true,
mode: true,
onHold: true,
onChange: true,
onDown: true,
onUp: true,
},
};
function emitEvent(componentInstance, eventName, value) {
ReactHardwareEventEmitter.receiveEvent(
findNodeHandle(componentInstance),
eventName,
{
value: value,
target: componentInstance,
type: EVENT_TYPE[eventName].registrationName,
}
);
}
class Button extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
isDown: false,
inverted: props.inverted || false,
};
}
componentWillMount() {
// random private data that shouldn’t trigger a render
this._timer = null;
}
componentDidMount() {
// set up the hardware polling
HardwareManager.read(findNodeHandle(this.refs[BUTTON_REF]), newValue => {
if (newValue !== this.value) {
// TODO: add support for inverted buttons like johnny-five.
var eventName = newValue === 0 ? UP_EVENT : DOWN_EVENT;
emitEvent(this, eventName, newValue);
emitEvent(this, CHANGE_EVENT, newValue);
if (eventName === DOWN_EVENT) {
this._timer = setTimeout(
_ => emitEvent(this, HOLD_EVENT, newValue),
this.props.holdtime
);
}
else {
this._timer = clearTimeout(this._timer);
}
this.value = newValue;
}
});
}
componentWillUnmount() {
// TODO: maybe move this destroyer to the HardwareManager
HardwareManager.destroyRead(findNodeHandle(this.refs[BUTTON_REF]));
}
render() {
var props = Object.assign({}, this.props);
return (
<Hardware
ref={BUTTON_REF}
mode={modes.INPUT}
{...props} />
);
}
}
var Hardware = createReactHardwareComponentClass(viewConfig);
Button.propTypes = {
pin: PropTypes.number.isRequired,
mode: PropTypes.number,
holdtime: PropTypes.number,
onChange: PropTypes.func,
onDown: PropTypes.func,
onHold: PropTypes.func,
onUp: PropTypes.func,
};
Button.defaultProps = {
holdtime: 1000,
};
export default Button;
import React from 'react';
import createReactHardwareComponentClass from '../createReactHardwareComponentClass';
import modes from './inputModes';
var {PropTypes} = React;
var viewConfig = {
uiViewClassName: 'Led',
validAttributes: {
pin: true,
value: true,
mode: true,
},
};
class Led extends React.Component {
render() {
return (
<Hardware {...this.props} />
);
}
}
Led.displayName = 'Led';
Led.propTypes = {
pin: PropTypes.number.isRequired,
mode: PropTypes.number,
value: PropTypes.number,
};
var Hardware = createReactHardwareComponentClass(viewConfig);
Hardware.defaultProps = {mode: modes.OUTPUT};
export default Led;
import React from 'react';
import createReactHardwareComponentClass from '../createReactHardwareComponentClass';
import modes from './inputModes';
import HardwareManager from '../HardwareManager';
import ReactHardwareEventEmitter from '../ReactHardwareEventEmitter';
import findNodeHandle from '../findNodeHandle';
var {PropTypes} = React;
var CHANGE_EVENT = 'topChange';
var CLOSE_EVENT = 'topClose';
var OPEN_EVENT = 'topOpen';
var collect = (obj, ...things) =>
things.reduce((memo, thing) => ((memo[thing] = obj[thing]), memo), {});
var EVENT_TYPE = collect(
HardwareManager.customDirectEventTypes,
CHANGE_EVENT, CLOSE_EVENT, OPEN_EVENT
);
var SWITCH_REF = 'switch';
var viewConfig = {
uiViewClassName: 'Switch',
validAttributes: {
pin: true,
mode: true,
onChange: true,
onClose: true,
onOpen: true,
},
};
function emitEvent(componentInstance, eventName, value) {
ReactHardwareEventEmitter.receiveEvent(
findNodeHandle(componentInstance),
eventName,
{
value: value,
target: componentInstance,
type: EVENT_TYPE[eventName].registrationName,
}
);
}
class Switch extends React.Component {
componentDidMount() {
// set up the hardware polling
HardwareManager.read(findNodeHandle(this.refs[SWITCH_REF]), newValue => {
if (newValue !== this.value) {
var eventName = newValue === 0 ? CLOSE_EVENT : OPEN_EVENT;
emitEvent(this, eventName, newValue);
emitEvent(this, CHANGE_EVENT, newValue);
this.value = newValue;
}
});
}
componentWillUnmount() {
// TODO: maybe move this destroyer to the HardwareManager
HardwareManager.destroyRead(findNodeHandle(this.refs[SWITCH_REF]));
}
render() {
var props = Object.assign({}, this.props);
return (
<Hardware
ref={SWITCH_REF}
mode={modes.INPUT}
{...props} />
);
}
}
var Hardware = createReactHardwareComponentClass(viewConfig);
Switch.propTypes = {
pin: PropTypes.number.isRequired,
mode: PropTypes.number,
onChange: PropTypes.func,
onClose: PropTypes.func,
onOpen: PropTypes.func,
};
export default Switch;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment