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

FAQ Module using @cxco default packages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CategoryNav = exports.Category = exports.CategoryList = exports.Categories = void 0;

var _hyperapp = require("hyperapp");

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

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

/**
 *
 */
var Categories = function Categories() {
  return function (state, actions) {
    return (0, _hyperapp.h)("section", {
      class: "cxco-c-slide"
    }, (0, _hyperapp.h)(CategoryNav, {
      click: _index.scroll,
      direction: 'left',
      disabled: false
    }), (0, _hyperapp.h)("ol", {
      class: "cxco-c-slide__content",
      "min-width": state.width,
      onscroll: function onscroll(e) {
        new Promise(function (resolve) {
          return resolve(e);
        }).then((0, _index.delay)(_index.ANIMATION_DURATION)).then(function () {
          (0, _index.setNavigationButtons)(e.target);
        });
      },
      oncreate: function oncreate(e) {
        new Promise(function (resolve, reject) {
          actions.resize(e);
          window.addEventListener('resize', function () {
            actions.resize(e);
          });
        }).then(function () {
          (0, _index.setNavigationButtons)(e.target);
        });
      },
      onupdate: function onupdate(e) {
        (0, _index.delay)(_index.ANIMATION_DURATION)().then(_index.scrollToEnd);
      }
    }, state.selectedCategories.map(function (id, depth) {
      var items = [];
      var depthIndicator = depth + 1;

      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 selectedCategory = (0, _index.getCategoryById)(state.selectedCategories[depth - 1], state.categories);
      return (0, _hyperapp.h)("li", {
        class: "cxco-c-slide__item",
        oncreate: function oncreate(e) {
          (0, _index.onCreateAnimate)(e, true);
        },
        onremove: function onremove(e, done) {
          return (0, _index.onRemoveAnimate)(e).then(done).then(function () {
            (0, _index.setNavigationButtons)();
          });
        },
        "aria-labelledby": "cxco-c-slide__title"
      }, (0, _hyperapp.h)("h3", {
        class: "cxco-c-slide__title"
      }, state.showNumbering ? depthIndicator : '', " ", depth === 0 ? state.classificationName : selectedCategory.name), (0, _hyperapp.h)(CategoryList, {
        categoryList: items,
        click: actions.categoryClick
      }));
    })), (0, _hyperapp.h)(CategoryNav, {
      click: _index.scroll,
      direction: 'right',
      disabled: false
    }));
  };
};
/**
 *
 * @param {Object} param0
 * @param {Object[]} param0.categoryList
 * @param {function} param0.click
 */


exports.Categories = Categories;

var CategoryList = function CategoryList(_ref) {
  var categoryList = _ref.categoryList,
      click = _ref.click;
  return function (state, actions) {
    if (typeof categoryList === 'undefined') return;
    return (0, _hyperapp.h)("article", {
      class: "cxco-c-result"
    }, (0, _hyperapp.h)("ol", {
      class: "cxco-c-result__list",
      role: "tablist"
    }, categoryList.map(function (cat) {
      if (!state.excludedCategories.includes(cat.id)) {
        return (0, _hyperapp.h)(Category, {
          category: cat,
          click: click
        });
      }
    })));
  };
};
/**
 *
 * @param {Object} param0
 * @param {Object} param0.category
 * @param {function} param0.click
 */


exports.CategoryList = CategoryList;

var Category = function Category(_ref2) {
  var category = _ref2.category,
      click = _ref2.click;
  if (typeof category === 'undefined') return;
  return (0, _hyperapp.h)("li", {
    role: "presentation",
    class: "cxco-c-result__item"
  }, (0, _hyperapp.h)("button", {
    class: "cxco-c-result__button",
    id: category.name,
    "data-state": category.isSelected ? 'selected' : 'deselected',
    "aria-pressed": category.isSelected ? 'true' : 'false',
    key: "category-".concat(category.id),
    onclick: function onclick() {
      return click(category);
    }
  }, category.name));
};

exports.Category = Category;

var CategoryNav = function CategoryNav(_ref3) {
  var click = _ref3.click,
      direction = _ref3.direction,
      disabled = _ref3.disabled;
  return function (state, actions) {
    return (0, _hyperapp.h)("button", {
      class: "cxco-c-slide__button  cxco-c-slide__button--".concat(direction === 'left' ? 'prev' : 'next'),
      "aria-disabled": disabled,
      onclick: function onclick() {
        return click(direction);
      }
    });
  };
};

exports.CategoryNav = CategoryNav;