mui-tabs - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

esm/Tabs/Tabs.d.ts

@@ -60,3 +60,3 @@ import * as React from 'react';
      *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
+     *  - `fullWidth` will make the tabs grow to use all the available space,
      *  which should be used for small views, like on mobile.
@@ -63,0 +63,0 @@ *  - `standard` will render the default state.

native/Tabs/Tabs.d.ts

 import * as React from 'react';
-import { Animated, ViewProps, ScrollView, ColorValue, ScrollViewProps } from 'react-native';
+import { Animated, ViewProps, TextProps, ScrollView, ColorValue, ScrollViewProps } from 'react-native';
 import type { TabProps } from '../Tab';
@@ -67,3 +67,3 @@ import type { TabValue, ChangeHandler } from '../types';
      *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
+     *  - `fullWidth` will make the tabs grow to use all the available space,
      *  which should be used for small views, like on mobile.
@@ -105,3 +105,3 @@ *  - `standard` will render the default state.
      */
-    scrollViewProps?: Omit<Partial<ScrollViewProps>, 'horizontal' | 'scrollsToTop' | 'scrollEnabled' | 'showsVerticalScrollIndicator' | 'showsHorizontalScrollIndicator'>;
+    scrollViewProps?: Omit<Partial<ScrollViewProps>, 'horizontal' | 'scrollsToTop' | 'showsVerticalScrollIndicator' | 'showsHorizontalScrollIndicator'>;
     /**
@@ -112,2 +112,6 @@ * The component used to render the tabs.
     /**
+     * The component used to render the tabs label.
+     */
+    TabLabelComponent?: React.ComponentType<TextProps>;
+    /**
      * The component used to render the scroll buttons.
@@ -114,0 +118,0 @@ */

native/Tabs/Tabs.js

 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Dimensions, StyleSheet, Animated, I18nManager, View, ScrollView, Easing } from 'react-native';
+import { Dimensions, StyleSheet, Text, Animated, I18nManager, View, ScrollView, Easing } from 'react-native';
 import TabButton from '../TabButton/TabButton.js';
@@ -27,3 +27,3 @@ import flattenSize from '../../utils/esm/flattenSize.js';
 }
-const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+const Tabs = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -47,7 +47,15 @@ value,
     TabComponent = TabButton,
+    TabLabelComponent = Text,
     ScrollButtonComponent = TabButton,
     ...other
   } = props;
+  const {
+    onScroll,
+    scrollEnabled = true,
+    onContentSizeChange,
+    contentContainerStyle,
+    ...otherScrollViewProps
+  } = scrollViewProps;
   const fullWidth = variant === 'fullWidth';
-  const scrollable = variant === 'scrollable';
+  const scrollable = variant === 'scrollable' && scrollEnabled;
   const showScrollButtons = scrollable && scrollButtons;
@@ -227,3 +235,3 @@ const {
     const scrollableAreaContentSize = getScrollableAreaContentWidth();
-    const isEndReached = scrollPositionRef.current + scrollableAreaWidth <= scrollableAreaContentSize - 20;
+    const isEndReached = scrollPositionRef.current + scrollableAreaWidth <= scrollableAreaContentSize - 1;
     let showStartScroll;
@@ -246,3 +254,2 @@ let showEndScroll;
   const handleScroll = event => {
-    var _scrollViewProps$onSc;
     const {
@@ -253,3 +260,3 @@ nativeEvent: {
     } = event;
-    (_scrollViewProps$onSc = scrollViewProps.onScroll) === null || _scrollViewProps$onSc === void 0 ? void 0 : _scrollViewProps$onSc.call(scrollViewProps, event);
+    onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
     scrollPositionRef.current = contentOffset.x;
@@ -279,6 +286,5 @@ updateScrollButtonState();
   const handleScrollViewContentSizeChange = (w, h) => {
-    var _scrollViewProps$onCo;
     scrollSelectedIntoView(false);
     mountedRef.current = true;
-    (_scrollViewProps$onCo = scrollViewProps.onContentSizeChange) === null || _scrollViewProps$onCo === void 0 ? void 0 : _scrollViewProps$onCo.call(scrollViewProps, w, h);
+    onContentSizeChange === null || onContentSizeChange === void 0 ? void 0 : onContentSizeChange(w, h);
   };
@@ -361,2 +367,3 @@ const indicator = indicatorVisibility ? /*#__PURE__*/React.createElement(Animated.View, _extends({}, otherIndicatorProps, {
       value: childValue,
+      LabelComponent: TabLabelComponent,
       ButtonComponent: TabComponent,
@@ -376,10 +383,10 @@ indicator: indicatorVisibility ? selected && !mounted && indicator : selected && (childProps.indicator || tabProps.indicator)
     automaticallyAdjustsScrollIndicatorInsets: false
-  }, scrollViewProps, {
+  }, otherScrollViewProps, {
     ref: scrollViewRef,
     onScroll: handleScroll,
     onContentSizeChange: handleScrollViewContentSizeChange,
-    scrollEnabled: scrollable,
-    contentContainerStyle: [scrollViewProps.contentContainerStyle, centered && styles.centered],
+    contentContainerStyle: [contentContainerStyle, centered && styles.centered],
     horizontal: true,
     scrollsToTop: false,
+    scrollEnabled: scrollable,
     showsVerticalScrollIndicator: false,
@@ -386,0 +393,0 @@ showsHorizontalScrollIndicator: false

package.json

 {
   "name": "mui-tabs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Material UI tabs for React and React Native projects.",
@@ -30,2 +30,6 @@ "author": "Bilal Eren",
   ],
+  "browserslist": [
+    "last 3 versions",
+    "> 5%"
+  ],
   "scripts": {
@@ -32,0 +36,0 @@ "prebuild": "rm -rf dist",

README.md

@@ -8,3 +8,3 @@ # Material UI Tabs
 
-This package was developed based on the [Material UI Tabs](https://mui.com/components/tabs/#main-content) component. [See demo](https://bilaleren.github.io/mui-tabs).
+This package was developed based on the [Material UI Tabs](https://mui.com/components/tabs/#main-content) component. [See example](https://bilaleren.github.io/mui-tabs).
 
@@ -11,0 +11,0 @@ ## Differences

Tabs/Tabs.d.ts

@@ -60,3 +60,3 @@ import * as React from 'react';
      *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
+     *  - `fullWidth` will make the tabs grow to use all the available space,
      *  which should be used for small views, like on mobile.
@@ -63,0 +63,0 @@ *  - `standard` will render the default state.

No alert changes

Improved metrics

Total package byte prevSize

208248

increased by2.14%

Lines of code

5038

increased by0.22%

No dependency changes