How to use hyperflow - 10 common examples
To help you get started, we’ve selected a few hyperflow examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tuantle / hypertoxin / src / components / views / layout-view-component.ios.js View on Github 
render: function render () {
const component = this;
const {
shade,
overlay,
orientation,
selfAlignment,
alignment,
scrollable,
style,
children
} = component.props;
let frosted = false;
let adjustedStyle = Hf.merge(DEFAULT_LAYOUT_VIEW_STYLE).with({
container: {
backgroundColor: (() => {
switch (overlay) { // eslint-disable-line
case `opaque`:
return Ht.Theme.color.layout.container[shade];
case `translucent-clear`:
return `${Ht.Theme.color.layout.container[shade]}${Ht.Theme.color.opacity}`;
case `translucent-frosted`:
frosted = true;
return `transparent`;
case `transparent`:
return `transparent`;
}
})(),
alignSelf: (() => {
switch (selfAlignment) { // eslint-disable-linerender: function render () {
const component = this;
const {
shade,
overlay,
alignment,
scrollable,
style,
children
} = component.props;
let frosted = false;
let adjustedStyle = Hf.merge(DEFAULT_BODY_VIEW_STYLE).with({
container: {
backgroundColor: (() => {
switch (overlay) { // eslint-disable-line
case `opaque`:
return Ht.Theme.color.body.container[shade];
case `translucent-clear`:
return `${Ht.Theme.color.body.container[shade]}${Ht.Theme.color.opacity}`;
case `translucent-frosted`:
frosted = true;
return `transparent`;
case `transparent`:
return `transparent`;
}
})(),
alignItems: (() => {
switch (alignment) { // eslint-disable-lineshade,
overlay,
oversized,
minimizedInitially,
dropShadow,
label,
style,
children,
onMinimized,
onMaximized
} = component.props;
const {
minimized
} = component.state;
const frosted = overlay === `translucent-frosted`;
let adjustedStyle = Hf.merge(DEFAULT_HEADER_VIEW_STYLE).with({
navigation: (() => {
let backgroundColor;
switch (overlay) { // eslint-disable-line
case `opaque`:
backgroundColor = Ht.Theme.color.header.container[shade];
break;
case `translucent-clear`:
backgroundColor = `${Ht.Theme.color.header.container[shade]}${Ht.Theme.color.opacity}`;
break;
case `translucent-frosted`:
backgroundColor = `transparent`;
break;
case `transparent`:
backgroundColor = `transparent`;
break;assignComponentRef = (refName) => {
const component = this;
if (Hf.DEVELOPMENT) {
if (!Hf.isString(refName)) {
Hf.log(`error`, `TitleTextComponent.assignComponentRef - Input component reference name is invalid.`);
}
}
/* helper function to set component ref */
const setComponentRef = function setComponentRef (componentRef) {
component.refCache[refName] = Hf.isDefined(componentRef) ? componentRef : null;
};
return setComponentRef;
}
/**assignComponentRef = (refName) => {
const component = this;
if (Hf.DEVELOPMENT) {
if (!Hf.isString(refName)) {
Hf.log(`error`, `CaptionTextComponent.assignComponentRef - Input component reference name is invalid.`);
}
}
/* helper function to set component ref */
const setComponentRef = function setComponentRef (componentRef) {
component.refCache[refName] = Hf.isDefined(componentRef) ? componentRef : null;
};
return setComponentRef;
}
/**assignComponentRef = (refName) => {
const component = this;
if (Hf.DEVELOPMENT) {
if (!Hf.isString(refName)) {
Hf.log(`error`, `InfoTextComponent.assignComponentRef - Input component reference name is invalid.`);
}
}
/* helper function to set component ref */
const setComponentRef = function setComponentRef (componentRef) {
component.refCache[refName] = Hf.isDefined(componentRef) ? componentRef : null;
};
return setComponentRef;
}
/**assignComponentRef = (refName) => {
const component = this;
if (Hf.DEVELOPMENT) {
if (!Hf.isString(refName)) {
Hf.log(`error`, `ItemViewComponent.assignComponentRef - Input component reference name is invalid.`);
}
}
/* helper function to set component ref */
const setComponentRef = function setComponentRef (componentRef) {
component.refCache[refName] = Hf.isDefined(componentRef) ? componentRef : null;
};
return setComponentRef;
}
/**assignComponentRef = (refName) => {
const component = this;
if (Hf.DEVELOPMENT) {
if (!Hf.isString(refName)) {
Hf.log(`error`, `LayoutViewComponent.assignComponentRef - Input component reference name is invalid.`);
}
}
/* helper function to set component ref */
const setComponentRef = function setComponentRef (componentRef) {
component.refCache[refName] = Hf.isDefined(componentRef) ? componentRef : null;
};
return setComponentRef;
}
/**onEndEditing = {(event) => {
const text = !Hf.isEmpty(event.nativeEvent.text) ? event.nativeEvent.text : `0`;
if (monetary && text.charAt(0) === `$`) {
if (event.nativeEvent.text.length === 1) {
onDoneEdit(0);
} else {
onDoneEdit(parseFloat(text.substring(1)));
}
} else {
onDoneEdit(parseFloat(text));
}
}}
onFocus = { onFocus }onEndEditing = {(event) => {
if (!Hf.isEmpty(event.nativeEvent.text)) {
const [
fieldTextInput
] = component.lookupComponentRefs(
`fieldTextInput`
);
fieldTextInput.setNativeProps({
text: `${parseInt(event.nativeEvent.text, 10)}`
});
}
}}
onSubmitEditing = {(event) => {hyperflow
A javascript state flow and mutation management toolkit & library for developing universal app.
