How to use inferno-hyperscript - 9 common examples
To help you get started, we’ve selected a few inferno-hyperscript 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.
senshu / Sozi / js / view / Properties.js View on Github 
renderRichTextField(property, disabled, getter, setter, acceptsEmpty) {
const controller = this.controller;
const values = asArray(getter.call(controller, property));
const className = values.length > 1 ? "multiple" : undefined;
this.state[property] = {innerHTML: values.length >= 1 ? values[values.length - 1] : ""};
return h("section", {
id: "field-" + property,
contentEditable: true,
className,
disabled,
onblur() {
const value = this.innerHTML;
if (acceptsEmpty || value.length) {
setter.call(controller, property, value);
}
},
onkeydown(evt) {
if (evt.ctrlKey) {
switch(evt.keyCode) {
case 48: // Ctrl+0
document.execCommand("formatBlock", false, "<p>");
break;</p>onclick() { controller.undo(); }
}, h("i.fas.fa-reply")), // "reply" icon preferred to the official "undo" icon
h("button", {
title: _("Redo"),
disabled: controller.redoStack.length ? undefined : "disabled",
onclick() { controller.redo(); }
}, h("i.fas.fa-share")) // "share" icon preferred to the official "redo" icon
]),
h("span.group", [
h("button", {
title: screenfull.isFullscreen ? _("Disable full-screen mode") : _("Enable full-screen mode"),
id: "btn-fullscreen",
className: screenfull.isFullscreen ? "active" : undefined,
disabled: !screenfull.enabled,
onclick() { screenfull.toggle(document.documentElement).then(() => thisView.repaint()); }
}, h("i.fas.fa-desktop"))
]),
h("span.group.btn-group", [
h("button", {
title: _("Save the presentation"),
disabled: controller.storage && controller.storage.htmlNeedsSaving ? undefined : "disabled",
onclick() { controller.save(); }
}, h("i.fas.fa-download")), // "download" icon preferred to the official "save" icon
h("button", {
title: _("Reload the SVG document"),
onclick() { controller.reload(); }
}, h("i.fas.fa-sync"))
]),
h("span.group.btn-group", [
h("button", {
title: _("Preferences"),
className: this.properties.preferencesMode ? "active" : undefined,}, h("i.fas.fa-download")), // "download" icon preferred to the official "save" icon
h("button", {
title: _("Reload the SVG document"),
onclick() { controller.reload(); }
}, h("i.fas.fa-sync"))
]),
h("span.group.btn-group", [
h("button", {
title: _("Preferences"),
className: this.properties.preferencesMode ? "active" : undefined,
onclick() { thisView.properties.togglePreferencesMode(); thisView.repaint(); }
}, h("i.fas.fa-sliders-h")),
h("button", {
title: _("Information"),
onclick() { controller.info(`Sozi ${pkg.version}`, true); }
}, h("i.fas.fa-info"))
])
]);
}
}toggleDevTools : _("Toggle the developer tools")
};
let shortcuts = [];
for (let action in ACTION_LABELS) {
shortcuts.push(h("label", {for: `field-${action}`}, ACTION_LABELS[action]));
shortcuts.push(this.renderTextField(action, false, controller.getShortcut, controller.setShortcut, true));
}
return h("div.properties", [
h("h1", _("User interface")),
h("label", {for: "field-fontSize"}, _("Font size")),
this.renderNumberField("fontSize", false, controller.getPreference, controller.setPreference, false, 1, 1),
h("label", {for: "field-enableNotifications"}, [
_("Enable notifications on save and reload"),
this.renderToggleField(h("i.far.fa-check-square"), _("Enable notifications"), "enableNotifications", controller.getPreference, controller.setPreference)
]),
h("label", {for: "field-saveMode"}, _("Save the presentation")),
this.renderSelectField("saveMode", controller.getPreference, controller.setPreference, {
onblur: _("When Sozi loses the focus"),
manual: _("Manually")
}),
h("label", {for: "field-reloadMode"}, _("Reload the SVG document")),
this.renderSelectField("reloadMode", controller.getPreference, controller.setPreference, {
auto: _("Automatically"),
onfocus: _("When Sozi gets the focus"),
manual: _("Manually")
}),
h("h1", _("Behavior")),
h("label", {for: "field-animateTransitions"}, [
_("Preview transition animations"),
this.renderToggleField(h("i.far.fa-check-square"), _("Enable animated transitions"), "animateTransitions", controller.getPreference, controller.setPreference).map(layer => h("tr", [
h("th.layer-icons", [
layer.isVisible ?
h("i.visibility.far.fa-eye", {
title: _("This layer is visible. Click to hide it."),
onclick: evt => this.toggleLayerVisibility(layer.index, evt)
}) :
h("i.visibility.far.fa-eye-slash", {
title: _("This layer is hidden. Click to show it."),
onclick: evt => this.toggleLayerVisibility(layer.index, evt)
}),
h("i.remove.fas.fa-times", {
title: _("Remove this layer"),
onclick: () => controller.removeLayer(layer.index)
})
]),
h("th", {
className: "layer-label" + (this.selection.selectedLayers.indexOf(layer) >= 0 ? " selected" : ""),
onclick: evt => this.updateLayerSelection(layer.index, evt)
}, layer.label) }, Object.keys(options).map(optionValue => h("option", {
value: optionValue,
selected: value === optionValue
}, options[optionValue])
)renderSelectField(property, getter, setter, options) {
const controller = this.controller;
const values = asArray(getter.call(controller, property));
const className = values.length > 1 ? "multiple" : undefined;
const value = values.length >= 1 ? values[values.length - 1] : options[0];
return h("select", {
id: "field-" + property,
className,
onchange() {
setter.call(controller, property, this.value);
}
}, Object.keys(options).map(optionValue => h("option", {
value: optionValue,
selected: value === optionValue
}, options[optionValue])
)
);
}
}h("option", {value: "__sozi_add__", selected: "selected"}, _("Add layer")),
h("option", {value: "__sozi_add_all__"}, _("Add all layers")),
this.presentation.layers.slice().reverse()
.filter(layer => !layer.auto && controller.defaultLayers.indexOf(layer) >= 0)
.map(layer => h("option", {value: layer.index}, layer.label))
])
)
])
])
]),
h("div.timeline-bottom-left", [
h("table.timeline", [
controller.hasDefaultLayer ? h("tr", [
h("th.layer-icons", [
defaultLayersAreVisible ?
h("i.visibility.far.fa-eye", {
title: _("This layer is visible. Click to hide it."),
onclick: evt => this.toggleLayerVisibility(-1, evt)
}) :
h("i.visibility.far.fa-eye-slash", {
title: _("This layer is hidden. Click to show it."),
onclick: evt => this.toggleLayerVisibility(-1, evt)
}),
h("i.remove.fas.fa-times", {style: {visibility: "hidden"}})
]),
h("th", {
className: "layer-label" + (controller.defaultLayersAreSelected ? " selected" : ""),
onclick: evt => this.updateLayerSelection(-1, evt)
}, _("Default"))
]) : null,
this.presentation.layers.slice().reverse()
.filter(layer => controller.editableLayers.indexOf(layer) >= 0)save : _("Save the presentation"),
redo : _("Redo"),
undo : _("Undo"),
focusTitleField : _("Focus the frame title"),
reload : _("Reload the SVG document"),
toggleFullscreen : _("Toggle full-screen mode"),
toggleDevTools : _("Toggle the developer tools")
};
let shortcuts = [];
for (let action in ACTION_LABELS) {
shortcuts.push(h("label", {for: `field-${action}`}, ACTION_LABELS[action]));
shortcuts.push(this.renderTextField(action, false, controller.getShortcut, controller.setShortcut, true));
}
return h("div.properties", [
h("h1", _("User interface")),
h("label", {for: "field-fontSize"}, _("Font size")),
this.renderNumberField("fontSize", false, controller.getPreference, controller.setPreference, false, 1, 1),
h("label", {for: "field-enableNotifications"}, [
_("Enable notifications on save and reload"),
this.renderToggleField(h("i.far.fa-check-square"), _("Enable notifications"), "enableNotifications", controller.getPreference, controller.setPreference)
]),
h("label", {for: "field-saveMode"}, _("Save the presentation")),
this.renderSelectField("saveMode", controller.getPreference, controller.setPreference, {
onblur: _("When Sozi loses the focus"),
manual: _("Manually")
}),
h("label", {for: "field-reloadMode"}, _("Reload the SVG document")),
this.renderSelectField("reloadMode", controller.getPreference, controller.setPreference, {
auto: _("Automatically"),
onfocus: _("When Sozi gets the focus"),inferno-hyperscript
Bridging hyperscript to InfernoJS
