How to use the hyperflow.Hf.merge function in hyperflow
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;if (Ht.Theme.color.button.icon.hasOwnProperty(color)) {
themedColor = !disabled ? Ht.Theme.color.button.icon[color][shade] : Ht.Theme.color.button.icon.disabled[shade];
} else {
themedColor = !disabled ? color : Ht.Theme.color.button.icon.disabled[shade];
}
if (!Hf.isEmpty(preset) && icon === null) {
if (Ht.Theme.icon.hasOwnProperty(Hf.dashToCamelcase(preset))) {
icon = Ht.Theme.icon[Hf.dashToCamelcase(preset)];
} else {
Hf.log(`warn1`, `IconButtonInterface - Icon preset:${preset} is not found.`);
}
}
adjustedStyle = Hf.merge(DEFAULT_ICON_BUTTON_STYLE).with({
icon: dropShadow ? Hf.merge(DEFAULT_ICON_BUTTON_ICON_STYLE.icon[size]).with({
...dropShadowStyleTemplate,
tintColor: themedColor
}) : Hf.merge(DEFAULT_ICON_BUTTON_ICON_STYLE.icon[size]).with({
tintColor: themedColor
})
});
adjustedStyle = Hf.isObject(style) ? Hf.merge(adjustedStyle).with(style) : adjustedStyle;
return (themedIconBlurredColor = Hf.isEmpty(iconBlurredColor) ? Ht.Theme.color.textField.icon.blurred[shade === `light` ? `dark` : `light`] : iconBlurredColor;
}
themedHelperTextColor = Hf.isEmpty(helperTextColor) ? Ht.Theme.color.textField.helper : helperTextColor;
themedHintTextColor = Hf.isEmpty(hintTextColor) ? Ht.Theme.color.textField.hint : hintTextColor;
themedStatusTextColor = Hf.isEmpty(statusTextColor) ? Ht.Theme.color.textField.status : statusTextColor;
if (!Hf.isEmpty(iconPreset) && icon === null) {
if (Ht.Theme.icon.hasOwnProperty(Hf.dashToCamelcase(iconPreset))) {
icon = Ht.Theme.icon[Hf.dashToCamelcase(iconPreset)];
} else {
Hf.log(`warn1`, `CreditCardFieldInterface - Icon preset:${iconPreset} is not found.`);
}
}
adjustedStyle = Hf.merge(DEFAULT_TEXT_FIELD_STYLE).with({
fieldInputText: {
height: multiline ? fieldInput.height : DEFAULT_TEXT_FIELD_STYLE.fieldInputText.height,
color: themedFieldInputTextColor
},
helperText: {
color: themedHelperTextColor
},
hintText: {
color: themedHintTextColor
},
statusText: {
color: themedStatusTextColor
},
label: fixedFloatingLabel ? {
focused: {
top: -12,hyperflow
A javascript state flow and mutation management toolkit & library for developing universal app.
