feat: PhoneNumberInput trims special char

reactioncommerce · Jul 17, 2018 · 37662ec · 37662ec
1 parent 5b34504
commit 37662ec
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/package/src/components/PhoneNumberInput/v1/PhoneNumberInput.js b/package/src/components/PhoneNumberInput/v1/PhoneNumberInput.js
@@ -1,25 +1,25 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
-import { applyTheme } from "../../../utils";
-
-const StyledDiv = styled.div`
-  color: #333333;
-`;
+import TextInput from "../../TextInput/v1";
 
 class PhoneNumberInput extends Component {
-  static propTypes = {
+  static propTypes = {};
 
-  };
+  static defaultProps = {};
 
-  static defaultProps = {
+  state = {
+    value: this.props.value || ""
+  };
 
+  handdleChanging = (value) => {
+    if (!value) return;
+    const trimedValue = value.replace(/\D/g, "");
+    this.setState({ value: trimedValue });
   };
 
   render() {
-    return (
-      <StyledDiv>TEST</StyledDiv>
-    );
+    const { value } = this.state;
+    return <TextInput onChanging={this.handdleChanging} value={value} />;
   }
 }
 

diff --git a/package/src/components/PhoneNumberInput/v1/PhoneNumberInput.md b/package/src/components/PhoneNumberInput/v1/PhoneNumberInput.md
@@ -1,3 +1,6 @@
 ### PhoneNumberInput
 
-Document component here. See https://react-styleguidist.js.org/docs/documenting.html
+#### Basic Usage
+```jsx
+<PhoneNumberInput />
+```