Components

BasePropertyComponent

<BasePropertyComponent />

Constructor

# <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.

You can override default behavior by changing components param for given property in AdminBroOptions. 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 ShowAction. When we will define my-react-component.jsx like this:

import React from 'react'
import PropertyInShow from 'admin-bro'

const MyReactComponent = props => {
  const { record, property } = props
  const value = record.params[property.name] === 'foo' ? 'bar' : 'zoe'
  return (
    <PropertyInShow property={property}>
      {value}
    </PropertyInShow>
  )
}

When record value for given property (name) equals 'foo' we will render 'bar', otherwise 'zoe'

We also use PropertyInShow helper component to render field with a label that it looks similar to already defined properties. For other places you can use a different wrapper components:

In your components you have access to the following prop types:

View Source admin-bro/src/frontend/components/property-type/index.tsx, line 29

Example

Type Definitions

object

# 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.jsx
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.

View Source admin-bro/src/frontend/components/property-type/base-property-props.ts, line 7

object

# 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

View Source admin-bro/src/frontend/components/property-type/base-property-props.ts, line 65

object

# 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

View Source admin-bro/src/frontend/components/property-type/base-property-props.ts, line 54

# 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.

View Source admin-bro/src/frontend/components/property-type/base-property-props.ts, line 86

object

# 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

View Source admin-bro/src/frontend/components/property-type/base-property-props.ts, line 75