eyzy - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

dist/eyzy.js

 
 /*!
- * Eyzy v0.0.21
+ * Eyzy v0.0.22
  * (c) 2022 amsik
@@ -117,23 +117,2 @@ * Released under the MIT License.
 
-    var Field = function (_a) {
-        var label = _a.label, helpText = _a.helpText, children = _a.children, fit = _a.fit, required = _a.required, error = _a.error;
-        var id = React.useMemo(function () { return "e-" + uid(); }, []);
-        var classNames = cn('e-field', {
-            fit: fit,
-            error: error
-        });
-        // @ts-ignore
-        var child = React__default.cloneElement(children, {
-            id: id
-        });
-        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' }, "*"))),
-            React__default.createElement("div", { className: 'e-wrapper' },
-                child,
-                error && (React__default.createElement("div", { className: 'e-error' }, error)),
-                helpText && (React__default.createElement("div", { className: 'e-help' }, helpText)))));
-    };
-
     var wasKeyPressed;
@@ -170,11 +149,29 @@ document.addEventListener('DOMContentLoaded', function () {
 
-    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(props.className, child.props.className, {
+    var Field = function (_a) {
+        var component = _a.component, children = _a.children, ctrlClassName = _a.ctrlClassName, label = _a.label, helpText = _a.helpText, fit = _a.fit, required = _a.required, error = _a.error;
+        var id = React.useMemo(function () { return "e-" + uid(); }, []);
+        var isFocused = useFocusRing(id, component.props.autoFocus);
+        var classNames = cn('e-field', {
+            fit: fit,
+            error: error,
+        });
+        var ctrlClassNames = cn('e-ctrl', ctrlClassName);
+        var child = React__default.cloneElement(component, {
+            id: id,
+            className: cn(component.props.className, {
                 'e-ring': isFocused
-            }) });
-        return React__default.cloneElement(child, childProps);
-    }
+            })
+        });
+        var allowHtmlFor = component.props.type !== 'checkbox';
+        return (React__default.createElement("div", { className: classNames },
+            (label || helpText) && (React__default.createElement("div", { className: 'e-info' },
+                label && (React__default.createElement("label", { className: 'e-label', htmlFor: allowHtmlFor ? id : '' },
+                    label,
+                    required && React__default.createElement("span", { className: 'e-asterisk' }, "*"))),
+                helpText && (React__default.createElement("div", { className: 'e-help' }, helpText)))),
+            React__default.createElement("div", { className: ctrlClassNames },
+                child,
+                children),
+            error && (React__default.createElement("div", { className: 'e-error' }, error))));
+    };
 
@@ -218,5 +215,4 @@ var isEsc = function (e) { return /escape/i.test(e.key); };
         var ElementType = type === 'textarea' ? 'textarea' : 'input';
-        return (React__default.createElement(Field, { label: label, helpText: helpText, fit: fit, required: required, error: error },
-            React__default.createElement(FocusRing, null,
-                React__default.createElement(ElementType, __assign({}, rest, { ref: ref, type: type || 'text', className: classNames, style: elemStyle, onChange: handleChange, onKeyDown: handleKeyDown })))));
+        var Component = (React__default.createElement(ElementType, __assign({}, rest, { ref: ref, type: type || 'text', className: classNames, style: elemStyle, onChange: handleChange, onKeyDown: handleKeyDown })));
+        return (React__default.createElement(Field, { label: label, helpText: helpText, fit: fit, required: required, error: error, component: Component }));
     }
@@ -490,39 +486,19 @@ var Input = React.forwardRef(BaseInput);
 
-    var Checkbox = /** @class */ (function (_super) {
-        __extends(Checkbox, _super);
-        function Checkbox(props) {
-            var _this = _super.call(this, props) || this;
-            _this.handleChange = function (e) {
-                if (_this.props.onChange) {
-                    _this.props.onChange(e);
-                }
-                else {
-                    _this.setState({ checked: e.target.checked });
-                }
-            };
-            var checked = 'checked' in props
-                ? props.checked
-                : props.defaultChecked;
-            _this.state = {
-                checked: checked || false
-            };
-            return _this;
-        }
-        Checkbox.getDerivedStateFromProps = function (props, state) {
-            if ('checked' in props) {
-                return __assign(__assign({}, state), { checked: props.checked });
-            }
-            return null;
+    function Checkbox(props, ref) {
+        var className = props.className, width = props.width, required = props.required, error = props.error, helpText = props.helpText, label = props.label, onChange = props.onChange, children = props.children, rest = __rest(props, ["className", "width", "required", "error", "helpText", "label", "onChange", "children"]);
+        var id = React.useMemo(function () { return "e-" + uid(); }, []);
+        var _a = React.useState('checked' in props
+            ? !!props.checked
+            : !!props.defaultChecked), checked = _a[0], setChecked = _a[1];
+        var handleChange = function (e) {
+            setChecked(e.target.checked);
         };
-        Checkbox.prototype.render = function () {
-            var _a = this.props, className = _a.className, children = _a.children, align = _a.align, defaultChecked = _a.defaultChecked, rest = __rest(_a, ["className", "children", "align", "defaultChecked"]);
-            var checked = this.state.checked;
-            var classNames = cn('eyzy-checkbox', 'right' === align ? 'eyzy-checkbox--right' : null, checked ? 'checked' : null, className);
-            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__default.Component));
+        var Component = (React__default.createElement("input", __assign({ type: "checkbox", onChange: handleChange, checked: checked, id: id }, rest)));
+        return (React__default.createElement(Field, { label: label, ctrlClassName: 'e-checkbox', helpText: helpText, required: required, error: error, component: Component },
+            React__default.createElement("span", { className: "e-outer" },
+                React__default.createElement("span", { className: "e-inner" }, checked && (React__default.createElement("svg", { focusable: "false", role: "img" },
+                    React__default.createElement("path", { d: "M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1 1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712 6A.999.999 0 0 1 3.788 9z" }))))),
+            children && (React__default.createElement("span", { className: 'e-checkbox-label' }, children))));
+    }
+    var Checkbox$1 = React.forwardRef(Checkbox);
 
@@ -627,4 +603,14 @@ var Switch = /** @class */ (function (_super) {
 
+    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(props.className, child.props.className, {
+                'e-ring': isFocused
+            }) });
+        return React__default.cloneElement(child, childProps);
+    }
+
     exports.Button = Button;
-    exports.Checkbox = Checkbox;
+    exports.Checkbox = Checkbox$1;
     exports.Field = Field;
@@ -631,0 +617,0 @@ exports.FocusRing = FocusRing;

es/eyzy.js

 
 /*!
- * Eyzy v0.0.21
+ * Eyzy v0.0.22
  * (c) 2022 amsik
@@ -8,3 +8,3 @@ * Released under the MIT License.
 
-import React, { useMemo, useState, useEffect, forwardRef, useRef } from 'react';
+import React, { useState, useEffect, useMemo, forwardRef, useRef } from 'react';
 
@@ -112,23 +112,2 @@ /*! *****************************************************************************
 
-var Field = function (_a) {
-    var label = _a.label, helpText = _a.helpText, children = _a.children, fit = _a.fit, required = _a.required, error = _a.error;
-    var id = useMemo(function () { return "e-" + uid(); }, []);
-    var classNames = cn('e-field', {
-        fit: fit,
-        error: error
-    });
-    // @ts-ignore
-    var child = React.cloneElement(children, {
-        id: id
-    });
-    return (React.createElement("div", { className: classNames },
-        label && (React.createElement("label", { className: 'e-label', htmlFor: id },
-            label,
-            required && React.createElement("span", { className: 'e-asterisk' }, "*"))),
-        React.createElement("div", { className: 'e-wrapper' },
-            child,
-            error && (React.createElement("div", { className: 'e-error' }, error)),
-            helpText && (React.createElement("div", { className: 'e-help' }, helpText)))));
-};
-
 var wasKeyPressed;
@@ -165,11 +144,29 @@ document.addEventListener('DOMContentLoaded', function () {
 
-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(props.className, child.props.className, {
+var Field = function (_a) {
+    var component = _a.component, children = _a.children, ctrlClassName = _a.ctrlClassName, label = _a.label, helpText = _a.helpText, fit = _a.fit, required = _a.required, error = _a.error;
+    var id = useMemo(function () { return "e-" + uid(); }, []);
+    var isFocused = useFocusRing(id, component.props.autoFocus);
+    var classNames = cn('e-field', {
+        fit: fit,
+        error: error,
+    });
+    var ctrlClassNames = cn('e-ctrl', ctrlClassName);
+    var child = React.cloneElement(component, {
+        id: id,
+        className: cn(component.props.className, {
             'e-ring': isFocused
-        }) });
-    return React.cloneElement(child, childProps);
-}
+        })
+    });
+    var allowHtmlFor = component.props.type !== 'checkbox';
+    return (React.createElement("div", { className: classNames },
+        (label || helpText) && (React.createElement("div", { className: 'e-info' },
+            label && (React.createElement("label", { className: 'e-label', htmlFor: allowHtmlFor ? id : '' },
+                label,
+                required && React.createElement("span", { className: 'e-asterisk' }, "*"))),
+            helpText && (React.createElement("div", { className: 'e-help' }, helpText)))),
+        React.createElement("div", { className: ctrlClassNames },
+            child,
+            children),
+        error && (React.createElement("div", { className: 'e-error' }, error))));
+};
 
@@ -213,5 +210,4 @@ var isEsc = function (e) { return /escape/i.test(e.key); };
     var ElementType = type === 'textarea' ? 'textarea' : 'input';
-    return (React.createElement(Field, { label: label, helpText: helpText, fit: fit, required: required, error: error },
-        React.createElement(FocusRing, null,
-            React.createElement(ElementType, __assign({}, rest, { ref: ref, type: type || 'text', className: classNames, style: elemStyle, onChange: handleChange, onKeyDown: handleKeyDown })))));
+    var Component = (React.createElement(ElementType, __assign({}, rest, { ref: ref, type: type || 'text', className: classNames, style: elemStyle, onChange: handleChange, onKeyDown: handleKeyDown })));
+    return (React.createElement(Field, { label: label, helpText: helpText, fit: fit, required: required, error: error, component: Component }));
 }
@@ -485,39 +481,19 @@ var Input = forwardRef(BaseInput);
 
-var Checkbox = /** @class */ (function (_super) {
-    __extends(Checkbox, _super);
-    function Checkbox(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleChange = function (e) {
-            if (_this.props.onChange) {
-                _this.props.onChange(e);
-            }
-            else {
-                _this.setState({ checked: e.target.checked });
-            }
-        };
-        var checked = 'checked' in props
-            ? props.checked
-            : props.defaultChecked;
-        _this.state = {
-            checked: checked || false
-        };
-        return _this;
-    }
-    Checkbox.getDerivedStateFromProps = function (props, state) {
-        if ('checked' in props) {
-            return __assign(__assign({}, state), { checked: props.checked });
-        }
-        return null;
+function Checkbox(props, ref) {
+    var className = props.className, width = props.width, required = props.required, error = props.error, helpText = props.helpText, label = props.label, onChange = props.onChange, children = props.children, rest = __rest(props, ["className", "width", "required", "error", "helpText", "label", "onChange", "children"]);
+    var id = useMemo(function () { return "e-" + uid(); }, []);
+    var _a = useState('checked' in props
+        ? !!props.checked
+        : !!props.defaultChecked), checked = _a[0], setChecked = _a[1];
+    var handleChange = function (e) {
+        setChecked(e.target.checked);
     };
-    Checkbox.prototype.render = function () {
-        var _a = this.props, className = _a.className, children = _a.children, align = _a.align, defaultChecked = _a.defaultChecked, rest = __rest(_a, ["className", "children", "align", "defaultChecked"]);
-        var checked = this.state.checked;
-        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 Checkbox;
-}(React.Component));
+    var Component = (React.createElement("input", __assign({ type: "checkbox", onChange: handleChange, checked: checked, id: id }, rest)));
+    return (React.createElement(Field, { label: label, ctrlClassName: 'e-checkbox', helpText: helpText, required: required, error: error, component: Component },
+        React.createElement("span", { className: "e-outer" },
+            React.createElement("span", { className: "e-inner" }, checked && (React.createElement("svg", { focusable: "false", role: "img" },
+                React.createElement("path", { d: "M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1 1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712 6A.999.999 0 0 1 3.788 9z" }))))),
+        children && (React.createElement("span", { className: 'e-checkbox-label' }, children))));
+}
+var Checkbox$1 = forwardRef(Checkbox);
 
@@ -622,3 +598,13 @@ var Switch = /** @class */ (function (_super) {
 
-export { Button, Checkbox, Field, FocusRing, Input, NumberInput, Radio, Switch, Tabs, Tag, TextArea };
+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(props.className, child.props.className, {
+            'e-ring': isFocused
+        }) });
+    return React.cloneElement(child, childProps);
+}
+
+export { Button, Checkbox$1 as Checkbox, Field, FocusRing, Input, NumberInput, Radio, Switch, Tabs, Tag, TextArea };
 //# sourceMappingURL=eyzy.js.map

package.json

 {
   "name": "eyzy",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "author": "Kostiantyn",
@@ -5,0 +5,0 @@ "description": "React UI Toolkit",

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

173660

increased by2.25%

Lines of code

1746

increased by2.28%

No dependency changes