react-native-pull-ups
Version:
Native Bottom Sheet Implementations for iOS and Android. Toddler approved.
81 lines (79 loc) • 2.71 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback } from 'react';
import { StyleSheet, View, processColor, requireNativeComponent } from 'react-native';
import { PullUpPropTypes, PullUpDefaultProps } from './types';
/* Props for Native iOS component.
* Not to be confused with the main component. */
const NativePullUp = requireNativeComponent('RNPullUpView');
const styles = StyleSheet.create({
primary: {
position: 'absolute',
left: -1000000
},
sheet: {
flex: 1,
backgroundColor: 'white',
// emulate FittedSheets cornerRadius, for better customization
borderTopRightRadius: 20,
borderTopLeftRadius: 20
}
});
function extractIosStyling(style) {
const {
borderRadius,
borderTopLeftRadius,
borderTopRightRadius,
backgroundColor
} = StyleSheet.flatten(style);
const cornerRadius = borderTopLeftRadius ?? borderTopRightRadius ?? borderRadius ?? 0;
if (typeof cornerRadius !== 'number') throw Error('Border radius must be of type number');
return {
cornerRadius,
contentBackgroundColor: backgroundColor ?? 'transparent'
};
}
function processColors(config) {
const result = {};
for (const [key, val] of Object.entries(config)) {
result[key] = key.endsWith('Color') ? processColor(val) : val;
}
return result;
}
const PullUp = props => {
const {
collapsedHeight,
maxSheetWidth,
modal,
hideable,
dismissable,
tapToDismissModal,
onStateChanged,
iosStyling,
children,
style
} = props;
const onNativeStateChanged = useCallback(evt => {
onStateChanged?.(evt.nativeEvent.state);
}, [onStateChanged]);
const finalStyle = [styles.sheet, style];
const finalIosStyling = processColors({
...extractIosStyling(finalStyle),
...iosStyling
});
return /*#__PURE__*/React.createElement(NativePullUp, _extends({}, props, {
style: styles.primary,
iosStyling: finalIosStyling,
collapsedHeight: collapsedHeight || 0,
maxSheetWidth: maxSheetWidth || 0,
hideable: hideable && (!modal || dismissable),
tapToDismissModal: dismissable && tapToDismissModal,
onStateChanged: onNativeStateChanged
}), /*#__PURE__*/React.createElement(View, {
collapsable: false,
style: finalStyle
}, children));
};
PullUp.propTypes = PullUpPropTypes;
PullUp.defaultProps = PullUpDefaultProps;
export default PullUp;
//# sourceMappingURL=index.ios.js.map