@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
37 lines • 1.58 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { makeStyles, mergeClasses } from '@fluentui/react-components';
import { isNotEmptyArray } from '@kwiz/common';
import React from 'react';
import { useWindowSize } from '../helpers';
const useStyles = makeStyles({
verticalContainer: {
position: "relative",
['& > div']: {
position: "absolute",
transform: "rotate(90deg)"
}
}
});
export const VerticalContent = (props) => {
const classes = useStyles();
let css = [classes.verticalContainer];
const size = useWindowSize();
let div = React.useRef();
let rotate = React.useRef();
if (isNotEmptyArray(props.css))
css.push(...props.css);
React.useEffect(() => {
if (div.current && rotate.current) {
let rootDiv = div.current;
let rotateDiv = rotate.current;
rootDiv.style.height = `${rotateDiv.clientWidth}px`;
rootDiv.style.width = `${rotateDiv.clientHeight}px`;
rootDiv.style.minHeight = `${rotateDiv.clientWidth}px`;
rootDiv.style.minWidth = `${rotateDiv.clientHeight}px`;
rotateDiv.style.top = `${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
rotateDiv.style.left = `-${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
}
}, [div, rotate, size.height, size.width]);
return (_jsx("div", { ref: div, className: mergeClasses(...css), children: _jsx("div", { ref: rotate, children: props.children }) }));
};
//# sourceMappingURL=vertical-content.js.map