UNPKG

react95-native

Version:

Refreshed Windows 95 style UI components for your React Native app

195 lines (188 loc) 5.2 kB
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