@expressms/smartapp-ui 1.1.4 → 1.1.5

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.4",
+  "version": "1.1.5",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",