@pndr/record-list-item v0.12.0

RecordListItem

Used for displaying a record as a list item.

Getting started

npm install @cmds/record-list-item --save

Prop Types

fieldRenderer

Responsible for rendering a field given it's configuration.

import SingleLineTextField from '@cmds/single-line-text-field'
// import all other fields that need to be supported...

const renderers = {
    singleLineText: ({props}) => (
        <SingleLineTextField
            {...props}
            text={'Luke Skywalker'}
            onChange={({id, text}) => {
                
                // store new value
            }}
        />
    ),
    // and all other fields that need to be supported
}

function fieldRenderer({recordId, index, field, props}) {

    const renderer = renderers[field.typeId]
    
    if (!renderer) {
        throw new Error(`Renderer for typeId '${field.typeId}' not found`)
    }
    
    /**
     * Note — props already contains properties
     * related to the context in which the field
     * gets rendered.
     * 
     * {
     *      id: 'fld1', // the field's id
     *      contextId: 'recordListItem',
     *      roleId: 'readOnly'
     * }
     */
    
    return renderer({ 
        recordId, 
        field,
        props
    })
}

More information

This component is designed and developed as part of Cosmos Design System.