@carbon/react
Version:
React components for the Carbon Design System
186 lines (185 loc) • 6.33 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import PropTypes from 'prop-types';
import React from 'react';
import { TranslateWithId } from '../../types/common';
declare const defaultTranslations: {
readonly 'carbon.progress-step.complete': "Complete";
readonly 'carbon.progress-step.incomplete': "Incomplete";
readonly 'carbon.progress-step.current': "Current";
readonly 'carbon.progress-step.invalid': "Invalid";
};
/**
* Message ids that will be passed to translateWithId().
*/
type TranslationKey = keyof typeof defaultTranslations;
export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
/**
* Provide `<ProgressStep>` components to be rendered in the
* `<ProgressIndicator>`
*/
children?: React.ReactNode;
/**
* Provide an optional className to be applied to the containing node
*/
className?: string;
/**
* Optionally specify the current step array index
*/
currentIndex?: number;
/**
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
*/
onChange?: (data: number) => void;
/**
* Specify whether the progress steps should be split equally in size in the div
*/
spaceEqually?: boolean;
/**
* Determines whether or not the ProgressIndicator should be rendered vertically.
*/
vertical?: boolean;
}
declare function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex, onChange, spaceEqually, vertical, ...rest }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
declare namespace ProgressIndicator {
var propTypes: {
/**
* Provide `<ProgressStep>` components to be rendered in the
* `<ProgressIndicator>`
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Provide an optional className to be applied to the containing node
*/
className: PropTypes.Requireable<string>;
/**
* Optionally specify the current step array index
*/
currentIndex: PropTypes.Requireable<number>;
/**
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
*/
onChange: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Specify whether the progress steps should be split equally in size in the div
*/
spaceEqually: PropTypes.Requireable<boolean>;
/**
* Determines whether or not the ProgressIndicator should be rendered vertically.
*/
vertical: PropTypes.Requireable<boolean>;
};
}
export interface ProgressStepProps extends TranslateWithId<TranslationKey> {
/**
* Provide an optional className to be applied to the containing `<li>` node
*/
className?: string;
/**
* Specify whether the step has been completed
*/
complete?: boolean;
/**
* Specify whether the step is the current step
*/
current?: boolean;
/**
* Provide a description for the `<ProgressStep>`
*/
description?: string;
/**
* Specify whether the step is disabled
*/
disabled?: boolean;
/**
* Index of the current step within the ProgressIndicator
*/
index?: number;
/**
* Specify whether the step is invalid
*/
invalid?: boolean;
/**
* Provide the label for the `<ProgressStep>`
*/
label: string;
/**
* A callback called if the step is clicked or the enter key is pressed
*/
onClick?: (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
/**
* Provide the props that describe a progress step tooltip
*/
overflowTooltipProps?: object;
/**
* Provide an optional secondary label
*/
secondaryLabel?: string;
/**
* The ID of the tooltip content.
*/
tooltipId?: string;
}
declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
declare namespace ProgressStep {
var propTypes: {
/**
* Provide an optional className to be applied to the containing `<li>` node
*/
className: PropTypes.Requireable<string>;
/**
* Specify whether the step has been completed
*/
complete: PropTypes.Requireable<boolean>;
/**
* Specify whether the step is the current step
*/
current: PropTypes.Requireable<boolean>;
/**
* Provide a description for the `<ProgressStep>`
*/
description: PropTypes.Requireable<string>;
/**
* Specify whether the step is disabled
*/
disabled: PropTypes.Requireable<boolean>;
/**
* Index of the current step within the ProgressIndicator
*/
index: PropTypes.Requireable<number>;
/**
* Specify whether the step is invalid
*/
invalid: PropTypes.Requireable<boolean>;
/**
* Provide the label for the `<ProgressStep>`
*/
label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
/**
* A callback called if the step is clicked or the enter key is pressed
*/
onClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide the props that describe a progress step tooltip
*/
overflowTooltipProps: PropTypes.Requireable<object>;
/**
* Provide an optional secondary label
*/
secondaryLabel: PropTypes.Requireable<string>;
/**
* The ID of the tooltip content.
*/
tooltipId: PropTypes.Requireable<string>;
/**
* Optional method that takes in a message id and returns an
* internationalized string.
*/
translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
};
}
export { ProgressIndicator, ProgressStep };