JSFiddle - React, Tailwind, and code Playground

by musicreader

CSS

.FileActionChoiceButtonDown{
  background:red;
}

JavaScript

function FileActionChoice(items, index, actions, generate_description) {
  this.items = items;
  this.index = index;
  this.actions = actions;
  this.item = items[index];
  this.selectedActionIndex = null;
  this.generate_description = generate_description;
}

  FileActionChoice.prototype.autoProcessCallback = function() {
    if (this.selectedActionIndex !== null) {
        var action = this.actions[this.selectedActionIndex];
        if (action.auto_process_callback) {
            action.callback();
            return true;
        }
    }
    return false;
  };

FileActionChoice.prototype.getUIElement = function() {
  var divElement = document.createElement('div');
  divElement.className = 'FileActionChoice';

  var nameSpan = document.createElement('span');
  nameSpan.className = 'FileActionChoiceName';
  divElement.appendChild(nameSpan);
  this.generate_description(this.item, nameSpan);

  var self = this;
  this.actions.forEach(function(action, index) {
    var button = document.createElement('button');
    button.textContent = action.name;
    button.className = 'FileActionChoiceButtonNormal';
    button.addEventListener('click', function() {
      self.selectAction(index);
    });
    divElement.appendChild(button);
  });

  if (this.selectedActionIndex !== null && this.shouldDisplayWarning()) {
    var warningSpan = document.createElement('span');
    warningSpan.className = 'FileActionChoiceWarning';
    warningSpan.textContent = this.actions[this.selectedActionIndex].warning;
    divElement.appendChild(warningSpan);
  }

  return divElement;
};

FileActionChoice.prototype.selectAction = function(index) {
  this.selectedActionIndex = index;
  var buttons = document.querySelectorAll('.FileActionChoiceButtonNormal');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('FileActionChoiceButtonDown');
  }

  var selectedButton = event.currentTarget;
  selectedButton.classList.add('FileActionChoiceButtonDown');

  var warningSpan =...