# <BasePropertyComponent />
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 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.name]
return (
<InputGroup>
<Label>{property.name}</Label>
{value} [meters]
</InputGroup>
)
}
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.name] === '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 takes either one argument which is entire RecordJSON or 2 arguments - one property.name and the second one: value. Used by the edit and filter components.
Lets take a look at an example of overriding edit component:
import React, { ReactNode } from 'react'
import { BasePropertyProps, PropertyInEdit, StyledInput } from 'admin-bro'
export default class Edit extends React.Component<PropertyProps> {
constructor(props) {
super(props)
this.handleInputChange = this.handleInputChange.bind(this)
}
handleInputChange(event): void {
const { onChange, property, record } = this.props
// Here is the interesting part:
onChange(property.name, event.target.value)
// or you can pass an entire record. This is the same as above but gives you
// much more flexibility
const newRecord = { ...record }
newRecord.params[property.name] = event.target.value
onChange(newRecord)
}
render(): ReactNode {
const { property, record } = this.props
const error = record.errors && record.errors[property.name]
const value = (record.params && typeof record.params[property.name] !== 'undefined')
? record.params[property.name]
: ''
return (
<PropertyInEdit property={property} error={error}>
<StyledInput
type="text"
className="input"
id={property.name}
name={property.name}
onChange={this.handleInputChange}
value={value}
/>
</PropertyInEdit>
)
}
}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
propertyOrRecord |
RecordJSON | string | property.name or updated RecordJSON object |
|
value |
any |
<optional> |
when propertyOrRecord is a property.name, 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 |