react-native-unit-components
Version:
Unit React Native components
202 lines (199 loc) • 11.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _BottomSheet = _interopRequireDefault(require("../../helpers/BottomSheet/BottomSheet"));
var _unitMessages = require("../../messages/webMessages/unitMessages");
var _UNBottomSheetComponent = require("./UNBottomSheetComponent.styles");
var _useAppStateListener = require("../../hooks/useAppStateListener");
var _bottomSheet = require("../../types/internal/bottomSheet.types");
var _bottomSheetMessage = require("../../messages/nativeMessages/bottomSheetMessage");
var _helpers = require("../../helpers/store/helpers");
var _useListenerToEvent = require("../../hooks/useListenerToEvent");
var _reactRedux = require("react-redux");
var _UNBottomSheetComponent2 = require("./UNBottomSheetComponent.constants");
var _BottomSheetSlice = require("../../slices/BottomSheetSlice");
var _UNBottomSheetSlotComponent = _interopRequireDefault(require("./components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent"));
var _UNBottomSheetNativeComponent = _interopRequireDefault(require("./components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent"));
var _UNBottomSheetComponent3 = require("./UNBottomSheetComponent.utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 && Object.prototype.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; }
/* eslint-disable @typescript-eslint/no-explicit-any */
const UNBottomSheetComponent = () => {
const dispatch = (0, _reactRedux.useDispatch)();
const isBottomSheetActive = (0, _reactRedux.useSelector)(state => state.bottomSheet.isBottomSheetActive);
const isComponentLoading = (0, _reactRedux.useSelector)(state => state.bottomSheet.isComponentLoading);
const shouldShowBottomSheet = (0, _reactRedux.useSelector)(state => state.bottomSheet.shouldShowBottomSheet);
const nativePlace = (0, _reactRedux.useSelector)(state => state.bottomSheet.nativePlace);
const componentHeight = (0, _reactRedux.useSelector)(state => state.bottomSheet.componentHeight);
const scrollState = (0, _reactRedux.useSelector)(state => state.bottomSheet.scrollState);
const shouldEnableBottomSheetScroll = (0, _reactRedux.useSelector)(state => state.bottomSheet.shouldEnableBottomSheetScroll);
const [renderingType, setRenderingType] = (0, _react.useState)();
const [height, setHeight] = (0, _react.useState)(0);
const [sliderMaxHeight, setSliderMaxHeight] = (0, _react.useState)(_UNBottomSheetComponent2.overFullScreenHeight);
const [nativeComponentData, setNativeComponentData] = (0, _react.useState)();
const [requestRenderingEventData, setRequestRenderingEventData] = (0, _react.useState)();
const [componentParams, setComponentParams] = (0, _react.useState)();
const [currentBottomSheetRenderingMessage, setCurrentBottomSheetRenderingMessage] = (0, _react.useState)();
const isAppActive = (0, _useAppStateListener.useAppStateListener)();
const styles = (0, _UNBottomSheetComponent.getStylesObject)();
(0, _react.useEffect)(() => {
const setHeightFromNativePlace = () => {
switch (nativePlace) {
// In the case of overFullScreen, set the height to the overFullScreenHeight.
case _bottomSheet.BottomSheetNativePlaceType.overFullScreen:
setHeight(_UNBottomSheetComponent2.overFullScreenHeight);
break;
// For modal native place type, set the height to the fullScreenHeight.
case _bottomSheet.BottomSheetNativePlaceType.modal:
setHeight(_UNBottomSheetComponent2.fullScreenHeight);
break;
default:
// In general, we want the bottom sheet to fully contain the component,
// thus adjusting its height to the component height, up to the maximum of overFullScreenHeight.
if (componentHeight) {
setHeight(componentHeight < _UNBottomSheetComponent2.overFullScreenHeight ? componentHeight : _UNBottomSheetComponent2.overFullScreenHeight);
}
break;
}
};
const setSliderMaxHeightFromNativePlace = () => {
if (nativePlace === _bottomSheet.BottomSheetNativePlaceType.modal) {
setSliderMaxHeight(_UNBottomSheetComponent2.fullScreenHeight);
} else {
setSliderMaxHeight(_UNBottomSheetComponent2.overFullScreenHeight);
}
};
// Check if the inner contained component is still loading or the bottom sheet should not be shown.
if (isComponentLoading || !shouldShowBottomSheet) {
// If so, hide the bottom sheet by setting the height to 0.
setHeight(0);
} else {
// If not, display the bottom sheet by calculating and setting the height based on the native place type.
setHeightFromNativePlace();
setSliderMaxHeightFromNativePlace();
}
}, [componentHeight, nativePlace, isComponentLoading, shouldShowBottomSheet]);
(0, _react.useEffect)(() => {
const resetBottomSheetManagerState = () => {
setComponentParams(undefined);
setRequestRenderingEventData(undefined);
setNativeComponentData(undefined);
setRenderingType(undefined);
setHeight(0);
setSliderMaxHeight(_UNBottomSheetComponent2.overFullScreenHeight);
};
if (!isBottomSheetActive) {
dispatch((0, _BottomSheetSlice.resetBottomSheetSlice)());
resetBottomSheetManagerState();
}
}, [isBottomSheetActive, dispatch]);
const requestRendering = rendering => {
if (isBottomSheetActive) {
dispatch((0, _BottomSheetSlice.setShouldShowBottomSheet)(false));
}
handleRequestRendering(rendering);
if (isBottomSheetActive) {
setTimeout(() => dispatch((0, _BottomSheetSlice.setShouldShowBottomSheet)(true)), 400);
} else {
dispatch((0, _BottomSheetSlice.setIsBottomSheetActive)(true));
dispatch((0, _BottomSheetSlice.setShouldShowBottomSheet)(true));
}
};
const handleCloseFlow = () => {
dispatch((0, _BottomSheetSlice.setIsBottomSheetActive)(false));
};
(0, _useListenerToEvent.useListenerToEvent)({
busEventKey: _bottomSheetMessage.BottomSheetNativeMessage.REQUEST_RENDERING,
action: requestRendering
});
(0, _useListenerToEvent.useListenerToEvent)({
busEventKey: _unitMessages.UnitMessage.UNIT_REQUEST_CLOSE_FLOW,
action: handleCloseFlow
});
const handleRequestRendering = rendering => {
if (rendering === currentBottomSheetRenderingMessage) {
return;
} else {
setCurrentBottomSheetRenderingMessage(rendering);
}
dispatch((0, _BottomSheetSlice.setIsComponentLoading)(true));
switch (rendering.type) {
//if slot check if we know this component and want to show it, otherwise get directly the component
case _bottomSheet.BottomSheetRenderingType.Slot:
determineRenderingTypeFromEvent(rendering.data);
break;
case _bottomSheet.BottomSheetRenderingType.NativeComponent:
setupDataForNativeComponent(rendering.data);
break;
default:
break;
}
};
const determineRenderingTypeFromEvent = event => {
const nativeComponentDataFromEvent = (0, _UNBottomSheetComponent3.getNativeComponentDataFromEvent)(event);
if (nativeComponentDataFromEvent) {
setupDataForNativeComponent(nativeComponentDataFromEvent);
return;
}
setupDataForSlotComponent(event);
};
const setupDataForNativeComponent = eventData => {
const nativePlace = eventData.nativePlace ? eventData.nativePlace : _bottomSheet.BottomSheetNativePlaceType.modal;
setRenderingType(_bottomSheet.BottomSheetRenderingType.NativeComponent);
dispatch((0, _BottomSheetSlice.setNativePlace)(nativePlace));
setNativeComponentData(eventData);
dispatch((0, _BottomSheetSlice.setIsComponentLoading)(false)); //todo: work with events?
};
const setupDataForSlotComponent = eventData => {
setRenderingType(_bottomSheet.BottomSheetRenderingType.Slot);
const componentParamsFromEvent = {
componentName: eventData.componentName ? eventData.componentName : componentParams?.componentName,
componentResourceId: eventData.componentResourceId ? eventData.componentResourceId : componentParams?.componentResourceId
};
setComponentParams(componentParamsFromEvent);
dispatch((0, _BottomSheetSlice.setNativePlace)(eventData.requestRenderingEvent.data.nativePlace));
setRequestRenderingEventData(eventData.requestRenderingEvent);
};
const handleWebViewScroll = () => {
if (scrollState === _bottomSheet.ScrollState.unScrollable) return;
dispatch((0, _BottomSheetSlice.setScrollState)(_bottomSheet.ScrollState.onlyWebView));
dispatch((0, _BottomSheetSlice.setShouldEnableBottomSheetScroll)(false));
};
const renderBottomSheetComponent = () => {
switch (renderingType) {
case _bottomSheet.BottomSheetRenderingType.Slot:
return requestRenderingEventData ? /*#__PURE__*/_react.default.createElement(_UNBottomSheetSlotComponent.default, {
requestRenderingEvent: requestRenderingEventData,
componentName: componentParams?.componentName,
componentResourceId: componentParams?.componentResourceId
}) : null;
case _bottomSheet.BottomSheetRenderingType.NativeComponent:
return nativeComponentData ? /*#__PURE__*/_react.default.createElement(_UNBottomSheetNativeComponent.default, {
nativeComponentData: nativeComponentData
}) : null;
default:
return null;
}
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
pointerEvents: isBottomSheetActive ? undefined : 'none',
style: styles.container
}, /*#__PURE__*/_react.default.createElement(_BottomSheet.default, {
isOpen: isBottomSheetActive,
height: height,
sliderMaxHeight: sliderMaxHeight,
onClose: () => dispatch((0, _BottomSheetSlice.setIsBottomSheetActive)(false)),
onOpen: () => dispatch((0, _BottomSheetSlice.setIsBottomSheetActive)(true)),
handleWebViewScroll: () => handleWebViewScroll(),
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
nativePlace: nativePlace,
isComponentLoading: isComponentLoading
}, isAppActive && renderBottomSheetComponent()));
};
var _default = exports.default = (0, _helpers.withReduxStore)(UNBottomSheetComponent);
//# sourceMappingURL=UNBottomSheetComponent.js.map