Skip to content

Commit

Permalink
fix: re-render header when style theme changes (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
hellohublot authored Jan 19, 2024
1 parent 90ea54b commit 750a406
Show file tree
Hide file tree
Showing 8 changed files with 199 additions and 136 deletions.
27 changes: 0 additions & 27 deletions .github/actions/setup/action.yml

This file was deleted.

21 changes: 21 additions & 0 deletions .github/workflows/package-publish.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
name: package-publish

on: workflow_dispatch

jobs:
package-publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '18.x'
registry-url: 'https://registry.npmjs.org'
- name: Install Package
run: yarn
- name: Build
run: yarn prepare
- name: Publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
run: npm whoami && npm publish --access public
13 changes: 6 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "react-native-tab-page-view",
"version": "0.1.0",
"name": "@onekeyfe/react-native-tab-page-view",
"version": "1.0.0",
"description": "React Native Tab Page View",
"main": "src/index",
"module": "src/index",
"types": "src/index",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/src/index.d.ts",
"react-native": "src/index",
"source": "src/index",
"files": [
Expand All @@ -31,8 +31,7 @@
"typecheck": "tsc --noEmit",
"lint": "eslint \"**/*.{js,ts,tsx}\"",
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
"prepare": "bob build",
"release": "release-it"
"prepare": "bob build"
},
"keywords": [
"react-native",
Expand Down
3 changes: 3 additions & 0 deletions src/ContentFlatList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ export default class ContentFlatList extends Component<ContentFlatListProps> {
};

private _onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
if (event.nativeEvent.layoutMeasurement.width <= 0) {
return;
}
this.props.onScroll && this.props.onScroll(event);
if (this.isDraging) {
return;
Expand Down
20 changes: 12 additions & 8 deletions src/PageContentView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React, { Component } from 'react';
import { View, Animated, Dimensions, PixelRatio } from 'react-native';
import ContentFlatList from './ContentFlatList';
import type { RefObject } from 'react';
import type { FlatListProps, ListRenderItemInfo } from 'react-native';
import type {
FlatListProps,
LayoutChangeEvent,
ListRenderItemInfo,
} from 'react-native';

interface PageContentViewProps extends FlatListProps<any> {
shouldSelectedPageAnimation?: boolean;
Expand Down Expand Up @@ -79,13 +83,13 @@ export default class PageContentView extends Component<PageContentViewProps> {
} catch (e) {}
};

private _onLayout = ({
nativeEvent: {
layout: { width },
},
}: {
nativeEvent: { layout: { width: number } };
}) => {
private _onLayout = (event: LayoutChangeEvent) => {
this.props.onLayout?.(event);
const {
nativeEvent: {
layout: { width },
},
} = event;
const reloadWidth = PixelRatio.roundToNearestPixel(width);
if (reloadWidth !== this.state.scrollViewWidth && reloadWidth > 0) {
this._scrollViewWidthValue.setValue(reloadWidth);
Expand Down
87 changes: 60 additions & 27 deletions src/PageHeaderCursor.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import type { RefObject } from 'react';
import { View, Animated } from 'react-native';
import type { LayoutChangeEvent, LayoutRectangle } from 'react-native';
import type { LayoutRectangle } from 'react-native';

interface PageHeaderCursorProps {
data: any[];
Expand All @@ -9,42 +10,58 @@ interface PageHeaderCursorProps {
renderCursor?: () => React.ReactElement | null;
}

interface PageHeaderCursorState {
itemContainerLayoutList: (LayoutRectangle | undefined)[];
}

export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
override state: {
itemContainerLayoutList: (LayoutRectangle | undefined)[];
} = {
override state: PageHeaderCursorState = {
itemContainerLayoutList: this.props.data.map(() => undefined),
};

public onLayoutItemContainer = (
event: LayoutChangeEvent,
_: any,
index: number
public reloadItemListContainerLayout = (
refList: Array<RefObject<View>>,
scrollRef: RefObject<View>
) => {
const itemContainerLayout = event.nativeEvent.layout;
if (itemContainerLayout == this.state.itemContainerLayoutList[index]) {
return;
}
this.state.itemContainerLayoutList[index] = itemContainerLayout;
let fullLoadItemContainerLayout = true;
this.state.itemContainerLayoutList.forEach((item) => {
if (!item) {
fullLoadItemContainerLayout = false;
}
this.state.itemContainerLayoutList = this.props.data.map(() => undefined);
refList.map((ref, index) => {
ref?.current?.measureLayout(
scrollRef.current as any,
(x: number, y: number, width: number, height: number) => {
if (x + width <= 0) {
return;
}
this.state.itemContainerLayoutList[index] = { x, y, width, height };
if (
this.state.itemContainerLayoutList.findIndex((item) => !item) == -1
) {
this.setState(this.state);
}
}
);
});
if (fullLoadItemContainerLayout) {
this.forceUpdate();
};

private _findPercentCursorWidth = () => {
const { width } = this.props.cursorStyle as any;
if (typeof width == 'string') {
return width.match(/(\d+(\.\d+)?)%/)?.[1];
}
return null;
};

private _findFixCursorWidth = () => {
const { width } = this.props.cursorStyle as any;
if (this._findPercentCursorWidth()) {
return null;
}
return width;
};

private _reloadPageIndexValue = (isWidth: boolean) => {
const fixCursorWidth = this._findFixCursorWidth();
const { left = 0, right = 0 } = this?.props?.cursorStyle as any;
const percentWidth = this._findPercentCursorWidth();
const rangeList = (isIndex: boolean) => {
const itemList = [isIndex ? -1 : 0];
itemList.push(
Expand All @@ -59,7 +76,9 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
: item.x + (item.width - fixCursorWidth) / 2.0;
} else {
const width = item.width - left - right;
return isWidth ? width : item.x + width / 2.0 + left;
return isWidth
? (width * Number(percentWidth ?? 100)) / 100
: item.x + width / 2.0 + left;
}
} else {
return 0;
Expand All @@ -77,11 +96,15 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
});
};

override shouldComponentUpdate(nextProps: PageHeaderCursorProps) {
if (nextProps.data !== this.props.data) {
this.setState({
itemContainerLayoutList: nextProps.data.map(() => false),
});
override shouldComponentUpdate(
nextProps: PageHeaderCursorProps,
nextState: PageHeaderCursorState
) {
if (
nextProps.data !== this.props.data ||
nextProps.cursorStyle !== this.props.cursorStyle ||
nextState !== this.state
) {
return true;
}
return false;
Expand Down Expand Up @@ -110,7 +133,17 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
return (
<View
pointerEvents="none"
style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
style={{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
opacity:
this.state.itemContainerLayoutList.findIndex((item) => !item) == -1
? 1
: 0,
}}
>
<Animated.View style={containerStyle}>
{this.props.renderCursor ? (
Expand Down
Loading

0 comments on commit 750a406

Please sign in to comment.