@cxco/ui-faq/lib/views/faqs.js

FAQ Module using @cxco default packages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Faqs = void 0;

var _hyperapp = require("hyperapp");

var _index = require("../utils/index.js");

var _feedback = require("./feedback");

/* eslint-disable no-unused-vars */

/**
 * FAQ Wrapper Component
 */
var Faqs = function Faqs() {
  return function (state, actions) {
    var faqList = state.faqs;
    if (typeof faqList === 'undefined' || faqList.length === 0) return;
    var selectedCatList = state.selectedCategories;
    var cleanArr = selectedCatList.filter(function (id) {
      return id !== -1;
    });
    var selectedCatId = cleanArr.find(function (id, index, arr) {
      return index === arr.length - 1;
    });
    var selectedCat = (0, _index.getCategoryById)(selectedCatId, state.categories);
    return (0, _hyperapp.h)(FaqList, {
      faqList: faqList,
      click: actions.faqClick,
      selectedCat: selectedCat.name
    });
  };
};
/**
 * FAQ List Component
 * @param {Object} param0
 * @param {Object[]} param0.categoryList
 * @param {function} param0.click
 */


exports.Faqs = Faqs;

var FaqList = function FaqList(_ref) {
  var faqList = _ref.faqList,
      click = _ref.click,
      selectedCat = _ref.selectedCat;
  return function (state, actions) {
    return (0, _hyperapp.h)("section", {
      class: "cxco-c-fold",
      "aria-labelledby": selectedCat,
      "min-width": state.width,
      faqList: faqList,
      oncreate: function oncreate(e) {
        return (0, _index.onCreateAnimate)(e, false);
      },
      onupdate: function onupdate(e, oldAttributes) {
        var oldList = oldAttributes.faqList.map(function (faq) {
          return faq.id;
        });
        var newList = faqList.map(function (faq) {
          return faq.id;
        });

        if ((0, _index.isDifferentArray)(oldList, newList)) {
          (0, _index.onRemoveAnimate)(e);
          (0, _index.onCreateAnimate)(e, false);
        }
      },
      onremove: function onremove(e, done) {
        return (0, _index.onRemoveAnimate)(e).then(done);
      }
    }, faqList.map(function (faq) {
      return (0, _hyperapp.h)(Faq, {
        faq: faq,
        click: click
      });
    }));
  };
};
/**

 * FAQ item Component
 * @param {Object} param0
 * @param {Object} param0.category
 * @param {function} param0.click
 */


var Faq = function Faq(_ref2) {
  var faq = _ref2.faq,
      click = _ref2.click;
  return function (state, actions) {
    if (typeof faq === 'undefined' || faq === null) return;
    return (0, _hyperapp.h)("article", {
      class: 'cxco-c-fold__item',
      key: "faq-".concat(faq.id),
      "data-state": faq.isSelected ? 'open' : 'closed'
    }, (0, _hyperapp.h)("header", {
      class: 'cxco-c-fold__header',
      onclick: function onclick(e) {
        return click(faq);
      },
      "aria-expanded": faq.isSelected ? 'true' : 'false',
      role: "button"
    }, (0, _hyperapp.h)("h3", {
      class: 'cxco-c-fold__title'
    }, faq.question)), (0, _hyperapp.h)(FaqContent, {
      faq: faq
    }));
  };
};

var FaqContent = function FaqContent(_ref3) {
  var faq = _ref3.faq;
  return function (state, actions) {
    function handleClick(e) {
      // href or when click originates from an image check if the parent is an href
      var target = e.target.hasAttribute('data-dcx-link') ? e.target : e.target.nodeName === 'IMG' && e.target.parentElement.hasAttribute('data-dcx-link') ? e.target.parentElement : undefined;

      if (target) {
        actions.handleClick({
          interactionId: target.getAttribute('data-interactionid'),
          linkUrl: target.getAttribute('data-url'),
          linkId: target.getAttribute('data-id')
        });
      }
    }

    return (0, _hyperapp.h)("section", {
      class: 'cxco-c-fold__content',
      "aria-hidden": faq.isSelected ? 'false' : 'true',
      selected: faq.answer ? faq.isSelected : undefined,
      key: "faq-".concat(faq.id),
      onclick: function onclick(e) {
        return handleClick(e);
      },
      onupdate: function onupdate(e, oldAttributes) {
        var faqContent = Object.prototype.hasOwnProperty.call(faq, 'answer') ? faq.answer : '';
        var element = e.querySelector("[data-id=\"cxco-faq-".concat(faq.id, "-content\"]"));

        if (element !== null) {
          element.innerHTML = faqContent;
          (0, _index.addLightBoxListeners)(element);
        } // content update triggers an re-rendering


        if (oldAttributes.selected !== faq.isSelected && faqContent !== '') {
          (0, _index.toggle)(e);
        }
      }
    }, (0, _hyperapp.h)("div", {
      "data-id": "cxco-faq-".concat(faq.id, "-content")
    }), (0, _hyperapp.h)(_feedback.Feedback, {
      faq: faq
    }));
  };
};