status-im/react-native-blur
2
0
Fork 0
mirror of https://github.com/status-im/react-native-blur.git synced 2025-01-12 09:34:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #351 from react-native-community/@vonovak/actually-use-prettier

Browse Source 
enable prettier by default
This commit is contained in:
Mikael Sand 2020-04-10 01:33:08 +03:00 committed by GitHub
commit 47521c1dc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 70 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc
View File

@ -1,8 +1,6 @@
{ {
"requirePragma": true,
"singleQuote": true, "singleQuote": true,
"trailingComma": "all", "trailingComma": "all",
"bracketSpacing": false, "bracketSpacing": false,
"jsxBracketSameLine": true, "jsxBracketSameLine": true
"parser": "flow"
} }

84
example/App.js
View File

@ -2,7 +2,7 @@
* Basic [iOS] Example for react-native-blur * Basic [iOS] Example for react-native-blur
* https://github.com/react-native-community/react-native-blur * https://github.com/react-native-community/react-native-blur
*/ */
import React, { Component } from 'react'; import React, {Component} from 'react';
import { import {
Image, Image,
SegmentedControlIOS, SegmentedControlIOS,
@ -13,7 +13,7 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
import { BlurView, VibrancyView } from '@react-native-community/blur'; import {BlurView, VibrancyView} from '@react-native-community/blur';
export default class Basic extends Component { export default class Basic extends Component {
constructor(props) { constructor(props) {
@ -37,7 +37,9 @@ export default class Basic extends Component {
} }
_onVibrancyChange(event) { _onVibrancyChange(event) {
this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex}); this.setState({
vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex,
});
} }
_onVibrancyValueChange(value) { _onVibrancyValueChange(value) {
@ -62,17 +64,22 @@ export default class Basic extends Component {
blurAmount={100} blurAmount={100}
reducedTransparencyFallbackColor={'pink'} reducedTransparencyFallbackColor={'pink'}
style={[styles.blurView]}> style={[styles.blurView]}>
<Text style={[styles.text, { color: tintColor }]}> <Text style={[styles.text, {color: tintColor}]}>
Blur component ({platform}) Blur component ({platform})
</Text> </Text>
{Platform.OS === 'ios' && {Platform.OS === 'ios' && (
<SegmentedControlIOS <SegmentedControlIOS
values={['xlight', 'light', 'dark', 'regular', 'prominent']} values={['xlight', 'light', 'dark', 'regular', 'prominent']}
selectedIndex={this.state.blurActiveSegment} selectedIndex={this.state.blurActiveSegment}
onChange={(event) => {this._onBlurChange(event);}} onChange={(event) => {
onValueChange={(value) => {this._onBlurValueChange(value);}} this._onBlurChange(event);
tintColor={tintColor} }}
/>} onValueChange={(value) => {
this._onBlurValueChange(value);
}}
tintColor={tintColor}
/>
)}
</BlurView> </BlurView>
</View> </View>
@ -81,25 +88,27 @@ export default class Basic extends Component {
VibrancyView is only supported on iOS, and must contain child views, VibrancyView is only supported on iOS, and must contain child views,
otherwise the vibrancy effect doesn't work. otherwise the vibrancy effect doesn't work.
*/ */
Platform.OS === 'ios' && Platform.OS === 'ios' && (
<VibrancyView <VibrancyView
blurType={this.state.vibrancyBlurType} blurType={this.state.vibrancyBlurType}
blurAmount={10} blurAmount={10}
reducedTransparencyFallbackColor={'pink'} reducedTransparencyFallbackColor={'pink'}
style={[styles.container, styles.blurContainer]}> style={[styles.container, styles.blurContainer]}>
<Text style={styles.text}>Vibrancy component (iOS-only)</Text>
<Text style={styles.text}> <SegmentedControlIOS
Vibrancy component (iOS-only) values={['xlight', 'light', 'dark', 'regular', 'prominent']}
</Text> selectedIndex={this.state.vibrancyActiveSegment}
onChange={(event) => {
<SegmentedControlIOS this._onVibrancyChange(event);
values={['xlight', 'light', 'dark', 'regular', 'prominent']} }}
selectedIndex={this.state.vibrancyActiveSegment} onValueChange={(value) => {
onChange={(event) => {this._onVibrancyChange(event);}} this._onVibrancyValueChange(value);
onValueChange={(value) => {this._onVibrancyValueChange(value);}} }}
tintColor="white" tintColor="white"
/> />
</VibrancyView> </VibrancyView>
)
} }
</View> </View>
); );
@ -107,22 +116,21 @@ export default class Basic extends Component {
render() { render() {
return ( return (
<View <View style={styles.container}>
style={styles.container}>
<Image <Image
source={require('./bgimage.jpeg')} source={require('./bgimage.jpeg')}
resizeMode="cover" resizeMode="cover"
style={styles.img}/> style={styles.img}
/>
{ this.state.showBlurs ? this.renderBlurs() : null } {this.state.showBlurs ? this.renderBlurs() : null}
<View <View style={styles.blurToggle}>
style={styles.blurToggle}>
<Switch <Switch
onValueChange={(value) => this.setState({showBlurs: value})} onValueChange={(value) => this.setState({showBlurs: value})}
value={this.state.showBlurs} /> value={this.state.showBlurs}
/>
</View> </View>
</View> </View>
); );
} }

4
example/index.js
View File

@ -1,7 +1,3 @@
/**
* @format
*/
import {AppRegistry} from 'react-native'; import {AppRegistry} from 'react-native';
import App from './App'; import App from './App';
import {name as appName} from './app.json'; import {name as appName} from './app.json';

5
package.json
View File

@ -5,7 +5,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint src index.js" "lint": "eslint src index.js example"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -42,8 +42,7 @@
}, },
"lint-staged": { "lint-staged": {
"*.{js,json,css,md}": [ "*.{js,json,css,md}": [
"prettier --write", "prettier --write"
"git add"
] ]
} }
} }

