less payments at the moment, their real life experiences with money may be limited.
The children had their spelling test today. Well done to those who got them all right or nearly got full marks! The test is in your child’s reading record book along with their new set of spellings to learn.
from lib2to3.pgen2 import grammar
from traceback import print_tb
from lark import Discard, Lark,Token
from lark.tree import pydot__tree_to_png
from lark import Transformer
from numpy import isin

class transforma_lista(Transformer):
    def __init__(self):
        self.output = {}
        self.soma = 0
        self.len = 0
        self.freqDict = {}
        self.isAdding = False

    def start(self,items):
        self.output["len"] = self.len
        self.output['mostfreq'] = max(self.freqDict.items(), key= lambda x : x[1])[0]
        self.output['soma'] = self.soma
        return self.output

    def elementos(self,items):
        return items

    def elemento(self, word):
        self.len += 1
        pal = word[0]
        self.freqDict.setdefault(pal,0)
        self.freqDict[pal] += 1
        return pal

    def WORD(self,word):
        pal = str(word)
        if pal == "agora":
            self.isAdding = True
        elif pal == "fim":
            self.isAdding = False
        return str(word)

    def NUM(self,num):
        n = int(num)
        if self.isAdding:
            self.soma += int(n)
        return n

    def LISTA(self,lista):
        return str(lista)

    def PT(self,pt):
        return Discard


    def VIR(self,vir):
        return Discard

grammar = '''
start : LISTA elementos PT
LISTA : "Lista" | "LISTA"
elementos : elemento (VIR elemento)*
elemento: NUM | WORD
NUM: "0".."9"+
WORD: ("a".."z"|"A".."Z")+
VIR: ","
PT : "."
%import common.WS
%ignore WS
'''

l = Lark(grammar)
frase = "Lista 1,agora, 1, 2,ola,ola, fim, agora, 3,agora, ola, 4, fim, 7, 8, ola."
tree = l.parse(frase)
data = transforma_lista().transform(tree)
print(data)I am still working on the third book in my Paul Jakarta Chronicles. And even though my fingers have stopped hitting the keyboard for a while, my mind continues to work. I know why God allowed life to get in the way…because the plot needed work. All the holes and confusing things about the book have been worked out in my head through constant thinking and analyzing. So now I am ready to finish it and get it ready for publishing.
I am looking forward to getting it into Westbow for publishing so I can work on my fantasy series. NaNoWriMo is 41 hours away and I also have that book swirling around in my head.
But work goes on. Life goes on. And I have to make time to keep up my writing. That is my God-given gift and I don’t want to lose it.
Happy writing!Thanks for this.  I too have been disappointed and annoyed by the Wiki.   Not only is it inaccurate and missing some current game info, it also uses up a shocking amount of bandwidth if you have multiple tabs of it open at once on a desktop browser.    It was bad enough that I found I had to close them to still have good performance on Cloud gaming services like Stadia.   Which was annoying because I like to play with a 2nd monitor open with game info and stats. (Ad blockers fixed the problem, but I hate to use them on sites I frequent because I want to support their efforts....)Q: Animation in React: how can I make a table row from a dynamic table fade out on delete? I have a react app in which I'm trying to make each table row fade out whenever a corresponding button to that table row is clicked. The idea is that when a delete button on that row is clicked the whole row will fade out and the rest of the rows below it will move up (without creating any empty space) and if it is the last row that is being removed it will just fade out and table will become smaller.
Currently I'm trying to use refs and CSS to implement this feature, however right now if, for example, I click on "Delete" button in the second row - this row will be removed immediately without any animation, but at the same time the very last row's content will fade out according to the CSS styling that I set up and there will be an empty table row left there. Following that, any other element will be removed without any fade out animation.
So far I have done the following:
1) A component that create dynamic table rows (any necessary data, including the ref, are passed through useContext() from the component with the business logic):
function TableData() {
  const { dataset, handleDeletion, wrapperRef } = React.useContext(Context)

  return dataset.map((item, index) => {
    const { id, name, year, color, pantone_value } = item
    return (
      <tr key={id} ref={wrapperRef}>
        <td>{year}</td>
        <td>{name}</td>
        <td style={{ backgroundColor: color, width: "100px" }} />
        <td>
          <button 
            value={id}
            type="button" 
            class="btn btn-outline-danger" 
            onClick={handleDeletion}>
            <i class="far fa-trash-alt"></i>
          </button>
        </td>
      </tr>
    )
  })
}

2) In the main component with business logic I set up the ref:
const wrapperRef = React.createRef()

3) And this is a function that handle a click of a delete button: 
function handleDeletion(event) {
  const id = event.currentTarget.value

  const wrapper = wrapperRef.current
  wrapper.classList.add('fade')

  setDataset(prevDataset => prevDataset.filter(item => item.id!== parseInt(id)))
}

4) Simple CSS animation:
.fade {
  opacity: 0;
  transition: opacity 5000ms;
}

Could you please let me know what am I doing wrong here and what would need to be fix in order to make it work as planned?
Best regards,
Konstantin
P.S. I'm attaching the full code to this post as well (just in case) and here is the link to the pen with this project.
UPDATE:
1) I added the following className into my 'tr' component:
<tr key={id} className={toDelete && itemToDelete === id? 'fade' : ''}>

2) In the main component I added the following state hooks:
const [ toDelete, setToDelete ] = React.useState(false)
const [ itemToDelete, setItemToDelete ] = React.useState('')

3) And changed the delete function to the following (with adding an extra useEffect that is applied with those hooks being changed):
function handleDeletion(event) {
  const id = event.currentTarget.value

  setToDelete(true)
  setItemToDelete(id)

  //setDataset(prevDataset => prevDataset.filter(item => item.id!== parseInt(id)))
}

React.useEffect(() => {
  if (toDelete!== false && itemToDelete!== '') {
    setTimeout(() => {
      setDataset(prevDataset => prevDataset.filter(item => item.id!== parseInt(itemToDelete)))
    }, 500)
  }
}, [toDelete, itemToDelete])

I tried to do it different ways, including using setTimeout/setInterval, doing it without a separate useEffect hook in the handleDeletion function, etc. But still can't get the desired result, it is removing it without applying fading animation.

A: You create wrapperRef and you overwrite it with every map iteration so that it holds the reference on the last table row. That is why you see the last row fade out.
You would probably need an array of refs so that you have the ref for every row. Depending on how big the table is maybe you should look for other solutions because it not recommended to overuse refs
This approach is probably the best.

A: In addition to Darko's answer, you can also delete the row from the DOM after fading out.
