0.0.3 • Published 7 years ago

react-native-pos-calculator v0.0.3

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

React Native Point of Sales Calculator

npm version build status

Simple react native point of sales calculator.

Installation

Using npm:

npm i -S react-native-calculator

or yarn:

yarn add react-native-calculator

Props

All props in common props and...

Prop NameData TypeDefault ValueDescription
hasAcceptButtonbooleanfalseShow accept button after calculate.
styleViewStyleContainer style.
onCalc(value : number , text : string ) => voidCalculate button click event.
onAccept(value : number , text : string ) => voidAccept button click event.
hideDisplaybooleanfalseHide display text field.

Calculator Input Component

Usage

import React from 'react'
import { View } from 'react-native'
import { CalculatorInput } from 'react-native-calculator'

export default class App extends React.Component {
  render() {
    return (
      <View>
        <CalculatorInput
          fieldTextStyle={{ fontSize: 24 }}
          fieldContainerStyle={{ height: 36 }}
        />
      </View>
    )
  }
}

Props

All props in common props and...

Prop NameData TypeDefault ValueDescription
modalAnimationType'none''slide''fade'slideModal animation type.
modalBackdropStyleViewStyleStyle of modal backdrop.
fieldContainerStyleViewStyleText field container style.
fieldTextStyleTextStyleText style.
onChange(value : number , text : string ) => voidValue change event.
prefixstringPrefix.
suffixstringSuffix.
onBeforeChange(value : number , text : string ) => booleanCalled before changes applied. Return true if changes are accepted.
onBeforeChangeAsync(value : number , text : string ) => Promise<boolean>Called asynchronously before changes applied. Resolve with true if changes are accepted.

Common Props

Prop NameData TypeDefault ValueDescription
decimalSeparatorstring.Decimal separator sign.
thousandSeparatorstring,Thousand separator sign.
numericButtonBackgroundColorstring#ffffffNumeric button background color.
numericButtonColorstring#aaaaaaNumeric text button color.
actionButtonBackgroundColorstring#e7e5e3Action button background color.
actionButtonColorstring#000000Action text button color.
calcButtonBackgroundColorstring#ff8d00Calculate button background color.
calcButtonColorstring#ffffffCalculator text button color.
acceptButtonBackgroundColorstring#14CC60Accept button background color.
acceptButtonColorstring#ffffffAccept text button color.
displayBackgroundColorstring#ffffffDigit display background color.
displayColorstring#000000Digit display text color.
borderColorstring#52525BBorder color.
fontSizenumber18Button text font size.
valuenumber0Initial value.
widthnumber(auto)Calculator component width.
heightnumber(auto)Calculator component height.
displayHeightnumber(auto)Digit display container height.
keyboardHeightnumber(auto)Keyboard container height.
onTextChange(text: string) => voidText change event.
displayTextAlign"auto" / "left" / "right" / "center" / "justify""left"Digit align display.
noDecimalbooleanfalseHide decimal separator button to disable decimal value.

License

MIT