@kwiz/fluentui/dist/controls/stack.js

KWIZ common controls for FluentUI

import { jsx as _jsx } from "react/jsx-runtime";
import { makeStyles } from '@fluentui/react-components';
import { isNotEmptyArray } from '@kwiz/common';
import React from 'react';
import { KnownClassNames, mixins } from '../styles/styles';
import { Section } from './section';
const useStyles = makeStyles({
    horizontal: Object.assign(Object.assign({}, mixins.flex), { flexDirection: 'row' }),
    vertical: Object.assign(Object.assign({}, mixins.flex), { flexDirection: 'column' }),
    wrap: mixins.wrap,
    nogap: mixins.nogap,
    centered: {
        alignItems: "center"
    },
    justified: {
        justifyContent: "center"
    },
    justifiedEvenly: {
        justifyContent: "space-evenly"
    },
    justifiedBetween: {
        justifyContent: "space-between"
    },
    justifiedAround: {
        justifyContent: "space-around"
    },
    reversedVertical: {
        flexDirection: "column-reverse"
    },
    reversedHorizontal: {
        flexDirection: "row-reverse"
    }
});
export const Stack = React.forwardRef((props, ref) => {
    const cssNames = useStyles();
    let css = [
        props.direction === "h" ? KnownClassNames.horizontal : KnownClassNames.vertical,
        props.direction === "h" ? cssNames.horizontal : cssNames.vertical
    ];
    if (props.reversed)
        css.push(props.direction === "h" ? cssNames.reversedHorizontal : cssNames.reversedVertical);
    if (props.wrap)
        css.push(cssNames.wrap);
    if (props.nogap)
        css.push(cssNames.nogap);
    if (props.centered)
        css.push(cssNames.centered);
    switch (props.justified) {
        case "evenly":
            css.push(cssNames.justifiedEvenly);
            break;
        case "between":
            css.push(cssNames.justifiedBetween);
            break;
        case "around":
            css.push(cssNames.justifiedAround);
            break;
        case "centered":
        case true:
            css.push(cssNames.justified);
            break;
    }
    if (isNotEmptyArray(props.css))
        css.push(...props.css);
    return (_jsx(Section, Object.assign({}, props, { css: css, ref: ref })));
});
//# sourceMappingURL=stack.js.map