react-film/lib/esm/BasicFilm.js

React component for showing carousel just like a film strip

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import Dots from './Dots';
import Filmstrip from './Filmstrip';
import Flipper from './Flipper';
import ScrollBar from './ScrollBar';
import useDir from './hooks/useDir';
import useHeight from './hooks/useHeight';
import useNumItems from './hooks/useNumItems';
import useScrollBarWidth from './hooks/useScrollBarWidth';
import useScrolling from './hooks/useScrolling';
import useStyleOptions from './hooks/useStyleOptions';
import useStyleSetClassNames from './hooks/useStyleSetClassNames';

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

  var _useDir = useDir(),
      _useDir2 = _slicedToArray(_useDir, 1),
      dir = _useDir2[0];

  var _useHeight = useHeight(),
      _useHeight2 = _slicedToArray(_useHeight, 1),
      height = _useHeight2[0];

  var _useNumItems = useNumItems(),
      _useNumItems2 = _slicedToArray(_useNumItems, 1),
      numItems = _useNumItems2[0];

  var _useScrollBarWidth = useScrollBarWidth(),
      _useScrollBarWidth2 = _slicedToArray(_useScrollBarWidth, 1),
      scrollBarWidth = _useScrollBarWidth2[0];

  var _useScrolling = useScrolling(),
      _useScrolling2 = _slicedToArray(_useScrolling, 1),
      scrolling = _useScrolling2[0];

  var _useStyleSetClassName = useStyleSetClassNames(),
      _useStyleSetClassName2 = _slicedToArray(_useStyleSetClassName, 1),
      rootClassName = _useStyleSetClassName2[0].root;

  var _useStyleOptions = useStyleOptions(),
      _useStyleOptions2 = _slicedToArray(_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 = useMemo(function () {
    return {
      height: height
    };
  }, [height]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(rootClassName, (className || '') + ''),
    dir: dir
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('react-film__main', {
      'react-film__main--scrolling': scrolling
    }),
    style: contentStyle
  }, !!numItems && scrollBarWidth !== '100%' && !!showFlipper && /*#__PURE__*/React.createElement(Flipper, {
    blurFocusOnClick: flipperBlurFocusOnClick,
    mode: "left"
  }, leftFlipperText), /*#__PURE__*/React.createElement(Filmstrip, null, children), !!numItems && scrollBarWidth !== '100%' && !!showFlipper && /*#__PURE__*/React.createElement(Flipper, {
    blurFocusOnClick: flipperBlurFocusOnClick,
    mode: "right"
  }, rightFlipperText), !!numItems && scrollBarWidth !== '100%' && !!showScrollBar && /*#__PURE__*/React.createElement(ScrollBar, null)), !!numItems && scrollBarWidth !== '100%' && !!showDots && /*#__PURE__*/React.createElement(Dots, null));
}; // TODO: Move from styleSet to styleSheet.


