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

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Caption1Strong, makeStyles, mergeClasses, ProgressBar, tokens, Tooltip } from '@fluentui/react-components';
import { CheckmarkRegular } from '@fluentui/react-icons';
import { debounce, isFunction, isNotEmptyString } from '@kwiz/common';
import React, { useCallback, useState } from 'react';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { KnownClassNames, mixins } from '../styles/styles';
import { Horizontal } from './horizontal';
import { Section } from './section';
import { Vertical } from './vertical';
export const ProgressBarEXClassNames = {
    hasLabels: "with-label",
    current: "current-step",
    completed: "completed-step"
};
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,
        [`&.${ProgressBarEXClassNames.current}`]: {
            border: `2px solid ${tokens.colorBrandBackground}`,
        },
        [`&.${ProgressBarEXClassNames.completed}`]: {
            border: `2px solid ${tokens.colorBrandBackground}`,
            backgroundColor: tokens.colorBrandBackground,
            color: tokens.colorNeutralBackground1,
        },
    },
    stepLabel: {
        backgroundColor: tokens.colorNeutralBackground1,
        position: "absolute",
        top: '36px',
        left: '-38px',
        right: '-38px',
        "& > span:first-child": Object.assign({ textAlign: "center" }, mixins.multiLineEllipsis2)
    },
    stepNumberClickable: {
        cursor: "pointer"
    },
    stepTitle: {
        fontSize: tokens.fontSizeBase400,
        lineHeight: tokens.lineHeightBase400,
        [`&.${ProgressBarEXClassNames.hasLabels}`]: {
            paddingBottom: '22px'
        }
    },
    progressBar: {
        position: "absolute",
        top: "14px"
    },
    stepSpacer: {
        position: "relative"
    }
});
export const ProgressBarEX = React.forwardRef((props, ref) => {
    var _a, _b;
    const classes = useStyles();
    const ctx = useKWIZFluentContext();
    let stepLabels = [];
    let hasLabel = false;
    const [showTooltip, setShowTooltip] = useState(false);
    const [tooltipClicked, setTooltipClicked] = useState(false);
    const delayHideTooltip = useCallback(debounce(() => {
        setTooltipClicked(false);
        setShowTooltip(false);
    }, 5000), []);
    for (let i = 0; i < props.steps; i++) {
        let showLabel = false;
        const stepClasses = [classes.stepNumber];
        let canClick = false;
        if (props.step === i && isNotEmptyString(props.stepLabel)) {
            showLabel = true;
            hasLabel = true;
        }
        if (props.step === i) {
            stepClasses.push(ProgressBarEXClassNames.current);
        }
        else if (props.step > i) {
            stepClasses.push(ProgressBarEXClassNames.completed);
            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: showLabel && _jsx(Horizontal, { hCentered: true, css: [classes.stepLabel,
                    props.step === i ? ProgressBarEXClassNames.current : props.step > i ? ProgressBarEXClassNames.completed : undefined,
                    KnownClassNames.progressBarStepLabel
                ], children: _jsx(Tooltip, { visible: showTooltip, onVisibleChange: (e, data) => {
                        if (data.visible) {
                            if (!showTooltip)
                                setShowTooltip(true);
                        }
                        else //hide
                         {
                            if (tooltipClicked) //delay hide
                                delayHideTooltip();
                            else //not from click - hide immediately
                                setShowTooltip(false);
                        }
                    }, showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: props.stepLabel, mountNode: ctx.mountNode, children: _jsx(Caption1Strong, { onClick: () => { setTooltipClicked(true); setShowTooltip(true); }, style: { width: `${100 / props.steps}wv` }, 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 && ProgressBarEXClassNames.completed), 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, hasLabel ? ProgressBarEXClassNames.hasLabels : undefined], children: [...stepLabels] })] }));
});
//# sourceMappingURL=progress-bar.js.map