134 lines
4.0 KiB
TypeScript
134 lines
4.0 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Progress — https://app.subframe.com/f023064a5ca0/library?component=Progress_60964db0-a1bf-428b-b9d5-f34cdf58ea77
|
|
*/
|
|
|
|
import React from "react";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface IndicatorProps
|
|
extends React.ComponentProps<typeof SubframeCore.Progress.Indicator> {
|
|
state?: "option-1" | "success" | "error";
|
|
className?: string;
|
|
}
|
|
|
|
const Indicator = React.forwardRef<HTMLDivElement, IndicatorProps>(
|
|
function Indicator(
|
|
{ state = "option-1", className, ...otherProps }: IndicatorProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Progress.Indicator asChild={true} {...otherProps}>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/641ca690 flex h-1.5 w-full flex-col items-start gap-2 rounded-round bg-brand-brand-surface-solid-default transition-all",
|
|
{
|
|
"bg-surface-feedback-solid-negative-default": state === "error",
|
|
"bg-surface-feedback-solid-positive-default": state === "success",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
/>
|
|
</SubframeCore.Progress.Indicator>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface ProgressRootProps
|
|
extends React.ComponentProps<typeof SubframeCore.Progress.Root> {
|
|
state?: "uploading" | "success" | "error";
|
|
cardProgress?: boolean;
|
|
hideLabel?: boolean;
|
|
value?: number;
|
|
label?: React.ReactNode;
|
|
statusText?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const ProgressRoot = React.forwardRef<HTMLDivElement, ProgressRootProps>(
|
|
function ProgressRoot(
|
|
{
|
|
state = "uploading",
|
|
cardProgress = false,
|
|
hideLabel = false,
|
|
value = 30,
|
|
label,
|
|
statusText,
|
|
className,
|
|
...otherProps
|
|
}: ProgressRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Progress.Root asChild={true} value={value} {...otherProps}>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/60964db0 flex w-56 flex-col items-start gap-5",
|
|
{ "flex-row items-center gap-2": cardProgress },
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full items-center justify-between",
|
|
{ hidden: hideLabel || cardProgress }
|
|
)}
|
|
>
|
|
{label ? (
|
|
<span className="text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary">
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
{statusText ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
|
|
{
|
|
"text-text-feedback-negative": state === "error",
|
|
"text-text-feedback-positive": state === "success",
|
|
}
|
|
)}
|
|
>
|
|
{statusText}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="flex w-full flex-col items-start gap-2 overflow-hidden rounded-round bg-surface-neutral-tertiary">
|
|
<Indicator
|
|
state={
|
|
state === "error"
|
|
? "error"
|
|
: state === "success"
|
|
? "success"
|
|
: undefined
|
|
}
|
|
/>
|
|
</div>
|
|
{statusText ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-tertiary",
|
|
{
|
|
inline: cardProgress,
|
|
"text-text-feedback-negative": state === "error",
|
|
"text-text-feedback-positive": state === "success",
|
|
}
|
|
)}
|
|
>
|
|
{statusText}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</SubframeCore.Progress.Root>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const Progress = Object.assign(ProgressRoot, {
|
|
Indicator,
|
|
});
|