BasicFilm.defaultProps = {
  children: undefined,
  className: undefined
};
BasicFilm.propTypes = {
  children: PropTypes.any,
  className: PropTypes.string
};
export default BasicFilm;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYXNpY0ZpbG0uanMiXSwibmFtZXMiOlsiY2xhc3NOYW1lcyIsIlByb3BUeXBlcyIsIlJlYWN0IiwidXNlTWVtbyIsIkRvdHMiLCJGaWxtc3RyaXAiLCJGbGlwcGVyIiwiU2Nyb2xsQmFyIiwidXNlRGlyIiwidXNlSGVpZ2h0IiwidXNlTnVtSXRlbXMiLCJ1c2VTY3JvbGxCYXJXaWR0aCIsInVzZVNjcm9sbGluZyIsInVzZVN0eWxlT3B0aW9ucyIsInVzZVN0eWxlU2V0Q2xhc3NOYW1lcyIsIkJhc2ljRmlsbSIsImNoaWxkcmVuIiwiY2xhc3NOYW1lIiwiZGlyIiwiaGVpZ2h0IiwibnVtSXRlbXMiLCJzY3JvbGxCYXJXaWR0aCIsInNjcm9sbGluZyIsInJvb3RDbGFzc05hbWUiLCJyb290IiwiZmxpcHBlckJsdXJGb2N1c09uQ2xpY2siLCJsZWZ0RmxpcHBlclRleHQiLCJyaWdodEZsaXBwZXJUZXh0Iiwic2hvd0RvdHMiLCJzaG93RmxpcHBlciIsInNob3dTY3JvbGxCYXIiLCJjb250ZW50U3R5bGUiLCJkZWZhdWx0UHJvcHMiLCJ1bmRlZmluZWQiLCJwcm9wVHlwZXMiLCJhbnkiLCJzdHJpbmciXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPQSxVQUFQLE1BQXVCLFlBQXZCO0FBQ0EsT0FBT0MsU0FBUCxNQUFzQixZQUF0QjtBQUNBLE9BQU9DLEtBQVAsSUFBZ0JDLE9BQWhCLFFBQStCLE9BQS9CO0FBRUEsT0FBT0MsSUFBUCxNQUFpQixRQUFqQjtBQUNBLE9BQU9DLFNBQVAsTUFBc0IsYUFBdEI7QUFDQSxPQUFPQyxPQUFQLE1BQW9CLFdBQXBCO0FBQ0EsT0FBT0MsU0FBUCxNQUFzQixhQUF0QjtBQUNBLE9BQU9DLE1BQVAsTUFBbUIsZ0JBQW5CO0FBQ0EsT0FBT0MsU0FBUCxNQUFzQixtQkFBdEI7QUFDQSxPQUFPQyxXQUFQLE1BQXdCLHFCQUF4QjtBQUNBLE9BQU9DLGlCQUFQLE1BQThCLDJCQUE5QjtBQUNBLE9BQU9DLFlBQVAsTUFB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QztBQUZELENBQXRCO0FBS0EsZUFBZXJCLFNBQWYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY2xhc3NOYW1lcyBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IERvdHMgZnJvbSAnLi9Eb3RzJztcbmltcG9ydCBGaWxtc3RyaXAgZnJvbSAnLi9GaWxtc3RyaXAnO1xuaW1wb3J0IEZsaXBwZXIgZnJvbSAnLi9GbGlwcGVyJztcbmltcG9ydCBTY3JvbGxCYXIgZnJvbSAnLi9TY3JvbGxCYXInO1xuaW1wb3J0IHVzZURpciBmcm9tICcuL2hvb2tzL3VzZURpcic7XG5pbXBvcnQgdXNlSGVpZ2h0IGZyb20gJy4vaG9va3MvdXNlSGVpZ2h0JztcbmltcG9ydCB1c2VOdW1JdGVtcyBmcm9tICcuL2hvb2tzL3VzZU51bUl0ZW1zJztcbmltcG9ydCB1c2VTY3JvbGxCYXJXaWR0aCBmcm9tICcuL2hvb2tzL3VzZVNjcm9sbEJhcldpZHRoJztcbmltcG9ydCB1c2VTY3JvbGxpbmcgZnJvbSAnLi9ob29rcy91c2VTY3JvbGxpbmcnO1xuaW1wb3J0IHVzZVN0eWxlT3B0aW9ucyBmcm9tICcuL2hvb2tzL3VzZVN0eWxlT3B0aW9ucyc7XG5pbXBvcnQgdXNlU3R5bGVTZXRDbGFzc05hbWVzIGZyb20gJy4vaG9va3MvdXNlU3R5bGVTZXRDbGFzc05hbWVzJztcblxuY29uc3QgQmFzaWNGaWxtID0gKHsgY2hpbGRyZW4sIGNsYXNzTmFtZSB9KSA9PiB7XG4gIGNvbnN0IFtkaXJdID0gdXNlRGlyKCk7XG4gIGNvbnN0IFtoZWlnaHRdID0gdXNlSGVpZ2h0KCk7XG4gIGNvbnN0IFtudW1JdGVtc10gPSB1c2VOdW1JdGVtcygpO1xuICBjb25zdCBbc2Nyb2xsQmFyV2lkdGhdID0gdXNlU2Nyb2xsQmFyV2lkdGgoKTtcbiAgY29uc3QgW3Njcm9sbGluZ10gPSB1c2VTY3JvbGxpbmcoKTtcbiAgY29uc3QgW3sgcm9vdDogcm9vdENsYXNzTmFtZSB9XSA9IHVzZVN0eWxlU2V0Q2xhc3NOYW1lcygpO1xuICBjb25zdCBbeyBmbGlwcGVyQmx1ckZvY3VzT25DbGljaywgbGVmdEZsaXBwZXJUZXh0LCByaWdodEZsaXBwZXJUZXh0LCBzaG93RG90cywgc2hvd0ZsaXBwZXIsIHNob3dTY3JvbGxCYXIgfV0gPVxuICAgIHVzZVN0eWxlT3B0aW9ucygpO1xuXG4gIGNvbnN0IGNvbnRlbnRTdHlsZSA9IHVzZU1lbW8oKCkgPT4gKHsgaGVpZ2h0IH0pLCBbaGVpZ2h0XSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3NOYW1lcyhyb290Q2xhc3NOYW1lLCAoY2xhc3NOYW1lIHx8ICcnKSArICcnKX0gZGlyPXtkaXJ9PlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoJ3JlYWN0LWZpbG1fX21haW4nLCB7ICdyZWFjdC1maWxtX19tYWluLS1zY3JvbGxpbmcnOiBzY3JvbGxpbmcgfSl9XG4gICAgICAgIHN0eWxlPXtjb250ZW50U3R5bGV9XG4gICAgICA+XG4gICAgICAgIHshIW51bUl0ZW1zICYmIHNjcm9sbEJhcldpZHRoICE9PSAnMTAwJScgJiYgISFzaG93RmxpcHBlciAmJiAoXG4gICAgICAgICAgPEZsaXBwZXIgYmx1ckZvY3VzT25DbGljaz17ZmxpcHBlckJsdXJGb2N1c09uQ2xpY2t9IG1vZGU9XCJsZWZ0XCI+XG4gICAgICAgICAgICB7bGVmdEZsaXBwZXJUZXh0fVxuICAgICAgICAgIDwvRmxpcHBlcj5cbiAgICAgICAgKX1cbiAgICAgICAgPEZpbG1zdHJpcD57Y2hpbGRyZW59PC9GaWxtc3RyaXA+XG4gICAgICAgIHshIW51bUl0ZW1zICYmIHNjcm9sbEJhcldpZHRoICE9PSAnMTAwJScgJiYgISFzaG93RmxpcHBlciAmJiAoXG4gICAgICAgICAgPEZsaXBwZXIgYmx1ckZvY3VzT25DbGljaz17ZmxpcHBlckJsdXJGb2N1c09uQ2xpY2t9IG1vZGU9XCJyaWdodFwiPlxuICAgICAgICAgICAge3JpZ2h0RmxpcHBlclRleHR9XG4gICAgICAgICAgPC9GbGlwcGVyPlxuICAgICAgICApfVxuICAgICAgICB7ISFudW1JdGVtcyAmJiBzY3JvbGxCYXJXaWR0aCAhPT0gJzEwMCUnICYmICEhc2hvd1Njcm9sbEJhciAmJiA8U2Nyb2xsQmFyIC8+fVxuICAgICAgPC9kaXY+XG4gICAgICB7ISFudW1JdGVtcyAmJiBzY3JvbGxCYXJXaWR0aCAhPT0gJzEwMCUnICYmICEhc2hvd0RvdHMgJiYgPERvdHMgLz59XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG4vLyBUT0RPOiBNb3ZlIGZyb20gc3R5bGVTZXQgdG8gc3R5bGVTaGVldC5cblxuQmFzaWNGaWxtLmRlZmF1bHRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IHVuZGVmaW5lZCxcbiAgY2xhc3NOYW1lOiB1bmRlZmluZWRcbn07XG5cbkJhc2ljRmlsbS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMuYW55LFxuICBjbGFzc05hbWU6IFByb3BUeXBlcy5zdHJpbmdcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2ljRmlsbTtcbiJdfQ==