web-toolkit/lib/components/List.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _Icon = _interopRequireDefault(require("./Icon"));

/*
 * List.js
 */
function List(_ref) {
  var children = _ref.children,
      className = _ref.className,
      separators = _ref.separators,
      horizontal = _ref.horizontal,
      _ref$border = _ref.border,
      border = _ref$border === void 0 ? true : _ref$border,
      rounded = _ref.rounded,
      fill = _ref.fill,
      rich = _ref.rich,
      sidebar = _ref.sidebar,
      sublist = _ref.sublist,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "className", "separators", "horizontal", "border", "rounded", "fill", "rich", "sidebar", "sublist"]);
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
    className: (0, _clsx.default)('List', className, borderClass(border), {
      'fill': fill === true,
      'fill-width': fill === 'width',
      'fill-height': fill === 'height'
    }, {
      separators: separators,
      horizontal: horizontal,
      rounded: rounded,
      rich: rich,
      sublist: sublist,
      sidebar: sidebar,
      'stack-sidebar': sidebar === 'stack',
      'navigation-sidebar': sidebar === 'navigation'
    })
  }, rest), children);
}

List.defaultProps = {
  separators: true
};

function Item(_ref2) {
  var as = _ref2.as,
      children = _ref2.children,
      className = _ref2.className,
      selected = _ref2.selected,
      expandable = _ref2.expandable,
      activatable = _ref2.activatable,
      needsAttention = _ref2.needsAttention,
      rest = (0, _objectWithoutProperties2.default)(_ref2, ["as", "children", "className", "selected", "expandable", "activatable", "needsAttention"]);
  var Element = as ? as : activatable ? 'button' : 'div';
  return /*#__PURE__*/_react.default.createElement(Element, Object.assign({
    className: (0, _clsx.default)('List__item', className, {
      activatable: activatable !== null && activatable !== void 0 ? activatable : activatable,
      expandable: expandable,
      selected: selected,
      'needs-attention': needsAttention
    }),
    role: activatable ? 'button' : undefined,
    tabIndex: activatable ? '0' : undefined
  }, rest), children, expandable && /*#__PURE__*/_react.default.createElement(_Icon.default, {
    name: "go-next",
    className: "arrow",
    colored: false
  }));
}

List.Item = Item;
var _default = List; // Helpers

exports.default = _default;

function borderClass(border) {
  if (border === false) return 'border-none';
  if (border === true) return 'border';
  if (typeof border === 'string') return "border-".concat(border);
  if (Array.isArray(border)) return border.map(borderClass).join(' ');
  return undefined;
}
//# sourceMappingURL=List.js.map