Merge pull request #30 from itenl/dev-1.1.7

itenl · web-flow · commit 61e8f887e45b · 2022-04-07T14:05:03.000+08:00
Dev 1.1.7
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -23,7 +23,7 @@
 * [Snapshot](#Snapshot)
 
 ## <a name="features"/>Features
-* 支持为每个 `Screen` 设置下拉刷新与上滑加载更多(生命周期注入形式)
+* 支持为每个 `Screen` 设置下拉刷新与上滑加载更多(生命周期注入或属性注入)
 * Tabs 支持固定自适应与水平滚动两种配置方式
 * 允许为每个 `Screen` 独立配置 `Sticky` 组件
 * 允许为每个 `Tab` 独立配置自定义的徽章
@@ -96,7 +96,52 @@ function App() {
             toProps: {
               xx: 123,
             },
-          },
+          }, {
+            screen: ({
+              layoutHeight,
+              refresh,
+              scrollTo,
+              toTabView,
+              initScreen,
+              onRefresh,
+              onEndReached,
+            }) => {
+              // The code is required
+              initScreen();
+              const [datetime, setDatetime] = useState(Date.now());
+              useEffect(() => {
+                setInterval(() => {
+                  setDatetime(Date.now());
+                }, 1000);
+              }, []);
+              onRefresh((toggled) => {
+                toggled(true);
+                alert("onRefresh start");
+                setTimeout(() => {
+                  toggled(false);
+                  alert("onRefresh stop");
+                }, 3000);
+              });
+              onEndReached(() => {
+                alert("onEndReached");
+              });
+              return (
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "#151723",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text style={{ color: "#ffffff" }}>
+                    Test function component {datetime}
+                  </Text>
+                </View>
+              );
+            },
+            tabLabel: "TestFunctionComponent",
+          }
         ]}
         tabsStyle={{}}
         tabWrapStyle={{}}
