react95-native
Version:
Refreshed Windows 95 style UI components for your React Native app
216 lines (196 loc) • 6.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _theming = require("../../core/theming");
var _ = require("../..");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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); }
/**
* 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] = (0, _react.useState)(false);
const {
current: visibility
} = _react.default.useRef(new _reactNative.Animated.Value(visible ? 1 : 0));
const scale = 0.5;
_react.default.useEffect(() => {
if (visible) {
_reactNative.Animated.timing(visibility, {
toValue: 1,
duration: 200 * scale,
useNativeDriver: true
}).start();
} else {
_reactNative.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.default.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.default.createElement(_reactNative.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.default.createElement(_reactNative.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.default.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.default.createElement(_.Hourglass, {
size: 32
}) : null, label ? /*#__PURE__*/_react.default.createElement(_.Text, {
theme: theme,
disabled: true,
bold: true,
selectable: false,
style: [styles.label, uppercase && styles.uppercaseLabel, disabled ? {} : {
color: theme.materialText
}]
}, label) : null)));
};
const styles = _reactNative.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;
var _default = (0, _theming.withTheme)(FAB);
exports.default = _default;
//# sourceMappingURL=FAB.js.map