@kwiz/fluentui/dist/controls/progress-bar.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
import { CheckmarkRegular } from '@fluentui/react-icons';
import { isFunction, isNotEmptyString } from '@kwiz/common';
import React from 'react';
import { KnownClassNames } from '../styles/styles';
import { Horizontal } from './horizontal';
import { Section } from './section';
import { Vertical } from './vertical';
const useStyles = makeStyles({
    root: {
        position: "relative"
    },
    stepNumber: {
        border: `2px solid ${tokens.colorNeutralStroke1}`,
        borderRadius: tokens.borderRadiusCircular,
        width: '24px',
        height: '24px',
        position: 'relative',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: tokens.colorNeutralBackground1,
    },
    stepLabel: {
        backgroundColor: tokens.colorNeutralBackground1,
        position: "absolute",
        top: '-10px',
        left: 0,
        right: 0,
        "& > span": {
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            display: "inline-block"
        }
    },
    stepNumberCurrent: {
        border: `2px solid ${tokens.colorBrandBackground}`,
    },
    stepNumberCompleted: {
        border: `2px solid ${tokens.colorBrandBackground}`,
        backgroundColor: tokens.colorBrandBackground,
        color: tokens.colorNeutralBackground1,
    },
    stepNumberClickable: {
        cursor: "pointer"
    },
    stepTitle: {
        fontSize: tokens.fontSizeBase400,
        lineHeight: tokens.lineHeightBase400,
    },
    progressBar: {
        position: "absolute",
        top: "14px"
    },
    stepSpacer: {
        position: "relative"
    }
});
export const ProgressBarEX = React.forwardRef((props, ref) => {
    var _a, _b;
    const classes = useStyles();
    let stepLabels = [];
    for (let i = 0; i < props.steps; i++) {
        const stepClasses = [classes.stepNumber];
        let addLabel = false;
        let canClick = false;
        if (props.step === i) {
            stepClasses.push(classes.stepNumberCurrent);
            if (isNotEmptyString(props.stepLabel))
                addLabel = true;
        }
        else if (props.step > i) {
            stepClasses.push(classes.stepNumberCompleted);
            canClick = isFunction(props.onStepClick);
            if (canClick)
                stepClasses.push(classes.stepNumberClickable);
        }
        let StepIcon = (_a = props.stepIcons) === null || _a === void 0 ? void 0 : _a[i];
        stepLabels.push(_jsx(Section, { css: stepClasses, onClick: canClick ? () => props.onStepClick(i) : undefined, children: StepIcon ? _jsx(StepIcon, {}) : `${i + 1}` }, `step${i}`));
        stepLabels.push(_jsx(Section, { main: true, css: [classes.stepSpacer], children: addLabel && _jsx(Horizontal, { hCentered: true, css: [classes.stepLabel, KnownClassNames.progressBarStepLabel], children: _jsx("span", { children: props.stepLabel }) }, "label") }, `step${i}Spacer`));
    }
    let StepIcon = (_b = props.stepIcons) === null || _b === void 0 ? void 0 : _b[props.steps];
    //add last submit step
    stepLabels.push(_jsx("span", { className: mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted), children: StepIcon ? _jsx(StepIcon, {}) : _jsx(CheckmarkRegular, {}) }, 'stepSubmit'));
    return (_jsxs(Vertical, { css: [classes.root, ...(props.css || [])], children: [_jsx(ProgressBar, { className: classes.progressBar, value: (props.step * 2) + 1, max: props.steps * 2 }), _jsxs(Horizontal, { css: [classes.stepTitle], children: [...stepLabels] })] }));
});
//# sourceMappingURL=progress-bar.js.map