@@ -116,7 +161,7 @@ function App() {
         onBeforeEndReached={next => {
           next();
         }}
-        onTabviewChanged={index => {
+        onTabviewChanged={(index, tabLabel, isFirst) => {
           alert(index);
         }}
         header={() => {
@@ -160,7 +205,7 @@ Prop              | Type     | Default     | Description
 **`onEndReachedThreshold`**             | Number    | 0.2          | 触底回调阈值
 **`onBeforeRefresh`**             | Function    | null          | 下拉刷新前置函数, 执行 **`next`** 将执行Screen中 **`onRefresh`** 函数，执行 **`toggled`** 将切换系统loading,可传 true / false 进行指定 (回调含有 **`next`** , **`toggled`** 两个形参)
 **`onBeforeEndReached`**             | Function    | null          | 上滑加载更多前置函数, 执行next将执行Screen中 **`onEndReached`** 函数 (回调含有 **`next`** 形参)
-**`onTabviewChanged`**             | Function    | null          | Tab切换完成回调 (回调含有 **`index`**, **`tabLabel`** 两个形参)
+**`onTabviewChanged`**             | Function    | null          | Tab切换完成回调 (回调含有 **`index`**, **`tabLabel`**, **`isFirst`** 形参)
 **`screenScrollThrottle`**             | Number    | 60          | **`Screen`** 横向滑动时节流参数,单位 (毫秒)
 **`header`**             | Function / JSX Element / Class Component    | null          | 顶部组件 (若是函数需要返回 Element)
 **`stickyHeader`**             | Function / JSX Element / Class Component    | null          | 顶部带吸顶效果组件 (若是函数需要返回 Element)
@@ -224,7 +269,7 @@ Type     | Description
 JSX Element   | 基于当前Tab进行渲染的 徽章 / 悬浮 Tips 等
 
 
-##  <a name="InjectionLifecycle"/>Injection lifecycle to Screen
+##  <a name="InjectionLifecycle"/>Injection lifecycle to Screen(仅在类组件)
 
 Name              | Type     | Description
 ----------------- | -------- | -----------
@@ -243,6 +288,9 @@ Name              | Type     | Description
 **`layoutHeight.header`**            | Number   | Header 高度
 **`layoutHeight.tabs`**            | Number   | Tabs 高度
 **`layoutHeight.screen`**            | Number   | 视图 高度
+**`initScreen`**            | Function   | (仅在函数组件) 如果是函数组件则必须调用
+**`onRefresh`**            | Function   | (仅在函数组件) < [阅读 onRefresh 描述](#InjectionLifecycle) >
+**`onEndReached`**            | Function   | (仅在函数组件) < [阅读 onEndReached 描述](#InjectionLifecycle) >
 
 ##  <a name="InjectionStickyProps"/>Injection props to Sticky
 
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ Based on pure `JS` scripts, without relying on native, no need for `react-native
 * [Snapshot](#Snapshot)
 
 ## <a name="features"/>Features
-* Support to individually set pull-down refresh and up-slide load for each screen (life cycle injection form)
+* Support to individually set pull-down refresh and up-slide load for each screen (Lifecycle injection or props injection)
 * Flex Tabs and multiple Tabs horizontal scrolling support configuration method
 * Allow to set up each Screen’s own Sticky component
 * Custom badges can be configured for each Tab
@@ -96,7 +96,52 @@ function App() {
             toProps: {
               xx: 123,
             },
-          },
+          }, {
+            screen: ({
+              layoutHeight,
+              refresh,
+              scrollTo,
+              toTabView,
+              initScreen,
+              onRefresh,
+              onEndReached,
+            }) => {
+              // The code is required
+              initScreen();
+              const [datetime, setDatetime] = useState(Date.now());
+              useEffect(() => {
+                setInterval(() => {
+                  setDatetime(Date.now());
+                }, 1000);
+              }, []);
+              onRefresh((toggled) => {
+                toggled(true);
+                alert("onRefresh start");
+                setTimeout(() => {
+                  toggled(false);
+                  alert("onRefresh stop");
+                }, 3000);
+              });
+              onEndReached(() => {
+                alert("onEndReached");
+              });
+              return (
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "#151723",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text style={{ color: "#ffffff" }}>
+                    Test function component {datetime}
+                  </Text>
+                </View>
+              );
+            },
+            tabLabel: "TestFunctionComponent",
+          }
         ]}
         tabsStyle={{}}
         tabWrapStyle={{}}
@@ -116,7 +161,7 @@ function App() {
         onBeforeEndReached={next => {
           next();
         }}
-        onTabviewChanged={index => {
+        onTabviewChanged={(index, tabLabel, isFirst) => {
           alert(index);
         }}
         header={() => {
@@ -160,7 +205,7 @@ Prop              | Type     | Default     | Description
 **`onEndReachedThreshold`**             | Number    | 0.2          | Bottom callback threshold
 **`onBeforeRefresh`**             | Function    | null          | Pull down to refresh the pre-functions, execute **`next`** to execute **`onRefresh`** function in Screen, execute **`toggled`** to switch system loading, you can pass true / false to specify (callback contains **`next`**, **`toggled`** two formal parameters)
 **`onBeforeEndReached`**             | Function    | null          | Slide up to load more pre-functions, execute next will execute the **`onEndReached`** function in the Screen (callback contains **`next`** formal parameters)
-**`onTabviewChanged`**             | Function    | null          | Tab switch completion callback (callback contains **`index`**, **`tabLabel`** two formal parameters)
+**`onTabviewChanged`**             | Function    | null          | Tab switch completion callback (callback contains **`index`**, **`tabLabel`**, **`isFirst`** parameters)
 **`screenScrollThrottle`**             | Number    | 60          | **`Screen`** Throttle parameters during lateral sliding, Unit (ms)
 **`header`**             | Function / JSX Element / Class Component    | null          | Top component (if the function needs to return Element)
 **`stickyHeader`**             | Function / JSX Element / Class Component    | null          | Top component (if the function needs to return Element) for sticky
@@ -208,7 +253,7 @@ Name              | Type     | Description
 
 Name              | Type     | Description
 ----------------- | -------- | -----------
-**`screen`**            | Class Component   | Screen class components
+**`screen`**            | Class / Function Component    | Screen components ( If the function component must call initScreen )
 **`sticky`**            | Class Component   | Sticky component, The context of this type of component will be returned in the instance
 **`tabLabel`**            | String   | Tab display name
 **`tabLabelRender`**            | Function   | Custom Tab rendering function, priority is higher than **`tabLabel`**
@@ -222,7 +267,7 @@ Type     | Description
 JSX Element   | Badges/Hovering Tips, etc. rendered based on the current Tab
 
 
-##  <a name="InjectionLifecycle"/>Injection lifecycle to Screen
+##  <a name="InjectionLifecycle"/>Injection lifecycle to Screen (On Class Component) 
 
 Name              | Type     | Description
 ----------------- | -------- | -----------
@@ -241,6 +286,9 @@ Name              | Type     | Description
 **`layoutHeight.header`**            | Number   | Total height of the Header
 **`layoutHeight.tabs`**            | Number   | Total height of the Tabs
 **`layoutHeight.screen`**            | Number   | Total height of the Screen
+**`initScreen`**            | Function   | (On Function Component) If it is a function component, it must be called
+**`onRefresh`**            | Function   | (On Function Component) < [Read onRefresh description](#InjectionLifecycle) >
+**`onEndReached`**            | Function   | (On Function Component) < [Read onEndReached description](#InjectionLifecycle) >
 
 ##  <a name="InjectionStickyProps"/>Injection props to Sticky
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itenl/react-native-scrollable-tabview",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "react-native-scrollable-tabview",
   "main": "index.js",
   "scripts": {
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import Carousel from '@itenl/react-native-snap-carousel';
 import HocComponent from './HocComponent';
 import _throttle from 'lodash.throttle';
 import packagejson from '../package.json';
+import { initScreen, triggerOnce, refreshMap, onRefresh, triggerRefresh, onEndReached, triggerEndReached } from './useRefreshEndReached';
 const deviceWidth = Dimensions.get('window').width;
 
 const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
@@ -231,9 +232,14 @@ export default class ScrollableTabView extends React.Component {
     return (
       props.stacks &&
       props.stacks.map((item, index) => {
-        if (item.screen && !item.screen.__HOCNAME__) {
-          this._makeStacksID(item);
-          item.screen = HocComponent(item.screen, this._setCurrentRef(index, item.__id__), index);
+        if (item.screen) {
+          if (this.isClassCompoent(item.screen) && !item.screen.__HOCNAME__) {
+            this._makeStacksID(item);
+            item.screen = HocComponent(item.screen, this._setCurrentRef(index, item.__id__));
+          } else {
+            this._makeStacksID(item);
+            triggerOnce(item.screen, this._setCurrentRef(index, item.__id__));
+          }
         }
         return item;
       })
@@ -287,12 +293,11 @@ export default class ScrollableTabView extends React.Component {
    */
   _scrollTo = y => {
     if (typeof y == 'number') {
-      this.section &&
-        this.section.scrollToLocation &&
-        this.section.scrollToLocation({
-          itemIndex: 0,
-          viewOffset: 0 - y
-        });
+      this.section?.scrollToLocation({
+        itemIndex: 0,
+        viewOffset: 0 - y,
+        sectionIndex: 0
+      });
     }
   };
 
@@ -320,14 +325,24 @@ export default class ScrollableTabView extends React.Component {
     this.setState({});
   };
 
-  _getProps(props) {
+  _getProps(props, screen) {
     return Object.assign(
       {
         refresh: this._refresh,
         scrollTo: this._scrollTo,
         toTabView: this.toTabView,
         layoutHeight: this.layoutHeight
       },
+      !!screen && {
+        initScreen: () => initScreen(screen),
+        onRefresh: callback => {
+          if (!screen.onRefresh) {
+            screen.onRefresh = () => callback(this._toggledRefreshing);
+          }
+          onRefresh(screen, callback);
+        },
+        onEndReached: callback => onEndReached(screen, callback)
+      },
       props || {}
     );
   }
@@ -337,7 +352,7 @@ export default class ScrollableTabView extends React.Component {
     const ref = this.getCurrentRef();
     if (stacks && stacks.sticky && typeof stacks.sticky == 'function' && ref && stacks.__id__ === ref.__id__) {
       // 用于自动同步 Screen 数据流改变后仅会 render 自身 Screen 的问题，用于自动同步 screenContext 给吸顶组件
-      if (this.props.syncToSticky && !ref.__isOverride__) {
+      if (this.props.syncToSticky && !ref.__isOverride__ && this.isClassCompoent(ref.constructor)) {
         const originalDidUpdate = ref.componentDidUpdate,
           context = this;
         ref.componentDidUpdate = function () {
@@ -437,7 +452,7 @@ export default class ScrollableTabView extends React.Component {
     return <Animated.View style={[styles.tabUnderlineStyle, _tabUnderlineStyle, interpolateAnimated]}></Animated.View>;
   }
 
-  _displayConsole(message, level = CONSOLE_LEVEL.WARN) {
+  _displayConsole(message, level = CONSOLE_LEVEL.LOG) {
     const { errorToThrow } = this.props;
     const pluginName = packagejson.name;
     const msg = `${pluginName}: ${message || ' --- '}`;
@@ -569,6 +584,10 @@ export default class ScrollableTabView extends React.Component {
     return this.layoutHeight['container'] - this.layoutHeight['stickyHeader'] - this.layoutHeight['tabs'];
   }
 
+  isClassCompoent(component) {
+    return !!(component.prototype && component.prototype.isReactComponent);
+  }
+
   _renderItem({ item, index }) {
     const { enableCachePage, fillScreen, fixedTabs, mappingProps } = this.props;
     const screenHeight = this._getScreenHeight();
@@ -585,7 +604,7 @@ export default class ScrollableTabView extends React.Component {
             !enableCachePage && this.state.checkedIndex == index && { minHeight: screenHeight }
           ]}
         >
-          <item.screen {...this._getProps(mappingProps)} {...(item.toProps || {})} />
+          <item.screen {...this._getProps(mappingProps, !this.isClassCompoent(item.screen) && item.screen)} {...(item.toProps || {})} />
         </View>
       )
     );
@@ -595,7 +614,7 @@ export default class ScrollableTabView extends React.Component {
     const next = () => {
       const ref = this.getCurrentRef();
       !ref && this._displayConsole(`The Screen Ref is lost when calling onEndReached. Please confirm whether the Stack is working properly.(index: ${this.state.checkedIndex})`);
-      if (ref && ref.onEndReached && typeof ref.onEndReached === 'function') ref.onEndReached();
+      !!ref && this.isClassCompoent(ref.constructor) ? ref && ref.onEndReached && typeof ref.onEndReached === 'function' && ref.onEndReached() : triggerEndReached(ref);
     };
     if (this.state.checkedIndex != null) {
       const { onBeforeEndReached } = this.props;
@@ -613,7 +632,11 @@ export default class ScrollableTabView extends React.Component {
     const next = () => {
       const ref = this.getCurrentRef();
       !ref && this._displayConsole(`The Screen Ref is lost when calling onRefresh. Please confirm whether the Stack is working properly.(index: ${this.state.checkedIndex})`);
-      ref ? ref.onRefresh && typeof ref.onRefresh === 'function' && ref.onRefresh(this._toggledRefreshing) : this._toggledRefreshing(false);
+      if (ref) {
+        this.isClassCompoent(ref.constructor) ? ref.onRefresh && typeof ref.onRefresh === 'function' && ref.onRefresh(this._toggledRefreshing) : triggerRefresh(ref, this._toggledRefreshing);
+      } else {
+        this._toggledRefreshing(false);
+      }
     };
     const { onBeforeRefresh } = this.props;
     onBeforeRefresh && typeof onBeforeRefresh === 'function' ? onBeforeRefresh(next, this._toggledRefreshing) : next();
@@ -676,7 +699,8 @@ export default class ScrollableTabView extends React.Component {
 
   _refreshControl() {
     const ref = this.getCurrentRef();
-    return <RefreshControl enabled={!!(ref && ref.onRefresh)} refreshing={this.state.isRefreshing} onRefresh={this._onRefresh} />;
+    const enabled = !!(ref && ref.onRefresh) || refreshMap.has(ref);
+    return <RefreshControl enabled={enabled} refreshing={this.state.isRefreshing} onRefresh={this._onRefresh} />;
   }
 
   _onScroll2Vertical(event) {
@@ -740,7 +764,6 @@ export default class ScrollableTabView extends React.Component {
           renderItem={() => {
             return (
               <AnimatedCarousel
-                ref={c => (this.tabview = c)}
                 pagingEnabled={true}
                 inactiveSlideOpacity={1}
                 inactiveSlideScale={1}
@@ -749,7 +772,6 @@ export default class ScrollableTabView extends React.Component {
                 sliderWidth={deviceWidth}
                 itemWidth={deviceWidth}
                 onScrollIndexChanged={this._throttleCallback}
-                initialScrollIndex={this.state.checkedIndex}
                 firstItem={this.state.checkedIndex}
                 onScroll={this._onScrollHandler2Horizontal}
                 {...carouselProps}
diff --git a/src/useRefreshEndReached.js b/src/useRefreshEndReached.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@itenl/react-native-scrollable-tabview",`
`3`		`- "version": "1.1.6",`
	`3`	`+ "version": "1.1.7",`
`4`	`4`	`"description": "react-native-scrollable-tabview",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`