@expressms/smartapp-ui 1.1.3 → 1.1.5

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/build/main//321/201omponents/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import { IInputProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Input: ({ onChange, title, placeholder, defaultValue, error, width, className, autoFocus, isPassword, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ isPassword, isClearable, autoFocus, title, placeholder, defaultValue, error, textSize, width, className, onChange, onEnterPress, onClearClick, }: IInputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

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

@@ -14,13 +14,14 @@ import { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { ReactComponent as IconEye } from '../../assets/icons/icon-eye.svg';
 import { ReactComponent as IconEyeClosed } from '../../assets/icons/icon-eye-off.svg';
-import { INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT } from '../../constants';
+import { ReactComponent as ClearIcon } from '../../assets/icons/clear.svg';
+import { ENTER_KEY, FONT_SIZE, INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT, LINE_HEIGHT } from '../../constants';
 import '../../styles/stories.module.scss';
 var Input = function (_a) {
     var _b;
-    var onChange = _a.onChange, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, _f = _a.isPassword, isPassword = _f === void 0 ? false : _f;
-    var _g = useState(false), isPasswordShown = _g[0], setPasswordShown = _g[1];
+    var _c = _a.isPassword, isPassword = _c === void 0 ? false : _c, _d = _a.isClearable, isClearable = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, title = _a.title, placeholder = _a.placeholder, defaultValue = _a.defaultValue, error = _a.error, _f = _a.textSize, textSize = _f === void 0 ? 'small' : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, _h = _a.className, className = _h === void 0 ? '' : _h, onChange = _a.onChange, onEnterPress = _a.onEnterPress, onClearClick = _a.onClearClick;
     var inputRef = useRef(null);
+    var _j = useState(false), isPasswordShown = _j[0], setIsPasswordShown = _j[1];
     useEffect(function () {
         var inputElement = inputRef.current;
         if (inputElement && inputElement.value.length) {
@@ -30,17 +31,27 @@ var Input = function (_a) {
             inputElement.focus();
         }
     }, [isPasswordShown]);
+    var getTextStyles = function () { return ({
+        fontSize: FONT_SIZE[textSize],
+        lineHeight: LINE_HEIGHT[textSize],
+    }); };
     var getInputType = function () {
         if (isPassword) {
             return isPasswordShown ? INPUT_TYPE_TEXT : INPUT_TYPE_PASSWORD;
         }
         return INPUT_TYPE_TEXT;
     };
+    var handleKeyDown = function (_a) {
+        var key = _a.key;
+        if (key === ENTER_KEY && onEnterPress) {
+            onEnterPress();
+        }
+    };
     var onClickButton = function () {
         var _a, _b;
-        setPasswordShown(!isPasswordShown);
+        setIsPasswordShown(!isPasswordShown);
         !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
     };
-    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: classNames((_b = { 'smartapp-input': true }, _b[className] = className, _b)) }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsxs("div", __assign({ className: "smartapp-input__container" }, { children: [_jsx("input", { ref: inputRef, className: "smartapp-input__container--field", type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, onChange: function (e) { return onChange(e.target.value); } }), isPassword && (_jsx("button", __assign({ className: "smartapp-input__container--eye-button", type: "button", onClick: function () { return onClickButton(); } }, { children: isPasswordShown ? _jsx(IconEye, {}) : _jsx(IconEyeClosed, {}) })))] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
+    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: classNames((_b = { 'smartapp-input': true }, _b[className] = className, _b)) }, { children: [title && _jsx("p", __assign({ className: "smartapp-input__title" }, { children: title })), _jsxs("div", __assign({ className: "smartapp-input__container" }, { children: [_jsx("input", { ref: inputRef, className: classNames('smartapp-input__container--field', { 'smartapp-input__container--field__with-clear-button': isClearable }), style: getTextStyles(), type: getInputType(), defaultValue: defaultValue, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: handleKeyDown, onChange: function (e) { return onChange(e.target.value); } }), isPassword && (_jsx("button", __assign({ className: "smartapp-input__container--eye-button", type: "button", onClick: function () { return onClickButton(); } }, { children: isPasswordShown ? _jsx(IconEye, {}) : _jsx(IconEyeClosed, {}) }))), isClearable && _jsx(ClearIcon, { className: "smartapp-input__container--clear-icon", onClick: onClearClick })] })), error && _jsx("div", __assign({ className: "smartapp-input__error" }, { children: error }))] })));
 };
 export default Input;

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

@@ -1,12 +1,16 @@
 import { IntRange } from '../types';
 export interface IInputProps {
-    onChange: (str: string) => void;
+    isPassword?: boolean;
+    isClearable?: boolean;
     autoFocus?: boolean;
     title?: string;
     placeholder?: string;
     defaultValue?: string;
     error?: string;
+    textSize?: 'small' | 'default' | 'large';
     width?: IntRange<1, 101>;
     className?: string;
-    isPassword?: boolean;
+    onChange: (str: string) => void;
+    onEnterPress?: () => void;
+    onClearClick?: () => void;
 }

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

@@ -0,0 +1,4 @@
+import { IModalProps } from './types';
+import '../../styles/stories.module.scss';
+declare const Modal: ({ isModalOpen, content, handleCloseModal, title, platform, iconColor, backgroundColor }: IModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

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

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import Popup from 'reactjs-popup';
+import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
+import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_POPUP_BACKGROUND_COLOR, PLATFORM } from '../../constants';
+import { getClassNames, getColor } from '../../helpers';
+import '../../styles/stories.module.scss';
+var Modal = function (_a) {
+    var isModalOpen = _a.isModalOpen, content = _a.content, handleCloseModal = _a.handleCloseModal, title = _a.title, _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
+    var ref = useRef(null);
+    useEffect(function () {
+        document.documentElement.style.setProperty('--modal-background', getColor(backgroundColor, DEFAULT_POPUP_BACKGROUND_COLOR));
+    }, [backgroundColor]);
+    useEffect(function () {
+        var checkIfClickedOutside = function (e) {
+            if (isModalOpen && ref.current && !ref.current.contains(e.target)) {
+                handleCloseModal();
+            }
+        };
+        document === null || document === void 0 ? void 0 : document.addEventListener('click', checkIfClickedOutside, true);
+        return function () {
+            document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
+        };
+    }, [isModalOpen, handleCloseModal]);
+    return (_jsx(Popup, __assign({ className: getClassNames('modal', '-', platform), closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames('smartapp-modal', '__', platform) }, { children: _jsxs("div", __assign({ className: getClassNames('smartapp-modal__content', '--', platform) }, { children: [title && _jsx("p", __assign({ className: "smartapp-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), content] })) })) })));
+};
+export default Modal;

package/build/main//321/201omponents/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

package/build/main//321/201omponents/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal';

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

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export interface IModalProps {
+    isModalOpen: boolean;
+    content: ReactElement;
+    handleCloseModal: () => void;
+    title?: string;
+    platform?: 'web' | 'ios' | 'android';
+    iconColor?: string;
+    backgroundColor?: string;
+}

package/build/main//321/201omponents/Modal/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -19,3 +19,4 @@ export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
 export { default as Stories } from './Stories';
 export { default as SyncLoader } from './SyncLoader';
+export { default as Modal } from './Modal';

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

@@ -19,3 +19,4 @@ export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
 export { default as Stories } from './Stories';
 export { default as SyncLoader } from './SyncLoader';
+export { default as Modal } from './Modal';

package/package.json

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