eyzy - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/eyzy.js

 
 /*!
- * Eyzy v0.0.16
+ * Eyzy v0.0.17
  * (c) 2022 amsik
@@ -14,3 +14,3 @@ * Released under the MIT License.
 
-    React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+    var React__default = 'default' in React ? React['default'] : React;
 
@@ -102,12 +102,12 @@ /*! *****************************************************************************
 
-    var Button = React.memo(function Button(props) {
+    var Button = React__default.memo(function Button(props) {
         var appearance = props.appearance, className = props.className, children = props.children, intent = props.intent, active = props.active, shape = props.shape, type = props.type, size = props.size, fit = props.fit, rest = __rest(props, ["appearance", "className", "children", "intent", "active", "shape", "type", "size", "fit"]);
         var classNames = cn('eyzy-btn', appearance && "eyzy-btn-" + appearance, intent && "eyzy-btn-" + intent, active && "eyzy-btn-active", shape && "eyzy-btn-" + shape, size && "eyzy-btn-" + size, fit && 'eyzy-btn-fit', className);
-        return (React.createElement("button", __assign({ className: classNames }, rest), children));
+        return (React__default.createElement("button", __assign({ className: classNames }, rest), children));
     });
 
-    var Group = React.memo(function ButtonGroup(props) {
+    var Group = React__default.memo(function ButtonGroup(props) {
         var className = props.className, children = props.children, size = props.size, fit = props.fit, rest = __rest(props, ["className", "children", "size", "fit"]);
         var classNames = cn('eyzy-btn-group', size && "eyzy-btn-" + size, fit && "eyzy-btn-group-fit", className);
-        return (React.createElement("div", __assign({ className: classNames }, rest), children));
+        return (React__default.createElement("div", __assign({ className: classNames }, rest), children));
     });
@@ -117,2 +117,69 @@
 
+    var uid = function () { return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, ''); };
+
+    var Field = function (_a) {
+        var label = _a.label, helpText = _a.helpText, children = _a.children, fit = _a.fit, required = _a.required;
+        var id = React.useMemo(function () { return "e-" + uid(); }, []);
+        var classNames = cn('e-field', {
+            fit: fit
+        });
+        // @ts-ignore
+        var child = React__default.cloneElement(children, {
+            id: id
+        });
+        if (label || helpText) {
+            return (React__default.createElement("div", { className: classNames },
+                label && (React__default.createElement("label", { className: 'e-label', htmlFor: id },
+                    label,
+                    required && React__default.createElement("span", { className: 'e-asterisk' }, "*"))),
+                helpText && (React__default.createElement("div", { className: 'e-help' }, helpText)),
+                React__default.createElement("div", { className: 'e-ctrl' }, child)));
+        }
+        return (React__default.createElement("div", { className: classNames }, child));
+    };
+
+    var wasKeyPressed;
+    document.addEventListener('DOMContentLoaded', function () {
+        window.addEventListener('keydown', function () {
+            wasKeyPressed = true;
+        });
+        window.addEventListener('keyup', function () {
+            wasKeyPressed = false;
+        });
+    });
+    var useFocusRing = function (id, autoFocus) {
+        var _a = React.useState(!!autoFocus), isFocused = _a[0], setFocused = _a[1];
+        var blurHandler = function () {
+            setFocused(false);
+        };
+        var focusHandler = function () {
+            if (wasKeyPressed) {
+                setFocused(true);
+            }
+        };
+        React.useEffect(function () {
+            var domEl = document.getElementById(id);
+            domEl === null || domEl === void 0 ? void 0 : domEl.addEventListener('focus', focusHandler);
+            domEl === null || domEl === void 0 ? void 0 : domEl.addEventListener('blur', blurHandler);
+            return function () {
+                domEl === null || domEl === void 0 ? void 0 : domEl.removeEventListener('focus', focusHandler);
+                domEl === null || domEl === void 0 ? void 0 : domEl.removeEventListener('blur', blurHandler);
+            };
+        }, []);
+        return isFocused;
+    };
+
+    function FocusRing(props) {
+        var children = props.children, rest = __rest(props, ["children"]);
+        var child = React__default.Children.only(children);
+        var isFocused = useFocusRing(rest.id, child.props.autoFocus);
+        var childProps = __assign(__assign(__assign({}, rest), child.props), { className: cn(child.props.className, {
+                'e-ring': isFocused
+            }) });
+        return React__default.cloneElement(child, childProps);
+    }
+
+    var isEsc = function (e) { return /escape/i.test(e.key); };
+    var isEnter = function (e) { return /enter/i.test(e.key); };
+
     function parseWidth(width) {
@@ -125,37 +192,124 @@ var parsed = parseInt(width, 10);
     }
-    var Input = /** @class */ (function (_super) {
-        __extends(Input, _super);
-        function Input() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.handleKeyDown = function (e) {
-                var _a = _this.props, onPressEnter = _a.onPressEnter, onPressEsc = _a.onPressEsc, onKeyDown = _a.onKeyDown;
-                if (onPressEnter && 13 === e.keyCode) {
-                    onPressEnter(e);
+
+    function BaseInput(props, ref) {
+        var className = props.className, width = props.width, required = props.required, fit = props.fit, type = props.type, style = props.style, helpText = props.helpText, label = props.label, onPressEnter = props.onPressEnter, onPressEsc = props.onPressEsc, onKeyDown = props.onKeyDown, onChange = props.onChange, rest = __rest(props, ["className", "width", "required", "fit", "type", "style", "helpText", "label", "onPressEnter", "onPressEsc", "onKeyDown", "onChange"]);
+        var _a = React.useState(props.value || props.defaultValue || ''), value = _a[0], setValue = _a[1];
+        var handleChange = function (e) {
+            var val = e.target.value;
+            if (onChange) {
+                onChange(val, e);
+            }
+            else {
+                setValue(val);
+            }
+        };
+        React.useEffect(function () {
+            if (onChange) { // controlled
+                setValue(props.value || '');
+            }
+        }, [props.value]);
+        var handleKeyDown = function (e) {
+            if (onPressEnter && isEnter(e)) {
+                onPressEnter(e);
+            }
+            if (onPressEsc && isEsc(e)) {
+                onPressEsc(e);
+            }
+            if (onKeyDown) {
+                onKeyDown(e);
+            }
+        };
+        var classNames = cn(type === 'textarea' ? 'e-textarea' : 'e-input', className);
+        var parsedWidth = parseWidth(width);
+        var elemStyle = style || {};
+        if (parsedWidth) {
+            elemStyle.width = parsedWidth;
+        }
+        var ElementType = type === 'textarea' ? 'textarea' : 'input';
+        return (React__default.createElement(Field, { label: label, helpText: helpText, fit: fit, required: required },
+            React__default.createElement(FocusRing, null,
+                React__default.createElement(ElementType, __assign({}, rest, { ref: ref, value: value, type: type || 'text', className: classNames, style: elemStyle, onChange: handleChange, onKeyDown: handleKeyDown })))));
+    }
+    var BaseInput$1 = React.forwardRef(BaseInput);
+
+    var Input = React__default.memo(function Input(props) {
+        return (React__default.createElement(BaseInput$1, __assign({}, props)));
+    });
+
+    var TextArea = React__default.memo(function TextArea(props) {
+        var textAreaRef = React.useRef();
+        var autoHeight = props.autoHeight, className = props.className, rest = __rest(props, ["autoHeight", "className"]);
+        var classNames = cn('e-textarea', {
+            'auto-height': autoHeight
+        }, className);
+        var handleInput = function () {
+            var _a;
+            if (textAreaRef.current) {
+                textAreaRef.current.style.height = 'auto';
+                textAreaRef.current.style.height = ((_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 5 + "px";
+            }
+        };
+        React.useEffect(function () {
+            if (textAreaRef.current && autoHeight) {
+                textAreaRef.current.addEventListener('input', handleInput, false);
+                handleInput();
+            }
+            return function () {
+                textAreaRef.current && textAreaRef.current.removeEventListener('input', handleInput, false);
+            };
+        }, [autoHeight]);
+        return (React__default.createElement(BaseInput$1, __assign({}, rest, { className: classNames, ref: textAreaRef, type: "textarea" })));
+    });
+
+    var isMob = function () { return document.body.clientWidth <= 768; };
+
+    var INT_RE = /\-?\d+/;
+    var FLOAT_RE = /^\-?\d*\.?\d*$/;
+    var precessValue = function (v, isInt) {
+        var val = v
+            .replace(/,/g, '.')
+            .replace(/\-+/g, '-');
+        if (val === '-') {
+            return val;
+        }
+        if (val) {
+            if (isInt) {
+                if (!INT_RE.test(val)) {
+                    return null;
                 }
-                if (onPressEsc && 27 === e.keyCode) {
-                    onPressEsc(e);
+            }
+            else {
+                if (!FLOAT_RE.test(val)) {
+                    return null;
                 }
-                if (onKeyDown) {
-                    onKeyDown(e);
-                }
-            };
-            return _this;
+            }
         }
-        Input.prototype.render = function () {
-            var _a = this.props, className = _a.className, intent = _a.intent, shape = _a.shape, width = _a.width, size = _a.size, type = _a.type, fit = _a.fit, style = _a.style, onPressEnter = _a.onPressEnter, onPressEsc = _a.onPressEsc, rest = __rest(_a, ["className", "intent", "shape", "width", "size", "type", "fit", "style", "onPressEnter", "onPressEsc"]);
-            var classNames = cn('eyzy-input', intent && "eyzy-input-" + intent, shape && "eyzy-input-" + shape, size && "eyzy-input-" + size, fit && 'eyzy-input-fit', className);
-            var parsedWidth = parseWidth(width);
-            var elemStyle = style || {};
-            if (parsedWidth) {
-                elemStyle.width = parsedWidth;
+        else {
+            return '';
+        }
+        return isFinite(val)
+            ? val
+            : isFinite(v) ? v : '';
+    };
+    var NumberInput = React__default.memo(function NumberInput(props) {
+        var _a = React.useState(precessValue(props.value || props.defaultValue || '')), value = _a[0], setValue = _a[1];
+        var handleChange = function (value, e) {
+            var val = precessValue(value, props.isInt);
+            if (val === null) {
+                return;
             }
-            return (React.createElement("input", __assign({}, rest, { className: classNames, type: type || "text", style: elemStyle, onKeyDown: this.handleKeyDown })));
+            if (props.onChange) {
+                props.onChange(value, e);
+            }
+            setValue(val);
         };
-        return Input;
-    }(React.Component));
+        // всетаки сделать onchange(value: string | Number, ORIGINAL_EVENT as 2th argument)
+        // тут useEffect ([defaultValue and value])
+        return (React__default.createElement(BaseInput$1, __assign({}, props, { type: isMob() ? 'number' : 'text', value: value, onChange: handleChange })));
+    });
 
-    var Group$1 = React.memo(function InputButton(props) {
+    var Group$1 = React__default.memo(function InputButton(props) {
         var className = props.className, children = props.children, size = props.size, fit = props.fit, rest = __rest(props, ["className", "children", "size", "fit"]);
         var classNames = cn('eyzy-input-group', size && "eyzy-input-" + size, fit && "eyzy-input-group-fit", className);
-        return (React.createElement("div", __assign({ className: classNames }, rest), children));
+        return (React__default.createElement("div", __assign({ className: classNames }, rest), children));
     });
@@ -166,5 +320,5 @@
     var Tab = function (props) {
-        return (React.createElement("div", { className: "eyzy-tabs-content__item" }, props.children || props.tab));
+        return (React__default.createElement("div", { className: "eyzy-tabs-content__item" }, props.children || props.tab));
     };
-    var Tab$1 = React.memo(Tab);
+    var Tab$1 = React__default.memo(Tab);
 
@@ -198,5 +352,5 @@ function debounce(func, wait, immediate) {
         });
-        return (React.createElement("button", { className: btnClassName, onMouseDown: props.onMouseDown },
-            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
-                React.createElement("path", { d: "M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.218 19l-1.782-1.75 5.25-5.25-5.25-5.25 1.782-1.75 6.968 7-6.968 7z" }))));
+        return (React__default.createElement("button", { className: btnClassName, onMouseDown: props.onMouseDown },
+            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
+                React__default.createElement("path", { d: "M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.218 19l-1.782-1.75 5.25-5.25-5.25-5.25 1.782-1.75 6.968 7-6.968 7z" }))));
     };
@@ -207,5 +361,5 @@ var Tabs = /** @class */ (function (_super) {
             var _this = _super.call(this, props) || this;
-            _this.header = React.createRef();
-            _this.wrap = React.createRef();
-            _this.scrollWrap = React.createRef();
+            _this.header = React__default.createRef();
+            _this.wrap = React__default.createRef();
+            _this.scrollWrap = React__default.createRef();
             _this.tryHeaderScroll = function () {
@@ -258,3 +412,3 @@ try {
                 var childNodes = [];
-                React.Children.forEach(children, function (item) {
+                React__default.Children.forEach(children, function (item) {
                     childNodes.push(item);
@@ -343,3 +497,3 @@ });
                 }, child.props.headerClassName);
-                headers.push(React.createElement("div", { className: className, onClick: function () { return _this.handleChange(key); }, key: key }, child.props.label));
+                headers.push(React__default.createElement("div", { className: className, onClick: function () { return _this.handleChange(key); }, key: key }, child.props.label));
             });
@@ -352,13 +506,13 @@ return headers;
             var _b = this.state, isArrowVisible = _b.isArrowVisible, isArrowLeftDisabled = _b.isArrowLeftDisabled, isArrowRightDisabled = _b.isArrowRightDisabled;
-            return (React.createElement("div", { className: containerCn },
-                React.createElement("div", { className: "eyzy-tabs-header", ref: this.header },
-                    isArrowVisible && (React.createElement(Arrow, { l: true, disabled: isArrowLeftDisabled, onMouseDown: this.headerScrollerLeft })),
-                    React.createElement("div", { className: "eyzy-tabs-wrap", ref: this.wrap, onScroll: this.handleHeaderScroll },
-                        React.createElement("div", { className: "eyzy-tabs-scroll", ref: this.scrollWrap }, this.renderHeader())),
-                    isArrowVisible && (React.createElement(Arrow, { disabled: isArrowRightDisabled, onMouseDown: this.headerScrollerRight }))),
-                !noContent && (React.createElement("div", { className: "eyzy-tabs-content" }, this.getActiveContent()))));
+            return (React__default.createElement("div", { className: containerCn },
+                React__default.createElement("div", { className: "eyzy-tabs-header", ref: this.header },
+                    isArrowVisible && (React__default.createElement(Arrow, { l: true, disabled: isArrowLeftDisabled, onMouseDown: this.headerScrollerLeft })),
+                    React__default.createElement("div", { className: "eyzy-tabs-wrap", ref: this.wrap, onScroll: this.handleHeaderScroll },
+                        React__default.createElement("div", { className: "eyzy-tabs-scroll", ref: this.scrollWrap }, this.renderHeader())),
+                    isArrowVisible && (React__default.createElement(Arrow, { disabled: isArrowRightDisabled, onMouseDown: this.headerScrollerRight }))),
+                !noContent && (React__default.createElement("div", { className: "eyzy-tabs-content" }, this.getActiveContent()))));
         };
         Tabs.Tab = Tab$1;
         return Tabs;
-    }(React.PureComponent));
+    }(React__default.PureComponent));
 
@@ -370,10 +524,10 @@ Tabs.Tab = Tab$1;
     };
