Current call control_keypad (#292)

* current call control_keypad

* adjust ui

* adjust indentation

Author: sophiewu2333

src/components/ActiveCallDialPad/index.js

@@ -19,14 +19,14 @@ class ActiveCallDialPad extends Component {
     this.state = {
       value: '',
     };
-    this.onTextChange = (e) => {
-      const value = e.currentTarget.value;
-      const cleanValue = value.replace(cleanRegex, '');
-      if (value !== cleanValue) {
-        return;
-      }
-      this.setState({ value });
-    };
+    // this.onTextChange = (e) => {
+      // const value = e.currentTarget.value;
+      // const cleanValue = value.replace(cleanRegex, '');
+      // if (value !== cleanValue) {
+      //   return;
+      // }
+      // this.setState({ value });
+    // };
     this.onButtonOutput = (key) => {
       this.setState((preState) => {
         const value = preState.value + key;
@@ -39,11 +39,12 @@ class ActiveCallDialPad extends Component {
   render() {
     return (
       <div className={styles.root}>
-        <TextInput
-          className={styles.dialInput}
-          value={this.state.value}
-          onChange={this.onTextChange}
-        />
+        <div className={styles.dialInput}>
+          <input
+            className={styles.input}
+            value={this.state.value}
+          />
+        </div>
         <DialPad
           className={styles.dialPad}
           onButtonOutput={this.onButtonOutput}

src/components/ActiveCallDialPad/styles.scss

@@ -1,5 +1,6 @@
+@import '../../lib/commonStyles/colors';
 .root {
-  margin: 20px 10px 0 10px;
+  margin: 44px 10px 0 10px;
 }
 
 .dialPad {
@@ -11,13 +12,21 @@
   box-sizing: content-box;
   border: 0px;
   margin-bottom: 5px;
-  color: dimgrey;
   padding: 5px;
   input {
     box-sizing: content-box;
-    font-size: 18px;
-    text-align: left;
+    text-align: center;
     padding: 0;
+    outline: 0;
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+    border: none;
+    font-size:15px;
+    color: $lightblack;
+  }
+  .input::-ms-clear {
+    display: none;
   }
 }
 

src/components/ActiveCallPanel/index.js

@@ -141,18 +141,21 @@ class ActiveCallPanel extends Component {
         currentLocale={this.props.currentLocale}
       />
     ) : null;
+    const backHeader = this.state.isShowKeyPad ? null : (
+      <BackHeader
+        onBackClick={this.props.onBackButtonClick}
+        backButton={(
+          <span className={styles.backButton}>
+            <i className={classnames(dynamicsFont.arrow, styles.backIcon)} />
+            <span className={styles.backLabel}>{this.props.backButtonLabel}</span>
+          </span>
+        )}
+        buttons={[]}
+      />
+    );
     return (
       <div className={styles.root}>
-        <BackHeader
-          onBackClick={this.props.onBackButtonClick}
-          backButton={(
-            <span className={styles.backButton}>
-              <i className={classnames(dynamicsFont.arrow, styles.backIcon)} />
-              <span className={styles.backLabel}>{this.props.backButtonLabel}</span>
-            </span>
-          )}
-          buttons={[]}
-        />
+        {backHeader}
         <Panel>
           {userInfo}
           {buttonsPad}