This app provides monitoring and information features for the common freifunk user and the technical stuff of a freifunk community.
Code base is taken from a TUM Practical Course project and added here to see if Freifunk Altdorf can use it.
https://www.freifunk-altdorf.de
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
4.8 KiB
183 lines
4.8 KiB
/** |
|
* Copyright (c) 2015-present, Facebook, Inc. |
|
* |
|
* This source code is licensed under the MIT license found in the |
|
* LICENSE file in the root directory of this source tree. |
|
* |
|
* @providesModule Button |
|
* @flow |
|
*/ |
|
'use strict'; |
|
|
|
const ColorPropType = require('ColorPropType'); |
|
const Platform = require('Platform'); |
|
const React = require('React'); |
|
const PropTypes = require('prop-types'); |
|
const StyleSheet = require('StyleSheet'); |
|
const Text = require('Text'); |
|
const TouchableNativeFeedback = require('TouchableNativeFeedback'); |
|
const TouchableOpacity = require('TouchableOpacity'); |
|
const View = require('View'); |
|
|
|
const invariant = require('fbjs/lib/invariant'); |
|
|
|
/** |
|
* A basic button component that should render nicely on any platform. Supports |
|
* a minimal level of customization. |
|
* |
|
* <center><img src="img/buttonExample.png"></img></center> |
|
* |
|
* If this button doesn't look right for your app, you can build your own |
|
* button using [TouchableOpacity](docs/touchableopacity.html) |
|
* or [TouchableNativeFeedback](docs/touchablenativefeedback.html). |
|
* For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). |
|
* Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button). |
|
* |
|
* Example usage: |
|
* |
|
* ``` |
|
* import { Button } from 'react-native'; |
|
* ... |
|
* |
|
* <Button |
|
* onPress={onPressLearnMore} |
|
* title="Learn More" |
|
* color="#841584" |
|
* accessibilityLabel="Learn more about this purple button" |
|
* /> |
|
* ``` |
|
* |
|
*/ |
|
|
|
class Button extends React.Component<{ |
|
title: string, |
|
onPress: () => any, |
|
color?: ?string, |
|
hasTVPreferredFocus?: ?boolean, |
|
accessibilityLabel?: ?string, |
|
disabled?: ?boolean, |
|
testID?: ?string, |
|
hasTVPreferredFocus?: ?boolean, |
|
}> { |
|
static propTypes = { |
|
/** |
|
* Text to display inside the button |
|
*/ |
|
title: PropTypes.string.isRequired, |
|
/** |
|
* Text to display for blindness accessibility features |
|
*/ |
|
accessibilityLabel: PropTypes.string, |
|
/** |
|
* Color of the text (iOS), or background color of the button (Android) |
|
*/ |
|
color: ColorPropType, |
|
/** |
|
* If true, disable all interactions for this component. |
|
*/ |
|
disabled: PropTypes.bool, |
|
/** |
|
* TV preferred focus (see documentation for the View component). |
|
*/ |
|
hasTVPreferredFocus: PropTypes.bool, |
|
/** |
|
* Handler to be called when the user taps the button |
|
*/ |
|
onPress: PropTypes.func.isRequired, |
|
/** |
|
* Used to locate this view in end-to-end tests. |
|
*/ |
|
testID: PropTypes.string, |
|
}; |
|
|
|
render() { |
|
const { |
|
accessibilityLabel, |
|
color, |
|
onPress, |
|
title, |
|
hasTVPreferredFocus, |
|
disabled, |
|
testID, |
|
} = this.props; |
|
const buttonStyles = [styles.button]; |
|
const textStyles = [styles.text]; |
|
if (color) { |
|
if (Platform.OS === 'ios') { |
|
textStyles.push({color: color}); |
|
} else { |
|
buttonStyles.push({backgroundColor: color}); |
|
} |
|
} |
|
const accessibilityTraits = ['button']; |
|
if (disabled) { |
|
buttonStyles.push(styles.buttonDisabled); |
|
textStyles.push(styles.textDisabled); |
|
accessibilityTraits.push('disabled'); |
|
} |
|
invariant( |
|
typeof title === 'string', |
|
'The title prop of a Button must be a string', |
|
); |
|
const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title; |
|
const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; |
|
return ( |
|
<Touchable |
|
accessibilityComponentType="button" |
|
accessibilityLabel={accessibilityLabel} |
|
accessibilityTraits={accessibilityTraits} |
|
hasTVPreferredFocus={hasTVPreferredFocus} |
|
testID={testID} |
|
disabled={disabled} |
|
onPress={onPress}> |
|
<View style={buttonStyles}> |
|
<Text style={textStyles} disabled={disabled}>{formattedTitle}</Text> |
|
</View> |
|
</Touchable> |
|
); |
|
} |
|
} |
|
|
|
const styles = StyleSheet.create({ |
|
button: Platform.select({ |
|
ios: {}, |
|
android: { |
|
elevation: 4, |
|
// Material design blue from https://material.google.com/style/color.html#color-color-palette |
|
backgroundColor: '#2196F3', |
|
borderRadius: 2, |
|
}, |
|
}), |
|
text: Platform.select({ |
|
ios: { |
|
// iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/ |
|
color: '#007AFF', |
|
textAlign: 'center', |
|
padding: 8, |
|
fontSize: 18, |
|
}, |
|
android: { |
|
color: 'white', |
|
textAlign: 'center', |
|
padding: 8, |
|
fontWeight: '500', |
|
}, |
|
}), |
|
buttonDisabled: Platform.select({ |
|
ios: {}, |
|
android: { |
|
elevation: 0, |
|
backgroundColor: '#dfdfdf', |
|
} |
|
}), |
|
textDisabled: Platform.select({ |
|
ios: { |
|
color: '#cdcdcd', |
|
}, |
|
android: { |
|
color: '#a1a1a1', |
|
} |
|
}), |
|
}); |
|
|
|
module.exports = Button;
|
|
|