mobileNative prop;

xobotyi · May 30, 2019 · a0da90a · a0da90a
1 parent 07a3ddc
commit a0da90a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+### v4.0.0-alpha.23
+
+- Added `mobileNative` prop
+
 ### v4.0.0-alpha.21
 
 - Fix: [#71](https://github.com/xobotyi/react-scrollbars-custom/issues/71);

diff --git a/README.md b/README.md
@@ -195,7 +195,10 @@ Whether to create context that will contain scrollbar instance reference.
 `true` - set content's direction RTL, `false` - LTR, `undefined` - autodetect according content's style.
 
 **native** _`:boolean`_ = undefined  
-Do not use custom scrollbars, and render the content in a single div.
+Do not use custom scrollbars, use native ones instead.
+
+**mobileNative** _`:boolean`_ = undefined  
+As `native` but enables only on mobile devices (actually when the `scrollbarWidth` is 0).
 
 **momentum** _`:boolean`_ = true  
 Whether to use momentum scrolling, suitable for iOS (will add `-webkit-overflow-scrolling: touch` to the content element).

diff --git a/package.json b/package.json
@@ -39,10 +39,10 @@
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
-    "@types/jasmine": "^3.3.12",
+    "@types/jasmine": "^3.3.13",
     "@types/karma": "^3.0.2",
     "@types/prop-types": "^15.7.1",
-    "@types/react": "^16.8.15",
+    "@types/react": "^16.8.19",
     "codacy-coverage": "^3.4.0",
     "cross-env": "^5.2.0",
     "husky": "^1.3.1",
@@ -57,11 +57,11 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "rimraf": "^2.6.3",
-    "rollup": "^1.10.1",
+    "rollup": "^1.12.5",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-typescript2": "^0.19.3",
     "simulant": "^0.2.2",
-    "typescript": "^3.4.5"
+    "typescript": "^3.5.1"
   },
   "husky": {
     "hooks": {

diff --git a/src/Scrollbar.tsx b/src/Scrollbar.tsx
@@ -30,6 +30,7 @@ export type ScrollbarProps = ElementPropsWithElementRefAndRenderer & {
 
   momentum?: boolean;
   native?: boolean;
+  mobileNative?: boolean;
 
   noScrollX?: boolean;
   noScrollY?: boolean;
@@ -97,14 +98,17 @@ export type ScrollbarState = {
 
 export type ScrollbarContextValue = { parentScrollbar: Scrollbar | null };
 
-export const ScrollbarContext: React.Context<ScrollbarContextValue> = React.createContext({ parentScrollbar: null });
+export const ScrollbarContext: React.Context<ScrollbarContextValue> = React.createContext({
+  parentScrollbar: null
+} as ScrollbarContextValue);
 
 export default class Scrollbar extends React.Component<ScrollbarProps, ScrollbarState> {
   static contextType = ScrollbarContext;
   static propTypes = {
     createContext: PropTypes.bool,
     rtl: PropTypes.bool,
     native: PropTypes.bool,
+    mobileNative: PropTypes.bool,
     momentum: PropTypes.bool,
     noDefaultStyles: PropTypes.bool,
 
@@ -424,7 +428,8 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       return;
     }
 
-    if (!this.props.native) {
+    if (!this.props.native && !this.props.mobileNative) {
+      //ToDo: move native state to the state so it can be synchronized
       if (!this.holderElement) {
         this.setState(() => {
           throw new Error(
@@ -747,6 +752,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       createContext,
       rtl,
       native,
+      mobileNative,
       momentum,
       noDefaultStyles,
 
@@ -778,7 +784,6 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       maximalThumbYSize,
 
       fallbackScrollbarWidth,
-      scrollbarWidth,
 
       scrollTop,
       scrollLeft,
@@ -813,7 +818,10 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       ...propsHolderProps
     } = this.props;
 
-    if (native) {
+    const scrollbarWidth =
+      typeof propsScrollbarWidth !== "undefined" ? propsScrollbarWidth : util.getScrollbarWidth() || 0;
+
+    if (native || (!scrollbarWidth && mobileNative)) {
       this.elementRefHolder(null);
       this.elementRefWrapper(null);
       this.elementRefTrackX(null);
@@ -856,12 +864,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       return renderDivWithRenderer(scrollerProps, this.elementRefScroller);
     }
 
-    const styles = Scrollbar.calculateStyles(
-      this.props,
-      this.state,
-      this.scrollValues,
-      typeof propsScrollbarWidth !== "undefined" ? propsScrollbarWidth : util.getScrollbarWidth()
-    );
+    const styles = Scrollbar.calculateStyles(this.props, this.state, this.scrollValues, scrollbarWidth);
 
     const holderChildren = [] as Array<React.ReactNode>;
 

diff --git a/tests/Scrollbar.spec.tsx b/tests/Scrollbar.spec.tsx
@@ -565,6 +565,22 @@ describe("Scrollbar", () => {
       );
     });
 
+    it("should render native when `mobileNative` passed and `scrollbarWidth` is 0", done => {
+      ReactDOM.render(
+        <Scrollbar style={{ width: 100, height: 70 }} mobileNative scrollbarWidth={0}>
+          <div style={{ width: 200, height: 210 }} />
+        </Scrollbar>,
+        node,
+        function() {
+          setTimeout(() => {
+            expect(this.scrollerElement.classList.contains("native")).toBeTruthy();
+            expect(this.contentElement.classList.contains("ScrollbarsCustom-Content")).toBeTruthy();
+            done();
+          }, 30);
+        }
+      );
+    });
+
     it("should apply props scroll values", done => {
       ReactDOM.render(
         <Scrollbar style={{ width: 100, height: 70 }} native scrollLeft={20} scrollTop={40}>