react95-native
Version:
Refreshed Windows 95 style UI components for your React Native app
195 lines (188 loc) • 5.2 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useState } from 'react';
import { View, Animated, StyleSheet, TouchableHighlight } from 'react-native';
import { withTheme } from '../../core/theming';
import { Hourglass, Text, Panel, ArrowIcon } from '../..'; // import FABGroup from './FABGroup';
/**
* A floating action button represents the primary action in an application.
*
* <div class="screenshots">
* <img src="screenshots/fab-1.png" />
* <img src="screenshots/fab-2.png" />
* </div>
*
* ## Usage
* ```js
* import * as React from 'react';
* import { StyleSheet } from 'react-native';
* import { FAB } from 'react-native-paper';
*
* const MyComponent = () => (
* <FAB
* style={styles.fab}
* small
* icon="plus"
* onPress={() => console.log('Pressed')}
* />
* );
*
* const styles = StyleSheet.create({
* fab: {
* position: 'absolute',
* margin: 16,
* right: 0,
* bottom: 0,
* },
* })
*
* export default MyComponent;
* ```
*/
// const defaultSize = 56;
// const extendedSize = 48;
// const smallSize = 40;
const defaultSize = 64;
const extendedSize = 56;
const smallSize = 48;
const FAB = ({
icon = true,
small,
label,
accessibilityLabel = label,
accessibilityState,
// animated = true,
// color: customColor,
disabled,
onPress,
onLongPress,
style,
visible = true,
uppercase = false,
loading,
testID,
theme,
...rest
}) => {
const [isPressed, setIsPressed] = useState(false);
const {
current: visibility
} = React.useRef(new Animated.Value(visible ? 1 : 0));
const scale = 0.5;
React.useEffect(() => {
if (visible) {
Animated.timing(visibility, {
toValue: 1,
duration: 200 * scale,
useNativeDriver: true
}).start();
} else {
Animated.timing(visibility, {
toValue: 0,
duration: 150 * scale,
useNativeDriver: true
}).start();
}
}, [visible, scale, visibility]); // const IconComponent = animated ? null : null;
// eslint-disable-next-line no-nested-ternary
const size = label ? extendedSize : small ? smallSize : defaultSize; // const size = label ? defaultSize : extendedSize;
const radius = size / 2;
return /*#__PURE__*/React.createElement(Panel, _extends({
theme: theme
}, rest, {
elevation: disabled ? 0 : 4 // eslint-disable-next-line no-nested-ternary
,
variant: disabled ? 'default' : isPressed ? 'cutout' : 'raised',
radius: radius,
style: [// {
// // opacity: visibility,
// transform: [
// {
// scale: visibility,
// },
// ],
// backgroundColor: disabled ? theme.borderLight : theme.material,
// },
styles.container, disabled && styles.disabled, style],
pointerEvents: visible ? 'auto' : 'none'
}), /*#__PURE__*/React.createElement(TouchableHighlight, {
onPress: onPress,
onLongPress: onLongPress,
onHideUnderlay: () => setIsPressed(false),
onShowUnderlay: () => setIsPressed(true),
underlayColor: "none",
disabled: disabled,
accessibilityLabel: accessibilityLabel,
accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
accessibilityComponentType: "button",
accessibilityRole: "button",
accessibilityState: { ...accessibilityState,
disabled
},
style: styles.touchable,
testID: testID
}, /*#__PURE__*/React.createElement(View, {
style: [styles.content, {
height: size,
width: label ? 'auto' : size,
paddingHorizontal: label ? 16 : 0,
paddingTop: isPressed ? 2 : 0
}],
pointerEvents: "none"
}, icon && loading !== true ? /*#__PURE__*/React.createElement(ArrowIcon, {
theme: theme,
segments: 4,
style: {
marginTop: 2,
width: 32
} // disabled to drop shadow
,
shadowOffset: 1,
disabled: true,
color: disabled ? undefined : theme.materialText
}) : null, loading ? /*#__PURE__*/React.createElement(Hourglass, {
size: 32
}) : null, label ? /*#__PURE__*/React.createElement(Text, {
theme: theme,
disabled: true,
bold: true,
selectable: false,
style: [styles.label, uppercase && styles.uppercaseLabel, disabled ? {} : {
color: theme.materialText
}]
}, label) : null)));
};
const styles = StyleSheet.create({
container: {
elevation: 6,
padding: 0
},
touchable: {},
// standard: {
// height: 56,
// width: 56,
// },
// small: {
// height: 40,
// width: 40,
// },
// extended: {
// height: 48,
// paddingHorizontal: 16,
// },
content: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
label: {
marginHorizontal: 8
},
uppercaseLabel: {
textTransform: 'uppercase'
},
disabled: {
elevation: 0
}
}); // FAB.Group = FABGroup;
export default withTheme(FAB);
//# sourceMappingURL=FAB.js.map