Skip to content

Commit

Permalink
🎨 Format SnackPlayer code snippets
Browse files Browse the repository at this point in the history
  • Loading branch information
@cHaLkdusT
cHaLkdusT committed Mar 16, 2020
1 parent 2ede5fa commit 3f0f4e7
Show file tree
Hide file tree
Showing 67 changed files with 2,027 additions and 1,881 deletions.
68 changes: 33 additions & 35 deletions docs/accessibilityinfo.md
View file
Expand Up @@ -21,58 +21,57 @@ Sometimes it's useful to know whether or not the device has a screen reader that
<block class="functional syntax" />

```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example
import React, { useState, useEffect } from "react";
import { AccessibilityInfo, View, Text, StyleSheet } from "react-native";
import React, {useState, useEffect} from 'react';
import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native';
export default function App() {
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
useEffect(() => {
AccessibilityInfo.addEventListener(
"reduceMotionChanged",
handleReduceMotionToggled
'reduceMotionChanged',
handleReduceMotionToggled,
);
AccessibilityInfo.addEventListener(
"screenReaderChanged",
handleScreenReaderToggled
'screenReaderChanged',
handleScreenReaderToggled,
);
AccessibilityInfo.fetch().then(reduceMotionEnabled => {
AccessibilityInfo.fetch().then((reduceMotionEnabled) => {
setReduceMotionEnabled(reduceMotionEnabled);
});
AccessibilityInfo.fetch().then(screenReaderEnabled => {
AccessibilityInfo.fetch().then((screenReaderEnabled) => {
setScreenReaderEnabled(screenReaderEnabled);
});
return () => {
AccessibilityInfo.removeEventListener(
"reduceMotionChanged",
handleReduceMotionToggled
'reduceMotionChanged',
handleReduceMotionToggled,
);
AccessibilityInfo.removeEventListener(
"screenReaderChanged",
handleScreenReaderToggled
'screenReaderChanged',
handleScreenReaderToggled,
);
};
}, []);
const handleReduceMotionToggled = reduceMotionEnabled => {
const handleReduceMotionToggled = (reduceMotionEnabled) => {
setReduceMotionEnabled(reduceMotionEnabled);
};
const handleScreenReaderToggled = screenReaderEnabled => {
const handleScreenReaderToggled = (screenReaderEnabled) => {
setScreenReaderEnabled(screenReaderEnabled);
};
return (
<View style={styles.container}>
<Text style={styles.status}>
The reduce motion is {reduceMotionEnabled ? "enabled" : "disabled"}.
The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
</Text>
<Text style={styles.status}>
The screen reader is {screenReaderEnabled ? "enabled" : "disabled"}.
The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
</Text>
</View>
);
Expand All @@ -81,21 +80,20 @@ export default function App() {
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
alignItems: 'center',
justifyContent: 'center',
},
status: {
margin: 30
}
margin: 30,
},
});
```

<block class="classical syntax" />

```SnackPlayer name=AccessibilityInfo%20Class%20Component%20Example
import React from 'react';
import { AccessibilityInfo, View, Text, StyleSheet } from 'react-native';
import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native';
export default class AccessibilityStatusExample extends React.Component {
state = {
Expand All @@ -106,39 +104,39 @@ export default class AccessibilityStatusExample extends React.Component {
componentDidMount() {
AccessibilityInfo.addEventListener(
'reduceMotionChanged',
this._handleReduceMotionToggled
this._handleReduceMotionToggled,
);
AccessibilityInfo.addEventListener(
'screenReaderChanged',
this._handleScreenReaderToggled
this._handleScreenReaderToggled,
);
AccessibilityInfo.fetch().then(reduceMotionEnabled => {
this.setState({ reduceMotionEnabled });
AccessibilityInfo.fetch().then((reduceMotionEnabled) => {
this.setState({reduceMotionEnabled});
});
AccessibilityInfo.fetch().then(screenReaderEnabled => {
this.setState({ screenReaderEnabled });
AccessibilityInfo.fetch().then((screenReaderEnabled) => {
this.setState({screenReaderEnabled});
});
}
componentWillUnmount() {
AccessibilityInfo.removeEventListener(
'reduceMotionChanged',
this._handleReduceMotionToggled
this._handleReduceMotionToggled,
);
AccessibilityInfo.removeEventListener(
'screenReaderChanged',
this._handleScreenReaderToggled
this._handleScreenReaderToggled,
);
}
_handleReduceMotionToggled = reduceMotionEnabled => {
this.setState({ reduceMotionEnabled });
_handleReduceMotionToggled = (reduceMotionEnabled) => {
this.setState({reduceMotionEnabled});
};
_handleScreenReaderToggled = screenReaderEnabled => {
this.setState({ screenReaderEnabled });
_handleScreenReaderToggled = (screenReaderEnabled) => {
this.setState({screenReaderEnabled});
};
render() {
Expand Down
26 changes: 13 additions & 13 deletions docs/actionsheetios.md
View file
Expand Up @@ -8,28 +8,28 @@ Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-i
## Example

```SnackPlayer name=ActionSheetIOS&supportedPlatforms=ios
import React, { useState } from "react";
import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native";
import React, {useState} from 'react';
import {ActionSheetIOS, Button, StyleSheet, Text, View} from 'react-native';
export default App = () => {
const [result, setResult] = useState("🔮");
export default (App = () => {
const [result, setResult] = useState('🔮');
const onPress = () =>
ActionSheetIOS.showActionSheetWithOptions(
{
options: ["Cancel", "Generate number", "Reset"],
options: ['Cancel', 'Generate number', 'Reset'],
destructiveButtonIndex: 2,
cancelButtonIndex: 0
cancelButtonIndex: 0,
},
buttonIndex => {
(buttonIndex) => {
if (buttonIndex === 0) {
// cancel action
} else if (buttonIndex === 1) {
setResult(Math.floor(Math.random() * 100) + 1);
} else if (buttonIndex === 2) {
setResult("🔮");
setResult('🔮');
}
}
},
);
return (
Expand All @@ -38,17 +38,17 @@ export default App = () => {
<Button onPress={onPress} title="Show Action Sheet" />
</View>
);
};
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
justifyContent: 'center',
},
result: {
fontSize: 64,
textAlign: "center"
}
textAlign: 'center',
},
});
```

Expand Down
29 changes: 14 additions & 15 deletions docs/activityindicator.md
View file
Expand Up @@ -21,8 +21,8 @@ Displays a circular loading indicator.
<block class="functional syntax" />

```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example
import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import React from 'react';
import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
export default function App() {
return (
Expand All @@ -38,21 +38,21 @@ export default function App() {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
justifyContent: 'center',
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10,
},
});
```

<block class="classical syntax" />

```SnackPlayer name=ActivityIndicator%20Class%20Component%20Example
import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import React, {Component} from 'react';
import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
export default class App extends Component {
render() {
Expand All @@ -70,15 +70,14 @@ export default class App extends Component {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
justifyContent: 'center',
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10,
},
});
```

<block class="endBlock syntax" />
Expand Down

0 comments on commit 3f0f4e7

Please sign in to comment.