Expanding events from props

[JayaKrishnaNamburu]

At the moment, we have two different types of events. One is for stateChange and propCall.

stateChange

A state change event can be used to assign a event to an element that can modify the state. We can assign a event that effects state using

{
  "events": {
    "click": [
      {
        "type": "stateChange",
        "modifies": "active",
        "newState": "$toggle"
      }
    ]
  }
}

This generates

React

const [active, setActive] = useState(false)

<span onClick={() => setActive(!active)}>Hello World!</span>

Vue

<span @click="active = !active">Hello World!</span>

Angular

<span (click)="active = !active">Hello World!</span>

propCall

{
  "events": {
    "click": [
      {
        "type": "propCall",
        "calls": "handleClick"
      }
    ]
  }
}

propCall calls the function from the props. But, we assign a defaultValue while defining props. In generated code the prop gets a default value of string. Let's look at he example of react

React

const SimpleComponent = (props) => {
  return (
    <div>
      <span onClick={props.handleClick}>Hello World!</span>
    </div>
  )
}

SimpleComponent.defaultProps = {
  handleClick: '() => {}',
}

From the example we can see when the handleClick has a defaultProp of string and not a valid function. It should be changed to

SimpleComponent.defaultProps = {
  handleClick: () => {}
}

Extending the props based events

When we pass events to a component, often we want to send some meta back to the callback with the event. Here are multiple things we can do with the propCall events.

• Passing empty, just call the function.

<span onClick={() => props.handleClick}>Testing</span>

• Call the function callback with the values from the component state.

<span onClick={() => props.handleClick(active)}>Testing</span>

• Call the function callback with the values from the component props.

<span onClick={() => props.handleClick(props.name)}>Testing</span>

• Call the function with the event object.

<span onClick={(ev) => props.handleClick(ev)}>Testing</span>

So, the uidl for events can e extended to

{
  "events": {
    "click": [
      {
        "type": "propCall",
        "calls": "handleClick",
        "handler": true,
        "arguments": [
          {
            "type": "static",
            "content": "Hello"
          },
          {
            "type": "dynamic",
            "content": {
              "referenceType": "prop",
              "id": "name"
            }
          }
        ]
      }
    ]
  }
}