@mohamed-karawia/library 0.1.20 → 0.1.23

package/dist/stories/Spaces/ViewPhotoAlbums/ViewPhotoAlbums.js

@@ -0,0 +1,131 @@
+"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 _AddPhotoAlbum = _interopRequireDefault(require("../../Modals/AddPhotoAlbum/AddPhotoAlbum"));
+
+var _PhotoAlbumsConfigModal = _interopRequireDefault(require("../../Modals/PhotoAlbumsConfigModal/PhotoAlbumsConfigModal"));
+
+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 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 onAddAlbum = function onAddAlbum(album) {
+    props.onAddAlbum(album);
+    setShowModal(false);
+  };
+
+  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 || "Photo Albums",
+    data: albums,
+    type: "flat",
+    cardStyle: "card-style-6",
+    galleryControls: galleryControls,
+    iconClicked: onIconClicked,
+    cardControls: cardControls,
+    cardIconClicked: cardIconClicked
+  }, props)), /*#__PURE__*/_react.default.createElement(_AddPhotoAlbum.default, {
+    showModal: showModal,
+    onAddAlbum: onAddAlbum,
+    closeModal: closeModal
+  }), /*#__PURE__*/_react.default.createElement(_PhotoAlbumsConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    albums: albums,
+    community: community,
+    title: props.title
+  }));
+};
+
+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/ViewVideo/ViewVideo.js

@@ -0,0 +1,169 @@
+"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 _VideoPlayer = _interopRequireDefault(require("../../Widgets/VideoPlayer/VideoPlayer"));
+
+var _VideoConfigModal = _interopRequireDefault(require("../../Modals/VideoConfigModal/VideoConfigModal"));
+
+var _Comments = _interopRequireDefault(require("../../Reusable Components/Comments/Comments"));
+
+var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTextInput/RichTextInput"));
+
+var _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _bs = require("react-icons/bs");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize", "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 controls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+
+var VideoSpace = function VideoSpace(_ref) {
+  var videoSrc = _ref.videoSrc,
+      title = _ref.title,
+      discription = _ref.discription,
+      date = _ref.date,
+      users = _ref.users,
+      iconsColor = _ref.iconsColor,
+      backgroundColor = _ref.backgroundColor,
+      detailsPadding = _ref.detailsPadding,
+      titleFontSize = _ref.titleFontSize,
+      titleColor = _ref.titleColor,
+      dateFontSize = _ref.dateFontSize,
+      dateColor = _ref.dateColor,
+      discFontSize = _ref.discFontSize,
+      discColor = _ref.discColor,
+      comments = _ref.comments,
+      commentBackgroundColor = _ref.commentBackgroundColor,
+      commentTitleColor = _ref.commentTitleColor,
+      commentTitleFontSize = _ref.commentTitleFontSize,
+      community = _ref.community,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showConfigModal = _useState2[0],
+      setShowConfigModal = _useState2[1];
+
+  var iconClicked = function iconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title || 'Video Space',
+    controls: controls,
+    iconClicked: iconClicked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
+    iconsColor: iconsColor,
+    src: videoSrc
+  }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
+    detailsPadding: detailsPadding
+  }, /*#__PURE__*/_react.default.createElement(Top, null, /*#__PURE__*/_react.default.createElement(Title, {
+    titleFontSize: titleFontSize,
+    titleColor: titleColor
+  }, title), /*#__PURE__*/_react.default.createElement(Date, {
+    dateFontSize: dateFontSize,
+    dateColor: dateColor
+  }, date)), /*#__PURE__*/_react.default.createElement(Discription, {
+    discFontSize: discFontSize,
+    discColor: discColor
+  }, discription)), /*#__PURE__*/_react.default.createElement(_Comments.default, {
+    cardBackgroundColor: commentBackgroundColor,
+    comments: comments,
+    cardTitleColor: commentTitleColor,
+    cardTitleFontSize: commentTitleFontSize
+  }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
+    users: users
+  }), /*#__PURE__*/_react.default.createElement(_VideoConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    community: community,
+    videoSrc: videoSrc,
+    title: title,
+    discription: discription,
+    date: date,
+    users: users,
+    comments: comments
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+});
+
+var VideoDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n"])), function (_ref3) {
+  var detailsPadding = _ref3.detailsPadding;
+  return detailsPadding;
+});
+
+var Top = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n"])));
+
+var Title = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    color: ", ";\n    flex-grow: 1;\n    margin: 0;\n"])), function (_ref4) {
+  var titleFontSize = _ref4.titleFontSize;
+  return titleFontSize;
+}, function (_ref5) {
+  var titleColor = _ref5.titleColor;
+  return titleColor;
+});
+
+var Date = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    color: ", ";\n"])), function (_ref6) {
+  var dateFontSize = _ref6.dateFontSize;
+  return dateFontSize;
+}, function (_ref7) {
+  var dateColor = _ref7.dateColor;
+  return dateColor;
+});
+
+var Discription = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    color: ", ";\n"])), function (_ref8) {
+  var discFontSize = _ref8.discFontSize;
+  return discFontSize;
+}, function (_ref9) {
+  var discColor = _ref9.discColor;
+  return discColor;
+});
+
+VideoSpace.defaultProps = {};
+var _default = VideoSpace;
+exports.default = _default;

