Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui-presets / dist / abstractions / Gallery / renderProps.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const Empty_1 = tslib_1.__importDefault(require("@skava/ui/dist/components/atoms/Empty"));

const deps_1 = require("./deps");

const styled_1 = require("./styled");

const navigationClicked = args => {
  console.log('[arrow clicked!]', args);
};

const bulletClicked = args => {
  console.log('[bullet clicked!]', args);
};
/**
 * render navigations
 */


function defaultRenderNavigations(props) {
  return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(styled_1.LeftNavigation, {
    onClick: navigationClicked
  }), react_1.default.createElement(styled_1.RightNavigation, {
    onClick: navigationClicked
  }));
}

exports.defaultRenderNavigations = defaultRenderNavigations;

function defaultRenderBullet(index) {
  return react_1.default.createElement(styled_1.Bullet, {
    onClick: bulletClicked
  }, index + 1);
}

exports.defaultRenderBullet = defaultRenderBullet;
/**
 * render bullets
 */

function defaultRenderBulletList(props) {
  const {
    activeDisplayCount,
    list,
    renderBullet
  } = props;
  const slideLength = Math.ceil(list.length / activeDisplayCount);
  const bulletsList = Array.apply(undefined, Array(slideLength));
  return bulletsList.map((item, index) => renderBullet(index));
}
/**
 * rendering item
 */


function defaultRenderItem(item, index, props) {
  const itemKey = `item-${index}`;
  const {
    itemWidth
  } = props;
  return react_1.default.createElement(styled_1.GalleryItemPanel, {
    key: itemKey,
    itemWidth: itemWidth
  });
}

exports.defaultRenderItem = defaultRenderItem;
/**
 * rendering item list
 */

function defaultRenderList(props) {
  const {
    list,
    renderItem,
    itemWidth
  } = props,
        remainingProps = tslib_1.__rest(props, ["list", "renderItem", "itemWidth"]);

  if (deps_1.isNonEmptyArray(list)) {
    const containerWidth = list.length * itemWidth;
    const items = list.map((item, index) => renderItem(item, index, Object.assign({
      itemWidth
    }, remainingProps)));
    return react_1.default.createElement(styled_1.GalleryListContainer, {
      containerWidth: containerWidth
    }, items);
  } else {
    return react_1.default.createElement(Empty_1.default, null);
  }
}

function defaultRenderGalleryTemplate(props) {
  const {
    renderNavigations
  } = props,
        remainingProps = tslib_1.__rest(props, ["renderNavigations"]);

  const activeDisplayCount = deps_1.getItemDisplayCount(remainingProps);
  const itemWidth = deps_1.getItemWidth(activeDisplayCount);
  const attributes = Object.assign({}, remainingProps, {
    activeDisplayCount,
    itemWidth
  });
  const navigations = renderNavigations(attributes);
  const bullets = defaultRenderBulletList(attributes);
  const listItems = defaultRenderList(attributes);
  return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(styled_1.NavigationContainer, null, navigations), react_1.default.createElement(styled_1.GalleryListWrapper, null, listItems), react_1.default.createElement(styled_1.BulletsConatiner, null, bullets));
}

exports.defaultRenderGalleryTemplate = defaultRenderGalleryTemplate;
/**
 * rendering wrapper
 */

function defaultRenderWrapper(props) {
  const {
    className,
    children
  } = props;
  return react_1.default.createElement(styled_1.GalleryWrapper, {
    className: className
  }, children);
}

exports.defaultRenderWrapper = defaultRenderWrapper;