JSFiddle - React, Tailwind, and code Playground

by matthewdbill

HTML

<div id="app">

  <sc-dropdown params="items:categories, selectedItem:selectedCategory"></sc-dropdown>


Selected Category: 
<div data-bind="text:selectedCategory() && selectedCategory().name">
</div>
</div>

SCSS

body {
  font-family: monospace;
}

.list-group-wrap {
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
}

.list-group {
  background-color: grey;
  border: 1px solid black;
  color: white;
  padding: 10px;
}

li.active {
  color:red;
}

JavaScript

ko.components.register('sc-dropdown', {
    viewModel: function (params) {
        var self = this;
        self.selectorOpen = ko.observable(false);
        self.items = ko.observableArray(params.items);
        self.selectedItem = params.selectedItem;
				
        // If no item has been chosen by the consuming ViewModel, set the default to 0 
				if (self.selectedItem() == undefined)
        {
       		self.selectedItem(self.items()[0]);
				}
        
        self.selectedItem.subscribe(function(item){
            ko.utils.arrayForEach(self.items(), function(item) {							
                item.isActive(false);
            });
            
            item.isActive(true);
        });

        self.close = function (){
            self.selectorOpen(false);
        }

        self.clicked = function()
        {
            self.selectorOpen(!self.selectorOpen());
        }

        self.itemSelected = function () {
            const selectedItem = this;
            self.selectedItem(selectedItem);
            self.selectorOpen(false);
        }
    },
    template: '<span>Filter by:</span>\
<div class="setting">\
	<h3 class="recommendations-settings--toggle" id="filters" data-bind="html:selectedItem().name, click: clicked, css: {active:selectorOpen}"></h3>\
	<div class="list-group-wrap" data-bind="visible:selectorOpen">\
		<ul class="list-group" data-bind="foreach: items">\
			<li data-bind="html:name, css:{active:isActive()}, click: $parent.itemSelected"></li>\
		</ul>\
	</div>\
</div>'
});

function DropdownItem(name, value, isActive)
{
  this.name = name;
  this.value = value;
  this.isActive = ko.observable(isActive);
}

var vm = function() {
  
  this.categories = [new DropdownItem('All Opportunities', ''), new DropdownItem('CS Score', 'CSScore'), new DropdownItem('Conversion Rate', 'Conversion'), new DropdownItem('Errors', 'Error')]
  this.selectedCategory = ko.observable(this.categories[0]);
 ...