@brightleaf/elements/lib/carousel/carousel.js

React UI elements styled with Bulma CSS

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _modifiers = require("../modifiers");

var _button = require("../button");

var _icon = require("../icon");

require("./carousel.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var CarouselItem = function CarouselItem(_ref) {
  var children = _ref.children,
      className = _ref.className;

  /*
    <div class="is-multi-carousel">
    <div class="is-multi-carousel-inner columns is-variable is-8">
  */
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('column', className)
  }, children);
};

exports.CarouselItem = CarouselItem;
CarouselItem.displayName = 'BrightleafElements(CarouselItem)';
CarouselItem.sortOrder = 1;

var Carousel = function Carousel(_ref2) {
  var children = _ref2.children,
      isMobile = _ref2.isMobile,
      isFluid = _ref2.isFluid,
      isWideScreen = _ref2.isWideScreen,
      isFullHD = _ref2.isFullHD,
      className = _ref2.className,
      onClick = _ref2.onClick;
  var classes = (0, _modifiers.Screens)({
    isMobile: isMobile,
    isFluid: isFluid,
    isWideScreen: isWideScreen,
    isFullHD: isFullHD
  });

  var childrenAsArray = _react.default.Children.toArray(children);
  /*.sort(
  (childA, childB) => {
  if (childA.type.sortOrder < childB.type.sortOrder) {
  return -1
  }
  if (childA.type.sortOrder > childB.type.sortOrder) {
  return 1
  }
  return 0
  }
  )
  */

  /*
    const total = parseFloat(
      getComputedStyle(innerCnt, null).width.replace("px", "")
    );
     const slidesOnDisplay = total / slideWidth;
  */


  var _useState = (0, _react.useState)(0),
      _useState2 = _slicedToArray(_useState, 2),
      carouselOffsest = _useState2[0],
      setCarouselOffsest = _useState2[1];

  (0, _react.useEffect)(function () {// buttons?
  });
  var types = [CardHeader, CardBody, CardFooter, CardImage, CardImageContainer];
  var kids = childrenAsArray.forEach(function (child) {
    if (types.indexOf(child.type) > -1 || child.props.className && child.props.className.indexOf('column') > -1) {
      return;
    }

    if (child.type.name === 'Collapse') {
      return;
    }

    console.warn("'".concat(child.type, "' not allowed"));
  }).map(function (child) {
    return child; // refs?
  });
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('is-multi-carousel', className, classes)
  }, _react.default.createElement("div", {
    class: "is-multi-carousel-inner columns is-variable is-8"
  }, kids), _react.default.createElement(_button.Button, {
    className: "left-next"
  }, _react.default.createElement(_icon.Icon, {
    icon: "chevron-left",
    fas: true
  })), _react.default.createElement(_button.Button, {
    className: "right-next"
  }, _react.default.createElement(_icon.Icon, {
    icon: "chevron-right",
    fas: true
  })));
};
/*
  <button class="left-next button">
     <span class="icon">
      <i class="fas fa-chevron-left"></i>
    </span>
   </button>
  <button class="right-next button"><span class="icon">
      <i class="fas fa-chevron-right"></i>
    </span></button>
*/


exports.Carousel = Carousel;
Carousel.propTypes = {};
Carousel.defaultProps = {
  className: '',
  isMobile: false,
  isFluid: false,
  isWideScreen: false,
  isFullHD: false
};
Carousel.displayName = 'BrightleafElements(Carousel)';