المكونات المركبة (Compound Components)

<ProgressBar
  label="Uploading..."
  showValue
  showIcon
  icon={<UploadIcon />}
  valuePosition="right"
/>

// path: src/components/progress-bar/use-progress.ts
 
import { useProgressBar } from "@react-aria/progress";
import type { AriaProgressBarProps } from "@react-aria/progress";
import type { HTMLAttributes } from "react";
 
interface Props extends HTMLAttributes<HTMLElement> {}
 
export type UseProgressProps = Props & AriaProgressBarProps;
 
export const useProgress = (props: UseProgressProps) => {
  const {
    value = 0,
    id,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    valueLabel,
    minValue = 0,
    maxValue = 100,
    formatOptions = {
      style: "percent",
    },
    isIndeterminate,
    ...otherProps
  } = props;
 
  const { progressBarProps, labelProps } = useProgressBar({
    id,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    value,
    valueLabel,
    minValue,
    maxValue,
    formatOptions,
    isIndeterminate,
  });
 
  const percentage = Math.min(
    Math.max(((value - minValue) / (maxValue - minValue)) * 100, 0),
    100,
  );
 
  return {
    value,
    percentage,
    isIndeterminate,
    progressBarProps,
    labelProps,
    otherProps,
  };
};
 
export type UseProgressReturn = ReturnType<typeof useProgress>;

const { progressBarProps, labelProps } = useProgressBar({
  id,
  label,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
  value,
  valueLabel,
  minValue,
  maxValue,
  formatOptions,
  isIndeterminate,
});

// path: src/components/progress-bar/progress-context.tsx
 
import { createContext, useContext } from "react";
import type { UseProgressReturn } from "./use-progress";
 
export const ProgressContext = createContext<UseProgressReturn | undefined>(
  undefined,
);
 
export const useProgressContext = () => {
  const context = useContext(ProgressContext);
 
  if (!context) {
    throw new Error("useProgressContext must be used within a ProgressContext");
  }
 
  return context;
};

// path: src/components/progress-bar/progress.tsx
 
interface ProgressBarProps extends UseProgressProps {}
 
export function ProgressBar({
  children,
  className,
  ...props
}: ProgressBarProps) {
  const state = useProgress(props);
 
  return (
    <ProgressContext value={state}>
      <div
        {...state.otherProps}
        {...state.progressBarProps}
        data-indeterminate={state.isIndeterminate || undefined}
        className={className}
      >
        {children}
      </div>
    </ProgressContext>
  );
}

ProgressBar
├── ProgressBarLabel
├── ProgressBarValue
└── ProgressBarTrack
   └── ProgressBarIndicator

interface ProgressBarTrackProps extends React.HTMLAttributes<HTMLDivElement> {}
 
export function ProgressBarTrack({
  children,
  className,
  ...props
}: ProgressBarTrackProps) {
  return (
    <div className={className} {...props}>
      {children}
    </div>
  );
}
 
export function ProgressBarIndicator({
  className,
  style,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  const { percentage } = useProgressContext();
  return (
    <div
      style={{ ...style, width: `${percentage.toFixed(0)}%` }}
      className={className}
      {...props}
    />
  );
}

interface ProgressBarLabelProps
  extends React.HTMLAttributes<HTMLSpanElement> {}
 
export function ProgressBarLabel({
  children,
  className,
  ...props
}: ProgressBarLabelProps) {
  const { labelProps } = useProgressContext();
 
  return (
    <span {...props} {...labelProps} className={className}>
      {children}
    </span>
  );
}

interface ProgressBarValueProps
  extends React.HTMLAttributes<HTMLSpanElement> {}
 
export function ProgressBarValue({
  className,
  ...props
}: ProgressBarValueProps) {
  const { percentage } = useProgressContext();
  return (
    <span className={className} {...props}>
      {percentage.toFixed(0)}%
    </span>
  );
}

function App() {
  const [progressValue] = useState(18);
 
  return (
    <ProgressBar
      value={progressValue}
      minValue={0}
      maxValue={100}
      label="Progress With Label"
      className="..."
    >
      <ProgressBarLabel className="...">Progress With Label</ProgressBarLabel>
 
      <ProgressBarValue className="..." />
 
      <ProgressBarTrack className="...">
        <ProgressBarIndicator className="..." />
      </ProgressBarTrack>
    </ProgressBar>
  );
}

<ProgressBar label="Uploading...">
  <ProgressBarLabel>Uploading...</ProgressBarLabel>
 
  <ProgressBarTrack>
    <ProgressBarIndicator />
  </ProgressBarTrack>
</ProgressBar>

<ProgressBar aria-label="Uploading files">
  <ProgressBarTrack>
    <ProgressBarIndicator />
  </ProgressBarTrack>
</ProgressBar>

<ProgressBar aria-label="Uploading files">
  <ProgressBarValue />
  <ProgressBarTrack>
    <ProgressBarIndicator />
  </ProgressBarTrack>
</ProgressBar>

<ProgressBar label="Uploading files...">
  <ProgressBarLabel>
    <span>Uploading files...</span>
  </ProgressBarLabel>
  <ProgressBarTrack>
    <ProgressBarIndicator />
  </ProgressBarTrack>
</ProgressBar>