npm.io
1.0.11 • Published 8 years ago

asitis-basecomponents

Licence
MIT
Version
1.0.11
Deps
3
Vulns
1
Weekly
0
SummaryDependencyVersions

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

Keywords

Asitisreactcomponent