@octopusdeploy/design-system-components/dist/src/components/Form/Timespan/Timespan.d.ts

The design systems component library.

import * as React from "react";
import type { PopoverBasicHelpProps } from "../../Popover";
import type { DescriptionContent } from "../utils/descriptionWithLinks";
/**
 * The value of a Timespan, expressed as the individual time segments.
 * Only the segments relevant to the chosen `units` are read or written.
 */
export interface TimespanValue {
    days?: number;
    hours?: number;
    minutes?: number;
    seconds?: number;
}
/**
 * The combination of segments to display, mirroring the design's type variants.
 */
export type TimespanUnits = "day-hour-minute" | "hour-minute-second" | "minute-second";
export interface TimespanProps {
    /**
     * The label for the field, rendered as the group legend.
     */
    label: string;
    /**
     * The current value of the field.
     */
    value: TimespanValue;
    /**
     * The action to perform when any segment changes. Receives the full value with the changed segment updated.
     */
    onChange: (value: TimespanValue) => void;
    /**
     * Which segments to display. Defaults to "day-hour-minute".
     */
    units?: TimespanUnits;
    /**
     * The description text to display below the label.
     */
    description?: string | DescriptionContent;
    /**
     * Validation message to display below the inputs. Always displayed as an error.
     */
    validationMessage?: string;
    /**
     * Whether the field is disabled.
     */
    disabled?: boolean;
    /**
     * Whether the inputs are read only.
     */
    readOnly?: boolean;
    /**
     * Whether to autofocus the first segment.
     */
    autoFocus?: boolean;
    /**
     * Whether the field is required.
     */
    hasRequiredMarker?: boolean;
    /**
     * Whether to show the optional marker.
     */
    hasOptionalMarker?: boolean;
    /**
     * PopoverBasicHelp component to display additional help information next to the label.
     */
    popover?: React.ReactElement<PopoverBasicHelpProps>;
    /**
     * The name attribute, used to build stable element ids.
     */
    name?: string;
}
/**
 * Timespan for entering a duration across day/hour/minute/second segments.
 *
 * @remarks Only use in pre-approved areas, as in #project-form-uplift if unsure before using.
 *
 * @param props - TimespanProps
 * @param props.label - The label for the field, rendered as the group legend
 * @param props.value - The current value of the field
 * @param props.units - Which segments to display (defaults to "day-hour-minute")
 * @param props.description - The description text to display below the label
 * @param props.validationMessage - Validation message to display
 * @param props.disabled - Whether the field is disabled
 * @param props.readOnly - Whether the inputs are read only
 * @param props.autoFocus - Whether to autofocus the first segment
 * @param props.hasRequiredMarker - Whether the field is required
 * @param props.hasOptionalMarker - Whether to show the optional marker
 * @param props.popover - PopoverBasicHelp component to display additional help information
 * @param props.name - The name attribute, used to build stable element ids
 * @param props.onChange - The action to perform when any segment changes
 *
 * @returns Timespan component
 */
export declare function Timespan({ label, value, onChange, units, description, validationMessage, disabled, readOnly, autoFocus, hasRequiredMarker, hasOptionalMarker, popover, name, }: TimespanProps): React.ReactElement;
export default Timespan;