corporate-frontend-mithril/src/components/dropdown/dropdown.js

Corporate frontend MithrilJS modules

const FPO= require('fpo');
const vmHelper= require('./../../lib/helpers/view-models');
const ViewModel= require('./dropdown-vm');

module.exports = function() {

    let vm = ViewModel();
    let vmFn =  vmHelper.pickAttrsStdFn({
        vm, 
        props:['title','options','placeholder','limitHeight','nextFn'],
    });


    let view = function() {

        return m('div', {'data-js-el' : vm.id}, [
            vm.title && m('p.b-form-control__label b-form-control__label--size-base.b-form-control__label--tight', vm.title),
            vm.options && m('.b-dropdown-simple.b-abstract-dropdown-component.b-abstract-dropdown-component--show-panel.b-input-group__wrapper', [
                m('a.b-dropdown-simple__button-toggle.b-dropdown-simple__option.b-link--block.b-link--no-underline[href=javascript:void(0);]',
                    {
                        onclick: vm.toggleOptionsVisibility,
                    }, [
                        m('span.button-toggle-text', `${vm.selectedOpt.name}`),
                        m('span.b-dropdown-simple__button-toggle-icon.b-icon.b-icon--down-chevron'),
                    ]
                ),
                m(`.b-dropdown-simple__panel${vm.limitHeight}`, vm.options.map(obj => {
                    return m('.b-dropdown-simple__option-wrapper', [
                        m('a.b-dropdown-simple__option.b-link--block.b-link--no-underline[href=javascript:void(0);]', {
                            onclick: FPO.unapply({
                                fn: FPO.partial({fn: vm.next, args: {obj}}),
                                props: ['e'],
                            }),
                        }, obj.name),
                    ]);
                })),
            ]),
            
        ]);
    };

    return {
        oninit: vmFn,
        onbeforeupdate: vmFn,
        view,
    };

};