asitis-basecomponents

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

List

Lists array of objects in a table like layout.

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