unicef / material-ui-currency-textfield Goto Github PK

If I dont want a currency symbol displayed, there is a gap between the beginning of the textbox and where the text starts. Can this be removed

Hi

Is it possible to have label floating style?

I guess it's not floating because it considers empty value as 0, is that correct? can I override it?

wants to disable the onWheel event I am using this CurrencyTextField in Redux form

CurrencyTextField
className='form-control'
// autoFocus={false}
currencySymbol="₹"
value={value}
textAlign="left"
minimumValue={0}
onChange={(event, value) => {
this.props.change('*****', value);
}} />

Hi.
The CurrencyTextField component does not support autoComplete as a valid props.
This should be solved with changing otherProps array inside CurrencyTextFields.js filte under src/components/CurrencyTextField directory.

Please add it,
Thanks.

I'm trying to create a dynamic maximum value when an on change function happens.

For instance:

• I have a maximum value of 100.
• I have three currency input fields.
• I place 50 into the first input field.
• I place 40 into the second field.

I've gone ahead and implemented state that would cover this. But even if the maximumValue is 0. I can still enter numbers

It would be great if this could work with versions later than 16.

npm install @unicef/material-ui-currency-textfield --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: MY_REPO
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     peer @material-ui/core@">= 4.3.0" from @unicef/[email protected]
npm ERR!     node_modules/@unicef/material-ui-currency-textfield
npm ERR!       @unicef/material-ui-currency-textfield@"*" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from @unicef/[email protected]
npm ERR! node_modules/@unicef/material-ui-currency-textfield
npm ERR!   @unicef/material-ui-currency-textfield@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Component' input appears to have max value of 9,999,999,999,999.99 - can it be greater that this?

Doing something like this:
resetValue = () => { this.setState({ value: 0, }); };
will not work as it work in any other text field.

As one can see, currently only a limited set of prop names are passed into underlying TextField component.

It is quite often required to manage Input label props, e.g. provide custom styles via classes, or add custom shrinking behavior

Is it possible to include InputLabelProps prop to a list of allowed props so that above could be achieved?

Thanks

The onChange callback used by the currency text field is a bit problematic because of the vague guarantees it provides of being called. I'm experiencing a problem with Chrome on Android where the the callback is ~always called with outdated data because according to specification the event doesn't need to fire every time something changes. It would be nice if CurrencyTextField would also support the onInput callback that is guaranteed to be called every time the user modifies the value.

When installing this dependency using react 17 an error is produced (as below). It would be great if this could work with versions later than 16.

npm install @unicef/material-ui-currency-textfield --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: MY_REPO
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     peer @material-ui/core@">= 4.3.0" from @unicef/[email protected]
npm ERR!     node_modules/@unicef/material-ui-currency-textfield
npm ERR!       @unicef/material-ui-currency-textfield@"*" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from @unicef/[email protected]
npm ERR! node_modules/@unicef/material-ui-currency-textfield
npm ERR!   @unicef/material-ui-currency-textfield@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

There was already an issue for this: #6

However it was closed without actually being resolved. The currently published npm version is still missing Typescript definitions.

All that is required is to change the imports from @material-ui to @mui

Is any option to remove decimal value like .00 from any number
example: when type 25001 then it display as 25,001.00

This is a problem related to the autonumeric version of the lib

I have an existing project with @material-ui/core version 4.4.2 which uses @material-ui/[email protected]

This component has mui as a dependency rather than a peer dep. Which causes a duplicate instance of the styles package

It looks like there are several instances of `@material-ui/styles` initialized in this application.
This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.

See https://material-ui.com/r/styles-instance-warning for more info.

You should consider making it a peer dep

Can you check the following example please?
I can't write more than 1 digit.

https://codesandbox.io/s/issue-material-ui-currency-textfield-tr2u1

(Wish I could tag this as a question, or that there would be a discussion tab. I can't really ask this on Stackoverflow because it will never be answered).

I'm getting this CurrencyTextField-textField-1 class, which I can see on my snapshot tests. And the test works fine on my local. The class is always called that. But I have the feeling that's dynamically generated and the number at the end is not guaranteed to be the same every time? Because on our build environment it's different and my snapshot test fails.

Is there a way of avoiding this or should I give up on snapshot testing on that screen?

Thanks.

Hey there,

I have noticed, that the value prop is not being passed down from CurrencyTextField in otherProps to TextField, thus not available in the components below.

In my case I overwrite OutlinedInput style based on existence of this prop, so my style does not show up as intended, because the value is always undefined...

It's not that of a big problem, but it would help me a lot and maybe other people in the future as well, if you would add it to otherProps, and also bring the behaviour of CurrencyTextField closer to MUI TextField.

ps. thanks for all your work!

Code:

Hi,

After installing the module I cannot import it because of this message.
I've tried installing '@types/unicef__material-ui-currency-textfield' too but it gives me 404.

"@unicef/material-ui-currency-textfield": "^0.8.4"
"react": "^16.4.2"

Could not find a declaration file for module '@unicef/material-ui-currency-textfield'. '/home/nilton/Projects/Horus_Web/frontend/node_modules/@unicef/material-ui-currency-textfield/dist/index.js' implicitly has an 'any' type.
Try npm install @types/unicef__material-ui-currency-textfield if it exists or add a new declaration (.d.ts) file containing `declare module '@unicef/material-ui-currency-textfield'

Any tip?

Thank you

We are getting the following on our production environment.
It is very weird, when we Empty Cache and Hard reload the issue resolves.
Any idea why it is happening for first time visiting users?

This is how we using it:

import CurrencyTextField from '@unicef/material-ui-currency-textfield';
import React from 'react';

const Price = ({
  name,
  value,
  setFieldValue,
  minimumValue = '0',
  decimalPlaces = 0,
  decimalCharacter = '.',
  digitGroupSeparator = ',',
}) => {
  return (
    <CurrencyTextField
      id={name}
      value={value}
      label={'label'}
      variant={'outlined'}
      outputFormat={'string'}
      minimumValue={minimumValue}
      style={{
        minWidth: '240px',
      }}
      textAlign="left"
      helperText={'asdf'}
      decimalPlaces={decimalPlaces}
      currencySymbol={'$'}
      decimalCharacter={decimalCharacter}
      digitGroupSeparator={digitGroupSeparator}
      onChange={(event, value) => setFieldValue(name, value)}
    />
  );
};

export default Price;

This was almost perfect for what I needed...except my client needs to type in the cents and needs that mask to show the separator and cents while users type.

If the user types 12345678 it would (in pt-BR) show while typing: 123.456,78.

Is there any feature or option to make that possible?
Thanks.

I got this warning in browser:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: CurrencyTextField

Any chance to update the component?

After you enter 1, it becomes 1.00 immediately and the cursor moves to the end, and it doesn't accept input 99 anymore. You have to select the two 0s and enter the digit again. Did I miss some options?

I'm encountering a problem with setting error state to indicate a problematic value. Everything seems to work fine if I just set error={true} but if I set error to true based on some state the currency field ends up copying the currency indicator in to the value. The field ends up reading EUR EUR10.00 and editing the value doesn't work correctly because EUR is included as part of the value of the native input element.

Hello

I'm using a ReactNode in currencySymbol prop:

Is there a chance to revert the type check and also allow react nodes?

Thanks

The error validations do not work very well with react-hook-form
On submit, the error is not displayed when validation fails

Relevant CodeSandbox

Using @material-ui input with input adornments however works:

<FormControl variant="outlined" className={classes.formControl}>
 <InputLabel htmlFor="amount">Amount</InputLabel>
   <OutlinedInput
                 inputRef={register({
                   validate: (value) =>
                     value && typeof value === "number" && value > 0,
                 })}
                 name="amount"
                 value={amount}
                 onChange={(e) => setAmount(e.target.value)}
                 startAdornment={
                   <InputAdornment position="start">$</InputAdornment>
                 }
                 labelWidth={60}
               />
               {errors.amount && (
                 <FormHelperText error variant="outlined">
                   Please enter an amount
                 </FormHelperText>
               )}
             </FormControl>

I can't successfully to install this package right now, I got error:

Error: Cannot find module 'autonumeric'

Hi, I couldn't find any good solution to reverse order of Input field and currency icon.
I need that possibility, due to other fields of material ui looks different, and their Input field on the left.

How can I change Input field on the left, currency icon on the right?
Example:

Hey there! Can you please tell me how to disable the auto fill on decimals?

Thanks!