40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { css } from "aphrodite";
|
|
import { estilosGlobales } from "../Estilos";
|
|
import { EstadoLayout } from "./ContenedorHorarios";
|
|
|
|
interface BotonMaxMinProps {
|
|
fnMaximizar: () => void,
|
|
fnMinimizar: () => void,
|
|
estadoActualLayout: () => EstadoLayout, // El nombre del estado actual del layout
|
|
estadoLayoutMax: EstadoLayout // El nombre del estado en el cual el componente esta maximizado
|
|
}
|
|
|
|
export function BotonMaxMin(props: BotonMaxMinProps) {
|
|
const horariosMax = () => props.estadoActualLayout() === props.estadoLayoutMax;
|
|
|
|
const tituloBoton = () => horariosMax() ? "Minimizar" : "Maximizar";
|
|
const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out";
|
|
|
|
const funcionBoton = () => {
|
|
const estaMaximizado = horariosMax();
|
|
if (estaMaximizado) {
|
|
props.fnMinimizar();
|
|
} else {
|
|
props.fnMaximizar();
|
|
}
|
|
};
|
|
|
|
return <div title={tituloBoton()}
|
|
onClick={funcionBoton}
|
|
className={css(
|
|
estilosGlobales.contenedor,
|
|
estilosGlobales.inlineBlock,
|
|
estilosGlobales.contenedorCursor,
|
|
estilosGlobales.contenedorCursorSoft,
|
|
estilosGlobales.contenedorPhospor
|
|
)}
|
|
>
|
|
<i className={css(estilosGlobales.botonPhospor) + " " + iconoBoton()}/>
|
|
</div>
|
|
}
|