eyzy - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/eyzy.js

@@ -370,48 +370,16 @@
     getName._ = 0;
-    var RadioGroup = /** @class */ (function (_super) {
-        __extends(RadioGroup, _super);
-        function RadioGroup() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.parentEl = React.createRef();
-            _this.handleChange = function (e) {
-                var onChange = _this.props.onChange;
-                var target = e.target;
-                onChange && onChange(target.value);
-                try {
-                    var bounds = target.parentNode.getBoundingClientRect();
-                    var parentEl = _this.parentEl.current;
-                    var groupWrap = parentEl.parentNode;
-                    var groupWrapWidth = groupWrap.clientWidth;
-                    var groupWrapBounds = groupWrap.getBoundingClientRect();
-                    var _a = [
-                        bounds.left - groupWrapBounds.left,
-                        bounds.right - groupWrapBounds.left
-                    ], labelLeft = _a[0], labelRight = _a[1];
-                    if (labelRight > groupWrapWidth) {
-                        groupWrap.scrollLeft += labelRight - groupWrapWidth + 25;
-                    }
-                    else if (labelLeft < 0) {
-                        groupWrap.scrollLeft += (labelLeft - 25);
-                    }
-                }
-                catch (e) {
-                    console.log(e);
-                }
-            };
-            return _this;
+    function RadioGroup(props) {
+        var options = props.options, name = props.name, value = props.value, onChange = props.onChange;
+        var rName = getName(name);
+        var selectedValue = value;
+        if (selectedValue === undefined && options[0]) {
+            selectedValue = options[0].value || options[0].label;
         }
-        RadioGroup.prototype.render = function () {
-            var _this = this;
-            var _a = this.props, options = _a.options, name = _a.name, value = _a.value;
-            var rName = getName(name);
-            var selectedValue = value;
-            if (selectedValue === undefined && options[0]) {
-                selectedValue = options[0].value || options[0].label;
-            }
-            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 }),
-                o.label)); })));
+        var handleChange = function (e) {
+            onChange(e.target.value);
         };
-        return RadioGroup;
-    }(React.PureComponent));
+        return (React.createElement("div", { className: 'eyzy-radio-group' }, 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: handleChange }),
+            o.label)); })));
+    }
 
@@ -418,0 +386,0 @@ var Radio = {

es/eyzy.js

 
 /*!
  * Eyzy v0.0.10
- * (c) 2021 amsik
+ * (c) 2022 amsik
  * Released under the MIT License.
@@ -94,2 +94,3 @@ */
 }
+//# sourceMappingURL=classNames.js.map
 
@@ -101,2 +102,3 @@ var Button = React.memo(function Button(props) {
 });
+//# sourceMappingURL=Button.js.map
 
@@ -108,4 +110,8 @@ var Group = React.memo(function ButtonGroup(props) {
 });
+//# sourceMappingURL=Group.js.map
 
+//# sourceMappingURL=index.js.map
+
 Button["Group"] = Group;
+//# sourceMappingURL=index.js.map
 
@@ -149,2 +155,3 @@ function parseWidth(width) {
 }(React.Component));
+//# sourceMappingURL=Input.js.map
 
@@ -156,4 +163,8 @@ var Group$1 = React.memo(function InputButton(props) {
 });
+//# sourceMappingURL=Group.js.map
 
+//# sourceMappingURL=index.js.map
+
 Input["Group"] = Group$1;
+//# sourceMappingURL=index.js.map
 
