Javascript actions

[ajayaj724]

Is it possible to render a button inside the card and on click of it, I can perform some options. I used cardDetailedText but didn't work. May be I am missing something. Could you please provide an example if it is possible.

[zeri-k]

I'm experiencing a similar problem. I used "a tag" for cardDetailedText, but the page movement doesn't work. I think the JavaScript method of choosing a card to guess preoccupies the click event.

[prabhuignoto]

@ajayaj724 have you tried the custom rendering option. the custom rendering option allows you to render custom views inside the timeline card. let me know if this is sufficient.

[zeri-k]

@prabhuignoto This error appears in vertical mode. ex)

const data = [
{
    title: '25 July 1940',
    cardTitle: 'Berlin',
    cardSubtitle: `RAF Spitfire pilots scramble for their planes`,
    cardDetailedText: `After France’s surrender in <a href=“./test.png">June 1940</a>, Churchill told the British people, “Hitler knows that he will have to break us in this island or lose the war”. To mount a successful invasion, the Germans had to gain air superiority. The first phase of the battle began on 10 July with Luftwaffe attacks on shipping in the Channel.
  The following month, RAF Fighter Command airfields and aircraft factories came under attack. Under the dynamic direction of Lord Beaverbrook, production of Spitfire and Hurricane fighters increased, and despite its losses in pilots and planes, the RAF was never as seriously weakened as the Germans supposed.`,
},
];

<div style={{width: "100%", height: "100vh"}}>
    <Chrono
        items={data}
        mode="VERTICAL"
        cardHeight={100}
        readMore={true}
        parseDetailsAsHTML
        mediaSettings={{ align: 'center', fit: 'contain' }}
    />
</div>

I temporarily resolved it by handling event exceptions in the JS file generated after the npm build. origin code

function mh(e,t,n,r){var i=re,o=Ar.transition;Ar.transition=null;try{re=1,ps(e,t,n,r)}finally{re=i,Ar.transition=o}}

edit code

function mh(e,t,n,r){var i=re,o=Ar.transition;Ar.transition=null;try{if(r.target.tagName==="A"){re=i,Ar.transition=o}else{re=1,ps(e,t,n,r)}}finally{re=i,Ar.transition=o}}

[prabhuignoto]

@zeri-k can you expand on this issue you have mentioned. what is happening with the rest of the page?

I used "a tag" for cardDetailedText, but the page movement doesn't work

[zeri-k]

@prabhuignoto

There is no problem elsewhere. When I refer to the file I created and run it, I can see that when I click on the tag a in cardDetailedText, page movement does not occur. package.json

{
  "name": "react-chrono",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-chrono": "2.6.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.79",
    "@types/react-dom": "^18.2.25",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.4.5",
    "vite": "^5.2.9"
  }
}

App.tsx

import './App.css'
import { Chrono } from "react-chrono"
import data from "./data";

function App() {
  return (
      <div className="App">
          <div style={{width: "100%", height: "100vh"}}>
              <Chrono
                  items={data}
                  mode="VERTICAL"
                  cardHeight={100}
                  readMore={true}
                  parseDetailsAsHTML
                  mediaSettings={{ align: 'center', fit: 'contain' }}
              />
          </div>
      </div>
  )
}

export default App;

data.ts

const items = [
    {
        title: '25 July 1940',
        cardTitle: 'Berlin',
        cardSubtitle: `RAF Spitfire pilots scramble for their planes`,
        cardDetailedText: `After France’s surrender in <a href="./test.png">June 1940</a>, Churchill told the British people, “Hitler knows that he will have to break us in this island or lose the war”. To mount a successful invasion, the Germans had to gain air superiority. The first phase of the battle began on 10 July with Luftwaffe attacks on shipping in the Channel.
  The following month, RAF Fighter Command airfields and aircraft factories came under attack. Under the dynamic direction of Lord Beaverbrook, production of Spitfire and Hurricane fighters increased, and despite its losses in pilots and planes, the RAF was never as seriously weakened as the Germans supposed.`,
    },
];

[prabhuignoto]

@zeri-k just curious why does the enclosing div has height 100vh. does the timeline take up the entire breadth and length of the page. can you try to host the code you are running in a codesandbox.io and share it with me please.

[zeri-k]

@prabhuignoto When there are many timelines, the entire browser scroll becomes active. However, this causes the top control panel to not be fixed, and it becomes invisible when scrolling down. so I set it to 100vh to show it to match the size of the screen currently running. When set to 100vh, the control panel is fixed at the top, and only timeline content can be scrolled.

[tamkaho]

In vertical mode, disableInteraction = true solves the issue but then it won't render the timeline points...