@digibib/deichman-ui - npm Package Compare versions

Comparing version 5.0.6 to 5.0.7

dist/index.es.js

@@ -1410,2 +1410,17 @@ import React, { Component, Fragment } from 'react';
 
+var debounce = function debounce(callback, wait) {
+  var timeout = null;
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var next = function next() {
+      return callback.apply(undefined, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(next, wait);
+  };
+};
+
 var Item = function Item(_ref) {
@@ -1434,4 +1449,7 @@ var children = _ref.children;
     _this.state = {
+      rows: 0,
       isExpanded: false
     };
+    _this.delayedCallback = debounce(_this.calculateHeight, 1000);
+    _this.container = React.createRef();
     return _this;
@@ -1441,2 +1459,19 @@ }
   createClass(TagList, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.calculateHeight();
+      window.addEventListener('resize', this.delayedCallback);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.delayedCallback);
+    }
+  }, {
+    key: 'calculateHeight',
+    value: function calculateHeight() {
+      var height = this.container.current.scrollHeight;
+      this.setState({ rows: height / 49 });
+    }
+  }, {
     key: 'onToggleExpand',
@@ -1452,12 +1487,18 @@ value: function onToggleExpand(e) {
     value: function render() {
+      var _classNames;
+
+      var rows = this.state.rows;
+
+      console.log(rows);
       var _props = this.props,
           children = _props.children,
           limited = _props.limited,
+          maxRows = _props.maxRows,
           expanded = _props.expanded;
 
-      var tagListClass = classNames({
+      var limitActive = limited && rows > maxRows;
+      var tagListClass = classNames((_classNames = {
         'tag-list': true,
-        'tag-list--limited': limited,
-        'tag-list--expanded': this.state.isExpanded || expanded
-      });
+        'tag-list--limited': limitActive
+      }, defineProperty(_classNames, 'tag-list--max-rows-' + maxRows, limitActive), defineProperty(_classNames, 'tag-list--expanded', this.state.isExpanded || expanded), _classNames));
 
@@ -1469,13 +1510,9 @@ return React.createElement(
           'ul',
-          { className: 'tag-list__list' },
+          { className: 'tag-list__list', ref: this.container },
           children
         ),
-        limited && React.createElement(
-          'li',
-          { className: 'tag-list__show-more' },
-          React.createElement(
-            'a',
-            { href: '#expand', onClick: this.onToggleExpand },
-            '+ Vis mer'
-          )
+        limitActive && React.createElement(
+          'a',
+          { className: 'tag-list__show-more', href: '#expand', onClick: this.onToggleExpand },
+          '+ Vis mer'
         )
@@ -1490,3 +1527,4 @@ );
   limited: false,
-  expanded: false
+  expanded: false,
+  maxRows: 2
 };
@@ -1497,2 +1535,3 @@
   limited: PropTypes.bool,
+  maxRows: PropTypes.number,
   expanded: PropTypes.bool
@@ -1499,0 +1538,0 @@ };

dist/index.js

@@ -1417,2 +1417,17 @@ 'use strict';
 
+var debounce = function debounce(callback, wait) {
+  var timeout = null;
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var next = function next() {
+      return callback.apply(undefined, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(next, wait);
+  };
+};
+
 var Item = function Item(_ref) {
@@ -1441,4 +1456,7 @@ var children = _ref.children;
     _this.state = {
+      rows: 0,
       isExpanded: false
     };
+    _this.delayedCallback = debounce(_this.calculateHeight, 1000);
+    _this.container = React__default.createRef();
     return _this;
@@ -1448,2 +1466,19 @@ }
   createClass(TagList, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.calculateHeight();
+      window.addEventListener('resize', this.delayedCallback);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.delayedCallback);
+    }
+  }, {
+    key: 'calculateHeight',
+    value: function calculateHeight() {
+      var height = this.container.current.scrollHeight;
+      this.setState({ rows: height / 49 });
+    }
+  }, {
     key: 'onToggleExpand',
@@ -1459,12 +1494,18 @@ value: function onToggleExpand(e) {
     value: function render() {
+      var _classNames;
+
+      var rows = this.state.rows;
+
+      console.log(rows);
       var _props = this.props,
           children = _props.children,
           limited = _props.limited,
+          maxRows = _props.maxRows,
           expanded = _props.expanded;
 
-      var tagListClass = classNames({
+      var limitActive = limited && rows > maxRows;
+      var tagListClass = classNames((_classNames = {
         'tag-list': true,
-        'tag-list--limited': limited,
-        'tag-list--expanded': this.state.isExpanded || expanded
-      });
+        'tag-list--limited': limitActive
+      }, defineProperty(_classNames, 'tag-list--max-rows-' + maxRows, limitActive), defineProperty(_classNames, 'tag-list--expanded', this.state.isExpanded || expanded), _classNames));
 
@@ -1476,13 +1517,9 @@ return React__default.createElement(
           'ul',
-          { className: 'tag-list__list' },
+          { className: 'tag-list__list', ref: this.container },
           children
         ),
-        limited && React__default.createElement(
-          'li',
-          { className: 'tag-list__show-more' },
-          React__default.createElement(
-            'a',
-            { href: '#expand', onClick: this.onToggleExpand },
-            '+ Vis mer'
-          )
+        limitActive && React__default.createElement(
+          'a',
+          { className: 'tag-list__show-more', href: '#expand', onClick: this.onToggleExpand },
+          '+ Vis mer'
         )
@@ -1497,3 +1534,4 @@ );
   limited: false,
-  expanded: false
+  expanded: false,
+  maxRows: 2
 };
@@ -1504,2 +1542,3 @@
   limited: PropTypes.bool,
+  maxRows: PropTypes.number,
   expanded: PropTypes.bool
@@ -1506,0 +1545,0 @@ };

package.json

 {
   "name": "@digibib/deichman-ui",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "Deichman style-guide and component library",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

649653

increased by0.99%

Lines of code

3405

increased by2.1%

No dependency changes