@@ -164,6 +175,36 @@ var Tab = function (props) {
 var Tab$1 = React.memo(Tab);
+//# sourceMappingURL=Tab.js.map
 
+function debounce(func, wait, immediate) {
+    var timeout;
+    return function executedFunction() {
+        // @ts-ignore
+        var context = this;
+        var args = arguments;
+        var later = function () {
+            timeout = null;
+            if (!immediate)
+                func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow)
+            func.apply(context, args);
+    };
+}
+//# sourceMappingURL=debounce.js.map
+
 var isTab = function (component) {
     return component && component.type === Tab$1;
 };
+var Arrow = function (props) {
+    var btnClassName = cn('eyzy-tabs-arrow', {
+        l: props.l,
+        disabled: props.disabled
+    });
+    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" }))));
+};
 var Tabs = /** @class */ (function (_super) {
@@ -175,4 +216,5 @@ __extends(Tabs, _super);
         _this.wrap = React.createRef();
+        _this.scrollWrap = React.createRef();
         _this.tryHeaderScroll = function () {
-            var _a;
+            var _a, _b, _c, _d;
             try {
@@ -183,12 +225,34 @@ var activeTab = (_a = _this.wrap.current) === null || _a === void 0 ? void 0 : _a.querySelector('.active');
                 }
-                var headerEl = _this.header.current;
-                var headerBounds = headerEl.getBoundingClientRect();
-                var tabBounds = activeTab.getBoundingClientRect();
-                var diff = (headerBounds.left + headerEl.clientWidth) - tabBounds.left;
-                if (diff < tabBounds.width) {
-                    headerEl.scrollLeft = diff + tabBounds.width;
+                var wrapBounds = (_b = _this.wrap.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+                var activeBounds = activeTab.getBoundingClientRect();
+                if ((wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.left) > activeBounds.left) {
+                    (_c = _this.wrap.current) === null || _c === void 0 ? void 0 : _c.scrollLeft -= (wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.left) - activeBounds.left;
                 }
+                else if ((wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.right) < activeBounds.right) {
+                    (_d = _this.wrap.current) === null || _d === void 0 ? void 0 : _d.scrollLeft += activeBounds.right - (wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.right);
+                }
             }
             catch (e) { }
         };
+        _this.setCtrlStates = function () {
+            var container = _this.wrap.current;
+            var wrapper = _this.scrollWrap.current;
+            if (!container || !wrapper) {
+                return;
+            }
+            if (wrapper.clientWidth <= container.parentNode.clientWidth) {
+                return _this.setState({
+                    isArrowVisible: false
+                });
+            }
+            var isArrowLeftDisabled = container.scrollLeft === 0;
+            var isArrowRightDisabled = wrapper.clientWidth
+                ? parseInt(wrapper.clientWidth - (container.clientWidth + container.scrollLeft)) === 0
+                : false;
+            _this.setState({
+                isArrowLeftDisabled: isArrowLeftDisabled,
+                isArrowRightDisabled: isArrowRightDisabled,
+                isArrowVisible: true
+            });
+        };
         _this.getChildNodes = function (children) {
@@ -211,2 +275,18 @@ if (children === void 0) { children = _this.props.children; }
         };
+        _this.headerScrollerLeft = function () {
+            _this.scrollEl(-1);
+        };
+        _this.headerScrollerRight = function () {
+            _this.scrollEl(1);
+        };
+        _this.scrollEl = function (direction, power) {
+            if (power === void 0) { power = 0.7; }
+            var container = _this.wrap.current;
+            var left = container.clientWidth * power;
+            container.scrollTo({
+                top: 0,
+                left: container.scrollLeft + (direction * left),
+                behavior: 'smooth'
+            });
+        };
         _this.handleChange = function (key) {
@@ -221,2 +301,4 @@ if (key === _this.state.activeKey) {
         };
+        _this.handleWindowResize = debounce(_this.setCtrlStates, 200);
+        _this.handleHeaderScroll = debounce(_this.setCtrlStates, 120);
         var state = {
@@ -242,6 +324,13 @@ activeKey: props.defaultActiveKey || props.activeKey || null
         this.tryHeaderScroll();
+        this.setCtrlStates();
+        window.addEventListener('resize', this.handleWindowResize);
     };
-    Tabs.prototype.componentDidUpdate = function () {
-        this.tryHeaderScroll();
+    Tabs.prototype.componentWillUnmount = function () {
+        window.removeEventListener('resize', this.handleWindowResize);
     };
+    Tabs.prototype.componentDidUpdate = function (prevProps) {
+        if (this.props.activeKey !== undefined && prevProps.activeKey !== this.props.activeKey) {
+            this.tryHeaderScroll();
+        }
+    };
     Tabs.prototype.renderHeader = function () {
@@ -265,7 +354,12 @@ var _this = this;
     Tabs.prototype.render = function () {
-        var className = cn('eyzy-tabs', this.props.className);
-        return (React.createElement("div", { className: className },
+        var _a = this.props, className = _a.className, noContent = _a.noContent;
+        var containerCn = cn('eyzy-tabs', className);
+        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 },
-                React.createElement("div", { className: "eyzy-tabs-wrap", ref: this.wrap }, this.renderHeader())),
-            React.createElement("div", { className: "eyzy-tabs-content" }, this.getActiveContent())));
+                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()))));
     };
@@ -275,4 +369,6 @@ Tabs.Tab = Tab$1;
 }(React.PureComponent));
