import * as React from "react" ; import { Animated , LayoutRectangle , StyleSheet , View } from "react-native" ; import { editingModeState } from "../Store" ; import { useRecoilState } from "recoil" ; import { OperationSelection } from "./OperationSelection" ; import { Crop } from "./Crop" ; import { Rotate } from "./Rotate" ; import { Blur } from "./Blur" ; import { useState } from "react" ; export function OperationBar ( ) { const [ editingMode ] = useRecoilState ( editingModeState ) ; const getOperationWindow = ( ) => { switch ( editingMode ) { case "crop" : return < Crop />; case "rotate" : return < Rotate />; case "blur" : return < Blur />; default : return null ; } } ; return ( < View style = { styles . container } > < OperationSelection /> { editingMode !== "operation-select" && ( < View style = { [ styles . container , { position : "absolute" } ] } > { getOperationWindow ( ) } < /View>)} < /View>); } const styles = StyleSheet . create ( { container : { height : 160 , width : "100%" , backgroundColor : "#333" , justifyContent : "center" , } , } ) ;