17
src/BlurView.android.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, {Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
View, View,
@ -16,7 +16,7 @@ const OVERLAY_COLORS = {
class BlurView extends Component { class BlurView extends Component {
componentDidMount() { componentDidMount() {
DeviceEventEmitter.addListener('ReactNativeBlurError', message => { DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => {
throw new Error(`[ReactNativeBlur]: ${message}`); throw new Error(`[ReactNativeBlur]: ${message}`);
}); });
} }
@ -33,12 +33,12 @@ class BlurView extends Component {
} }
blurRadius() { blurRadius() {
const { blurRadius, blurAmount } = this.props; const {blurRadius, blurAmount} = this.props;
if (blurRadius != null) { if (blurRadius != null) {
if (blurRadius > 25) { if (blurRadius > 25) {
throw new Error( throw new Error(
`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})` `[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`,
); );
} }
return blurRadius; return blurRadius;
@ -55,7 +55,7 @@ class BlurView extends Component {
} }
downsampleFactor() { downsampleFactor() {
const { downsampleFactor, blurRadius } = this.props; const {downsampleFactor, blurRadius} = this.props;
if (downsampleFactor != null) { if (downsampleFactor != null) {
return downsampleFactor; return downsampleFactor;
} }
@ -63,7 +63,7 @@ class BlurView extends Component {
} }
render() { render() {
const { style } = this.props; const {style} = this.props;
return ( return (
<NativeBlurView <NativeBlurView
@ -71,8 +71,7 @@ class BlurView extends Component {
downsampleFactor={this.downsampleFactor()} downsampleFactor={this.downsampleFactor()}
overlayColor={this.overlayColor()} overlayColor={this.overlayColor()}
pointerEvents="none" pointerEvents="none"
style={StyleSheet.compose(styles.transparent, style)} style={StyleSheet.compose(styles.transparent, style)}>
>
{this.props.children} {this.props.children}
</NativeBlurView> </NativeBlurView>
); );
@ -80,7 +79,7 @@ class BlurView extends Component {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
transparent: { backgroundColor: 'transparent' }, transparent: {backgroundColor: 'transparent'},
}); });
BlurView.propTypes = { BlurView.propTypes = {

15
src/BlurView.ios.js
View File

@ -1,9 +1,14 @@
import React, { Component } from 'react'; import React, {Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {View, requireNativeComponent, ViewPropTypes, StyleSheet} from 'react-native'; import {
View,
requireNativeComponent,
ViewPropTypes,
StyleSheet,
} from 'react-native';
class BlurView extends Component { class BlurView extends Component {
setNativeProps = nativeProps => { setNativeProps = (nativeProps) => {
if (this._root) { if (this._root) {
this._root.setNativeProps(nativeProps); this._root.setNativeProps(nativeProps);
} }
@ -12,7 +17,7 @@ class BlurView extends Component {
render() { render() {
return ( return (
<NativeBlurView <NativeBlurView
ref={e => (this._root = e)} ref={(e) => (this._root = e)}
{...this.props} {...this.props}
style={StyleSheet.compose(styles.transparent, this.props.style)} style={StyleSheet.compose(styles.transparent, this.props.style)}
/> />
@ -21,7 +26,7 @@ class BlurView extends Component {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
transparent: { backgroundColor: 'transparent' }, transparent: {backgroundColor: 'transparent'},
}); });
BlurView.propTypes = { BlurView.propTypes = {

6
src/VibrancyView.ios.js
View File

@ -1,9 +1,9 @@
import React, { Component } from 'react'; import React, {Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {requireNativeComponent, StyleSheet} from 'react-native'; import {requireNativeComponent, StyleSheet} from 'react-native';
class VibrancyView extends Component { class VibrancyView extends Component {
setNativeProps = nativeProps => { setNativeProps = (nativeProps) => {
if (this._root) { if (this._root) {
this._root.setNativeProps(nativeProps); this._root.setNativeProps(nativeProps);
} }
@ -20,7 +20,7 @@ class VibrancyView extends Component {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
transparent: { backgroundColor: 'transparent' }, transparent: {backgroundColor: 'transparent'},
}); });
VibrancyView.propTypes = { VibrancyView.propTypes = {