simplebar-react - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0-alpha.0

dist/simplebar-react.esm.js

 /**
- * simplebar-react - v1.2.1
+ * simplebar-react - v1.3.0-alpha.0
  * React component for SimpleBar
@@ -10,6 +10,21 @@ * https://grsmto.github.io/simplebar/
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import 'simplebar';
+import SimpleBarJS from 'simplebar';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
@@ -33,2 +48,21 @@ _extends = Object.assign || function (target) {
 
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -72,8 +106,20 @@ if (source == null) return {};
   var children = _ref.children,
+      className = _ref.className,
       scrollableNodeProps = _ref.scrollableNodeProps,
-      options = _objectWithoutProperties(_ref, ["children", "scrollableNodeProps"]);
+      options = _objectWithoutProperties(_ref, ["children", "className", "scrollableNodeProps"]);
 
-  return React.createElement("div", _extends({
-    "data-simplebar": true
-  }, options), React.createElement("div", {
+  var elRef = useRef();
+  var scrollableNodeRef = useRef();
+  var contentNodeRef = useRef();
+  useEffect(function () {
+    new SimpleBarJS(elRef.current, _objectSpread({}, options, scrollableNodeRef.current && {
+      scrollableNode: scrollableNodeRef.current
+    }, contentNodeRef.current && {
+      contentNode: contentNodeRef.current
+    }));
+  });
+  return React.createElement("div", {
+    ref: elRef,
+    className: className
+  }, React.createElement("div", {
     className: "simplebar-wrapper"
@@ -88,3 +134,6 @@ }, React.createElement("div", {
     className: "simplebar-offset"
-  }, React.createElement("div", _extends({}, scrollableNodeProps, {
+  }, typeof children === 'function' ? children({
+    scrollableNodeRef: scrollableNodeRef,
+    contentNodeRef: contentNodeRef
+  }) : React.createElement("div", _extends({}, scrollableNodeProps, {
     className: "simplebar-content-wrapper".concat(scrollableNodeProps && scrollableNodeProps.className ? " ".concat(scrollableNodeProps.className) : '')
@@ -106,5 +155,5 @@ }), React.createElement("div", {
 SimpleBar.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 
 export default SimpleBar;

dist/simplebar-react.js

 /**
- * simplebar-react - v1.2.1
+ * simplebar-react - v1.3.0-alpha.0
  * React component for SimpleBar
@@ -10,2 +10,2 @@ * https://grsmto.github.io/simplebar/
 
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react"),require("prop-types"),require("simplebar")):"function"==typeof define&&define.amd?define(["react","prop-types","simplebar"],r):(e=e||self).SimpleBar=r(e.React,e.PropTypes)}(this,function(e,r){"use strict";function a(){return(a=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e}).apply(this,arguments)}function t(e,r){if(null==e)return{};var a,t,l=function(e,r){if(null==e)return{};var a,t,l={},s=Object.keys(e);for(t=0;t<s.length;t++)a=s[t],r.indexOf(a)>=0||(l[a]=e[a]);return l}(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(t=0;t<s.length;t++)a=s[t],r.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}function l(r){var l=r.children,s=r.scrollableNodeProps,n=t(r,["children","scrollableNodeProps"]);return e.createElement("div",a({"data-simplebar":!0},n),e.createElement("div",{className:"simplebar-wrapper"},e.createElement("div",{className:"simplebar-height-auto-observer-wrapper"},e.createElement("div",{className:"simplebar-height-auto-observer"})),e.createElement("div",{className:"simplebar-mask"},e.createElement("div",{className:"simplebar-offset"},e.createElement("div",a({},s,{className:"simplebar-content-wrapper".concat(s&&s.className?" ".concat(s.className):"")}),e.createElement("div",{className:"simplebar-content"},l)))),e.createElement("div",{className:"simplebar-placeholder"})),e.createElement("div",{className:"simplebar-track simplebar-horizontal"},e.createElement("div",{className:"simplebar-scrollbar"})),e.createElement("div",{className:"simplebar-track simplebar-vertical"},e.createElement("div",{className:"simplebar-scrollbar"})))}return e=e&&e.hasOwnProperty("default")?e.default:e,r=r&&r.hasOwnProperty("default")?r.default:r,l.propTypes={children:r.node},l});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react"),require("prop-types"),require("simplebar")):"function"==typeof define&&define.amd?define(["react","prop-types","simplebar"],r):(e=e||self).SimpleBar=r(e.React,e.PropTypes,e.SimpleBarJS)}(this,function(e,r,t){"use strict";var a="default"in e?e.default:e;function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(){return(l=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}function c(e,r){if(null==e)return{};var t,a,n=function(e,r){if(null==e)return{};var t,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)t=l[a],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)t=l[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}function s(r){var s=r.children,o=r.className,i=r.scrollableNodeProps,p=c(r,["children","className","scrollableNodeProps"]),m=e.useRef(),u=e.useRef(),f=e.useRef();return e.useEffect(function(){new t(m.current,function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.forEach(function(r){n(e,r,t[r])})}return e}({},p,u.current&&{scrollableNode:u.current},f.current&&{contentNode:f.current}))}),a.createElement("div",{ref:m,className:o},a.createElement("div",{className:"simplebar-wrapper"},a.createElement("div",{className:"simplebar-height-auto-observer-wrapper"},a.createElement("div",{className:"simplebar-height-auto-observer"})),a.createElement("div",{className:"simplebar-mask"},a.createElement("div",{className:"simplebar-offset"},"function"==typeof s?s({scrollableNodeRef:u,contentNodeRef:f}):a.createElement("div",l({},i,{className:"simplebar-content-wrapper".concat(i&&i.className?" ".concat(i.className):"")}),a.createElement("div",{className:"simplebar-content"},s)))),a.createElement("div",{className:"simplebar-placeholder"})),a.createElement("div",{className:"simplebar-track simplebar-horizontal"},a.createElement("div",{className:"simplebar-scrollbar"})),a.createElement("div",{className:"simplebar-track simplebar-vertical"},a.createElement("div",{className:"simplebar-scrollbar"})))}return r=r&&r.hasOwnProperty("default")?r.default:r,t=t&&t.hasOwnProperty("default")?t.default:t,s.propTypes={children:r.oneOfType([r.node,r.func])},s});

package.json

 {
   "name": "simplebar-react",
-  "version": "1.2.1",
+  "version": "1.3.0-alpha.0",
   "description": "React component for SimpleBar",
@@ -29,3 +29,3 @@ "files": [
     "prop-types": "^15.6.1",
-    "simplebar": "^4.2.1"
+    "simplebar": "^4.3.0-alpha.0"
   },
@@ -51,3 +51,3 @@ "peerDependencies": {
   },
-  "gitHead": "0a1afb8031580a30485831ccdabf81f688907f54"
+  "gitHead": "ff2e4ddab7e2b26dea09de9938f7c9f9e244a5e3"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9906

increased by28.32%

Lines of code

158

increased by41.07%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedsimplebar@4.3.0-alpha.1(transitive)

• - Removedsimplebar@4.2.3(transitive)

• Updatedsimplebar@^4.3.0-alpha.0