@mohamed-karawia/library 0.1.21 → 0.1.24

package/dist/stories/Spaces/ViewFolders/ViewFolders.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _CreateFolderModal = _interopRequireDefault(require("../../Modals/CreateFolderModal/CreateFolderModal"));
+
+var _FoldersConfigModal = _interopRequireDefault(require("../../Modals/FoldersConfigModal/FoldersConfigModal"));
+
+var _templateObject;
+
+var _excluded = ["folders", "folderTitle", "columnsNumber", "columnGap", "rowGap", "cardClicked", "iconColor", "community"];
+
+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 galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Photo'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var Folders = function Folders(_ref) {
+  var folders = _ref.folders,
+      folderTitle = _ref.folderTitle,
+      columnsNumber = _ref.columnsNumber,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap,
+      cardClicked = _ref.cardClicked,
+      iconColor = _ref.iconColor,
+      community = _ref.community,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var closeModal = function closeModal() {
+    setShowModal(false);
+  };
+
+  var onAddFolder = function onAddFolder(folder) {
+    props.onAddFolder(folder);
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: props.title || "Your Folders",
+    data: folders,
+    type: "flat",
+    cardStyle: "card-style-10",
+    galleryControls: galleryControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked,
+    cardControls: cardControls,
+    rowsHeight: 140
+  }, props)), /*#__PURE__*/_react.default.createElement(_CreateFolderModal.default, {
+    showModal: showModal,
+    closeModal: closeModal,
+    onAddFolder: onAddFolder
+  }), /*#__PURE__*/_react.default.createElement(_FoldersConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    folders: folders,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: transparent;\n"])));
+
+Folders.defaultProps = {};
+var _default = Folders;
+exports.default = _default;

package/dist/stories/Spaces/ViewMusicAlbumList/ViewMusicAlbumList.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _AddSongModal = _interopRequireDefault(require("../../Modals/AddSongModal/AddSongModal"));
+
+var _MusicAlbumConfigModal = _interopRequireDefault(require("../../Modals/MusicAlbumConfigModal/MusicAlbumConfigModal"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _templateObject;
+
+var _excluded = ["album", "cardBackgroundColor", "songTitleColor", "community"];
+
+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 listControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineDelete, null),
+  action: 'delete',
+  name: 'Delete album'
+}];
+
+var ViewAlbum = function ViewAlbum(_ref) {
+  var album = _ref.album,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      songTitleColor = _ref.songTitleColor,
+      community = _ref.community,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
+  };
+
+  var onAddSong = function onAddSong(song) {
+    setShowModal(false);
+    props.onAddSong(song);
+  };
+
+  var closeModal = function closeModal() {
+    setShowModal(false);
+  };
+
+  var closeConfigModal = function closeConfigModal() {
+    localStorage.removeItem('formStyles');
+    setShowConfigModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "My Album",
+    data: album,
+    cardStyle: "card-style-7",
+    type: "flat",
+    cardClicked: function cardClicked(index) {
+      return props.cardClicked(index);
+    },
+    iconClicked: onIconClicked,
+    listControls: listControls,
+    cardControls: cardControls,
+    cardIconClicked: cardIconClicked
+  }, props)), /*#__PURE__*/_react.default.createElement(_AddSongModal.default, {
+    showModal: showModal,
+    closeModal: closeModal,
+    onAddSong: onAddSong,
+    cancelHandler: closeModal
+  }), /*#__PURE__*/_react.default.createElement(_MusicAlbumConfigModal.default, {
+    showConfigModal: showConfigModal,
+    closeModal: closeConfigModal,
+    album: album,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+ViewAlbum.defaultProps = {};
+var _default = ViewAlbum;
+exports.default = _default;

package/dist/stories/Spaces/ViewMusicAlbums/ViewMusicAlbums.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _CreateMusicAlbumModal = _interopRequireDefault(require("../../Modals/CreateMusicAlbumModal/CreateMusicAlbumModal"));
+
+var _MusicAlbumsConfigModal = _interopRequireDefault(require("../../Modals/MusicAlbumsConfigModal/MusicAlbumsConfigModal"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _templateObject;
+
+var _excluded = ["albums", "community"];
+
+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 cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: "delete",
+  name: "Delete album"
+}];
+var galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: "add",
+  name: "Add Album"
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: "config",
+  name: "Config"
+}];
+
+var ViewAlbums = function ViewAlbums(_ref) {
+  var albums = _ref.albums,
+      community = _ref.community,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var onHeaderIconClicked = function onHeaderIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case "add":
+          setShowModal(true);
+          break;
+
+        case "config":
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    setShowModal(false);
+    props.onAddAlbum(album);
+  };
+
+  var closeModal = function closeModal() {
+    setShowModal(false);
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem("formStyles");
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: props.title || "Music Albums",
+    data: albums,
+    type: "flat",
+    cardStyle: "card-style-6",
+    galleryControls: galleryControls,
+    iconClicked: onHeaderIconClicked,
+    cardControls: cardControls,
+    cardIconClicked: cardIconClicked
+  }, props)), /*#__PURE__*/_react.default.createElement(_CreateMusicAlbumModal.default, {
+    showModal: showModal,
+    onAddAlbum: onAddAlbum,
+    closeModal: closeModal,
+    saveBtnText: props.saveBtnText,
+    cancelBtnText: props.cancelBtnText
+  }), /*#__PURE__*/_react.default.createElement(_MusicAlbumsConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    albums: albums,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
+
+ViewAlbums.defaultProps = {};
+var _default = ViewAlbums;
+exports.default = _default;

package/dist/stories/Spaces/ViewNote/ViewNote.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _EditorComponent = _interopRequireDefault(require("../../Common Inputs/EditorComponent/EditorComponent"));
+
+var _excluded = ["data"];
+
+var ViewNote = function ViewNote(_ref) {
+  var data = _ref.data,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_EditorComponent.default, {
+    data: data
+  });
+};
+
+var _default = ViewNote;
+exports.default = _default;