+//# sourceMappingURL=Tabs.js.map
 
 Tabs.Tab = Tab$1;
+//# sourceMappingURL=index.js.map
 
@@ -291,3 +387,6 @@ var getStyle = function (color, style) {
 });
+//# sourceMappingURL=Tag.js.map
 
+//# sourceMappingURL=index.js.map
+
 var Checkbox = /** @class */ (function (_super) {
@@ -330,3 +429,6 @@ __extends(Checkbox, _super);
 }(React.Component));
+//# sourceMappingURL=Checkbox.js.map
 
+//# sourceMappingURL=index.js.map
+
 var Switch = /** @class */ (function (_super) {
@@ -371,3 +473,6 @@ __extends(Switch, _super);
 }(React.PureComponent));
+//# sourceMappingURL=Switch.js.map
 
+//# sourceMappingURL=index.js.map
+
 function getName(name) {
@@ -380,48 +485,17 @@ return name || '' + getName['_']++;
 getName._ = 0;
-var RadioGroup = /** @class */ (function (_super) {
-    __extends(RadioGroup, _super);
-    function RadioGroup() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.parentEl = React.createRef();
-        _this.handleChange = function (e) {
-            var onChange = _this.props.onChange;
-            var target = e.target;
-            onChange && onChange(target.value);
-            try {
-                var bounds = target.parentNode.getBoundingClientRect();
-                var parentEl = _this.parentEl.current;
-                var groupWrap = parentEl.parentNode;
-                var groupWrapWidth = groupWrap.clientWidth;
-                var groupWrapBounds = groupWrap.getBoundingClientRect();
-                var _a = [
-                    bounds.left - groupWrapBounds.left,
-                    bounds.right - groupWrapBounds.left
-                ], labelLeft = _a[0], labelRight = _a[1];
-                if (labelRight > groupWrapWidth) {
-                    groupWrap.scrollLeft += labelRight - groupWrapWidth + 25;
-                }
-                else if (labelLeft < 0) {
-                    groupWrap.scrollLeft += (labelLeft - 25);
-                }
-            }
-            catch (e) {
-                console.log(e);
-            }
-        };
-        return _this;
+function RadioGroup(props) {
+    var options = props.options, name = props.name, value = props.value, onChange = props.onChange;
+    var rName = getName(name);
+    var selectedValue = value;
+    if (selectedValue === undefined && options[0]) {
+        selectedValue = options[0].value || options[0].label;
     }
-    RadioGroup.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, options = _a.options, name = _a.name, value = _a.value;
-        var rName = getName(name);
-        var selectedValue = value;
-        if (selectedValue === undefined && options[0]) {
-            selectedValue = options[0].value || options[0].label;
-        }
-        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 }),
-            o.label)); })));
+    var handleChange = function (e) {
+        onChange(e.target.value);
     };
-    return RadioGroup;
-}(React.PureComponent));
+    return (React.createElement("div", { className: 'eyzy-radio-group' }, 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: handleChange }),
+        o.label)); })));
+}
+//# sourceMappingURL=RadioGroup.js.map
 
@@ -431,4 +505,5 @@ var Radio = {
 };
+//# sourceMappingURL=index.js.map
 
 export { Button, Checkbox, Input, Radio, Switch, Tabs, Tag };
 //# sourceMappingURL=eyzy.js.map

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

118985

increased by4.9%

Lines of code

1282

increased by4.57%

No dependency changes