@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
25 lines (24 loc) • 2.17 kB
JavaScript
import { twMerge } from '@vertisanpro/tailwind-merge';
import { nanoid } from 'nanoid';
import React, { useMemo } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
export const Progress = ({ className, color = 'cyan', labelProgress = false, labelText = false, progress, progressLabelPosition = 'inside', size = 'md', textLabel = 'progressbar', textLabelPosition = 'inside', theme: customTheme = {}, ...props }) => {
const id = useMemo(() => nanoid(), []);
const theme = mergeDeep(getTheme().progress, customTheme);
return (React.createElement(React.Fragment, null,
React.createElement("div", { id: id, "aria-label": textLabel, "aria-valuenow": progress, role: "progressbar", ...props },
((textLabel && labelText && textLabelPosition === 'outside') ||
(progress > 0 && labelProgress && progressLabelPosition === 'outside')) && (React.createElement("div", { className: theme.label, "data-testid": "flowbite-progress-outer-label-container" },
textLabel && labelText && textLabelPosition === 'outside' && (React.createElement("span", { "data-testid": "flowbite-progress-outer-text-label" }, textLabel)),
labelProgress && progressLabelPosition === 'outside' && (React.createElement("span", { "data-testid": "flowbite-progress-outer-progress-label" },
progress,
"%")))),
React.createElement("div", { className: twMerge(theme.base, theme.size[size], className) },
React.createElement("div", { style: { width: `${progress}%` }, className: twMerge(theme.bar, theme.color[color], theme.size[size]) },
textLabel && labelText && textLabelPosition === 'inside' && (React.createElement("span", { "data-testid": "flowbite-progress-inner-text-label" }, textLabel)),
progress > 0 && labelProgress && progressLabelPosition === 'inside' && (React.createElement("span", { "data-testid": "flowbite-progress-inner-progress-label" },
progress,
"%")))))));
};
Progress.displayName = 'Progress';