pcm-shared-components 0.0.173 → 0.0.174

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

@@ -0,0 +1,256 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Input from '@mui/material/Input';
+import { InputAdornment } from '@mui/material';
+import TextField from '@mui/material/TextField';
+let debounce;
+/**
+ * ## Importing the component in your project
+ * 
+ ```js
+
+ import {CurrencyTextInput} from 'pcm-shared-components';
+ 
+ ```
+ * 
+ */
+
+export const CurrencyTextInput = props => {
+  const {
+    value,
+    label,
+    variant,
+    fullWidth,
+    onChange,
+    onChangeDebounce,
+    currencySymbol,
+    className,
+    decimalPlaces,
+    maximumValue,
+    minimumValue,
+    textAlign,
+    useThousandSeparator,
+    fontSize,
+    textPadding,
+    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]); //---------------------------------------------------
+  // Functions used to sanitize the number 
+  //---------------------------------------------------
+
+  const sanitizeDecimalDots = value => {
+    //Ensures we only have one decimal dot in our number
+    try {
+      return String(value).replace(/[.](?=.*[.])/g, "");
+    } catch (error) {
+      console.error(error);
+    }
+
+    return value;
+  };
+
+  const sanitizeDigits = value => {
+    //Ensures we only have digits in our number
+    try {
+      //Allow normal numbers, negative number and dots
+      const isNegativeNumber = value[0] === '-';
+      let returnVal = String(value).replace(/[^\d.]/gi, '');
+      return `${isNegativeNumber ? '-' : ''}${returnVal}`; //Only allow numbers and dots
+      // return String(value).replace(/[^\d.]/gi, '');
+    } catch (error) {
+      console.error(error);
+    }
+
+    return value;
+  };
+
+  const sanitizeDecimalPlaces = value => {
+    try {
+      // Only apply this rule if we have a decimal place with something in it or else skip because it's causing inconsistent number formatting when entering the digits
+      const decimalCheck = String(value).split('.');
+
+      if (decimalCheck.length === 2 && decimalCheck[1].length > 0) {
+        return Number(value).toLocaleString(undefined, {
+          minimumFractionDigits: 1,
+          maximumFractionDigits: decimalPlaces,
+          useGrouping: false
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return value;
+  };
+
+  const sanitizeMinMaxValues = value => {
+    try {
+      if (!isNaN(value)) {
+        if (Number(value) > maximumValue) {
+          return maximumValue;
+        }
+
+        if (Number(value) < minimumValue) {
+          return minimumValue;
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return value;
+  };
+
+  const sanitizeThousandPlaces = value => {
+    try {
+      // Only apply the thousand grouping on the numbers before the decimal
+      if (useThousandSeparator && !isNaN(value)) {
+        const digits = String(value).split('.');
+
+        if (digits[0].length > 0) {
+          const thousandFormatted = Number(digits[0]).toLocaleString(undefined, {
+            useGrouping: true
+          });
+
+          if (digits.length === 2) {
+            //Let's keep any additional DOT and decimal places even if they are empty
+            return `${thousandFormatted}.${digits[1]}`;
+          } else {
+            return thousandFormatted;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return value;
+  };
+
+  const handleCurrencyFormatting = value => {
+    let returnVal = value;
+
+    try {
+      returnVal = sanitizeMinMaxValues(returnVal);
+      returnVal = sanitizeDecimalDots(returnVal);
+      returnVal = sanitizeDigits(returnVal);
+      returnVal = sanitizeDecimalPlaces(returnVal);
+      returnVal = sanitizeThousandPlaces(returnVal);
+    } catch (error) {
+      console.error(error);
+    }
+
+    return returnVal;
+  };
+
+  const handleOnChange = event => {
+    setLocalValue(event.target.value);
+    onChange(event.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(TextField, {
+    id: "input-with-icon-textfield",
+    className: ` ${className}`,
+    fullWidth: fullWidth,
+    label: label,
+    value: handleCurrencyFormatting(value),
+    onChange: handleOnChange,
+    inputProps: {
+      autoComplete: "new-password",
+      style: {
+        textAlign: textAlign,
+        fontSize: fontSize,
+        padding: textPadding
+      }
+    },
+    InputProps: {
+      startAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "start"
+      }, currencySymbol)
+    },
+    variant: variant
+  }));
+};
+export default CurrencyTextInput;
+CurrencyTextInput.defaultProps = {
+  value: 0,
+  label: 'Some Label',
+  variant: 'outlined',
+  fullWidth: true,
+  onChange: () => {},
+  onChangeDebounce: () => {},
+  currencySymbol: '$',
+  useThousandSeparator: true,
+  className: '',
+  decimalPlaces: 2,
+  maximumValue: 10000000000000,
+  minimumValue: -10000000000000,
+  textAlign: 'right',
+  fontSize: 16,
+  textPadding: 4,
+  theme: undefined
+};
+CurrencyTextInput.propTypes = {
+  /** Value to be enter and display in input */
+  value: PropTypes.string,
+
+  /** The label content*/
+  label: PropTypes.string,
+
+  /** Controls the look of the text field*/
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
+
+  /** Determines if the text field will be full width or fit content*/
+  fullWidth: PropTypes.bool,
+
+  /** Determines if the final number grouping will contain the thousand separator */
+  useThousandSeparator: PropTypes.bool,
+
+  /** 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,
+
+  /** Classes to add to the wrapper control*/
+  className: PropTypes.string,
+
+  /** Controls the font size in in pt example: 14*/
+  fontSize: PropTypes.number,
+
+  /** Controls the padding around the font */
+  textPadding: PropTypes.number,
+
+  /** Defines the default number of decimal places to show on the formatted value.*/
+  decimalPlaces: PropTypes.number,
+
+  /** Maximum value that can be enter*/
+  maximumValue: PropTypes.number,
+
+  /** Minimum value that can be entered*/
+  minimumValue: PropTypes.number,
+
+  /** Align the numbers in the textField.*/
+  textAlign: PropTypes.oneOf(['left', 'right']),
+
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
+  theme: PropTypes.object
+};

package/dist/index.js

@@ -20,4 +20,5 @@ import coreLocals from './locals/coreLocals';
 import currencySymbol from './locals/currencySymbol';
 import DateRangeCalendar from './components/Date/DateRangeCalendar';
 import SimpleLabel from './components/Labels/SimpleLabel';
-export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, SimpleLabel };
+import CurrencyTextInput from './components/TextBoxes/CurrencyTextInput';
+export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, SimpleLabel, CurrencyTextInput };

package/package.json

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