OSDN Git Service

fixed the bug, when type amount first the input mask won't show up.
authorZhiting Lin <zlin035@uottawa.ca>
Tue, 29 May 2018 06:55:10 +0000 (14:55 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Tue, 29 May 2018 06:55:10 +0000 (14:55 +0800)
src/features/shared/components/AmountInputMask/AmountInputMask.jsx
src/features/shared/components/AmountUnitField/AmountUnitField.jsx
src/features/transactions/components/New/FormActionItem.jsx
src/features/transactions/components/New/NormalTransactionForm.jsx

index f5e403c..ab37680 100644 (file)
@@ -24,10 +24,33 @@ class AmountInputMask extends React.Component {
     this.handleBlur = this.handleBlur.bind(this)
   }
 
+  componentDidMount() {
+    if(this.props.fieldProps.value){
+      const value = (this.props.fieldProps.value/ Math.pow(10, 8)).toString()
+
+      this.props.fieldProps.onChange(
+        parseBTMAmount(value, this.props.decimal )
+      )
+      this.setState({ value: ( this.props.decimal === 0 ? value: addZeroToDecimalPosition( value, this.props.decimal ) ) })
+    }
+  }
+
+  componentDidUpdate(prevProps){
+    if(prevProps.decimal !== this.props.decimal){
+      const value = (prevProps.fieldProps.value/ Math.pow(10, prevProps.decimal)).toString()
+
+      this.props.fieldProps.onChange(
+        parseBTMAmount(value, this.props.decimal )
+      )
+      this.setState({ value: ( this.props.decimal === 0 ? value: addZeroToDecimalPosition( value, this.props.decimal ) ) })
+    }
+  }
 
   handleBlur(event) {
     const value = event.target.value
-    this.setState({ value: addZeroToDecimalPosition( value, this.props.decimal ) })
+    if( this.props.decimal > 0 ){
+      this.setState({ value: addZeroToDecimalPosition( value, this.props.decimal ) })
+    }
     if (this.props.fieldProps.onBlur) {
       // Swallow the event to prevent Redux Form from
       // extracting the form value
index f86616b..f087a34 100644 (file)
@@ -33,6 +33,14 @@ class AmountUnitField extends React.Component {
     this.handleBlur = this.handleBlur.bind(this)
   }
 
+  componentDidMount() {
+    if(this.props.fieldProps.value){
+      this.props.fieldProps.onChange(
+        parseBTMAmount(this.props.fieldProps.value, this.state.pos )
+      )
+      this.setState({ value: addZeroToDecimalPosition( this.props.fieldProps.value, this.state.pos ) })
+    }
+  }
 
   toggleDropwdown() {
     this.setState({ showDropdown: !this.state.showDropdown })
@@ -93,7 +101,7 @@ class AmountUnitField extends React.Component {
       <div className='form-group'>
         {this.props.title && <FieldLabel>{this.props.title}</FieldLabel>}
         <div className='input-group'>
-          {<input className='form-control'
+          <input className='form-control'
             type={this.state.type}
             {...fieldProps}
             value={formatBTMAmount(this.state.value, this.state.pos)}
@@ -101,7 +109,7 @@ class AmountUnitField extends React.Component {
             autoFocus={!!this.props.autoFocus}
             onBlur={this.handleBlur}
             onChange={this.handleChange}
-          />}
+          />
 
 
           <div className={`input-group-btn ${this.state.showDropdown && 'open'}`}>
index ff6ad30..dfa666b 100644 (file)
@@ -74,7 +74,7 @@ export default class ActionItem extends React.Component {
     const btmAmounUnitVisible = (assetAlias.value === 'BTM' ||
       assetId.value === 'ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff' )
 
-    const decimal = this.props.decimal
+    const decimal = this.props.decimal || 0
 
     const classNames = [styles.main]
     if (type.error) classNames.push(styles.error)
@@ -122,10 +122,7 @@ export default class ActionItem extends React.Component {
             }}
           />}
 
-        {visible.amount && !btmAmounUnitVisible && !decimal &&
-          <TextField title={ lang === 'zh' ? '数量' :'Amount' } fieldProps={amount} />}
-
-        {visible.amount && !btmAmounUnitVisible && decimal &&
+        {visible.amount && !btmAmounUnitVisible &&
           <AmountInputMask title={ lang === 'zh' ? '数量' :'Amount' } fieldProps={amount} decimal={decimal} />}
 
         {visible.amount && btmAmounUnitVisible &&
index 1be1a2f..34d6763 100644 (file)
@@ -169,7 +169,7 @@ class NormalTxForm extends React.Component {
       const range = rangeOptions.find(item => item.label === event.target.value)
       gas.price.onChange(range.value)
     }
-    const assetDecimal = this.props.assetDecimal(this.props.fields)
+    const assetDecimal = this.props.assetDecimal(this.props.fields) || 0
 
     const showAvailableBalance = (accountAlias.value || accountId.value) &&
       (assetAlias.value || assetId.value)
@@ -220,10 +220,7 @@ class NormalTxForm extends React.Component {
                   this.estimateNormalTransactionGas()
                 },
               }}/>
-              {!showBtmAmountUnit && !assetDecimal &&
-              <TextField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount}
-              />}
-              {!showBtmAmountUnit && assetDecimal &&
+              {!showBtmAmountUnit &&
               <AmountInputMask title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount} decimal={assetDecimal}
               />}
               {showBtmAmountUnit &&