Types of callbacks in a component

[cruxcode]

When we create a React component that can drag & dropped we have to write a corresponding schema for it. This schema is of type ReactComponentManifestSchema as defined here https://github.com/Atri-Labs/atrilabs-engine/blob/main/packages/react-component-manifest-schema/src/types.ts

You will also find a field ReactComponentManifestSchema.dev.attachCallbacks in this schema. This field describes the callbacks that the corresponding React component can take. For example, a Button component can take onClick.

Let's discuss all the callback types one by one:

1. controlled

type ControlledCallback = {
  type: "controlled";
  selector: PropsSelector;
};

Since all the react components are controlled components i.e. most of the inputs come as props and the components rarely have an internal state of their own, these props need to be updated when a user performs an action. For example, you can have a look at Input component. The onChange callback is of type controlled and the selector: [["custom", "value"]] also tells us which field should be updated when the onChange event handler is called.
Below is the excerpt from InputComponent:

    attachCallbacks: {
      onChange: [{ type: "controlled", selector: ["custom", "value"] }],
      onPressEnter: [{ type: "do_nothing" }],
    },

2. file_input

export type FileInputCallback = {
  type: "file_input";
  selector: PropsSelector;
};

The file_input type is the same as controlled except that the value is actually a FileList object. You can refer to Upload component to understand this category type.

3. do_nothing
   As the name suggests,do_nothing type is used when none of the component's props need to be updated when an event occurs. A good example will be onClick in Button component. When user clicks a button, we don't need to do anything in the frontend. We might need to just inform the backend that the developer can set via Actions panel.