@wordpress/components
Version:
UI components for WordPress.
148 lines (144 loc) • 5.67 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _native = require("@react-navigation/native");
var _stack = require("@react-navigation/stack");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _bottomSheetNavigationContext = require("./bottom-sheet-navigation-context");
var _bottomSheetContext = require("../bottom-sheet-context");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const AnimationSpec = {
animation: 'timing',
config: {
duration: 200,
easing: _reactNativeReanimated.Easing.ease
}
};
const fadeConfig = ({
current
}) => {
return {
cardStyle: {
opacity: current.progress
}
};
};
const options = {
transitionSpec: {
open: AnimationSpec,
close: AnimationSpec
},
headerShown: false,
gestureEnabled: false,
cardStyleInterpolator: fadeConfig,
keyboardHandlingEnabled: false
};
const HEIGHT_ANIMATION_DURATION = 300;
const DEFAULT_HEIGHT = 1;
function BottomSheetNavigationContainer({
children,
animate,
main,
theme,
style,
testID
}) {
const Stack = (0, _element.useRef)((0, _stack.createStackNavigator)()).current;
const navigationContext = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
const {
maxHeight: sheetMaxHeight,
isMaxHeightSet: isSheetMaxHeightSet
} = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
const currentHeight = (0, _reactNativeReanimated.useSharedValue)(navigationContext.currentHeight?.value || DEFAULT_HEIGHT);
const backgroundStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.background, _styles.default.backgroundDark);
const defaultTheme = (0, _element.useMemo)(() => ({
..._native.DefaultTheme,
colors: {
..._native.DefaultTheme.colors,
background: backgroundStyle.backgroundColor
}
}), [backgroundStyle.backgroundColor]);
const _theme = theme || defaultTheme;
const setHeight = (0, _element.useCallback)(height => {
if (height > DEFAULT_HEIGHT && Math.round(height) !== Math.round(currentHeight.value)) {
// If max height is set in the bottom sheet, we clamp
// the new height using that value.
const newHeight = isSheetMaxHeightSet ? Math.min(sheetMaxHeight, height) : height;
const shouldAnimate = animate && currentHeight.value !== DEFAULT_HEIGHT;
if (shouldAnimate) {
currentHeight.value = (0, _reactNativeReanimated.withTiming)(newHeight, {
duration: HEIGHT_ANIMATION_DURATION,
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
});
} else {
currentHeight.value = newHeight;
}
}
}, [animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight]);
const animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
height: currentHeight.value
}));
const screens = (0, _element.useMemo)(() => {
return _element.Children.map(children, child => {
let screen = child;
const {
name,
...otherProps
} = child.props;
if (!main) {
screen = (0, _element.cloneElement)(child, {
...child.props,
isNested: true
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack.Screen, {
name: name,
...otherProps,
children: () => screen
});
});
}, [children, main]);
return (0, _element.useMemo)(() => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [style, animatedStyles],
testID: testID,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheetNavigationContext.BottomSheetNavigationProvider, {
value: {
setHeight,
currentHeight
},
children: main ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_native.NavigationContainer, {
theme: _theme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack.Navigator, {
screenOptions: options,
detachInactiveScreens: false,
children: screens
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack.Navigator, {
screenOptions: options,
detachInactiveScreens: false,
children: screens
})
})
});
}, [_theme, animatedStyles, currentHeight, main, screens, setHeight, style, testID]);
}
var _default = exports.default = BottomSheetNavigationContainer;
//# sourceMappingURL=navigation-container.native.js.map