import { default as React } from 'react'; import { BadgeProps } from '../Badge/Badge'; import { TagProps } from '../Tag/Tag'; import { TooltipProps } from '../Tooltip/Tooltip'; import { ActiveTableFilterProps, default as TableFilter } from '../TableComponents/TableFilter/TableFilter'; import { FilterOptions } from '../TableComponents/ColumnFilter/ColumnFilter'; type TableFilterProps = React.ComponentProps; type SortColumnOptionsProps = { name: string; label: string; }; type SortColumnTooltipProps = { content: TooltipProps['tooltipContent']; position?: TooltipProps['position']; maxWidth?: TooltipProps['maxWidth']; }; export type SortByProps = { /** Value used to sort by */ prop: string; /** `True` === 'asc' && `False` === 'desc' */ flip: boolean; /** Should use the `:lowercase` param */ lowerCaseParam?: boolean; }; type ChangeValueProps = { id: number; text: string; value: string | number; keyField: string; label: string; condition: string; type: 'currency' | 'percentage'; actualValue?: string | number; }; export type ActiveFilterProps = { [key: string]: ChangeValueProps; }; export type SortColumnProps = SortColumnPropsSingleValue | SortColumnPropsMultipleValues; type SortColumnFilterBaseProps = { headerText: string; /** Temporary active sort option for secondary filter. This is needed to keep track of changes to the sort before the sort has been applied. (TODO: this prop needs to be required after all instances in consuming apps have been updated) */ secondarySortProp?: string; /** * Content inside of the filter * Making this prop optional as we will be deprecating this prop once we add all the `type` of filter used across all other apps */ children?: React.ReactNode; /** * Callback function to execute if Apply button is clicked from the filter popup. * @param headerText - Name to the popover filter header. * @param selectedColumnFilter - Values of the currently selected options in a object form. * @returns void */ callout: (headerText: string, selectedColumnFilter: ActiveFilterProps) => void; /** Callout invoked when the filter is closed. This helps us to clear any unsaved changes to the filter. (TODO: this prop needs to be required after all instances in consuming apps have been updated) */ closeCallout?: (headerText: string) => void; /** Callout invoked when active sortProp changes. This callout provides sortProp which is currently active. This helps us to keep track of intermediate changes to sortProp before the filter has been applied. (TODO: this prop needs to be required after all instances in consuming apps have been updated) */ onSortChange?: (sortPropName: string) => void; disabled: boolean; /** * Type of a column filter. Currently we support input only of type number * TODO: Make this prop required once we remove above `children` prop */ type?: 'number'; /** * Unique column key to perform the sort * TODO: Make this prop required once we remove above `children` prop */ tableKey?: string; /** Optional callback triggers when any change occurs in the toggle options or on input change */ columnFilterCallback?: (activeFilter: ActiveFilterProps) => void; /** Optional object to display the default selected filter values */ defaultFilter?: { selectedFilterOption: FilterOptions; value: number | string; }; /** Optionally enable filtering by sub-metrics (the change values) */ enableFilterByChangeValues?: boolean; /** Callback function to execute if the reset button is clicked in the filter popover. This is optional for now until all instances in the consuming apps have been updated. */ resetCallback?: (headerText: string) => void; }; type ColumnFilterCurrency = SortColumnFilterBaseProps & { /** * Display currency symbol left aligned inside number input * TODO: Make this prop required once we remove above `children` prop */ textFieldType?: 'currency'; /** Display currency symbol left aligned inside number input (e.g: $) */ currencySymbol: string; }; type ColumnFilterPercentage = SortColumnFilterBaseProps & { /** * Display percentage symbol left aligned inside number input * TODO: Make this prop required once we remove above `children` prop */ textFieldType?: 'percentage'; currencySymbol?: never; }; type SortColumnFilterProps = ColumnFilterPercentage | ColumnFilterCurrency; type SortColumnPropsBase = { /** Label that is displayed for the table column */ label: string; /** Function to update sort direction of the column while also setting the column to active */ sorter: (arg: { activeColumn: SortByProps['prop']; direction: boolean; lowerCaseParam?: SortByProps['lowerCaseParam']; }) => void; /** Optional class */ customClass?: string; /** Optionally add custom JSX. This will be rendered to the right of the column header. */ columnHeaderSubContent?: React.ReactNode; /** This determines the style of the label. It tells the user which column is currently being sorted. */ active: SortByProps; /** Name of the label that we store locally in to the browser */ localStorageName: string; /** This is used if we need to send back `lowercase` in the api params */ lowerCaseParam?: boolean; /** Optional tooltip to be displayed next to the label */ tooltip?: SortColumnTooltipProps; /** This allows us to add a filter for a specific column. The filter is then applied to the table to help narrow down the results of the table. */ filter?: SortColumnFilterProps; /** Table filters that are currently in use. This is to be used with the `filter` prop. */ activeFilters?: TableFilterProps['activeFilters']; /** Optional prop to determine whether to allow sorting for the column */ noSort?: boolean; /** This prop will provide extra space for the column when the `showStickyClasses` boolean is `true` in our tables. */ extraSpaceWhenStickyColumn?: boolean; /** Optional boolean to add a beta tag to the header */ beta?: boolean; /** Optional badge props to render a badge. If provided, badgeProps takes precedence over beta. */ badgeProps?: BadgeProps; /** Optional tag props to render a tag. If provided, tagProps takes precedence over badgeProps. */ tagProps?: TagProps; /** Used for displaying active custom filters if any */ tableHeaderActiveFilters?: ActiveTableFilterProps; /** Optional boolean to split the column labels into two lines */ twoLineLabel?: boolean; }; type SortColumnPropsSingleValue = SortColumnPropsBase & { /** propName is used if there is only 1 sort value */ propName: string; options?: never; }; type SortColumnPropsMultipleValues = SortColumnPropsBase & { propName?: never; /** options are used if there are more than 1 sort values */ options: OptionItem[]; }; declare const SortColumn: ({ label, propName, options, sorter, customClass, active, localStorageName, lowerCaseParam, tooltip, filter, activeFilters, noSort, columnHeaderSubContent, extraSpaceWhenStickyColumn, beta, badgeProps, tagProps, tableHeaderActiveFilters, twoLineLabel, }: SortColumnProps) => React.JSX.Element; export default SortColumn;