-    var Tag = React.memo(function Tag(props) {
+    var Tag = React__default.memo(function Tag(props) {
         var color = props.color, rounded = props.rounded, onRemove = props.onRemove, children = props.children, style = props.style, rest = __rest(props, ["color", "rounded", "onRemove", "children", "style"]);
         var className = cn('eyzy-tag', rounded ? 'eyzy-tag--rounded' : null);
-        return (React.createElement("span", __assign({ className: className }, rest, { style: getStyle(color, style) }),
+        return (React__default.createElement("span", __assign({ className: className }, rest, { style: getStyle(color, style) }),
             children,
-            onRemove && (React.createElement("button", { className: "eyzy-tag__remove-btn", onClick: onRemove },
-                React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
-                    React.createElement("path", { d: "M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z", fillRule: "evenodd" }))))));
+            onRemove && (React__default.createElement("button", { className: "eyzy-tag__remove-btn", onClick: onRemove },
+                React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
+                    React__default.createElement("path", { d: "M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z", fillRule: "evenodd" }))))));
     });
@@ -411,9 +565,9 @@
             var classNames = cn('eyzy-checkbox', 'right' === align ? 'eyzy-checkbox--right' : null, checked ? 'checked' : null, className);
-            return (React.createElement("label", { className: classNames },
-                React.createElement("input", __assign({ type: "checkbox", onChange: this.handleChange, checked: checked }, rest)),
-                React.createElement("span", { className: "eyzy-checkbox-inner" }),
-                children && (React.createElement("span", { className: "eyzy-checkbox-label" }, children))));
+            return (React__default.createElement("label", { className: classNames },
+                React__default.createElement("input", __assign({ type: "checkbox", onChange: this.handleChange, checked: checked }, rest)),
+                React__default.createElement("span", { className: "eyzy-checkbox-inner" }),
+                children && (React__default.createElement("span", { className: "eyzy-checkbox-label" }, children))));
         };
         return Checkbox;
