The component which renders properties in all the places in the AdminBro UI. By all the places I mean:
- list: on the List,
- edit: on default actions where user can modify the record like: EditAction, and NewAction,
- show: on the default ShowAction where user can see the details of a record,
- filter: and finally on the sidebar filter,
Based on the type of given property and where the property is rendered BasePropertyComponent picks Component to use. That is how date fields are rendered as datepicker or boolean values as checkbox'es.
Overriding default render logic
By default BasePropertyComponent will render the corresponding component: input for string, DatePicker for dates, etc. But you can override this by passing a custom component to PropertyOptions.
Take a look at the following example:
const AdminBro = require('admin-bro')
const ResourceModel = require('./resource-model')
const AdminBroOptions = {
resources: [{
resource: ResourceModel
options: {
properties: {
name: {
components: {
show: AdminBro.bundle('./my-react-component'),
},
},
},
},
}],
}
In the example above we are altering how name property will look like on the Show action. We can define my-react-component.jsx like this:
import React from 'react'
import { InputGroup, Label } from '@admin-bro/design-system'
const MyReactComponent = props => {
const { record, property } = props
const value = record.params[property.path]
return (
<InputGroup>
<Label>{property.label}</Label>
{value} [meters]
</InputGroup>
)
}
Live example
Type Definitions
# BasePropertyProps
Props which are passed to all your custom property components
Example
// AdminBroOptions
const AdminBro = require('admin-bro')
const ResourceModel = require('./resource-model')
const AdminBroOptions = {
resources: [{
resource: ResourceModel
options: {
properties: {
name: {
components: {
show: AdminBro.bundle('./my-react-component'),
},
},
},
},
}],
}
// my-react-component.tsx
const MyReactComponent = (props: BasePropertyProps) => {
const { record, property } = props
const value = record.params[property.path] === 'foo' ? 'bar' : 'zoe'
return (
<PropertyInShow property={property}>
{value}
</PropertyInShow>
)
}
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
property |
PropertyJSON | Property JSON representation |
|
resource |
ResourceJSON | Resource JSON representation |
|
record |
RecordJSON |
<optional> |
Record JSON representation. Null for filter |
onChange |
OnPropertyChange |
<optional> |
callback function which should indicate change of the field value. You can use it, when overriding edit properties. |
filter |
any |
<optional> |
Filter object taken from the query params. It is used on the filter components. |
where |
PropertyPlace | Where given property should be rendered. Either of 'show' | 'list' | 'edit' | 'filter'. |
# EditPropertyProps
Props which are passed to all your custom property components in show
Properties:
| Name | Type | Description |
|---|---|---|
onChange |
OnPropertyChange | callback function which should indicate change of the field value. |
record |
RecordJSON | Record JSON representation. Null for filter |
# FilterPropertyProps
Props which are passed to all your custom property components in filter
Properties:
| Name | Type | Description |
|---|---|---|
filter |
any | Filter object taken from the query params. It is used on the filter components |
onChange |
OnPropertyChange | callback function which should indicate change of the filter value. |
record |
undefined |
# OnPropertyChange(propertyOrRecord, valueopt, selectedRecordopt)
On change callback - It can take:
-
one argument which is an entire RecordJSON
-
2 arguments - one property.path and the second one: value.
-
Used by the edit and filter components.
Let's take a look at an example of the edit component
It has one button: "Set Name". When this button is clicked - it triggers onChange callback
function. In this case, we are passing an updated record, so that we can change the value of another
property: name.
import React from 'react'
import { Button, Box } from '@admin-bro/design-system'
const ValueTrigger = (props) => {
const { onChange, record } = props
const handleClick = (): void => {
onChange({
...record,
params: {
...record.params,
name: 'my new name',
},
})
}
return (
<Box mb="xxl">
<Button type="button" onClick={handleClick}>Set Name</Button>
</Box>
)
}
export default ValueTrigger
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
propertyOrRecord |
RecordJSON | string | property.path or updated RecordJSON object |
|
value |
any |
<optional> |
when propertyOrRecord is a property.path, here should be an updated value. |
selectedRecord |
RecordJSON |
<optional> |
In case of "reference" fields (with select), when they change they pass selected record object., This is mostly for an internal use - you probably wont have to use that. |
# ShowPropertyProps
Props which are passed to all your custom property components in show
Properties:
| Name | Type | Description |
|---|---|---|
property |
PropertyJSON | Property JSON representation |
resource |
ResourceJSON | Resource JSON representation |
record |
RecordJSON | Record JSON representation. Null for filter |
