Add InputMask component helper
This commit is contained in:
parent
4af2da5fe9
commit
df251c0de3
4 changed files with 64 additions and 1 deletions
21
package-lock.json
generated
21
package-lock.json
generated
|
@ -18,6 +18,7 @@
|
||||||
"dayjs": "^1.11.3",
|
"dayjs": "^1.11.3",
|
||||||
"react": "^18.1.0",
|
"react": "^18.1.0",
|
||||||
"react-dom": "^18.1.0",
|
"react-dom": "^18.1.0",
|
||||||
|
"react-number-format": "^5.0.0-beta.4",
|
||||||
"react-pdf": "^5.7.2",
|
"react-pdf": "^5.7.2",
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
@ -12326,6 +12327,18 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||||
},
|
},
|
||||||
|
"node_modules/react-number-format": {
|
||||||
|
"version": "5.0.0-beta.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.0.0-beta.4.tgz",
|
||||||
|
"integrity": "sha512-uqQ5RvtFB3LmrBZANlh4M46eCIMDVV2btExt7naSg6mC9xZavGgZL+VVgAcVc8YiH3fBQlrxNF1ec4PtOt6U1A==",
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0",
|
||||||
|
"react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-pdf": {
|
"node_modules/react-pdf": {
|
||||||
"version": "5.7.2",
|
"version": "5.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
|
||||||
|
@ -23850,6 +23863,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||||
},
|
},
|
||||||
|
"react-number-format": {
|
||||||
|
"version": "5.0.0-beta.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.0.0-beta.4.tgz",
|
||||||
|
"integrity": "sha512-uqQ5RvtFB3LmrBZANlh4M46eCIMDVV2btExt7naSg6mC9xZavGgZL+VVgAcVc8YiH3fBQlrxNF1ec4PtOt6U1A==",
|
||||||
|
"requires": {
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-pdf": {
|
"react-pdf": {
|
||||||
"version": "5.7.2",
|
"version": "5.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
"dayjs": "^1.11.3",
|
"dayjs": "^1.11.3",
|
||||||
"react": "^18.1.0",
|
"react": "^18.1.0",
|
||||||
"react-dom": "^18.1.0",
|
"react-dom": "^18.1.0",
|
||||||
|
"react-number-format": "^5.0.0-beta.4",
|
||||||
"react-pdf": "^5.7.2",
|
"react-pdf": "^5.7.2",
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
|
30
src/components/InputMask/index.js
Normal file
30
src/components/InputMask/index.js
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
import { forwardRef } from 'react';
|
||||||
|
import { PatternFormat } from 'react-number-format';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This component relies on the placeholder prop
|
||||||
|
* So make sure that you passed the placeholder on the parent component.
|
||||||
|
*/
|
||||||
|
const InputMask = forwardRef((props, ref) => {
|
||||||
|
const { onChange, placeholder, ...other } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PatternFormat
|
||||||
|
{...other}
|
||||||
|
getInputRef={ref}
|
||||||
|
onValueChange={values => {
|
||||||
|
onChange({
|
||||||
|
target: {
|
||||||
|
name: props.name,
|
||||||
|
value: values.value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
valueIsNumericString={placeholder.includes('#')}
|
||||||
|
format={placeholder}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default InputMask;
|
||||||
|
// TODO: Add PropTypes to the project
|
|
@ -17,6 +17,7 @@ import dayjs from 'dayjs';
|
||||||
|
|
||||||
import SnackbarIndicator from '../../components/SnackbarIndicator';
|
import SnackbarIndicator from '../../components/SnackbarIndicator';
|
||||||
import LoadingIndicator from '../../components/LoadingIndicator';
|
import LoadingIndicator from '../../components/LoadingIndicator';
|
||||||
|
import InputMask from '../../components/InputMask';
|
||||||
|
|
||||||
import logoImage from '../../assets/if-salas-logo.svg';
|
import logoImage from '../../assets/if-salas-logo.svg';
|
||||||
|
|
||||||
|
@ -71,6 +72,10 @@ function View({
|
||||||
type="text"
|
type="text"
|
||||||
value={data.ra}
|
value={data.ra}
|
||||||
onChange={onChangeInput}
|
onChange={onChangeInput}
|
||||||
|
placeholder="00#####"
|
||||||
|
InputProps={{
|
||||||
|
inputComponent: InputMask,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<FormControl sx={{ textAlign: 'start' }} fullWidth>
|
<FormControl sx={{ textAlign: 'start' }} fullWidth>
|
||||||
<InputLabel variant="standard" id="course">
|
<InputLabel variant="standard" id="course">
|
||||||
|
@ -112,7 +117,9 @@ function View({
|
||||||
onChange={onChangeInput}
|
onChange={onChangeInput}
|
||||||
>
|
>
|
||||||
{createArrayFrom1ToN(8).map(i => (
|
{createArrayFrom1ToN(8).map(i => (
|
||||||
<MenuItem value={i}>{currentYear - i}</MenuItem>
|
<MenuItem key={i - 1} value={i - 1}>
|
||||||
|
{currentYear - (i - 1)}
|
||||||
|
</MenuItem>
|
||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
@ -125,6 +132,10 @@ function View({
|
||||||
type="phone"
|
type="phone"
|
||||||
value={data.phone}
|
value={data.phone}
|
||||||
onChange={onChangeInput}
|
onChange={onChangeInput}
|
||||||
|
placeholder="(##) #####-####"
|
||||||
|
InputProps={{
|
||||||
|
inputComponent: InputMask,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
id="email"
|
id="email"
|
||||||
|
|
Loading…
Reference in a new issue