diff --git a/package-lock.json b/package-lock.json index 2ac1c61..bcc87cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "dayjs": "^1.11.3", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-number-format": "^5.0.0-beta.4", "react-pdf": "^5.7.2", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", @@ -12326,6 +12327,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "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": { "version": "5.7.2", "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", "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": { "version": "5.7.2", "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz", diff --git a/package.json b/package.json index d631cbd..81ab7c2 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dayjs": "^1.11.3", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-number-format": "^5.0.0-beta.4", "react-pdf": "^5.7.2", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", diff --git a/src/components/InputMask/index.js b/src/components/InputMask/index.js new file mode 100644 index 0000000..573e7b8 --- /dev/null +++ b/src/components/InputMask/index.js @@ -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 ( + { + onChange({ + target: { + name: props.name, + value: values.value, + }, + }); + }} + valueIsNumericString={placeholder.includes('#')} + format={placeholder} + /> + ); +}); + +export default InputMask; +// TODO: Add PropTypes to the project diff --git a/src/screens/Register/View.js b/src/screens/Register/View.js index be30cb8..0789d49 100644 --- a/src/screens/Register/View.js +++ b/src/screens/Register/View.js @@ -17,6 +17,7 @@ import dayjs from 'dayjs'; import SnackbarIndicator from '../../components/SnackbarIndicator'; import LoadingIndicator from '../../components/LoadingIndicator'; +import InputMask from '../../components/InputMask'; import logoImage from '../../assets/if-salas-logo.svg'; @@ -71,6 +72,10 @@ function View({ type="text" value={data.ra} onChange={onChangeInput} + placeholder="00#####" + InputProps={{ + inputComponent: InputMask, + }} /> @@ -112,7 +117,9 @@ function View({ onChange={onChangeInput} > {createArrayFrom1ToN(8).map(i => ( - {currentYear - i} + + {currentYear - (i - 1)} + ))} @@ -125,6 +132,10 @@ function View({ type="phone" value={data.phone} onChange={onChangeInput} + placeholder="(##) #####-####" + InputProps={{ + inputComponent: InputMask, + }} />