diff --git a/imports/plugins/core/ui/client/components/textfield/textfield.js b/imports/plugins/core/ui/client/components/textfield/textfield.js index 3ccc069fa49..a3b49b8fa67 100644 --- a/imports/plugins/core/ui/client/components/textfield/textfield.js +++ b/imports/plugins/core/ui/client/components/textfield/textfield.js @@ -2,15 +2,32 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import TextareaAutosize from "react-textarea-autosize"; +import { unformat } from "accounting-js"; import { Components, registerComponent } from "@reactioncommerce/reaction-components"; -import { i18next } from "/client/api"; +import { i18next, formatPriceString } from "/client/api"; + class TextField extends Component { + constructor(props) { + super(props); + if (props.isCurrency) { + this.state = { + value: formatPriceString(props.value), + isEditing: false + }; + } else { + this.state = {}; + } + } + /** * Getter: value * @return {String} value for text input */ get value() { + if (this.props.isCurrency && !this.state.isEditing) { + return (this.state && this.state.value) || this.props.value || ""; + } return this.props.value || ""; } @@ -69,6 +86,12 @@ class TextField extends Component { * @return {void} */ onBlur = (event) => { + if (this.props.isCurrency) { + this.setState({ + value: formatPriceString(event.target.value), + isEditing: false + }); + } if (this.props.onBlur) { this.props.onBlur(event, event.target.value, this.props.name); } @@ -81,6 +104,13 @@ class TextField extends Component { * @return {void} */ onFocus = (event) => { + if (this.props.isCurrency) { + event.target.value = unformat(event.target.value); + this.setState({ + value: event.target.value, + isEditing: true + }); + } if (this.props.onFocus) { this.props.onFocus(event, event.target.value, this.props.name); } @@ -262,6 +292,7 @@ TextField.propTypes = { i18nKeyLabel: PropTypes.string, i18nKeyPlaceholder: PropTypes.string, id: PropTypes.string, + isCurrency: PropTypes.bool, isValid: PropTypes.bool, label: PropTypes.string, multiline: PropTypes.bool, diff --git a/imports/plugins/included/product-variant/components/variantForm.js b/imports/plugins/included/product-variant/components/variantForm.js index deaa188a0db..56237179dd9 100644 --- a/imports/plugins/included/product-variant/components/variantForm.js +++ b/imports/plugins/included/product-variant/components/variantForm.js @@ -406,8 +406,8 @@ class VariantForm extends Component {
@@ -642,8 +644,8 @@ class VariantForm extends Component {