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.

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>
  )
}

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

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

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 66

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 55

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

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 76