package/dist/stories/Spaces/ViewVideoAlbumList/ViewVideoAlbumList.js

@@ -0,0 +1,157 @@
+"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 _VideoAlbumConfigModal = _interopRequireDefault(require("../../Modals/VideoAlbumConfigModal/VideoAlbumConfigModal"));
+
+var _AddVideoModal = _interopRequireDefault(require("../../Modals/AddVideoModal/AddVideoModal"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _templateObject;
+
+var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "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 cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillPlayCircle, null),
+  action: 'play',
+  name: 'play video'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete video'
+}];
+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 ViewAlbum = function ViewAlbum(_ref) {
+  var album = _ref.album,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      cardTitleColor = _ref.cardTitleColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      descColor = _ref.descColor,
+      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 cardStyles = {
+    darkOnHover: true,
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleFontSize: cardTitleFontSize,
+    cardTitleColor: cardTitleColor,
+    descColor: descColor,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'center',
+      iconBackground: "transparent",
+      dropdownBackground: "#272727",
+      dropdownFontColor: "white",
+      dropdownItemHoverColor: "#414141",
+      iconBorderRadius: 100,
+      iconSize: 25,
+      iconsGap: 10,
+      iconColor: 'white'
+    }
+  };
+
+  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 onAddVideo = function onAddVideo(album) {
+    setShowModal(false);
+    props.onAddVideo(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 || "Video Album",
+    data: album,
+    type: "flat",
+    cardStyle: "card-style-6",
+    galleryControls: galleryControls,
+    iconClicked: onHeaderIconClicked,
+    cardControls: cardControls,
+    cardIconClicked: cardIconClicked,
+    customCardStyles: cardStyles
+  }, props)), /*#__PURE__*/_react.default.createElement(_AddVideoModal.default, {
+    showModal: showModal,
+    onAddVideo: onAddVideo,
+    closeModal: closeModal
+  }), /*#__PURE__*/_react.default.createElement(_VideoAlbumConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    album: album,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+ViewAlbum.defaultProps = {};
+var _default = ViewAlbum;
+exports.default = _default;

package/dist/stories/Spaces/ViewVideoAlbums/ViewVideoAlbums.js

@@ -0,0 +1,164 @@
+"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 _AddVideoAlbumModal = _interopRequireDefault(require("../../Modals/AddVideoAlbumModal/AddVideoAlbumModal"));
+
+var _VideoAlbumsConfigModal = _interopRequireDefault(require("../../Modals/VideoAlbumsConfigModal/VideoAlbumsConfigModal"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _templateObject;
+
+var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize", "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 AlbumsGallery = function AlbumsGallery(_ref) {
+  var videoAlbums = _ref.videoAlbums,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      cardTitleColor = _ref.cardTitleColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      countColor = _ref.countColor,
+      countFontSize = _ref.countFontSize,
+      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 cardStyles = {
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleColor: cardTitleColor,
+    cardTitleFontSize: cardTitleFontSize,
+    countColor: countColor,
+    countFontSize: countFontSize,
+    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 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 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: "Video Albums",
+    data: videoAlbums,
+    type: "flat",
+    cardStyle: "card-style-6",
+    columnsNumber: 3,
+    iconClicked: onIconClicked,
+    galleryColumnGap: 10,
+    galleryRowGap: 20,
+    galleryControls: galleryControls,
+    cardControls: cardControls,
+    cardClicked: function cardClicked() {
+      return null;
+    },
+    cardIconClicked: cardIconClicked,
+    customCardStyles: cardStyles
+  }, props)), /*#__PURE__*/_react.default.createElement(_AddVideoAlbumModal.default, {
+    showModal: showModal,
+    onAddAlbum: onAddAlbum,
+    closeModal: closeModal
+  }), /*#__PURE__*/_react.default.createElement(_VideoAlbumsConfigModal.default, {
+    videoAlbums: videoAlbums,
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    \n"])));
+
+AlbumsGallery.defaultProps = {};
+var _default = AlbumsGallery;
+exports.default = _default;

package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js

@@ -37,7 +37,7 @@ var _bs = require("react-icons/bs");
 
 var _templateObject;
 
-var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize"];
+var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize", "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); }
 
@@ -65,6 +65,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
       cardTitleFontSize = _ref.cardTitleFontSize,
       countColor = _ref.countColor,
       countFontSize = _ref.countFontSize,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -78,6 +79,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
       setShowConfigModal = _useState4[1];
 
   var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(AlbumsGallery, {
+    preview: true,
     videoAlbums: videoAlbums
   })),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -86,6 +88,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
 
   var formChanged = function formChanged(values) {
     setCenterContext( /*#__PURE__*/_react.default.createElement(AlbumsGallery, Object.assign({
+      preview: true,
       videoAlbums: videoAlbums
     }, values)));
   };
@@ -151,6 +154,11 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     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: "Video Albums",
     data: videoAlbums,
@@ -180,9 +188,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     cancelHandler: cancelHandler
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -199,6 +205,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };