Unverified Commit 962aa12b authored by Hanwen Cheng's avatar Hanwen Cheng Committed by GitHub
Browse files

fix: add custom scroll view with custom scroll bar (#511)

* fix: add custom scroll view with custom scroll bar

* add copy right info for new file
parent 9bedd414
Pipeline #73188 passed with stages
in 17 minutes and 39 seconds
// Copyright 2015-2019 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
'use strict';
import React from 'react';
import { Animated, ScrollView, StyleSheet, View } from 'react-native';
import colors from '../colors';
export default class CustomScrollview extends React.PureComponent {
state = {
indicator: new Animated.Value(0),
visible: false,
visibleHeight: 0,
wholeHeight: 1
};
render() {
const indicatorSize =
this.state.wholeHeight > this.state.visibleHeight
? (this.state.visibleHeight * this.state.visibleHeight) /
this.state.wholeHeight
: this.state.visibleHeight;
const difference =
this.state.visibleHeight > indicatorSize
? this.state.visibleHeight - indicatorSize
: 1;
return (
<View style={this.props.containerStyle}>
<ScrollView
showsVerticalScrollIndicator={false}
onContentSizeChange={(width, height) => {
this.setState({ wholeHeight: height });
}}
onLayout={({
nativeEvent: {
layout: { height }
}
}) => this.setState({ visibleHeight: height })}
scrollEventThrottle={16}
onScroll={Animated.event([
{ nativeEvent: { contentOffset: { y: this.state.indicator } } }
])}
{...this.props}
>
{this.props.children}
</ScrollView>
<Animated.View
style={[
styles.indicator,
{
height: indicatorSize,
transform: [
{
translateY: Animated.multiply(
this.state.indicator,
this.state.visibleHeight / this.state.wholeHeight
).interpolate({
extrapolate: 'clamp',
inputRange: [0, difference],
outputRange: [0, difference]
})
}
]
}
]}
/>
</View>
);
}
}
const styles = StyleSheet.create({
indicator: {
backgroundColor: colors.bg_text_sec,
borderRadius: 5,
position: 'absolute',
right: 0,
width: 5
}
});
......@@ -17,14 +17,18 @@
'use strict';
import React from 'react';
import { Linking, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Linking, StyleSheet, Text, View } from 'react-native';
import colors from '../colors';
import fonts from '../fonts';
import CustomScrollview from '../components/CustomScrollView';
export default class About extends React.PureComponent {
render() {
return (
<ScrollView style={styles.body} contentContainerStyle={{ padding: 20 }}>
<CustomScrollview
containerStyle={styles.body}
contentContainerStyle={{ padding: 20 }}
>
<Text style={styles.title}>PARITY SIGNER</Text>
<View>
<Text style={styles.text}>
......@@ -81,7 +85,7 @@ export default class About extends React.PureComponent {
.
</Text>
</View>
</ScrollView>
</CustomScrollview>
);
}
}
......
......@@ -17,18 +17,19 @@
'use strict';
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { StyleSheet, View } from 'react-native';
import privacyPolicy from '../../docs/privacy-policy.md';
import colors from '../colors';
import Markdown from '../components/Markdown';
import CustomScrollview from '../components/CustomScrollView';
export default class PrivacyPolicy extends React.PureComponent {
render() {
return (
<View style={styles.body}>
<ScrollView contentContainerStyle={{ paddingHorizontal: 16 }}>
<CustomScrollview contentContainerStyle={{ paddingHorizontal: 16 }}>
<Markdown>{privacyPolicy}</Markdown>
</ScrollView>
</CustomScrollview>
</View>
);
}
......
......@@ -17,7 +17,7 @@
'use strict';
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import toc from '../../docs/terms-and-conditions.md';
import colors from '../colors';
......@@ -27,6 +27,7 @@ import Markdown from '../components/Markdown';
import TouchableItem from '../components/TouchableItem';
import { saveToCAndPPConfirmation } from '../util/db';
import testIDs from '../../e2e/testIDs';
import CustomScrollview from '../components/CustomScrollView';
export default class TermsAndConditions extends React.PureComponent {
state = {
......@@ -46,12 +47,12 @@ export default class TermsAndConditions extends React.PureComponent {
return (
<View style={styles.body} testID={testIDs.TacScreen.tacView}>
<ScrollView
style={styles.scrollView}
<CustomScrollview
containerStyle={styles.scrollView}
contentContainerStyle={{ paddingHorizontal: 16 }}
>
<Markdown>{toc}</Markdown>
</ScrollView>
</CustomScrollview>
{!disableButtons && (
<View>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment