pcm-shared-components 0.0.177 → 0.0.180

package/dist/components/TextBoxes/CurrencyTextInput/index.js

@@ -21,12 +21,13 @@ let debounce;
 
 export const CurrencyTextInput = props => {
   const {
+    id,
+    name,
     value,
     label,
     variant,
     fullWidth,
     onChange,
-    onChangeDebounce,
     currencySymbol,
     className,
     decimalPlaces,
@@ -36,18 +37,13 @@ export const CurrencyTextInput = props => {
     useThousandSeparator,
     fontSize,
     textPadding,
+    error,
+    helperText,
+    disabled,
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme); //Hooks
-
-  const [localValue, setLocalValue] = useState(value);
-  useEffect(() => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => {
-      onChangeDebounce(localValue);
-    }, 700);
-  }, [localValue]); //---------------------------------------------------
+  const defaultTheme = createTheme(compTheme); //---------------------------------------------------
   // Functions used to sanitize the number 
   //---------------------------------------------------
 
@@ -157,14 +153,19 @@ export const CurrencyTextInput = props => {
   };
 
   const handleOnChange = event => {
-    setLocalValue(event.target.value);
+    //Sanitize the output same as the input
+    event.target.value = handleCurrencyFormatting(event.target.value);
     onChange(event);
   };
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(TextField, {
-    id: "input-with-icon-textfield",
+    id: id,
+    name: name,
+    error: error,
+    helperText: helperText,
+    disabled: disabled,
     className: ` ${className}`,
     fullWidth: fullWidth,
     label: label,
@@ -190,12 +191,13 @@ export const CurrencyTextInput = props => {
 };
 export default CurrencyTextInput;
 CurrencyTextInput.defaultProps = {
+  id: '',
+  name: '',
   value: 0,
   label: 'Some Label',
   variant: 'outlined',
   fullWidth: true,
   onChange: () => {},
-  onChangeDebounce: () => {},
   currencySymbol: '$',
   useThousandSeparator: true,
   className: '',
@@ -205,9 +207,18 @@ CurrencyTextInput.defaultProps = {
   textAlign: 'right',
   fontSize: 16,
   textPadding: 4,
+  error: false,
+  disabled: false,
+  helperText: '',
   theme: undefined
 };
 CurrencyTextInput.propTypes = {
+  /** Unique id of the component */
+  id: PropTypes.string,
+
+  /** Name of the target often used to update state*/
+  name: PropTypes.string,
+
   /** Value to be enter and display in input */
   value: PropTypes.string,
 
@@ -217,6 +228,15 @@ CurrencyTextInput.propTypes = {
   /** Controls the look of the text field*/
   variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
 
+  /** Determines if the text field will be in an error state*/
+  error: PropTypes.bool,
+
+  /** Determines if the text field is disabled of not*/
+  disabled: PropTypes.bool,
+
+  /** Helper text to display below the field*/
+  helperText: PropTypes.string,
+
   /** Determines if the text field will be full width or fit content*/
   fullWidth: PropTypes.bool,
 
@@ -226,9 +246,6 @@ CurrencyTextInput.propTypes = {
   /** Callback fired when the value is changed*/
   onChange: PropTypes.func,
 
-  /** Same as onChange except only fires 700ms after the users has completed typing to prevent performance issues. Returns the new value */
-  onChangeDebounce: PropTypes.func,
-
   /** Defines the currency symbol string.*/
   currencySymbol: PropTypes.string,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.177",
+  "version": "0.0.180",
   "private": false,
   "main": "dist/index.js",
   "babel": {