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

FAQ Module using @cxco default packages

"use strict";

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

var _hyperapp = require("hyperapp");

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

/* eslint-disable no-unused-vars */
var BreadCrumbs = function BreadCrumbs() {
  return function (state, actions) {
    return (0, _hyperapp.h)("nav", {
      "aria-label": "Breadcrumb",
      class: "cxco-c-breadcrumb"
    }, (0, _hyperapp.h)("ol", {
      class: "cxco-c-breadcrumb__list"
    }, state.selectedCategories.map(function (id, depth) {
      var items = [];

      if (depth === 0) {
        items = state.categories;
      } else {
        var item = (0, _index.getCategoryById)(state.selectedCategories[depth - 1], state.categories);
        items = item && item.subCategories ? item.subCategories : [];
      }

      items.forEach(function (item) {
        item.isSelected = item.id === id;
        item.depth = depth;
      });
      var activatedArray = items.filter(function (item) {
        return item.isSelected;
      });
      return (0, _hyperapp.h)(Breadcrumb, {
        currentDepth: state.depth,
        categoryList: activatedArray,
        click: actions.categoryClick
      });
    })));
  };
};

exports.BreadCrumbs = BreadCrumbs;

var Breadcrumb = function Breadcrumb(_ref) {
  var categoryList = _ref.categoryList,
      click = _ref.click,
      currentDepth = _ref.currentDepth;
  if (typeof categoryList === 'undefined' || categoryList.length === 0) return;
  return categoryList.map(function (item) {
    return (0, _hyperapp.h)("li", {
      class: "cxco-c-breadcrumb__item"
    }, (0, _hyperapp.h)("a", {
      onclick: function onclick() {
        return click(item);
      },
      key: "category-".concat(item.id),
      class: 'cxco-c-breadcrumb__link',
      "aria-current": item.depth === currentDepth
    }, item.name, " ", item.depth === currentDepth));
  });
};

exports.Breadcrumb = Breadcrumb;