Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 1x 1x 15x 1x | import React, { createContext } from 'react';
import { LayerBottomSheet, useLayerBottomSheet } from '@lib/components/LayerBottomSheet';
import { BottomSheet } from 'react-spring-bottom-sheet';
import {
Layer as LayerModel,
LayerType
} from '@uniquegood/realworld-web-interface/lib/models/game/Layer';
import CloseIcon from '@lib/components/icons/Close';
import Layer from '@lib/components/Game/Layer';
import { css } from '@emotion/react';
const LayerBottomSheetContext = createContext<{
openLayerBottomSheet: (layerId: string) => unknown;
}>({
openLayerBottomSheet: async () => {
// pass
}
});
const NO_BOTTOM_SHEET: LayerType[] = ['ar'];
export const useLayerBottomSheetContext = () => React.useContext(LayerBottomSheetContext);
export function LayerBottomSheetProvider({
children,
layerList
}: {
children: React.ReactNode;
layerList: LayerModel[];
}) {
const { isOpen, onClose, currentLayer, open, onSuccess } = useLayerBottomSheet({ layerList });
const value = React.useMemo(() => ({ openLayerBottomSheet: open }), [open]);
const isNoBottomSheet = currentLayer && NO_BOTTOM_SHEET.includes(currentLayer.type);
if (isNoBottomSheet) {
return (
<LayerBottomSheetContext.Provider value={value}>
{children}
{isOpen && (
<>
<Layer layer={currentLayer} onSuccess={onSuccess} onClose={onClose} />
<div css={closeIconWrap}>
<CloseIcon onClick={onClose} />
</div>
</>
)}
</LayerBottomSheetContext.Provider>
);
}
return (
<LayerBottomSheetContext.Provider value={value}>
{children}
<BottomSheet
open={isOpen}
onDismiss={onClose}
snapPoints={({ maxHeight }) => [maxHeight * 0.85]}
blocking={false}
>
{currentLayer && (
<LayerBottomSheet layer={currentLayer} onSuccess={onSuccess} onClose={onClose} />
)}
</BottomSheet>
</LayerBottomSheetContext.Provider>
);
}
const closeIconWrap = css`
position: fixed;
top: 10px;
right: 10px;
z-index: 1003;
cursor: pointer;
`;
|