react-film/lib/BasicFilm.js

React component for showing carousel just like a film strip

"use strict";

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/es.weak-map.js");

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.object.define-property.js");

require("core-js/modules/es.object.get-own-property-descriptor.js");

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _Dots = _interopRequireDefault(require("./Dots"));

var _Filmstrip = _interopRequireDefault(require("./Filmstrip"));

var _Flipper = _interopRequireDefault(require("./Flipper"));

var _ScrollBar = _interopRequireDefault(require("./ScrollBar"));

var _useDir3 = _interopRequireDefault(require("./hooks/useDir"));

var _useHeight3 = _interopRequireDefault(require("./hooks/useHeight"));

var _useNumItems3 = _interopRequireDefault(require("./hooks/useNumItems"));

var _useScrollBarWidth3 = _interopRequireDefault(require("./hooks/useScrollBarWidth"));

var _useScrolling3 = _interopRequireDefault(require("./hooks/useScrolling"));

var _useStyleOptions3 = _interopRequireDefault(require("./hooks/useStyleOptions"));

var _useStyleSetClassNames = _interopRequireDefault(require("./hooks/useStyleSetClassNames"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

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

  var _useDir = (0, _useDir3["default"])(),
      _useDir2 = (0, _slicedToArray2["default"])(_useDir, 1),
      dir = _useDir2[0];

  var _useHeight = (0, _useHeight3["default"])(),
      _useHeight2 = (0, _slicedToArray2["default"])(_useHeight, 1),
      height = _useHeight2[0];

  var _useNumItems = (0, _useNumItems3["default"])(),
      _useNumItems2 = (0, _slicedToArray2["default"])(_useNumItems, 1),
      numItems = _useNumItems2[0];

  var _useScrollBarWidth = (0, _useScrollBarWidth3["default"])(),
      _useScrollBarWidth2 = (0, _slicedToArray2["default"])(_useScrollBarWidth, 1),
      scrollBarWidth = _useScrollBarWidth2[0];

  var _useScrolling = (0, _useScrolling3["default"])(),
      _useScrolling2 = (0, _slicedToArray2["default"])(_useScrolling, 1),
      scrolling = _useScrolling2[0];

  var _useStyleSetClassName = (0, _useStyleSetClassNames["default"])(),
      _useStyleSetClassName2 = (0, _slicedToArray2["default"])(_useStyleSetClassName, 1),
      rootClassName = _useStyleSetClassName2[0].root;

  var _useStyleOptions = (0, _useStyleOptions3["default"])(),
      _useStyleOptions2 = (0, _slicedToArray2["default"])(_useStyleOptions, 1),
      _useStyleOptions2$ = _useStyleOptions2[0],
      flipperBlurFocusOnClick = _useStyleOptions2$.flipperBlurFocusOnClick,
      leftFlipperText = _useStyleOptions2$.leftFlipperText,
      rightFlipperText = _useStyleOptions2$.rightFlipperText,
      showDots = _useStyleOptions2$.showDots,
      showFlipper = _useStyleOptions2$.showFlipper,
      showScrollBar = _useStyleOptions2$.showScrollBar;

  var contentStyle = (0, _react.useMemo)(function () {
    return {
      height: height
    };
  }, [height]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(rootClassName, (className || '') + ''),
    dir: dir
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])('react-film__main', {
      'react-film__main--scrolling': scrolling
    }),
    style: contentStyle
  }, !!numItems && scrollBarWidth !== '100%' && !!showFlipper && /*#__PURE__*/_react["default"].createElement(_Flipper["default"], {
    blurFocusOnClick: flipperBlurFocusOnClick,
    mode: "left"
  }, leftFlipperText), /*#__PURE__*/_react["default"].createElement(_Filmstrip["default"], null, children), !!numItems && scrollBarWidth !== '100%' && !!showFlipper && /*#__PURE__*/_react["default"].createElement(_Flipper["default"], {
    blurFocusOnClick: flipperBlurFocusOnClick,
    mode: "right"
  }, rightFlipperText), !!numItems && scrollBarWidth !== '100%' && !!showScrollBar && /*#__PURE__*/_react["default"].createElement(_ScrollBar["default"], null)), !!numItems && scrollBarWidth !== '100%' && !!showDots && /*#__PURE__*/_react["default"].createElement(_Dots["default"], null));
}; // TODO: Move from styleSet to styleSheet.


