Open Terf opened 2 years ago
Does swing support typescript? The same code without types works for me in JS, but with types:
import { useState, useRef, useEffect } from 'react'; import Swing from 'react-swing'; import './App.css'; function App() { const stackEl = useRef(null); const [stack, setStack] = useState<any>(null); const [cardCount, setCardCount] = useState(4); // throwOut Method const throwCard = () => { // React Card Directions // console.log('React.DIRECTION', React.DIRECTION); if (stack === null) { return; } console.log('stack', stack); console.log('stack.getConfig', stack.getConfig()); console.log('stackEl', stackEl); // React Component Childrens const targetEl = stack.childElements[1]; console.log('targetEl', targetEl); if (targetEl && targetEl.current) { // stack.getCard const card = stack.getCard(targetEl.current); console.log('card', card); // throwOut method call // card.throwOut(100, 200, React.DIRECTION.RIGHT); } }; const addCard = () => { setCardCount(cardCount + 1); }; const renderCards = () => { const cardData = [ { icon: '♣', className: 'clubs', }, { icon: '♦', className: 'diamonds', }, { icon: '♥', className: 'hearts', }, { icon: '♠', className: 'spades', }, ]; const cards = []; for (let i = 0; i < cardCount; i++) { const data = cardData[i % cardData.length]; cards.push( <div key={i} className={`card ${data.className}`} ref={`card${i}`}> {data.icon} </div>, ); } return cards; }; return ( <div className="App"> <Swing className="stack" setStack={(stack) => setStack(stack)} ref={stackEl} throwout={(e: any) => console.log('throwout', e)} > {renderCards()} </Swing> </div> ); } export default App;
I get an error that the Swing stack isn't supposed to have children:
ERROR in src/App.tsx:79:8 TS2322: Type '{ children: Element[]; className: string; setStack: (stack: Stack) => void; ref: MutableRefObject<null>; throwout: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & IReactSwingProps'. Property 'children' does not exist on type 'IntrinsicAttributes & IReactSwingProps'. 77 | return ( 78 | <div className="App"> > 79 | <Swing | ^^^^^ 80 | className="stack" 81 | setStack={(stack) => setStack(stack)} 82 | ref={stackEl}
Does swing support typescript? The same code without types works for me in JS, but with types:
I get an error that the Swing stack isn't supposed to have children: