@unicef/material-ui 0.8.1 → 0.8.2

package/lib/prod.js

@@ -46901,6 +46901,71 @@ UPositiveInteger.propTypes = {
   withRequiredValidator: PropTypes__default.bool
 };
 
+var useStyles$n = makeStyles$1(function (theme) {
+  return {
+    startAdornmentContainer: {
+      marginRight: theme.spacing(0.5)
+    }
+  };
+});
+
+function UCurrencyField(_ref) {
+  var inputPrefix = _ref.inputPrefix,
+      decimalScale = _ref.decimalScale,
+      InputProps = _ref.InputProps,
+      inputProps = _ref.inputProps,
+      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'InputProps', 'inputProps']);
+
+  var classes = useStyles$n(props);
+  return React__default.createElement(UPositiveInteger, _extends$1({
+    variant: 'outlined',
+    InputProps: _extends$1({
+      startAdornment: React__default.createElement(
+        'span',
+        { className: classes.startAdornmentContainer },
+        inputPrefix
+      )
+    }, InputProps),
+    inputProps: _extends$1({ decimalScale: decimalScale }, inputProps)
+  }, props));
+}
+
+UCurrencyField.propTypes = {
+  /** label */
+  label: PropTypes__default.string,
+  /** placeholder text*/
+  placeholder: PropTypes__default.string,
+  /**
+   * Array of validators.See list of default validators above.
+   *
+   * Ex: `validators={['required', 'isEmail']}`
+   */
+  validators: PropTypes__default.array,
+  /** Attributes applied to the input element. */
+  inputProps: PropTypes__default.object,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes__default.object,
+  /** Prefix string for the input. */
+  inputPrefix: PropTypes__default.string,
+  /** Decimal digit number to be used as default. */
+  decimalScale: PropTypes__default.number,
+  /**
+   * customErrorMessages is an object with key as validator and value as customised error message.
+   *
+   * Ex: `customErrorMessages={{required: 'This field is required'}`
+   */
+  customErrorMessages: PropTypes__default.object,
+  /** To make the content readOnly */
+  readOnly: PropTypes__default.bool,
+  /** Name of input. */
+  name: PropTypes__default.string
+};
+
+UCurrencyField.defaultProps = {
+  inputPrefix: '$',
+  decimalScale: 2
+};
+
 function ActiveFormPositiveInteger(_ref) {
   var InputProps = _ref.InputProps,
       props = objectWithoutProperties(_ref, ['InputProps']);
@@ -46949,6 +47014,81 @@ ActiveFormPositiveInteger.propTypes = {
   withRequiredValidator: PropTypes__default.bool
 };
 
+var useStyles$o = makeStyles$1(function (theme) {
+  return {
+    startAdornmentContainer: {
+      marginRight: theme.spacing(0.5)
+    }
+  };
+});
+
+function ActiveCurrencyField(_ref) {
+  var inputPrefix = _ref.inputPrefix,
+      decimalScale = _ref.decimalScale,
+      InputProps = _ref.InputProps,
+      inputProps = _ref.inputProps,
+      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'InputProps', 'inputProps']);
+
+  var classes = useStyles$o(props);
+  return React__default.createElement(ActiveFormPositiveInteger, _extends$1({
+    variant: 'outlined',
+    InputProps: _extends$1({
+      startAdornment: React__default.createElement(
+        'span',
+        { className: classes.startAdornmentContainer },
+        inputPrefix
+      )
+    }, InputProps),
+    inputProps: _extends$1({ decimalScale: decimalScale }, inputProps)
+  }, props));
+}
+
+ActiveCurrencyField.propTypes = {
+  /** label */
+  label: PropTypes__default.string,
+  /** placeholder text*/
+  placeholder: PropTypes__default.string,
+  /** Typography for text inside the input (Ex: h1, div, etc.) */
+  typographyVariant: PropTypes__default.string,
+  /** Input has some default padding already, to make changes to it pass padding like `inputPadding='0px 2px'` */
+  inputPadding: PropTypes__default.string,
+  /** To hide or display the textfied border*/
+  showBorder: PropTypes__default.bool,
+  /**
+   * Array of validators.See list of default validators above.
+   *
+   * Ex: `validators={['required', 'isEmail']}`
+   */
+  validators: PropTypes__default.array,
+  /** Attributes applied to the input element. */
+  inputProps: PropTypes__default.object,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes__default.object,
+  /** Prefix string for the input. */
+  inputPrefix: PropTypes__default.string,
+  /** Decimal digit number to be used as default. */
+  decimalScale: PropTypes__default.number,
+  /**
+   * customErrorMessages is an object with key as validator and value as customised error message.
+   *
+   * Ex: `customErrorMessages={{required: 'This field is required'}`
+   */
+  customErrorMessages: PropTypes__default.object,
+  /** To make the content readOnly */
+  readOnly: PropTypes__default.bool,
+  /** Name of input. */
+  name: PropTypes__default.string,
+  /** It triggers after each validation.It will return true or false. */
+  validatorListener: PropTypes__default.func,
+  /** Allow to use required validator in any validation trigger, not only form submit. */
+  withRequiredValidator: PropTypes__default.bool
+};
+
+ActiveCurrencyField.defaultProps = {
+  inputPrefix: '$',
+  decimalScale: 2
+};
+
 var DeleteOutlined = createCommonjsModule(function (module, exports) {
 
 
@@ -46973,7 +47113,7 @@ exports.default = _default;
 
 var DeleteOutlinedIcon = unwrapExports(DeleteOutlined);
 
-var useStyles$n = makeStyles$1(function (theme) {
+var useStyles$p = makeStyles$1(function (theme) {
   return {
     menuDelete: {
       width: '500px'
@@ -46993,7 +47133,7 @@ var useStyles$n = makeStyles$1(function (theme) {
  * It has two varint icon/menu item
  */
 function UConfirmationButton(props) {
-  var classes = useStyles$n();
+  var classes = useStyles$p();
   var onConfirm = props.onConfirm,
       id = props.id,
       buttonText = props.buttonText,
@@ -47108,7 +47248,7 @@ UConfirmationButton.defaultProps = {
 /**
  * displays radio buttons
  */
-var useStyles$o = makeStyles$1(function (theme) {
+var useStyles$q = makeStyles$1(function (theme) {
   return {
     padding: {
       paddingLeft: theme.spacing(3)
@@ -47129,7 +47269,7 @@ function URadioButtons(_ref) {
       optionLabels = _ref.optionLabels,
       optionValues = _ref.optionValues;
 
-  var classes = useStyles$o();
+  var classes = useStyles$q();
   var handleOnChange = function handleOnChange(event) {
     onChange && onChange(event);
   };
@@ -47233,7 +47373,7 @@ exports.default = _default;
 
 var DoneIcon = unwrapExports(Done);
 
-var useStyles$p = makeStyles$1(function (theme) {
+var useStyles$r = makeStyles$1(function (theme) {
   return {
     root: {
       position: 'fixed',
@@ -47265,7 +47405,7 @@ function UAsyncBadge(_ref) {
       visible = _ref.visible,
       onReset = _ref.onReset;
 
-  var classes = useStyles$p();
+  var classes = useStyles$r();
 
   /**  If variant is success or error, after few seconds, it will set asyncResponse visible to false */
   React.useEffect(function () {
@@ -47304,7 +47444,7 @@ UAsyncBadge.propTypes = {
   onReset: PropTypes__default.func
 };
 
-var useStyles$q = makeStyles$1(function () {
+var useStyles$s = makeStyles$1(function () {
   return {
     pageLoadingProgress: {
       height: '50vh',
@@ -47319,7 +47459,7 @@ var useStyles$q = makeStyles$1(function () {
  * 2. Display text message
  */
 function UPageLoadingProgress(props) {
-  var classes = useStyles$q();
+  var classes = useStyles$s();
   var text = props.text;
 
   return React__default.createElement(
@@ -49172,7 +49312,7 @@ UErrorAlert.defaultProps = {
 
 var filter = createFilterOptions();
 
-var useStyles$r = makeStyles$1(function (theme) {
+var useStyles$t = makeStyles$1(function (theme) {
   return {
     controlStyle: {
       marginTop: theme.spacing(2),
@@ -49200,7 +49340,7 @@ function UAutoComplete(_ref) {
       allowContextSpecific = _ref.allowContextSpecific,
       props = _ref.props;
 
-  var classes = useStyles$r();
+  var classes = useStyles$t();
   //const dispatch = useDispatch()
 
   var _useState = React.useState(value || null),
@@ -49349,7 +49489,7 @@ UAutoComplete.defaultProps = {
 
 /* eslint-disable no-nested-ternary */
 
-var useStyles$s = makeStyles$1(function (theme) {
+var useStyles$u = makeStyles$1(function (theme) {
   var _ref;
 
   return _ref = {
@@ -49381,7 +49521,7 @@ var useStyles$s = makeStyles$1(function (theme) {
  * Breadcrumbs is a component to implement current user path of the application
  */
 function UBreadcrumbs(props) {
-  var classes = useStyles$s();
+  var classes = useStyles$u();
   var breadcrumbLinks = props.breadcrumbLinks;
 
 
@@ -49458,7 +49598,7 @@ UInfiniteScroll.propTypes = {
   onEndOfScroll: PropTypes__default.func
 };
 
-var useStyles$t = makeStyles$1(function (theme) {
+var useStyles$v = makeStyles$1(function (theme) {
   return {
     small: {
       width: theme.spacing(4),
@@ -49503,7 +49643,7 @@ function UAvatarImage(_ref) {
       zIndexValue = _ref.zIndexValue,
       loadPhoto = _ref.loadPhoto;
 
-  var classes = useStyles$t();
+  var classes = useStyles$v();
 
   var _useState = React.useState(''),
       _useState2 = slicedToArray(_useState, 2),
@@ -49935,7 +50075,7 @@ exports.default = _default;
 
 var CloseIcon$1 = unwrapExports(Close);
 
-var useStyles$u = makeStyles$1(function (theme) {
+var useStyles$w = makeStyles$1(function (theme) {
   return {
     root: {
       width: '100%',
@@ -49975,7 +50115,7 @@ function USearchBox(_ref) {
       searchValue = _useState2[0],
       setSearch = _useState2[1];
 
-  var classes = useStyles$u();
+  var classes = useStyles$w();
 
   var handleChange = function handleChange(event) {
     setSearch(event.target.value);
@@ -50076,7 +50216,7 @@ var styles$16 = {
   }
 };
 
-var useStyles$v = makeStyles$1(function (theme) {
+var useStyles$x = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -50119,7 +50259,7 @@ var useStyles$v = makeStyles$1(function (theme) {
  * ActiveKeyboardDatePicker is a customized [Material Ui KeyboardDatePicker]('https://material-ui-pickers.dev/api/KeyboardDatePicker') for more details
  */
 function ActiveKeyboardDatePicker(props) {
-  var classes = useStyles$v(props);
+  var classes = useStyles$x(props);
   var autoOk = props.autoOk,
       variant = props.variant,
       inputVariant = props.inputVariant,
@@ -50238,7 +50378,7 @@ var styles$17 = {
   }
 };
 
-var useStyles$w = makeStyles$1(function (theme) {
+var useStyles$y = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -50277,7 +50417,7 @@ var useStyles$w = makeStyles$1(function (theme) {
  * Please have look at [Material Ui Date Picker]('https://material-ui-pickers.dev/api/DatePicker') for more details
  */
 function ActiveDatePicker(props) {
-  var classes = useStyles$w(props);
+  var classes = useStyles$y(props);
   var autoOk = props.autoOk,
       variant = props.variant,
       inputVariant = props.inputVariant,
@@ -50371,7 +50511,7 @@ var styles$18 = {
   }
 };
 
-var useStyles$x = makeStyles$1(function (theme) {
+var useStyles$z = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -50410,7 +50550,7 @@ var useStyles$x = makeStyles$1(function (theme) {
  * Please have look at [Material Ui TimePicker]('https://material-ui-pickers.dev/api/TimePicker') for more details
  */
 function ActiveTimePicker(props) {
-  var classes = useStyles$x(props);
+  var classes = useStyles$z(props);
   var inputVariant = props.inputVariant,
       readOnly = props.readOnly,
       interactiveMode = props.interactiveMode,
@@ -50495,7 +50635,7 @@ var styles$19 = {
   }
 };
 
-var useStyles$y = makeStyles$1(function (theme) {
+var useStyles$A = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -50538,7 +50678,7 @@ var useStyles$y = makeStyles$1(function (theme) {
  * ActiveKeyboardTimePicker is customized [ Material Ui KeyboardTimePicker](https://material-ui-pickers.dev/api/KeyboardTimePicker)
  */
 function ActiveKeyboardTimePicker(props) {
-  var classes = useStyles$y(props);
+  var classes = useStyles$A(props);
   var inputVariant = props.inputVariant,
       readOnly = props.readOnly,
       interactiveMode = props.interactiveMode,
@@ -50640,6 +50780,7 @@ ActiveKeyboardTimePicker.defaultProps = {
   variant: 'inline'
 };
 
+exports.ActiveCurrencyField = ActiveCurrencyField;
 exports.ActiveDatePicker = ActiveDatePicker;
 exports.ActiveFormCoordinateField = ActiveFormCoordinateField;
 exports.ActiveFormPositiveInteger = ActiveFormPositiveInteger;
@@ -50656,6 +50797,7 @@ exports.UButton = UButton;
 exports.UConfirmationButton = UConfirmationButton;
 exports.UContent = UContent;
 exports.UCoordinateField = UCoordinateField;
+exports.UCurrencyField = UCurrencyField;
 exports.UDatePicker = UDatePicker;
 exports.UDateTimePicker = UDateTimePicker;
 exports.UErrorAlert = UErrorAlert;