Open vaelu opened 4 months ago
I found out, that we can pass parent
instead of props
and then use parent.props
.
const pt = {
input: {
// FIXME: any type because parent is not available in InputTextPassThroughMethodOptions
// eslint-disable-next-line @typescript-eslint/no-explicit-any
root: ({ parent }: any) => ({
className: classNames(INPUT_CLASSES, {
'order-2': parent.props.showButtons && parent.props.buttonLayout === "horizontal"
})
})
}
};
However, this still gives a TypeScript error, since parent is not available in InputTextPassThroughMethodOptions
. Is there a way to solve this?
Yes if you look at Accordion.d.ts it has this...
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionTabPassThroughMethodOptions {
props: AccordionTabProps;
parent: AccordionPassThroughMethodOptions;
context: AccordionContext;
}
I think we just need to add parent
in the TS def.
@melloware Probably, yes. TS definitions are written manually in PrimeReact, right?
Yes they are written manually and then the documentation is all generated off the TS. SO the website updates itself on build from the TS
As a workaround (until a fix has been released), you could manually type hint the parent. Example:
export const Tailwind: PrimeReactPTOptions = {
calendar: {
input: {
root: (options: InputTextPassThroughMethodOptions & { parent: CalendarPassThroughMethodOptions }) => ({
className: "foobar"
})
}
}
}
Describe the bug
We noticed in the
InputNumber
component, that PrimeReact does not correctly inherit the props from the parent, so you don't have access to them in the PT you pass to children.Problem
The
InputNumber
component has an input inside, which uses theInputText
component. In the PT presets, this is theinput
property (https://github.com/primefaces/primereact/blob/master/components/lib/passthrough/tailwind/index.js#L808-L812).In our case, we want to order the buttons and inputs with order-1, order-2 and order-3 (like it's done in styled mode). This means we need to style the
InputText
based on props of theInputNumber
(props.showButtons && props.buttonLayout === "horizontal"
).Unfortunately it seems that
props
in this case does not includeshowButtons
orbuttonLayout
, because they are not inherited from their parent componentInputNumber
toInputText
.Workaround 1
I noticed that I can get the props with
props.__parentMetadata.parent.props.showButtons
andprops.__parentMetadata.parent.props.buttonLayout
, which is clearly wrong, becuase __parentMetadata looks like a private property.Workaround 2
Also, it's possible to rewrite the passthrough a bit, so that the props are passed in the parent PT (
input
) instead of theroot
PT of the input.This seems like a better solution to me than workaround 1, but still not a clean one, since TypeScript is erroring.
Is this behavior intentional? Is there any good solution for this?
cc @melloware @nitrogenous
Reproducer
https://stackblitz.com/edit/jiw5zb?file=src%2FApp.jsx
PrimeReact version
10.6.2
React version
18.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response