BasicFilm.defaultProps = {
  children: undefined,
  className: undefined
};
BasicFilm.propTypes = {
  children: _propTypes["default"].any,
  className: _propTypes["default"].string
};
var _default = BasicFilm;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9CYXNpY0ZpbG0uanMiXSwibmFtZXMiOlsiQmFzaWNGaWxtIiwiY2hpbGRyZW4iLCJjbGFzc05hbWUiLCJkaXIiLCJoZWlnaHQiLCJudW1JdGVtcyIsInNjcm9sbEJhcldpZHRoIiwic2Nyb2xsaW5nIiwicm9vdENsYXNzTmFtZSIsInJvb3QiLCJmbGlwcGVyQmx1ckZvY3VzT25DbGljayIsImxlZnRGbGlwcGVyVGV4dCIsInJpZ2h0RmxpcHBlclRleHQiLCJzaG93RG90cyIsInNob3dGbGlwcGVyIiwic2hvd1Njcm9sbEJhciIsImNvbnRlbnRTdHlsZSIsImRlZmF1bHRQcm9wcyIsInVuZGVmaW5lZCIsInByb3BUeXBlcyIsIlByb3BUeXBlcyIsImFueSIsInN0cmluZyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBQ0E7O0FBQ0E7O0FBRUE7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7Ozs7OztBQUVBLElBQU1BLFNBQVMsR0FBRyxTQUFaQSxTQUFZLE9BQTZCO0FBQUEsTUFBMUJDLFFBQTBCLFFBQTFCQSxRQUEwQjtBQUFBLE1BQWhCQyxTQUFnQixRQUFoQkEsU0FBZ0I7O0FBQzdDLGdCQUFjLDBCQUFkO0FBQUE7QUFBQSxNQUFPQyxHQUFQOztBQUNBLG1CQUFpQiw2QkFBakI7QUFBQTtBQUFBLE1BQU9DLE1BQVA7O0FBQ0EscUJBQW1CLCtCQUFuQjtBQUFBO0FBQUEsTUFBT0MsUUFBUDs7QUFDQSwyQkFBeUIscUNBQXpCO0FBQUE7QUFBQSxNQUFPQyxjQUFQOztBQUNBLHNCQUFvQixnQ0FBcEI7QUFBQTtBQUFBLE1BQU9DLFNBQVA7O0FBQ0EsOEJBQWtDLHdDQUFsQztBQUFBO0FBQUEsTUFBZUMsYUFBZiw2QkFBU0MsSUFBVDs7QUFDQSx5QkFDRSxtQ0FERjtBQUFBO0FBQUE7QUFBQSxNQUFTQyx1QkFBVCxzQkFBU0EsdUJBQVQ7QUFBQSxNQUFrQ0MsZUFBbEMsc0JBQWtDQSxlQUFsQztBQUFBLE1BQW1EQyxnQkFBbkQsc0JBQW1EQSxnQkFBbkQ7QUFBQSxNQUFxRUMsUUFBckUsc0JBQXFFQSxRQUFyRTtBQUFBLE1BQStFQyxXQUEvRSxzQkFBK0VBLFdBQS9FO0FBQUEsTUFBNEZDLGFBQTVGLHNCQUE0RkEsYUFBNUY7O0FBR0EsTUFBTUMsWUFBWSxHQUFHLG9CQUFRO0FBQUEsV0FBTztBQUFFWixNQUFBQSxNQUFNLEVBQU5BO0FBQUYsS0FBUDtBQUFBLEdBQVIsRUFBNEIsQ0FBQ0EsTUFBRCxDQUE1QixDQUFyQjtBQUVBLHNCQUNFO0FBQUssSUFBQSxTQUFTLEVBQUUsNEJBQVdJLGFBQVgsRUFBMEIsQ0FBQ04sU0FBUyxJQUFJLEVBQWQsSUFBb0IsRUFBOUMsQ0FBaEI7QUFBbUUsSUFBQSxHQUFHLEVBQUVDO0FBQXhFLGtCQUNFO0FBQ0UsSUFBQSxTQUFTLEVBQUUsNEJBQVcsa0JBQVgsRUFBK0I7QUFBRSxxQ0FBK0JJO0FBQWpDLEtBQS9CLENBRGI7QUFFRSxJQUFBLEtBQUssRUFBRVM7QUFGVCxLQUlHLENBQUMsQ0FBQ1gsUUFBRixJQUFjQyxjQUFjLEtBQUssTUFBakMsSUFBMkMsQ0FBQyxDQUFDUSxXQUE3QyxpQkFDQyxnQ0FBQyxtQkFBRDtBQUFTLElBQUEsZ0JBQWdCLEVBQUVKLHVCQUEzQjtBQUFvRCxJQUFBLElBQUksRUFBQztBQUF6RCxLQUNHQyxlQURILENBTEosZUFTRSxnQ0FBQyxxQkFBRCxRQUFZVixRQUFaLENBVEYsRUFVRyxDQUFDLENBQUNJLFFBQUYsSUFBY0MsY0FBYyxLQUFLLE1BQWpDLElBQTJDLENBQUMsQ0FBQ1EsV0FBN0MsaUJBQ0MsZ0NBQUMsbUJBQUQ7QUFBUyxJQUFBLGdCQUFnQixFQUFFSix1QkFBM0I7QUFBb0QsSUFBQSxJQUFJLEVBQUM7QUFBekQsS0FDR0UsZ0JBREgsQ0FYSixFQWVHLENBQUMsQ0FBQ1AsUUFBRixJQUFjQyxjQUFjLEtBQUssTUFBakMsSUFBMkMsQ0FBQyxDQUFDUyxhQUE3QyxpQkFBOEQsZ0NBQUMscUJBQUQsT0FmakUsQ0FERixFQWtCRyxDQUFDLENBQUNWLFFBQUYsSUFBY0MsY0FBYyxLQUFLLE1BQWpDLElBQTJDLENBQUMsQ0FBQ08sUUFBN0MsaUJBQXlELGdDQUFDLGdCQUFELE9BbEI1RCxDQURGO0FBc0JELENBbENELEMsQ0FvQ0E7OztBQUVBYixTQUFTLENBQUNpQixZQUFWLEdBQXlCO0FBQ3ZCaEIsRUFBQUEsUUFBUSxFQUFFaUIsU0FEYTtBQUV2QmhCLEVBQUFBLFNBQVMsRUFBRWdCO0FBRlksQ0FBekI7QUFLQWxCLFNBQVMsQ0FBQ21CLFNBQVYsR0FBc0I7QUFDcEJsQixFQUFBQSxRQUFRLEVBQUVtQixzQkFBVUMsR0FEQTtBQUVwQm5CLEVBQUFBLFNBQVMsRUFBRWtCLHNCQUFVRTtBQUZELENBQXRCO2VBS2V0QixTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSAnY2xhc3NuYW1lcyc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBEb3RzIGZyb20gJy4vRG90cyc7XG5pbXBvcnQgRmlsbXN0cmlwIGZyb20gJy4vRmlsbXN0cmlwJztcbmltcG9ydCBGbGlwcGVyIGZyb20gJy4vRmxpcHBlcic7XG5pbXBvcnQgU2Nyb2xsQmFyIGZyb20gJy4vU2Nyb2xsQmFyJztcbmltcG9ydCB1c2VEaXIgZnJvbSAnLi9ob29rcy91c2VEaXInO1xuaW1wb3J0IHVzZUhlaWdodCBmcm9tICcuL2hvb2tzL3VzZUhlaWdodCc7XG5pbXBvcnQgdXNlTnVtSXRlbXMgZnJvbSAnLi9ob29rcy91c2VOdW1JdGVtcyc7XG5pbXBvcnQgdXNlU2Nyb2xsQmFyV2lkdGggZnJvbSAnLi9ob29rcy91c2VTY3JvbGxCYXJXaWR0aCc7XG5pbXBvcnQgdXNlU2Nyb2xsaW5nIGZyb20gJy4vaG9va3MvdXNlU2Nyb2xsaW5nJztcbmltcG9ydCB1c2VTdHlsZU9wdGlvbnMgZnJvbSAnLi9ob29rcy91c2VTdHlsZU9wdGlvbnMnO1xuaW1wb3J0IHVzZVN0eWxlU2V0Q2xhc3NOYW1lcyBmcm9tICcuL2hvb2tzL3VzZVN0eWxlU2V0Q2xhc3NOYW1lcyc7XG5cbmNvbnN0IEJhc2ljRmlsbSA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUgfSkgPT4ge1xuICBjb25zdCBbZGlyXSA9IHVzZURpcigpO1xuICBjb25zdCBbaGVpZ2h0XSA9IHVzZUhlaWdodCgpO1xuICBjb25zdCBbbnVtSXRlbXNdID0gdXNlTnVtSXRlbXMoKTtcbiAgY29uc3QgW3Njcm9sbEJhcldpZHRoXSA9IHVzZVNjcm9sbEJhcldpZHRoKCk7XG4gIGNvbnN0IFtzY3JvbGxpbmddID0gdXNlU2Nyb2xsaW5nKCk7XG4gIGNvbnN0IFt7IHJvb3Q6IHJvb3RDbGFzc05hbWUgfV0gPSB1c2VTdHlsZVNldENsYXNzTmFtZXMoKTtcbiAgY29uc3QgW3sgZmxpcHBlckJsdXJGb2N1c09uQ2xpY2ssIGxlZnRGbGlwcGVyVGV4dCwgcmlnaHRGbGlwcGVyVGV4dCwgc2hvd0RvdHMsIHNob3dGbGlwcGVyLCBzaG93U2Nyb2xsQmFyIH1dID1cbiAgICB1c2VTdHlsZU9wdGlvbnMoKTtcblxuICBjb25zdCBjb250ZW50U3R5bGUgPSB1c2VNZW1vKCgpID0+ICh7IGhlaWdodCB9KSwgW2hlaWdodF0pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzTmFtZXMocm9vdENsYXNzTmFtZSwgKGNsYXNzTmFtZSB8fCAnJykgKyAnJyl9IGRpcj17ZGlyfT5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKCdyZWFjdC1maWxtX19tYWluJywgeyAncmVhY3QtZmlsbV9fbWFpbi0tc2Nyb2xsaW5nJzogc2Nyb2xsaW5nIH0pfVxuICAgICAgICBzdHlsZT17Y29udGVudFN0eWxlfVxuICAgICAgPlxuICAgICAgICB7ISFudW1JdGVtcyAmJiBzY3JvbGxCYXJXaWR0aCAhPT0gJzEwMCUnICYmICEhc2hvd0ZsaXBwZXIgJiYgKFxuICAgICAgICAgIDxGbGlwcGVyIGJsdXJGb2N1c09uQ2xpY2s9e2ZsaXBwZXJCbHVyRm9jdXNPbkNsaWNrfSBtb2RlPVwibGVmdFwiPlxuICAgICAgICAgICAge2xlZnRGbGlwcGVyVGV4dH1cbiAgICAgICAgICA8L0ZsaXBwZXI+XG4gICAgICAgICl9XG4gICAgICAgIDxGaWxtc3RyaXA+e2NoaWxkcmVufTwvRmlsbXN0cmlwPlxuICAgICAgICB7ISFudW1JdGVtcyAmJiBzY3JvbGxCYXJXaWR0aCAhPT0gJzEwMCUnICYmICEhc2hvd0ZsaXBwZXIgJiYgKFxuICAgICAgICAgIDxGbGlwcGVyIGJsdXJGb2N1c09uQ2xpY2s9e2ZsaXBwZXJCbHVyRm9jdXNPbkNsaWNrfSBtb2RlPVwicmlnaHRcIj5cbiAgICAgICAgICAgIHtyaWdodEZsaXBwZXJUZXh0fVxuICAgICAgICAgIDwvRmxpcHBlcj5cbiAgICAgICAgKX1cbiAgICAgICAgeyEhbnVtSXRlbXMgJiYgc2Nyb2xsQmFyV2lkdGggIT09ICcxMDAlJyAmJiAhIXNob3dTY3JvbGxCYXIgJiYgPFNjcm9sbEJhciAvPn1cbiAgICAgIDwvZGl2PlxuICAgICAgeyEhbnVtSXRlbXMgJiYgc2Nyb2xsQmFyV2lkdGggIT09ICcxMDAlJyAmJiAhIXNob3dEb3RzICYmIDxEb3RzIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuLy8gVE9ETzogTW92ZSBmcm9tIHN0eWxlU2V0IHRvIHN0eWxlU2hlZXQuXG5cbkJhc2ljRmlsbS5kZWZhdWx0UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiB1bmRlZmluZWQsXG4gIGNsYXNzTmFtZTogdW5kZWZpbmVkXG59O1xuXG5CYXNpY0ZpbG0ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLmFueSxcbiAgY2xhc3NOYW1lOiBQcm9wVHlwZXMuc3RyaW5nXG59O1xuXG5leHBvcnQgZGVmYXVsdCBCYXNpY0ZpbG07XG4iXX0=