Skip to content

Add additional type-casts for React nodes #7402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 1 commit into from
Jun 15, 2022
Merged

Add additional type-casts for React nodes #7402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/AboutModal/AboutModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,6 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
{...props}
/>,
container
);
) as React.ReactElement;
}
}
94 changes: 57 additions & 37 deletions packages/react-core/src/components/DualListSelector/DualListSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
private removeAllButtonRef = React.createRef<HTMLButtonElement>();
static defaultProps: PickOptional<DualListSelectorProps> = {
children: '',
availableOptions: [] as React.ReactNode[],
availableOptions: [],
availableOptionsTitle: 'Available options',
availableOptionsSearchAriaLabel: 'Available search input',
chosenOptions: [] as React.ReactNode[],
chosenOptions: [],
chosenOptionsTitle: 'Chosen options',
chosenOptionsSearchAriaLabel: 'Chosen search input',
id: getUniqueId('dual-list-selector'),
Expand Down Expand Up @@ -177,11 +177,11 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
constructor(props: DualListSelectorProps) {
super(props);
this.state = {
availableOptions: [...this.props.availableOptions],
availableOptions: [...this.props.availableOptions] as React.ReactNode[],
availableOptionsSelected: [],
availableFilteredOptions: null,
availableTreeFilteredOptions: null,
chosenOptions: [...this.props.chosenOptions],
chosenOptions: [...this.props.chosenOptions] as React.ReactNode[],
chosenOptionsSelected: [],
chosenFilteredOptions: null,
chosenTreeFilteredOptions: null,
Expand All @@ -196,8 +196,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
JSON.stringify(this.props.chosenOptions) !== JSON.stringify(this.state.chosenOptions)
) {
this.setState({
availableOptions: [...this.props.availableOptions],
chosenOptions: [...this.props.chosenOptions]
availableOptions: [...this.props.availableOptions] as React.ReactNode[],
chosenOptions: [...this.props.chosenOptions] as React.ReactNode[]
});
}
}
Expand All @@ -214,7 +214,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
}
if (isTree) {
this.setState({
availableTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
availableTreeFilteredOptions: flattenTreeWithFolders(
(newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
)
});
} else {
this.setState({
Expand All @@ -231,7 +233,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
}
if (isTree) {
this.setState({
chosenTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
chosenTreeFilteredOptions: flattenTreeWithFolders(
(newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
)
});
} else {
this.setState({
Expand Down Expand Up @@ -271,16 +275,20 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
this.setState(prevState => {
const movedOptions =
prevState.availableTreeFilteredOptions ||
flattenTreeWithFolders(prevState.availableOptions as DualListSelectorTreeItemData[]);
flattenTreeWithFolders((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
Copy link
Contributor

@tlabaj tlabaj Jun 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious. Why unknown here and not any?

Copy link
Contributor Author

@jonkoops jonkoops Jun 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The unknown keyword still allows a stricter subset of type checking, whereas any disables all checks. But in this case I used unknown as it was the recommendation by the compiler.

const newAvailable = prevState.availableOptions
.map(opt => Object.assign({}, opt))
.filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
.filter(item =>
filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions)
) as React.ReactNode[];

const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
const currChosen = flattenTree((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
const nextChosenOptions = currChosen.concat(movedOptions);
const newChosen = this.createMergedCopy()
.map(opt => Object.assign({}, opt))
.filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
.filter(item =>
filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
) as React.ReactNode[];

this.props.addAll && this.props.addAll(newAvailable, newChosen);
this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
Expand Down Expand Up @@ -327,15 +335,17 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
const newAvailable = prevState.availableOptions
.map(opt => Object.assign({}, opt))
.filter(item =>
filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
);

// Get next chosen options from current + new nodes and remap from base
const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
const currChosen = flattenTree((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
const newChosen = this.createMergedCopy()
.map(opt => Object.assign({}, opt))
.filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
.filter(item =>
filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
) as React.ReactNode[];

this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
Expand Down Expand Up @@ -379,16 +389,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
this.setState(prevState => {
const movedOptions =
prevState.chosenTreeFilteredOptions ||
flattenTreeWithFolders(prevState.chosenOptions as DualListSelectorTreeItemData[]);
flattenTreeWithFolders((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);

const newChosen = prevState.chosenOptions
.map(opt => Object.assign({}, opt))
.filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
.filter(item => filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions));
const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
const nextAvailableOptions = currAvailable.concat(movedOptions);
const newAvailable = this.createMergedCopy()
.map(opt => Object.assign({}, opt))
.filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
.filter(item =>
filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
) as React.ReactNode[];

this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
Expand Down Expand Up @@ -432,14 +444,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
// Remove selected chosen nodes from current chosen nodes
const newChosen = prevState.chosenOptions
.map(opt => Object.assign({}, opt))
.filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked));
.filter(item =>
filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked)
);

// Get next chosen options from current and remap from base
const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
const newAvailable = this.createMergedCopy()
.map(opt => Object.assign({}, opt))
.filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
.filter(item =>
filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
) as React.ReactNode[];

this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
Expand Down Expand Up @@ -530,7 +546,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
panelOptions = chosenOptions
.map(opt => Object.assign({}, opt))
.filter(item =>
filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
filterTreeItemsWithoutFolders((item as unknown) as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
);
} else {
panelOptions = chosenOptions;
Expand All @@ -540,16 +556,19 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
panelOptions = availableOptions
.map(opt => Object.assign({}, opt))
.filter(item =>
filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, availableTreeFilteredOptions)
filterTreeItemsWithoutFolders(
(item as unknown) as DualListSelectorTreeItemData,
availableTreeFilteredOptions
)
);
} else {
panelOptions = availableOptions;
}
}
const checkedOptionTree = panelOptions
.map(opt => Object.assign({}, opt))
.filter(item => filterTreeItems(item as DualListSelectorTreeItemData, [itemData.id]));
const flatTree = flattenTreeWithFolders(checkedOptionTree as DualListSelectorTreeItemData[]);
.filter(item => filterTreeItems((item as unknown) as DualListSelectorTreeItemData, [itemData.id]));
const flatTree = flattenTreeWithFolders((checkedOptionTree as unknown) as DualListSelectorTreeItemData[]);

const prevChecked = isChosen ? this.state.chosenTreeOptionsChecked : this.state.availableTreeOptionsChecked;
let updatedChecked = [] as string[];
Expand Down Expand Up @@ -626,23 +645,24 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
availableOptionsStatus ||
(isTree
? `${
filterFolders(availableOptions as DualListSelectorTreeItemData[], availableTreeOptionsChecked).length
} of ${flattenTree(availableOptions as DualListSelectorTreeItemData[]).length} items selected`
filterFolders((availableOptions as unknown) as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
.length
} of ${flattenTree((availableOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
: `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
const chosenOptionsStatusToDisplay =
chosenOptionsStatus ||
(isTree
? `${filterFolders(chosenOptions as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length} of ${
flattenTree(chosenOptions as DualListSelectorTreeItemData[]).length
} items selected`
? `${
filterFolders((chosenOptions as unknown) as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length
} of ${flattenTree((chosenOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
: `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);

const available = isTree
? availableOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, false))
: availableOptions;
const chosen = isTree
? chosenOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, true))
: chosenOptions;
const available = (isTree
? availableOptions.map(item => this.mapChecked((item as unknown) as DualListSelectorTreeItemData, false))
: availableOptions) as React.ReactNode[];
const chosen = (isTree
? chosenOptions.map(item => this.mapChecked((item as unknown) as DualListSelectorTreeItemData, true))
: chosenOptions) as React.ReactNode[];

return (
<DualListSelectorContext.Provider value={{ isTree }}>
Expand Down
18 changes: 10 additions & 8 deletions packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
onOptionSelect,
onOptionCheck,
title = '',
options = [] as React.ReactNode[],
options = [],
selectedOptions = [],
isSearchable = false,
searchInputAriaLabel = '',
Expand All @@ -87,11 +87,11 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
// only called when search input is dynamically built
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
let filtered;
let filtered: React.ReactNode[];
if (isTree) {
filtered = (options as DualListSelectorTreeItemData[])
filtered = options
.map(opt => Object.assign({}, opt))
.filter(item => filterInput(item as DualListSelectorTreeItemData, newValue));
.filter(item => filterInput((item as unknown) as DualListSelectorTreeItemData, newValue));
} else {
filtered = options.filter(option => {
if (displayOption(option)) {
Expand All @@ -110,7 +110,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
// only called when options are passed via options prop and isTree === true
const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
if (filterOption) {
return filterOption(item, input);
return filterOption((item as unknown) as React.ReactNode, input);
} else {
if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
return true;
Expand Down Expand Up @@ -200,10 +200,12 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
<DualListSelectorTree
data={
isSearchable
? (options as DualListSelectorTreeItemData[])
? ((options
.map(opt => Object.assign({}, opt))
.filter(item => filterInput(item as DualListSelectorTreeItemData, input))
: (options as DualListSelectorTreeItemData[])
.filter(item =>
filterInput((item as unknown) as DualListSelectorTreeItemData, input)
) as unknown) as DualListSelectorTreeItemData[])
: ((options as unknown) as DualListSelectorTreeItemData[])
}
onOptionCheck={onOptionCheck}
id={`${id}-tree`}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
onDrillIn(
menuId,
typeof drilldownMenu === 'function'
? drilldownMenu().props.id
? (drilldownMenu() as any).props.id
: (drilldownMenu as React.ReactElement).props.id,
itemId
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/MenuToggle/MenuToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
<React.Fragment>
{icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
<span className="pf-c-menu-toggle__text">{children}</span>
{badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
{badge && <span className={css(styles.menuToggleCount)}>{badge as React.ReactNode}</span>}
<span className={css(styles.menuToggleControls)}>
<span className={css(styles.menuToggleToggleIcon)}>
<CaretDownIcon aria-hidden />
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
ouiaSafe={ouiaSafe}
/>,
container
);
) as React.ReactElement;
}
}
9 changes: 6 additions & 3 deletions packages/react-core/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
typeaheadFilteredChildren =
typeaheadInputValue.toString() !== ''
? React.Children.map(children, group => {
if (React.isValidElement(group) && group.type === SelectGroup) {
if (
React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
group.type === SelectGroup
) {
const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
SelectGroupProps
>[]).filter(childFilter);
Expand Down Expand Up @@ -605,8 +608,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
optionContainerRef: React.ReactNode,
index: number
) => {
this.refCollection[index] = [optionRef as HTMLElement, favoriteRef as HTMLElement];
this.optionContainerRefCollection[index] = optionContainerRef as HTMLElement;
this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
};

handleMenuKeys = (index: number, innerIndex: number, position: string) => {
Expand Down
5 changes: 4 additions & 1 deletion packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,10 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
</Button>
</div>
{isExpanded
? ReactDOM.createPortal(children, expandableContentRef.current.firstElementChild)
? (ReactDOM.createPortal(
children,
expandableContentRef.current.firstElementChild
) as React.ReactElement)
: children}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-table/src/components/Table/Body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
}
const mappedCell: IMappedCell = {
[headerData[cellIndex + additionalColsIndexShift].property]: {
title: mappedCellTitle,
title: mappedCellTitle as React.ReactNode,
formatters,
props: {
isVisible: true,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-table/src/components/Table/utils/decorators/cellActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const cellActions = (
extraData={extraData}
actionsToggle={actionsToggle}
>
{label}
{label as React.ReactNode}
</ActionsColumn>
)
}
Expand Down
8 changes: 6 additions & 2 deletions packages/react-table/src/components/Table/utils/decorators/collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,18 @@ export const collapsible: IFormatter = (
id={expandId + rowId}
{...customProps}
>
{value}
{value as React.ReactNode}
</CollapseColumn>
)
};
};

export const expandable: IFormatter = (value: IFormatterValueType, { rowData }: IExtra) =>
rowData && rowData.hasOwnProperty('parent') ? <ExpandableRowContent>{value}</ExpandableRowContent> : value;
rowData && rowData.hasOwnProperty('parent') ? (
<ExpandableRowContent>{value as React.ReactNode}</ExpandableRowContent>
) : (
value
);

export const expandedRow = (colSpan?: number) => {
const expandedRowFormatter = (
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/utils/decorators/info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const info = ({ tooltip, tooltipProps, popover, popoverProps, className,
ariaLabel={ariaLabel}
className={className}
>
{value}
{value as React.ReactNode}
</HeaderCellInfoWrapper>
) : (
<HeaderCellInfoWrapper
Expand All @@ -25,7 +25,7 @@ export const info = ({ tooltip, tooltipProps, popover, popoverProps, className,
ariaLabel={ariaLabel}
className={className}
>
{value}
{value as React.ReactNode}
</HeaderCellInfoWrapper>
)
});
Expand Down
Loading