-    }(React.Component));
+    }(React__default.Component));
 
@@ -449,7 +603,7 @@ var Switch = /** @class */ (function (_super) {
             var classNames = cn('eyzy-switch', size && "eyzy-switch-" + size);
-            var button = React.createElement("button", { className: classNames, onClick: this.handleClick, "aria-checked": this.state.checked });
+            var button = React__default.createElement("button", { className: classNames, onClick: this.handleClick, "aria-checked": this.state.checked });
             if (children) {
-                return (React.createElement("span", { className: "eyzy-switch-container" },
+                return (React__default.createElement("span", { className: "eyzy-switch-container" },
                     button,
-                    React.createElement("span", { className: "eyzy-switch-text", onClick: this.handleClick }, children)));
+                    React__default.createElement("span", { className: "eyzy-switch-text", onClick: this.handleClick }, children)));
             }
@@ -459,3 +613,3 @@ return button;
         return Switch;
-    }(React.PureComponent));
+    }(React__default.PureComponent));
 
@@ -473,3 +627,3 @@ function getName(name) {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.parentEl = React.createRef();
+            _this.parentEl = React__default.createRef();
             _this.handleChange = function (e) {
@@ -510,8 +664,8 @@ var onChange = _this.props.onChange;
             }
-            return (React.createElement("div", { className: 'eyzy-radio-group', ref: this.parentEl }, options.map(function (o, i) { return (React.createElement("label", { key: i, className: cn({ active: isChecked(o, selectedValue) }) },
-                React.createElement("input", { type: "radio", name: rName, value: o.value || o.label, disabled: o.disabled, checked: isChecked(o, selectedValue), onChange: _this.handleChange }),
+            return (React__default.createElement("div", { className: 'eyzy-radio-group', ref: this.parentEl }, options.map(function (o, i) { return (React__default.createElement("label", { key: i, className: cn({ active: isChecked(o, selectedValue) }) },
+                React__default.createElement("input", { type: "radio", name: rName, value: o.value || o.label, disabled: o.disabled, checked: isChecked(o, selectedValue), onChange: _this.handleChange }),
                 o.label)); })));
         };
         return RadioGroup;
-    }(React.PureComponent));
+    }(React__default.PureComponent));
 
@@ -525,2 +679,3 @@ var Radio = {
     exports.Input = Input;
+    exports.NumberInput = NumberInput;
     exports.Radio = Radio;
@@ -530,2 +685,3 @@ exports.Switch = Switch;
     exports.Tag = Tag;
+    exports.TextArea = TextArea;
 
@@ -532,0 +688,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

es/eyzy.js

 
 /*!
- * Eyzy v0.0.16
+ * Eyzy v0.0.17
  * (c) 2022 amsik
@@ -8,3 +8,3 @@ * Released under the MIT License.
 
-import React from 'react';
+import React, { useMemo, useState, useEffect, forwardRef, useRef } from 'react';
 
@@ -110,2 +110,69 @@ /*! *****************************************************************************
 
+var uid = function () { return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, ''); };
+
+var Field = function (_a) {
+    var label = _a.label, helpText = _a.helpText, children = _a.children, fit = _a.fit, required = _a.required;
+    var id = useMemo(function () { return "e-" + uid(); }, []);
+    var classNames = cn('e-field', {
+        fit: fit
+    });
+    // @ts-ignore
+    var child = React.cloneElement(children, {
+        id: id
+    });
+    if (label || helpText) {
+        return (React.createElement("div", { className: classNames },
+            label && (React.createElement("label", { className: 'e-label', htmlFor: id },
+                label,
+                required && React.createElement("span", { className: 'e-asterisk' }, "*"))),
+            helpText && (React.createElement("div", { className: 'e-help' }, helpText)),
+            React.createElement("div", { className: 'e-ctrl' }, child)));
+    }
+    return (React.createElement("div", { className: classNames }, child));
+};
+
+var wasKeyPressed;
+document.addEventListener('DOMContentLoaded', function () {
+    window.addEventListener('keydown', function () {
+        wasKeyPressed = true;
+    });
+    window.addEventListener('keyup', function () {
+        wasKeyPressed = false;
+    });
+});
+var useFocusRing = function (id, autoFocus) {
+    var _a = useState(!!autoFocus), isFocused = _a[0], setFocused = _a[1];
+    var blurHandler = function () {
+        setFocused(false);
+    };
+    var focusHandler = function () {
+        if (wasKeyPressed) {
+            setFocused(true);
+        }
+    };
+    useEffect(function () {
+        var domEl = document.getElementById(id);
+        domEl === null || domEl === void 0 ? void 0 : domEl.addEventListener('focus', focusHandler);
+        domEl === null || domEl === void 0 ? void 0 : domEl.addEventListener('blur', blurHandler);
+        return function () {
+            domEl === null || domEl === void 0 ? void 0 : domEl.removeEventListener('focus', focusHandler);
+            domEl === null || domEl === void 0 ? void 0 : domEl.removeEventListener('blur', blurHandler);
+        };
+    }, []);
+    return isFocused;
+};
+
+function FocusRing(props) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var child = React.Children.only(children);
+    var isFocused = useFocusRing(rest.id, child.props.autoFocus);
+    var childProps = __assign(__assign(__assign({}, rest), child.props), { className: cn(child.props.className, {
+            'e-ring': isFocused
+        }) });
+    return React.cloneElement(child, childProps);
+}
+
+var isEsc = function (e) { return /escape/i.test(e.key); };
+var isEnter = function (e) { return /enter/i.test(e.key); };
+
 function parseWidth(width) {
@@ -118,32 +185,119 @@ var parsed = parseInt(width, 10);
 }
-var Input = /** @class */ (function (_super) {
-    __extends(Input, _super);
-    function Input() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.handleKeyDown = function (e) {
-            var _a = _this.props, onPressEnter = _a.onPressEnter, onPressEsc = _a.onPressEsc, onKeyDown = _a.onKeyDown;
-            if (onPressEnter && 13 === e.keyCode) {
-                onPressEnter(e);
+
+function BaseInput(props, ref) {
+    var className = props.className, width = props.width, required = props.required, fit = props.fit, type = props.type, style = props.style, helpText = props.helpText, label = props.label, onPressEnter = props.onPressEnter, onPressEsc = props.onPressEsc, onKeyDown = props.onKeyDown, onChange = props.onChange, rest = __rest(props, ["className", "width", "required", "fit", "type", "style", "helpText", "label", "onPressEnter", "onPressEsc", "onKeyDown", "onChange"]);
+    var _a = useState(props.value || props.defaultValue || ''), value = _a[0], setValue = _a[1];
+    var handleChange = function (e) {
+        var val = e.target.value;
+        if (onChange) {
+            onChange(val, e);
+        }
+        else {
+            setValue(val);
+        }
+    };
+    useEffect(function () {
+        if (onChange) { // controlled
+            setValue(props.value || '');
+        }
+    }, [props.value]);
+    var handleKeyDown = function (e) {
+        if (onPressEnter && isEnter(e)) {
+            onPressEnter(e);
+        }
+        if (onPressEsc && isEsc(e)) {
+            onPressEsc(e);
+        }
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    };
+    var classNames = cn(type === 'textarea' ? 'e-textarea' : 'e-input', className);
+    var parsedWidth = parseWidth(width);
+    var elemStyle = style || {};
+    if (parsedWidth) {
+        elemStyle.width = parsedWidth;
+    }
+    var ElementType = type === 'textarea' ? 'textarea' : 'input';
+    return (React.createElement(Field, { label: label, helpText: helpText, fit: fit, required: required },
+        React.createElement(FocusRing, null,
+            React.createElement(ElementType, __assign({}, rest, { ref: ref, value: value, type: type || 'text', className: classNames, style: elemStyle, onChange: handleChange, onKeyDown: handleKeyDown })))));
+}
+var BaseInput$1 = forwardRef(BaseInput);
+
+var Input = React.memo(function Input(props) {
+    return (React.createElement(BaseInput$1, __assign({}, props)));
+});
+
+var TextArea = React.memo(function TextArea(props) {
+    var textAreaRef = useRef();
+    var autoHeight = props.autoHeight, className = props.className, rest = __rest(props, ["autoHeight", "className"]);
+    var classNames = cn('e-textarea', {
+        'auto-height': autoHeight
+    }, className);
+    var handleInput = function () {
+        var _a;
+        if (textAreaRef.current) {
+            textAreaRef.current.style.height = 'auto';
+            textAreaRef.current.style.height = ((_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 5 + "px";
+        }
+    };
+    useEffect(function () {
+        if (textAreaRef.current && autoHeight) {
+            textAreaRef.current.addEventListener('input', handleInput, false);
+            handleInput();
+        }
+        return function () {
+            textAreaRef.current && textAreaRef.current.removeEventListener('input', handleInput, false);
+        };
+    }, [autoHeight]);
+    return (React.createElement(BaseInput$1, __assign({}, rest, { className: classNames, ref: textAreaRef, type: "textarea" })));
+});
+
+var isMob = function () { return document.body.clientWidth <= 768; };
+
+var INT_RE = /\-?\d+/;
+var FLOAT_RE = /^\-?\d*\.?\d*$/;
+var precessValue = function (v, isInt) {
+    var val = v
+        .replace(/,/g, '.')
+        .replace(/\-+/g, '-');
+    if (val === '-') {
+        return val;
+    }
+    if (val) {
+        if (isInt) {
+            if (!INT_RE.test(val)) {
+                return null;
             }
-            if (onPressEsc && 27 === e.keyCode) {
-                onPressEsc(e);
+        }
+        else {
+            if (!FLOAT_RE.test(val)) {
+                return null;
             }
-            if (onKeyDown) {
-                onKeyDown(e);
-            }
-        };
-        return _this;
+        }
     }
-    Input.prototype.render = function () {
-        var _a = this.props, className = _a.className, intent = _a.intent, shape = _a.shape, width = _a.width, size = _a.size, type = _a.type, fit = _a.fit, style = _a.style, onPressEnter = _a.onPressEnter, onPressEsc = _a.onPressEsc, rest = __rest(_a, ["className", "intent", "shape", "width", "size", "type", "fit", "style", "onPressEnter", "onPressEsc"]);
-        var classNames = cn('eyzy-input', intent && "eyzy-input-" + intent, shape && "eyzy-input-" + shape, size && "eyzy-input-" + size, fit && 'eyzy-input-fit', className);
-        var parsedWidth = parseWidth(width);
-        var elemStyle = style || {};
-        if (parsedWidth) {
-            elemStyle.width = parsedWidth;
+    else {
+        return '';
+    }
+    return isFinite(val)
+        ? val
+        : isFinite(v) ? v : '';
+};
+var NumberInput = React.memo(function NumberInput(props) {
+    var _a = useState(precessValue(props.value || props.defaultValue || '')), value = _a[0], setValue = _a[1];
+    var handleChange = function (value, e) {
+        var val = precessValue(value, props.isInt);
+        if (val === null) {
+            return;
         }
-        return (React.createElement("input", __assign({}, rest, { className: classNames, type: type || "text", style: elemStyle, onKeyDown: this.handleKeyDown })));
+        if (props.onChange) {
+            props.onChange(value, e);
+        }
+        setValue(val);
     };
-    return Input;
-}(React.Component));
+    // всетаки сделать onchange(value: string | Number, ORIGINAL_EVENT as 2th argument)
+    // тут useEffect ([defaultValue and value])
+    return (React.createElement(BaseInput$1, __assign({}, props, { type: isMob() ? 'number' : 'text', value: value, onChange: handleChange })));
+});
 
@@ -503,3 +657,3 @@ var Group$1 = React.memo(function InputButton(props) {
 
-export { Button, Checkbox, Input, Radio, Switch, Tabs, Tag };
+export { Button, Checkbox, Input, NumberInput, Radio, Switch, Tabs, Tag, TextArea };
 //# sourceMappingURL=eyzy.js.map

package.json

 {
   "name": "eyzy",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "author": "Kostiantyn",
@@ -33,3 +33,3 @@ "description": "React UI Toolkit",
   ],
-  "dependencies": {
+  "peerDependencies": {
     "react": "^16.8.6",
@@ -36,0 +36,0 @@ "react-dom": "^16.8.6"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

175968

increased by27.36%

Lines of code

1765

increased by23.86%

Dependency changes

• - Removedreact@^16.8.6

• - Removedreact-dom@^16.8.6