eyzy - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/eyzy.js

 
 /*!
- * Eyzy v0.0.10
- * (c) 2021 amsik
+ * Eyzy v0.0.14
+ * (c) 2022 amsik
  * Released under the MIT License.
@@ -166,5 +166,33 @@ */
 
+    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);
+        };
+    }
+
     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) {
@@ -176,19 +204,47 @@ __extends(Tabs, _super);
             _this.wrap = React.createRef();
+            _this.scrollWrap = React.createRef();
             _this.tryHeaderScroll = function () {
-                var _a;
                 try {
-                    var activeTab = (_a = _this.wrap.current) === null || _a === void 0 ? void 0 : _a.querySelector('.active');
-                    if (!activeTab) {
+                    var wrap = _this.wrap.current;
+                    var activeTab = wrap === null || wrap === void 0 ? void 0 : wrap.querySelector('.active');
+                    if (!activeTab || !wrap) {
                         return;
                     }
-                    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 = wrap.getBoundingClientRect();
+                    var wrapScrollLeft = wrap.scrollLeft;
+                    var activeBounds = activeTab.getBoundingClientRect();
+                    var nextScroll = null;
+                    if ((wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.left) > activeBounds.left) {
+                        nextScroll = wrapScrollLeft - ((wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.left) - activeBounds.left);
                     }
+                    else if ((wrapBounds === null || wrapBounds === void 0 ? void 0 : wrapBounds.right) < activeBounds.right) {
+                        nextScroll = wrapScrollLeft + (activeBounds.right - wrapBounds.right);
+                    }
+                    if (nextScroll !== null) {
+                        wrap.scrollTo({ left: nextScroll, behavior: 'smooth' });
+                    }
                 }
                 catch (e) { }
             };
+            _this.setCtrlStates = function (needScroll) {
+                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
+                    }, function () { return needScroll === true && _this.tryHeaderScroll(); });
+                }
+                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
+                }, function () { return needScroll === true && _this.tryHeaderScroll(); });
+            };
             _this.getChildNodes = function (children) {
@@ -211,2 +267,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) {
@@ -219,4 +291,6 @@ if (key === _this.state.activeKey) {
                 }
-                _this.setState({ activeKey: key });
+                _this.setState({ activeKey: key }, _this.tryHeaderScroll);
             };
+            _this.handleWindowResize = debounce(_this.setCtrlStates, 200);
+            _this.handleHeaderScroll = debounce(_this.setCtrlStates, 120);
             var state = {
@@ -241,7 +315,13 @@ activeKey: props.defaultActiveKey || props.activeKey || null
         Tabs.prototype.componentDidMount = function () {
-            this.tryHeaderScroll();
+            this.setCtrlStates(true);
+            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 +345,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()))));
         };
@@ -376,16 +461,48 @@ Tabs.Tab = Tab$1;
     getName._ = 0;
-    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;
+    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;
         }
-        var handleChange = function (e) {
-            onChange(e.target.value);
+        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)); })));
         };
-        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)); })));
-    }
+        return RadioGroup;
+    }(React.PureComponent));
 
@@ -392,0 +509,0 @@ var Radio = {

es/eyzy.js

 
 /*!
- * Eyzy v0.0.13
+ * Eyzy v0.0.14
  * (c) 2022 amsik
@@ -94,3 +94,2 @@ * Released under the MIT License.
 }
-//# sourceMappingURL=classNames.js.map
 
@@ -102,3 +101,2 @@ var Button = React.memo(function Button(props) {
 });
-//# sourceMappingURL=Button.js.map
 
@@ -110,8 +108,4 @@ var Group = React.memo(function ButtonGroup(props) {
 });
-//# sourceMappingURL=Group.js.map
 
-//# sourceMappingURL=index.js.map
-
 Button["Group"] = Group;
-//# sourceMappingURL=index.js.map
 
@@ -155,3 +149,2 @@ function parseWidth(width) {
 }(React.Component));
-//# sourceMappingURL=Input.js.map
 
@@ -163,8 +156,4 @@ var Group$1 = React.memo(function InputButton(props) {
 });
-//# sourceMappingURL=Group.js.map
 
-//# sourceMappingURL=index.js.map
-
 Input["Group"] = Group$1;
-//# sourceMappingURL=index.js.map
 
@@ -175,3 +164,2 @@ var Tab = function (props) {
 var Tab$1 = React.memo(Tab);
-//# sourceMappingURL=Tab.js.map
 
@@ -196,3 +184,2 @@ function debounce(func, wait, immediate) {
 }
-//# sourceMappingURL=debounce.js.map
 
@@ -368,6 +355,4 @@ var isTab = function (component) {
 }(React.PureComponent));
-//# sourceMappingURL=Tabs.js.map
 
 Tabs.Tab = Tab$1;
-//# sourceMappingURL=index.js.map
 
@@ -386,6 +371,3 @@ var getStyle = function (color, style) {
 });
-//# sourceMappingURL=Tag.js.map
 
-//# sourceMappingURL=index.js.map
-
 var Checkbox = /** @class */ (function (_super) {
@@ -428,6 +410,3 @@ __extends(Checkbox, _super);
 }(React.Component));
-//# sourceMappingURL=Checkbox.js.map
 
-//# sourceMappingURL=index.js.map
-
 var Switch = /** @class */ (function (_super) {
@@ -472,6 +451,3 @@ __extends(Switch, _super);
 }(React.PureComponent));
-//# sourceMappingURL=Switch.js.map
 
-//# sourceMappingURL=index.js.map
-
 function getName(name) {
@@ -530,3 +506,2 @@ return name || '' + getName['_']++;
 }(React.PureComponent));
-//# sourceMappingURL=RadioGroup.js.map
 
@@ -536,5 +511,4 @@ 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.14",
+  "version": "0.0.15",
   "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

137526

increased by11.8%

Lines of code

1415

increased by7.2%

No dependency changes