Skip to content
This repository has been archived by the owner on Jul 28, 2020. It is now read-only.

[CurrencyInput] convert to hooks #887

Merged
merged 2 commits into from
Feb 19, 2019
Merged

[CurrencyInput] convert to hooks #887

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16debd6
convert to hooks
mahmoud-zakria-sociomantic Feb 15, 2019
8f8952f
changed to Pattern, fixed empty lines
mahmoud-zakria-sociomantic Feb 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
304 changes: 150 additions & 154 deletions src/CurrencyInput/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,176 +9,172 @@

/* global navigator */

import React from 'react';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { generateId } from '../utils';
import { generateId } from '../utils';

import { TextInput } from '..';
import { TextInput } from '..';


const currencyFormat = ( number, currency, language = navigator.language ) =>
number.toLocaleString( language, currency ? { style: 'currency', currency } : {} );
number.toLocaleString( language, currency ?
{ style: 'currency', currency } : {} );

export default class CurrencyInput extends React.Component
{
static propTypes =
{
/**
* Extra CSS class name
*/
className : PropTypes.string,
/**
* CSS class map
*/
cssMap : PropTypes.objectOf( PropTypes.string ),
/**
* Currency to display
*/
currency : PropTypes.oneOf( [ 'USD', 'EUR', 'GBP' ] ),
/**
* Display as error/invalid
*/
hasError : PropTypes.bool,
/**
* HTML id attribute
*/
id : PropTypes.string,
/**
* Display as disabled
*/
isDisabled : PropTypes.bool,
/**
* Display as read-only
*/
isReadOnly : PropTypes.bool,
/**
* Blur callback function
*/
onBlur : PropTypes.func,
/**
* Input change callback function
*/
onChange : PropTypes.func,
/**
* Input click callback function
*/
onClick : PropTypes.func,
/**
* Focus callback function
*/
onFocus : PropTypes.func,
/**
* Key down callback function
*/
onKeyDown : PropTypes.func,
/**
* Key press callback function
*/
onKeyPress : PropTypes.func,
/**
* Key up callback function
*/
onKeyUp : PropTypes.func,
/**
* Mouse out callback function
*/
onMouseOut : PropTypes.func,
/**
* Mouse over callback function
*/
onMouseOver : PropTypes.func,
/**
* Placeholder text
*/
placeholder : PropTypes.string,
/**
* Input text alignment
*/
textAlign : PropTypes.oneOf( [ 'left', 'right' ] ),
/**
* Input string value
*/
value : PropTypes.string,
};

static defaultProps =
{
className : undefined,
cssMap : undefined,
currency : undefined,
hasError : false,
id : undefined,
isDisabled : false,
isReadOnly : false,
onBlur : undefined,
onChange : undefined,
onClick : undefined,
onFocus : undefined,
onKeyDown : undefined,
onKeyPress : undefined,
onKeyUp : undefined,
onMouseOut : undefined,
onMouseOver : undefined,
placeholder : undefined,
textAlign : 'left',
value : '',
};
const patt = /[^0-9.-]/g;

const componentName = 'CurrencyInput';
daniel-martic-sociomantic marked this conversation as resolved.
Show resolved Hide resolved
const CurrencyInput = ( props ) =>
{
const {
currency,
id = generateId( componentName ),
value,
} = props;

static displayName = 'CurrencyInput';
const [ valueState, setValue ] = useState( '' );

constructor( props )
const handleBlur = () =>
{
super( props );
this.state = {
value : '',
};
this.handleBlur = this.handleBlur.bind( this );
this.handleChange = this.handleChange.bind( this );
}

handleBlur()
{
const newVal = Number( String( this.state.value ).replace( /[^0-9\.-]/g, '' ) );
this.setState( {
value : newVal,
} );
const newVal = Number( String( valueState )
daniel-martic-sociomantic marked this conversation as resolved.
Show resolved Hide resolved
.replace( patt, '' ) );
setValue( newVal );

if ( typeof this.props.onBlur === 'function' )
if ( typeof props.onBlur === 'function' )
{
this.props.onBlur( { } );
props.onBlur( { } );
}

if ( typeof this.props.onChange === 'function' )
if ( typeof props.onChange === 'function' )
{
this.props.onChange( { value: newVal } );
props.onChange( { value: newVal } );
}
}
};

handleChange( { value } )
const handleChange = ( { value: scopedValue } ) =>
{
this.setState( { value } );
}
setValue( scopedValue );
};

render()
{
const {
currency,
id = generateId( 'CurrencyInput' ),
value,
} = this.props;
return (
<TextInput
{ ...this.props }
autoCapitalize = "off"
autoComplete = "off"
autoCorrect = "off"
spellCheck = { false }
id = { id }
onBlur = { this.handleBlur }
onChange = { this.handleChange }
value = { currencyFormat( Number( value.replace( /[^0-9\.-]/g, '' ) ) || this.state.value, currency ) } />
);
}
}
return (
<TextInput
{ ...props }
autoCapitalize = "off"
autoComplete = "off"
autoCorrect = "off"
spellCheck = { false }
id = { id }
onBlur = { handleBlur }
onChange = { handleChange }
value = { currencyFormat( Number( value
.replace( patt, '' ) ) || valueState, currency ) } />
);
};

CurrencyInput.propTypes =
{
/**
* Extra CSS class name
*/
className : PropTypes.string,
/**
* CSS class map
*/
cssMap : PropTypes.objectOf( PropTypes.string ),
/**
* Currency to display
*/
currency : PropTypes.oneOf( [ 'USD', 'EUR', 'GBP' ] ),
/**
* Display as error/invalid
*/
hasError : PropTypes.bool,
/**
* HTML id attribute
*/
id : PropTypes.string,
/**
* Display as disabled
*/
isDisabled : PropTypes.bool,
/**
* Display as read-only
*/
isReadOnly : PropTypes.bool,
/**
* Blur callback function
*/
onBlur : PropTypes.func,
/**
* Input change callback function
*/
onChange : PropTypes.func,
/**
* Input click callback function
*/
onClick : PropTypes.func,
/**
* Focus callback function
*/
onFocus : PropTypes.func,
/**
* Key down callback function
*/
onKeyDown : PropTypes.func,
/**
* Key press callback function
*/
onKeyPress : PropTypes.func,
/**
* Key up callback function
*/
onKeyUp : PropTypes.func,
/**
* Mouse out callback function
*/
onMouseOut : PropTypes.func,
/**
* Mouse over callback function
*/
onMouseOver : PropTypes.func,
/**
* Placeholder text
*/
placeholder : PropTypes.string,
/**
* Input text alignment
*/
textAlign : PropTypes.oneOf( [ 'left', 'right' ] ),
/**
* Input string value
*/
value : PropTypes.string,
};

CurrencyInput.defaultProps =
{
className : undefined,
cssMap : undefined,
currency : undefined,
hasError : false,
id : undefined,
isDisabled : false,
isReadOnly : false,
onBlur : undefined,
onChange : undefined,
onClick : undefined,
onFocus : undefined,
onKeyDown : undefined,
onKeyPress : undefined,
onKeyUp : undefined,
onMouseOut : undefined,
onMouseOver : undefined,
placeholder : undefined,
textAlign : 'left',
value : '',
};


CurrencyInput.displayName = componentName;

export default CurrencyInput;