finezza-ui-component

Components for finezza

Install

npm install --save finezza-ui-component

Usage

To Import ConfirmButton

import React, { Component } from 'react'

import { ConfirmButton } from 'finezza-ui-component'
class Example extends Component {
  render() {
    return (
      <ConfirmButton
        handleConfirm='func(), it will not return any value only take a callback function'
        buttonTitle='string, the name of the button'
        popupTitle='string, the title of the dialog box'
        className='object, will pass the className'
        style='object, styling object style'
        buttonType='string, icon -> if we need only icon, else it will show the texted button'
        color="string, it will take only the mentioned values -> 'default','inherit','primary','secondary'"
        IconButton='icon name, name of the icon if we want the button as only icon'
        disabled='bool, to disbale the button'
        type='string, the type of the button such as submit type'
      />
    )
  }
}

To Import CurrencyInputbox

import React, { Component } from 'react'

import { CurrencyInputbox } from 'finezza-ui-component'

class Example extends Component {
  render() {
    return (
      <CurrencyInputbox
        handleChange='func(event, value), will return event,value(without comma)'
        value='string, will place the value'
        label='string, will give the label of the textbox'
        name='string, will give the name of the textbox'
        errorMessage='string, will give the error message to show'
        required='bool, will give true or false'
        disable='bool, will give true or false'
        disableInword='if text in word is not required'
      />
    )
  }
}

To Import PercentageInputbox

import React, { Component } from 'react'

import { PercentageInputbox } from 'finezza-ui-component'

class Example extends Component {
  render() {
    return (
      <PercentageInputbox
        handleChange='func, will return event'
        value='string, will place the value'
        label='string, will give the label of the textbox'
        name='string, will give the name of the textbox'
        errorMessage='string, will give the error message to show'
        required='bool, will give true or false'
        disable='bool, will give true or false'
        inputMask='string, will give the valid masking pattern'
      />
    )
  }
}

To Import Textbox

import React, { Component } from 'react'

import { Textbox } from 'finezza-ui-component'

class Example extends Component {
  render() {
    return (
      <Textbox
        handleChange='func, will return event'
        value='string, will place the value'
        label='string, will give the label of the textbox'
        name='string, will give the name of the textbox'
        errorMessage='string, will give the error message to show'
        required='bool, will give true or false'
        disable='bool, will give true or false'
        inputMask='string, will give the valid masking pattern'
      />
    )
  }
}

To Import Table

import React, { Component } from 'react'

import { CustomTable } from 'finezza-ui-component'

class Example extends Component {
  const
  tableHeader = [
    {
      displayName: 'AMOUNT',
      fieldName: 'amount',
      isAmount: true,
      width: '550px',
      align: 'center'
    }
  ]
  render() {
    return (
      <CustomTable
        tableHeader='array'
        rowData='array'
        checkbox='bool'
        handleCheckBox='func,(will return index of selected rows)'
        title='string'
        onClickRow='func (will return index of select row)'
        bankStyle='bool'
      />
    )
  }
}

To Import Loading Screen

import React, { Component } from 'react'

import { LoadingScreen } from 'finezza-ui-component'

class Example extends Component {
  render() {
    return (
      <LoadingScreen src='if we need to change the logo, by default it will show finezza logo' />
    )
  }
}

To Import Spinner

import React, { Component } from 'react'

import { SpinnerScreen } from 'finezza-ui-component'

class Example extends Component {
  render() {
    return (
      <SpinnerScreen
        open='bool'
        src='if we need to change the logo, by default it will show finezza logo'
      />
    )
  }
}

To Import all together

import { SpinnerScreen, LoadingScreen, CustomTable } from 'finezza-ui-component'

License

MIT ©