How to use the cyclejs.vdomPropHook function in cyclejs

To help you get started, we’ve selected a few cyclejs 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.

github erykpiast / autocompleted-select / src / js / view.js View on Github external
(textFieldValue, autocompletions, areAutocompletionsVisible, highlightedAutocompletionIndex, isValueInvalid) =>
        h('div', [
            h('style', stylesheet),
            h('input#field', {
                type: 'text',
                value: textFieldValue,
                className: isValueInvalid ? 'is-invalid' : ''
            }),
            h('ul', {
                scrollTop: vdomPropHook((element, property) => {
                    var singleOptionHeight = element.children[0] ? element.children[0].offsetHeight : 18;
                    var selectedAutocompletionTop = highlightedAutocompletionIndex * singleOptionHeight;
                    var selectedAutocompletionBottom = (highlightedAutocompletionIndex + 1) * singleOptionHeight;

                    var visibleViewport = {
                        top: element[property],
                        bottom: element[property] + element.offsetHeight
                    };

                    if(selectedAutocompletionTop < visibleViewport.top) {
                        element[property] = selectedAutocompletionTop;
                    } else if(selectedAutocompletionBottom > visibleViewport.bottom) {
                        element[property] = selectedAutocompletionTop + singleOptionHeight - element.offsetHeight;
                    }
                }),
                className: areAutocompletionsVisible ? 'is-visible' : ''