Skip to content
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.

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

Timeline: Missing export for interface TimelineEvent #6091

Closed
SondreBlegen opened this issue Mar 5, 2024 · 4 comments · Fixed by #6092
Closed

Timeline: Missing export for interface TimelineEvent #6091

SondreBlegen opened this issue Mar 5, 2024 · 4 comments · Fixed by #6092
Labels
Resolution: By Design The behavior in the issue is by design and the component exhibits the expected behavior

Comments

@SondreBlegen
Copy link

Describe the bug

Hi,

I am currently working on creating a timeline, and looked at the docs provided, It uses the interface TimelineEvent for custom component rendering, but it seems that the interface is not exported.

Thanks,
Sondre

Reproducer

No response

PrimeReact version

10.5.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 122

Steps to reproduce the behavior

export const TimelineComponent: React.FC = () => {
  const events = [
    {
      status: "Ordered",
      date: "15/10/2020 10:30",
      icon: "pi pi-shopping-cart",
      color: "#9C27B0",
      image: "game-controller.jpg",
    },
    {
      status: "Processing",
      date: "15/10/2020 14:00",
      icon: "pi pi-cog",
      color: "#673AB7",
    },
    {
      status: "Shipped",
      date: "15/10/2020 16:15",
      icon: "pi pi-shopping-cart",
      color: "#FF9800",
    },
    {
      status: "Delivered",
      date: "16/10/2020 10:00",
      icon: "pi pi-check",
      color: "#607D8B",
    },
  ];

  const customizedMarker = (item: TimelineEvent) => { // This is not possible to import
    return (
      <span
        className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
        style={{ backgroundColor: item.color }}
      >
        <i className={item.icon}></i>
      </span>
    );
  };

  return <Timeline value={events} align="alternate" />;
};

Expected behavior

Should be possible to import the interface for type checking

@SondreBlegen SondreBlegen added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 5, 2024
@melloware
Copy link
Member

Yes it is defined as an ANY because your timeline event can be any JSON pojo you want.

    /**
     * An array of events to display.
     */
    value?: any[] | undefined;

@melloware melloware added Resolution: Wontfix Issue will not be fixed due to technical limitations and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 5, 2024
@melloware
Copy link
Member

Here is a working Typescript example for you: https://stackblitz.com/edit/r6knth?file=src%2FApp.tsx

@melloware melloware added Resolution: By Design The behavior in the issue is by design and the component exhibits the expected behavior and removed Resolution: Wontfix Issue will not be fixed due to technical limitations labels Mar 5, 2024
@melloware melloware closed this as not planned Won't fix, can't repro, duplicate, stale Mar 5, 2024
melloware added a commit to melloware/primereact that referenced this issue Mar 5, 2024
@SondreBlegen
Copy link
Author

Brainfart... Sorry about that :)

@melloware
Copy link
Member

No worries I did realize the showcase example is not quite right so I am fixing that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: By Design The behavior in the issue is by design and the component exhibits the expected behavior
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants