@ultraviolet/plus
Version:
Ultraviolet Plus
117 lines (116 loc) • 3.84 kB
TypeScript
import { Text } from '@ultraviolet/ui';
import type { ComponentProps, ReactNode } from 'react';
import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types';
type ItemProps = {
amount?: number;
/**
* Number of items that are free. It will be deducted to price of the item.
*/
amountFree?: number;
/**
* if true, zoomIn animation is triggered
*/
animated?: boolean;
children?: ReactNode;
discount?: number;
discountText?: string;
/**
* Hide element from overlay
*/
hideFromOverlay?: boolean;
/**
* Do not set this prop, it is transferred from parent
*/
isDefined?: boolean;
/**
* Do not set this prop, it is transferred from parent
*/
isFirstElement?: boolean;
/**
* Do not set this prop, it is transferred from parent
*/
isLastElement?: boolean;
isPrimaryBackground?: boolean;
/**
* Do not set this prop, it is transferred from parent
*/
iteration?: Iteration;
/**
* String that is displayed on left part of the item, it defines the item
*/
label?: ReactNode;
/**
* Changes label typography variant
*/
labelTextVariant?: ComponentProps<typeof Text>['variant'];
/**
* Changes label typography prominence
*/
labelTextProminence?: ComponentProps<typeof Text>['prominence'];
/**
* If your price has a lot of number after decimal point (ex: 0.0000076) - up 8 fraction digits
*/
longFractionDigits?: boolean;
/**
* Create a range price with [amount - maxAmount] values and prices
*/
maxAmount?: number;
/**
* Price per month
*/
monthlyPrice?: number;
/**
* Remove border bottom of the item
*/
noBorder?: boolean;
/**
* If the price of the item is not based on time enable this prop. ex: 5kg of chocolate is same price over 1 month or 1 hour.
*/
noIteration?: boolean;
noIterationText?: string;
/**
* Remove the price on the right section of the table
*/
noPrice?: boolean;
/**
* Notice to display below the label
*/
notice?: string;
onAmountChange?: (amount: number) => void;
/**
* Hourly price for one unit
*/
price?: number;
priceText?: ReactNode;
productsCallback?: {
add: (product: EstimateProduct) => void;
remove: (product: BareEstimateProduct) => void;
};
/**
* Hide item from overlay if screen width is small
*/
shouldBeHidden?: boolean;
/**
* Display a complementary text on the right of the label
*/
subLabel?: string;
/**
* Increase left padding of the item like
*/
tabulation?: number;
/**
* Text to display in case of not defined value
*/
textNotDefined?: string;
/**
* Display near label, an icon with a tooltip that contains your text
*/
tooltipInfo?: string;
/**
* Unit of your item, examples: GB, MB, Node, Queries, etc.
*/
unit?: 'mb' | 'gb' | 'tb' | 'seconds' | 'minutes' | 'hours' | 'days' | 'months' | 'years' | (string & NonNullable<unknown>);
strikeThrough?: boolean;
};
export declare const Item: import("react").MemoExoticComponent<({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, strikeThrough, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
export {};