Currency field on Field ( redux-form ) for mobile app - forms

Question

I am currently developing a react mobile app.
The issue is that I want to add '£' currency symbol to a form-redux field with type=number.
Code
Form
import React from 'react';
import Card from "../../pandle-ui/Card";
import cssmodules from 'react-css-modules'
import styles from './form.cssmodule.scss'
import {Field} from "redux-form";
import CardTitleTextField from "../../form_fields/CardTitleTextField";
import {CardText, Divider, IconButton} from "material-ui";
import CardFieldRow from "../../layout/CardFieldRow";
import {TextFieldBase} from "../../form_fields/TextField";
import CurrencyField from "../../form_fields/CurrencyField";
import {CardActions, FlatButton} from "material-ui";
import DoneIcon from 'material-ui/svg-icons/action/done'
import {normalizePercentage} from "../../../util/currency_helpers";
class Form extends React.Component {
render() {
const {config, cancelButton, submit, wrapperRef} = this.props
return (
<div styleName="wrapper" ref={wrapperRef} >
<Card>
<DescriptionField />
<CardText style={ { paddingTop: 0 } }>
<QuantityField />
<UnitsField show={config.showUnits} />
<PriceField />
<DiscountField show={config.showDiscount} />
<Totals showTax={config.showTax} />
</CardText>
<Divider />
<CardActions style={{ textAlign: 'right', padding: '0 8px' }}>
{cancelButton}
<DoneButton onClick={() => submit()} />
</CardActions>
</Card>
</div>
)
}
}
Form.displayName = 'PagesLineItemsForm';
Form.propTypes = {};
Form.defaultProps = {};
export default cssmodules(Form, styles)
const DescriptionField = (props) =>
<Field
label="Description"
name="description"
component={CardTitleTextField}
{...props}
/>
const QuantityField = (props) =>
<CardFieldRow label="Quantity">
<Field name="quantity" type="number" component={TextFieldBase} {...props} />
</CardFieldRow>
const UnitsField = ({ show, ...props }) => {
if(show){
return <CardFieldRow label="Unit Type">
<Field name="unit" component={TextFieldBase} {...props} />
</CardFieldRow>
} else {
return null
}
}
const PriceField = (props) =>
<CardFieldRow label="Price">
<Field name="price" type="number" component={CurrencyField} {...props} />
</CardFieldRow>
const DiscountField = ({ show, props }) => {
if(show){
return <CardFieldRow label="Discount (%)">
<Field
name="discount_percentage"
component={TextFieldBase}
type="number"
normalize={normalizePercentage}
{...props}
/>
</CardFieldRow>
} else {
return null
}
}
const Totals = ({ showTax }) => {
if(showTax){
return <div>
<NetAmountField />
<TaxAmountField />
<TotalField />
</div>
} else {
return <TotalField name="net_amount" />
}
}
const NetAmountField = (props) =>
<CardFieldRow label="Net Amount">
<Field name="net_amount" component={CurrencyField} {...props} />
</CardFieldRow>
const TaxAmountField = (props) => {
return <CardFieldRow label="Tax Amount">
<Field name="tax_amount" component={CurrencyField} {...props} />
</CardFieldRow>;
}
const TotalField = (props) =>
<CardFieldRow label="Total">
<Field name="total_amount" disabled={true} component={CurrencyField} {...props} />
</CardFieldRow>
const DoneButton = (props) => <IconButton {...props}><DoneIcon /></IconButton>
CurrencyField.js
import React from 'react'
import {TextFieldBase} from "./TextField";
import {formatCurrency} from "../../util/formatters";
import {truncateCurrency} from "../../util/currency_helpers";
import {createComponentLogger} from "../../util/logging";
export default class CurrencyField extends React.Component {
constructor(props){
super(props)
log('Constructor called with props', props)
this.state = { value: props.value, focused : false }
this.baseInputPassProps = this.getBaseInputPassProps()
}
getBaseInputPassProps(){
return {
onChange: (e) => this.onChange(truncateCurrency(e.target.value)),
onBlur: (e) => this.onBlur(truncateCurrency(e.target.value)),
onFocus: (e) => this.onFocus()
}
}
onChange(value){
log('onChange called with', value)
safeParse(value, parsed => {
if(log('should update state', this.shouldUpdateStateValue(value))){
this.setState({ value })
this.props.input.onChange(parsed*100)
}
})
}
onBlur(value){
log('onBlur called with', value)
safeParse(value, parsed => {
this.props.input.onBlur(parsed*100)
})
}
onFocus(){
log('onFocus called')
this.props.input.onFocus()
}
shouldUpdateStateValue(value){
return this.state.value !== value
}
componentWillReceiveProps(nextProps){
const {value} = nextProps.input
log('will receive props', nextProps)
if(log('should update props value', this.shouldUpdatePropsValue(value))){
this.setState({
value: log('updating state.value', (value/100).toString())
})
}
}
shouldUpdatePropsValue(value){
const {input, meta: {active}} = this.props
return !active && input.value !== value
}
render(){
log('Render called')
return <TextFieldBase
{...log('Props for TextField', this.getTextFieldProps())}
/>
}
getTextFieldProps(){
const {value, ...props} = this.props
return Object.assign({}, props, this.getPassProps())
}
getPassProps(){
return { input: log('Input pass props', this.getInputPassProps()) }
}
getInputPassProps(){
return Object.assign({}, this.props.input, this.baseInputPassProps, {
value: log('Value for input pass props', this.getValue())
})
}
getValue(){
if(this.props.meta.active){
return log('active, state', this.state.value)
} else if(this.props.input.value) {
return log('inactive, formatted', this.getFormattedValue())
} else {
return ''
}
}
getFormattedValue() {
return (this.props.input.name === 'price') ?
this.props.input.value / 100
:
formatCurrency(
null,
log('for currency formatter', this.props.input.value / 100)
)
}
}
function safeParse(value, fn){
const parsed = Number(value)
log(`parsed ${value} as `, parsed)
!isNaN(parsed) && fn(parsed)
}
CurrencyField.displayName = 'CurrencyField'
const log = createComponentLogger(CurrencyField.displayName)
formatters.js
import numeral from 'numeral'
import 'numeral/locales/en-gb'
import moment from 'moment'
numeral.locale('en-gb');
export function formatCurrencyPence(number){
return (number > 0) ? formatCurrency(null, number/100) : '-'
}
export function formatCurrency(symbol='£', number){
return numeral(number).format('($0,0.00)')
}
export function formatAmount(number){
return numeral(number).format('-0,0.00')
}
export function formatInvoiceProps(item){
return [
formatInvoiceDates,
formatInvoiceAmounts
].reduce((memo, fn) => fn(memo), item)
}
const formatInvoiceDates = createFormatter(
formatServerDate,
'date',
'date-due'
)
function formatServerDate(date){
return formatMomentDate(serverToMomentDate(date))
}
function serverToMomentDate(date){
return moment(date, 'YYYY-MM-DD')
}
/**
* #param date {moment}
*/
export function formatMomentDate(date){
return (date.isValid() && date.format('DD/MM/YYYY')) || '-'
}
export function formatDate(date){
return formatMomentDate(moment(date))
}
const formatInvoiceAmounts = createFormatter(
formatInvoiceAmount,
'net-amount',
'tax-amount',
'total-amount'
)
function formatInvoiceAmount(amount){
return formatCurrency(null, amount)
}
function createFormatter(formatter, ...keys){
return ob => formatProps(ob, formatter, keys)
}
function formatProps(ob, formatter, keys){
return keys.reduce(formatProp(formatter), ob)
}
function formatProp(formatter){
return (ob, k) => {
const v = ob[k]
return v ? Object.assign({}, ob, { [k] : formatter(v, ob) }) : ob
}
}
This code uses number pad when the user tap in the field which is fine, but how can I format that?
Also, how can I prevent users to insert negative numbers?
Thx in advance.