ssanjun / react-swing

react-swing is a React component for implementing swing
http://ssanjun.github.io/examples/react-swing/
Other
40 stars 18 forks source link

typescript support #23

Open Terf opened 2 years ago

Terf commented 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}