Custom component interface

[IzumiSy]

Currently, no interface available to pass props to the component registered on the component registry.

This PR is a design proposal to implement a feature to get a custom React component that internally composes FabrixComponent with interface that can accept props that the corresponding custom component requires.

Design

// table.tsx

type MyTableProps = {
  onClickRow: (rowID: string) => void;
}

export MyTable = (props: TableComponentProps<MyTableProps>) => {
  const columnDefs = props.headers.map((header) => {
    return {
      headerName: header.key,
      field: header.label,
      enableValue: true,
      enableRowGroup: true,
      enablePivot: true,
    };
  }); 

  return (
    <Datagrid 
      columns={columnDefs} 
      onClickRow={(row: Row) => {
        props.onClickRow(row.id)
      }} 
    />
  ) 
}

// components.tsx

const customComponents = new ComponentRegistry({
  custom: [
    {
      type: "table",
      name: "myCustomTable",     
      table: (props: TableComponentProps<MyTableProps>) => {
        return (
          <Datagrid onClickRow={props.onClickRow} />
        )
      }
    }
  ]
})

// page.tsx

const MyCustomTable = customComponents.getComponent("myCustomTable")

const Page = () => {
  return (
    <MyCustomTable 
      query={gql`
        manufacturingOrders {
          collection {
            name
            id
          }
        }
      `}
      props={{
        onClickRow: (rowID) => {
          // implement handler here
        }
      }} 
    />
  )
}

[IzumiSy]

Partially done by #93

[IzumiSy]

Still custom component interface should cover form/fields renderer as well as table.

fabrix/packages/fabrix/src/customRenderer.tsx

Lines 29 to 49 in 666fa33

	switch (componentEntry.type) {
	case "table": {
	ensureFieldType(fieldConfig, "view");
	return (
	<CustomComponentTableRenderer
	{...props}
	key={`table-${fieldConfig.name}`}
	fieldConfig={fieldConfig}
	data={data}
	component={{
	name: props.component.name,
	entry: componentEntry,
	customProps: props.component.customProps,
	}}
	/>
	);
	}
	default: {
	throw new Error(`Unsupported component type: ${componentEntry.type}`);
	}
	}