package/dist/stories/Spaces/ViewPhotoAlbumList/ViewPhotoAlbumList.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _AddPhoto = _interopRequireDefault(require("../../Forms/AddPhoto/AddPhoto"));
+
+var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _AddPhotoModal = _interopRequireDefault(require("../../Modals/AddPhotoModal/AddPhotoModal"));
+
+var _ShowImgModal = _interopRequireDefault(require("../../Modals/ShowImgModal/ShowImgModal"));
+
+var _PhotoAlbumConfigModal = _interopRequireDefault(require("../../Modals/PhotoAlbumConfigModal/PhotoAlbumConfigModal"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _templateObject;
+
+var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "descColor", "community"];
+
+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 galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Photo'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var ViewAlbum = function ViewAlbum(_ref) {
+  var album = _ref.album,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      imgTitleColor = _ref.imgTitleColor,
+      descColor = _ref.descColor,
+      community = _ref.community,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cardStyles = {
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleColor: imgTitleColor,
+    descColor: descColor,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'absolute',
+      iconBackground: "transparent",
+      dropdownBackground: "white",
+      dropdownFontColor: "#FE1744",
+      dropdownItemHoverColor: "#FE1744",
+      iconBackgroundHover: "white",
+      iconBorderRadius: 100,
+      iconSize: 20,
+      iconsGap: 10,
+      maxIcons: 0,
+      iconColor: '#FE1744',
+      iconHoverColor: 'white',
+      dropdownFontSize: 10
+    }
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showImgModal = _useState6[0],
+      setShowImgModal = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      openedImgIndex = _useState8[0],
+      setOpenedImgIndex = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      openedImg = _useState10[0],
+      setOpenedImg = _useState10[1];
+
+  var handleUserKeyPress = (0, _react.useCallback)(function (event) {
+    var key = event.key;
+
+    if (key === 'ArrowRight') {
+      setOpenedImgIndex(function (prev) {
+        return prev <= album.length - 2 ? prev + 1 : 0;
+      });
+    } else if (key === 'ArrowLeft') {
+      setOpenedImgIndex(function (prev) {
+        return prev !== 0 ? prev - 1 : 0;
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    setOpenedImg(album[openedImgIndex]);
+    window.addEventListener("keydown", handleUserKeyPress);
+  }, [openedImgIndex, handleUserKeyPress]);
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
+  };
+
+  var onAddPhoto = function onAddPhoto(photo) {
+    setShowModal(false);
+    props.addPhoto(photo);
+  };
+
+  var closeModal = function closeModal() {
+    setShowModal(false);
+  };
+
+  var cardClicked = function cardClicked(index) {
+    setOpenedImgIndex(index);
+    setShowImgModal(true);
+  };
+
+  var prevPhoto = function prevPhoto() {
+    if (openedImgIndex !== 0) {
+      setOpenedImgIndex(openedImgIndex - 1);
+    }
+  };
+
+  var nextPhoto = function nextPhoto() {
+    if (openedImgIndex <= album.length - 2) {
+      setOpenedImgIndex(openedImgIndex + 1);
+    }
+  };
+
+  var closeImgModal = function closeImgModal() {
+    setShowImgModal(false);
+    setOpenedImgIndex(null);
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: props.title || "Photo Album",
+    data: album,
+    type: "flat",
+    cardStyle: "card-style-6",
+    galleryControls: galleryControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked,
+    cardControls: cardControls,
+    customCardStyles: cardStyles
+  }, props)), /*#__PURE__*/_react.default.createElement(_AddPhotoModal.default, {
+    showModal: showModal,
+    onAddPhoto: onAddPhoto,
+    closeModal: closeModal,
+    saveBtnText: props.saveBtnText,
+    cancelBtnText: props.cancelBtnText
+  }), /*#__PURE__*/_react.default.createElement(_ShowImgModal.default, {
+    showImgModal: showImgModal,
+    closeModal: closeImgModal,
+    prevPhoto: prevPhoto,
+    nextPhoto: nextPhoto,
+    openedImg: openedImg
+  }), /*#__PURE__*/_react.default.createElement(_PhotoAlbumConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    album: album,
+    community: community,
+    title: props.title
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+ViewAlbum.defaultProps = {
+  headerBackground: '#FE1744',
+  titleColor: 'white',
+  columnsNumber: 3,
+  columnGap: 10,
+  rowGap: 20,
+  cardBackgroundColor: 'white'
+};
+var _default = ViewAlbum;
+exports.default = _default;