react-native-preview-story/lib/commonjs/components/Header.js

React Native Story Component Which takes Stories array and show exact story view like infamous instagram

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = _interopRequireDefault(require("react"));
var _Styled = _interopRequireDefault(require("../Styled.js"));
var _play = _interopRequireDefault(require("../assets/play.png"));
var _pause = _interopRequireDefault(require("../assets/pause.png"));
var _whiteCross = _interopRequireDefault(require("../assets/white-cross.png"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Header = ({
  storyName,
  stories,
  currentStoryIndex,
  pausePlay,
  isPaused,
  onComplete,
  getProgressBarWidth,
  playPause,
  close,
  storyNameText = {},
  headerStyle
}) => {
  const headerViewContainer = _react.default.useMemo(() => {
    const style = {
      justifyContent: storyName ? 'space-between' : 'flex-end'
    };
    return [_Styled.default.headerViewContainer, style];
  }, [storyName]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: _Styled.default.headerContainer,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: headerViewContainer,
      children: [storyName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [_Styled.default.storyNameText, storyNameText],
        children: storyName
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: _Styled.default.buttonContainer,
        children: [playPause && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          onPress: () => pausePlay(),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
            source: isPaused ? _play.default : _pause.default,
            style: _Styled.default.icon
          })
        }), close && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          onPress: onComplete,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
            source: _whiteCross.default,
            style: _Styled.default.icon
          })
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [_Styled.default.progressBarContainer, {
        backgroundColor: headerStyle?.containerBackground || 'transparent',
        height: headerStyle?.conatinerHeight || '100%'
      }],
      children: stories.map((story, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_Styled.default.progressBarBackground, {
          backgroundColor: headerStyle?.progressBarBackground || 'rgba(255,255,255,0.5)',
          height: headerStyle?.progressBarHeight || 3,
          borderRadius: headerStyle?.cornerRadius || 10
        }],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
          style: [_Styled.default.progressBar, {
            width: getProgressBarWidth(index, currentStoryIndex),
            height: headerStyle?.progressBarHeight || 3,
            backgroundColor: headerStyle?.progressColor || 'red',
            borderRadius: headerStyle?.cornerRadius || 10
          }]
        })
      }, story.id))
    })]
  });
};
var _default = exports.default = Header;
//# sourceMappingURL=Header.js.map