Asitis React Basecomponents

Installation

Execute one of the following commands in powershell

  # Yarn users
  yarn global add asitis-basecomponents

  # NPM users
  npm install --save asitis-basecomponents

Usage

To import specific or multiple components from this library use the following:

  import { List } from 'asitis-basecomponents'

Components

Props / parameters

| Prop | Type | Required | Description | Default value | |:-----------|:--------:|:---------|:------------------------------------------------------------|:----------------------------| | title | string | NO | Header title of the list with a counter in paranthesis | | | columns | array : object | YES | Array with column definitions for formatting, links e.tc. | | | data | array : object | YES | Array of objects that should be displayed in the list | | | link | object | NO | Specify id and baseUri for row link | | | style | object | NO | Style object to customize component | | | className | string | NO | Adds class to component.. hio hio | |

Example

import React, { Component } from 'react'
import { List } from 'asireact-basecomponents'
import { format } from './formatter'

class Example extends Component {

  render() {
    const linkData = { identifier: 'id', baseUri: '/payments' }
    const paymentColumns = [
      { accessor: 'date', label: 'date', type: 'string', 
        formatter: {
          format, options: { locale: 'sv-SE', dateOnly: true } 
        } 
      },
      { accessor: 'referenceNo', label: 'reference', size: 'large', type: 'string' },
      { accessor: 'amount', label: 'amount', size: 'medium', type: 'number', postfix: 'currency' },
      { accessor: 'paid', label: 'paid', type: 'bool' },
    ]
    const unplacedPayments = [
      { id: '12446534734734734734743773', paymentNo: 'P042312', amount: 1299, currency: 'SEK', date: '2017-10-29', referenceNo: '550320509128581836811', paid: false },
      { id: '66463643634634673788675833', paymentNo: 'P012334', amount: 100500, currency: 'SEK', date: '2017-11-01', referenceNo: '562883868283858236856', paid: true },
      { id: '91209468104782904031896896', paymentNo: 'P623123', amount: 2049, currency: 'SEK', date: '2017-11-02', referenceNo: '382238358258658324868', paid: true },
    ]
    return (
      <List title={'TestList'} columns={paymentColumns} data={unplacedPayments} link={linkData} />
    )
  }
}

export default Example