@expressms/smartapp-ui 1.1.1 → 1.1.2

package/build/main//321/201omponents/ActionModal/ActionModal.d.ts

@@ -1,4 +1,4 @@
 import { IActionModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, placeholder, defaultValue, iconColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, placeholder, defaultValue, iconColor, buttonWidth, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionModal;

package/build/main//321/201omponents/ActionModal/ActionModal.js

@@ -20,8 +20,8 @@ import { getColor } from '../../helpers';
 import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var ActionModal = function (_a) {
-    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, placeholder = _a.placeholder, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, iconColor = _a.iconColor;
-    var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
+    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, placeholder = _a.placeholder, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, iconColor = _a.iconColor, _c = _a.buttonWidth, buttonWidth = _c === void 0 ? 100 : _c;
+    var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
     var ref = useRef();
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
@@ -37,6 +37,6 @@ var ActionModal = function (_a) {
     var onChange = function (value) {
         setValue(value);
     };
-    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-action-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-action-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: cancelButtonFunction, className: "smartapp-action-modal__content__cancel-cross" }, { children: _jsx(CancelIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, onChange: onChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { title: buttonName, typeButton: TButtonType.low, color: TButtonColor.blue, onClickFunction: function () { return confirmButtonFunction(value); } }) }))] })) })) })));
+    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-action-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-action-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: cancelButtonFunction, className: "smartapp-action-modal__content__cancel-cross" }, { children: _jsx(CancelIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, onChange: onChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { width: buttonWidth, title: buttonName, typeButton: TButtonType.standard, color: TButtonColor.blue, onClickFunction: function () { return confirmButtonFunction(value); } }) }))] })) })) })));
 };
 export default ActionModal;

package/build/main//321/201omponents/ActionModal/types.d.ts

@@ -1,3 +1,4 @@
+import { IntRange } from '../types';
 export interface IActionModalProps {
     isModalOpen: boolean;
     title: string;
@@ -7,4 +8,5 @@ export interface IActionModalProps {
     placeholder?: string;
     defaultValue?: string;
     iconColor?: string;
+    buttonWidth?: IntRange<1, 101>;
 }

package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.js

@@ -29,6 +29,6 @@ var ConfirmationModal = function (_a) {
             document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
         };
     }, [isModalOpen, cancelButtonFunction]);
-    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-confirmation-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: TButtonType.low, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.low, onClickFunction: confirmButtonFunction, color: TButtonColor.red })] }))] })) })) })));
+    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-confirmation-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: TButtonType.standard, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.standard, onClickFunction: confirmButtonFunction, color: TButtonColor.blue })] }))] })) })) })));
 };
 export default ConfirmationModal;

package/build/main//321/201omponents/Stories/Stories.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import classNames from 'classnames';
 import { isNull, sortBy } from 'lodash';
 import Stories from 'react-insta-stories';
@@ -98,7 +98,6 @@ var StoriesComponent = function (_a) {
             handleCloseGroupStories();
         }
     };
-    var onPrevious = function () { return activeStoryId === stories[0].id && handlePrevious(); };
     var onStoryStart = function (storyIndex) {
         var isVideoStory = stories[storyIndex].type === STORY_TYPE.video;
         isVideoStory && setActiveStoryId(stories[storyIndex].id);
@@ -114,12 +113,23 @@ var StoriesComponent = function (_a) {
             changeGroupStoriesToViewed(activeGroupStories);
         }
     };
+    var getCurrentStoryIndex = function () { return stories.findIndex(function (_a) {
+        var id = _a.id;
+        return id === activeStoryId;
+    }); };
+    var onPrevious = function () {
+        activeStoryId === stories[0].id ? handlePrevious() : onStoryStart(getCurrentStoryIndex() - 1);
+    };
+    var onNext = function () {
+        var currentStoryIndex = getCurrentStoryIndex();
+        currentStoryIndex !== stories.length - 1 && onStoryStart(currentStoryIndex + 1);
+    };
     var getImageContent = function (_a) {
         var id = _a.id, title = _a.title, body = _a.body, backgroundSource = _a.backgroundSource, button = _a.button, image = _a.image;
         return ({
             content: function () {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
-                useEffect(function () {
+                useLayoutEffect(function () {
                     setActiveStoryId(id);
                     var storyWrapper = document.querySelector('.smartapp-stories');
                     var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
@@ -151,6 +161,16 @@ var StoriesComponent = function (_a) {
         onSwipedLeft: function () { return handleNext(); },
         onSwipedRight: function () { return handlePrevious(); },
     });
+    var createBackgroundVideo = function (id, url) {
+        var video = document.createElement('video');
+        video.id = "background_video_".concat(id);
+        video.src = url;
+        video.muted = true;
+        video.playsInline = true;
+        video.autoplay = true;
+        video.classList.add('smartapp-stories-content__background-video');
+        return video;
+    };
     useEffect(function () {
         var sortedStories = sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || []);
         setActiveGroupStories(groupStories);
@@ -185,20 +205,14 @@ var StoriesComponent = function (_a) {
                 isWebPlatform(platform) && (popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background));
             }
             else {
+                var id = activeStory.id, url = activeStory.url;
                 var prevBackgroundVideos = document.querySelectorAll(".smartapp-stories-content__background-video");
                 !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
-                var video = document.createElement('video');
-                video.id = "background_video_".concat(activeStory.id);
-                video.src = activeStory.url;
-                video.playsInline = true;
-                video.autoplay = true;
-                video.muted = true;
-                video.classList.add('smartapp-stories-content__background-video');
                 if (isWebPlatform(platform)) {
                     popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.removeProperty('--background');
-                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(video);
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(createBackgroundVideo(id, url));
                 }
-                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(video.cloneNode(true));
+                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(createBackgroundVideo(id, url));
             }
         }
     }, [platform, activeStory]);
@@ -212,7 +226,7 @@ var StoriesComponent = function (_a) {
                     _b['smartapp-stories__video'] = (activeStory === null || activeStory === void 0 ? void 0 : activeStory.type) === STORY_TYPE.video,
                     _b['smartapp-stories__animate-right'] = isAnimateToRight,
                     _b['smartapp-stories__animate-left'] = isAnimateToLeft,
-                    _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
+                    _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onNext: onNext, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
                         'smartapp-stories__icon': true
                     },
                     _c["smartapp-stories__icon--".concat(platform)] = true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressms/smartapp-ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",