@expressms/smartapp-ui 1.1.3 → 1.1.4

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, buttonWidth, backgroundColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, platform, placeholder, defaultValue, isButtonDisabled, iconColor, buttonWidth, backgroundColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionModal;

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

@@ -16,17 +16,24 @@ import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.sv
 import Button from '../Button';
 import Input from '../Input';
 import { TButtonColor, TButtonType } from '../Button/types';
-import { getColor } from '../../helpers';
-import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
+import { getClassNames, getColor, isMobilePlatform } from '../../helpers';
+import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } 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, _c = _a.buttonWidth, buttonWidth = _c === void 0 ? 100 : _c, backgroundColor = _a.backgroundColor;
-    var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
-    var ref = useRef();
+    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, placeholder = _a.placeholder, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, isButtonDisabled = _a.isButtonDisabled, iconColor = _a.iconColor, _d = _a.buttonWidth, buttonWidth = _d === void 0 ? 100 : _d, backgroundColor = _a.backgroundColor;
+    var ref = useRef(null);
+    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
+    var onConfirmClick = function () {
+        confirmButtonFunction(value);
+        setValue('');
+    };
     var onCloseModal = function () {
         setValue('');
         cancelButtonFunction();
     };
+    useEffect(function () {
+        document.documentElement.style.setProperty('--action-modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
+    }, [backgroundColor]);
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
             if (isModalOpen && ref.current && !ref.current.contains(e.target)) {
@@ -37,10 +44,11 @@ var ActionModal = function (_a) {
         return function () {
             document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
         };
+        // eslint-disable-next-line
     }, [isModalOpen, cancelButtonFunction]);
     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: onCloseModal, 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); } }) }))] })) })) })));
+    return (_jsx(Popup, __assign({ className: getClassNames('action-modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-action-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-action-modal__content', '--', platform) }, { children: [_jsx("p", __assign({ className: getClassNames('smartapp-action-modal__content--title', '__', platform) }, { children: title })), _jsx("div", __assign({ onClick: onCloseModal, 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 }) })), isMobilePlatform(platform) && _jsx("div", { className: "smartapp-action-modal__content--delimiter" }), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { width: buttonWidth, isDisabled: isButtonDisabled, title: buttonName, typeButton: TButtonType.standard, color: TButtonColor.blue, onClickFunction: onConfirmClick }) }))] })) })) })));
 };
 export default ActionModal;

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

@@ -5,8 +5,10 @@ export interface IActionModalProps {
     buttonName: string;
     confirmButtonFunction: (str: string) => void;
     cancelButtonFunction: () => void;
+    platform?: 'web' | 'ios' | 'android';
     placeholder?: string;
     defaultValue?: string;
+    isButtonDisabled?: boolean;
     iconColor?: string;
     buttonWidth?: IntRange<1, 101>;
     backgroundColor?: string;

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

@@ -1,4 +1,4 @@
 import { IConfirmationModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare const ConfirmationModal: ({ title, text, cancelButtonName, confirmButtonName, cancelButtonFunction, confirmButtonFunction, isModalOpen, }: IConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConfirmationModal: ({ isModalOpen, title, text, cancelButtonName, confirmButtonName, cancelButtonFunction, confirmButtonFunction, platform, backgroundColor, }: IConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmationModal;

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

@@ -14,10 +14,15 @@ import { useEffect, useRef } from 'react';
 import Popup from 'reactjs-popup';
 import Button from '../Button';
 import { TButtonColor, TButtonType } from '../Button/types';
+import { DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } from '../../constants';
+import { getClassNames, getColor, isMobilePlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var ConfirmationModal = function (_a) {
-    var title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, cancelButtonFunction = _a.cancelButtonFunction, confirmButtonFunction = _a.confirmButtonFunction, isModalOpen = _a.isModalOpen;
-    var ref = useRef();
+    var isModalOpen = _a.isModalOpen, title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, cancelButtonFunction = _a.cancelButtonFunction, confirmButtonFunction = _a.confirmButtonFunction, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, backgroundColor = _a.backgroundColor;
+    var ref = useRef(null);
+    useEffect(function () {
+        document.documentElement.style.setProperty('--confirmation-modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
+    }, [backgroundColor]);
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
             if (isModalOpen && ref.current && !ref.current.contains(e.target)) {
@@ -29,6 +34,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.standard, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.standard, onClickFunction: confirmButtonFunction, color: TButtonColor.blue })] }))] })) })) })));
+    return (_jsx(Popup, __assign({ className: getClassNames('confirmation-modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-confirmation-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-confirmation-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), isMobilePlatform(platform) && _jsx("div", { className: "smartapp-confirmation-modal__content--delimiter" }), _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/ConfirmationModal/types.d.ts

@@ -1,9 +1,11 @@
 export interface IConfirmationModalProps {
-    title: string;
+    isModalOpen: boolean;
+    title?: string;
     text: string;
     cancelButtonName: string;
     confirmButtonName: string;
     cancelButtonFunction: () => void;
     confirmButtonFunction: (option?: any) => void;
-    isModalOpen: boolean;
+    platform?: 'web' | 'ios' | 'android';
+    backgroundColor?: string;
 }

package/package.json

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