Last active
February 20, 2019 18:44
-
-
Save alobato/f3cff5f34bc7e0a8386461a3ae8b8b77 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { memo, useState, useEffect } from 'react' | |
| import Input from './Input' | |
| const maskValue = (value = '') => { | |
| value = value.toString() | |
| value = value.replace(/\D/g, '') | |
| if (!value) return '' | |
| if (value.length === 6 && /\d{6}/.test(value)) return `${value.substr(0, 5)}-${value.substr(5, 1)}` | |
| if (value.length === 7 && /\d{7}/.test(value)) return `${value.substr(0, 5)}-${value.substr(5, 2)}` | |
| if (value.length === 8 && /\d{8}/.test(value)) return `${value.substr(0, 5)}-${value.substr(5, 3)}` | |
| return value | |
| } | |
| const unmaskValue = (maskedValue = '') => { | |
| if (!maskedValue) return '' | |
| if (maskedValue.length === 10) { | |
| return maskedValue.replace(/\D/g, '') | |
| } else { | |
| return '' | |
| } | |
| } | |
| const initialMaskedValue = '' | |
| const InputCep = memo(({ onChange = () => {}, value, defaultValue, ...rest }) => { | |
| const [maskedValue, setMaskedValue] = useState(initialMaskedValue) | |
| useEffect( | |
| () => { | |
| setMaskedValue(maskValue(value || defaultValue)) | |
| }, | |
| [defaultValue] | |
| ) | |
| const handleChange = event => { | |
| const { target } = event | |
| const { value: inputValue = 0 } = target | |
| const value = unmaskValue(inputValue) | |
| const maskedValue = maskValue(inputValue) | |
| setMaskedValue(maskedValue) | |
| if (!onChange || typeof onChange !== 'function') return false | |
| return onChange(event, value, maskedValue) | |
| } | |
| return ( | |
| <Input maxLength={9} type='tel' value={maskedValue} onChange={handleChange} {...rest} /> | |
| ) | |
| }) | |
| export default InputCep |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { memo, useState, useEffect } from 'react' | |
| import Input from './Input' | |
| const maskValue = (value = '') => { | |
| value = value.toString() | |
| value = value.replace(/\D/g, '') | |
| if (!value) return '' | |
| if (value.length === 3 && /\d{3}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 1)}` | |
| if (value.length === 4 && /\d{4}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 2)}` | |
| if (value.length === 5 && /\d{5}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}` | |
| if (value.length === 6 && /\d{6}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 1)}` | |
| if (value.length === 7 && /\d{7}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 2)}` | |
| if (value.length === 8 && /\d{8}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}` | |
| if (value.length === 9 && /\d{9}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 1)}` | |
| if (value.length === 10 && /\d{10}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 2)}` | |
| if (value.length === 11 && /\d{11}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 3)}` | |
| if (value.length === 12 && /\d{12}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 4)}` | |
| if (value.length === 13 && /\d{13}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 4)}-${value.substr(12, 1)}` | |
| if (value.length === 14 && /\d{14}/.test(value)) return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 4)}-${value.substr(12, 2)}` | |
| return value | |
| } | |
| const unmaskValue = (maskedValue = '') => { | |
| if (!maskedValue) return '' | |
| if (maskedValue.length === 10) { | |
| return maskedValue.replace(/\D/g, '') | |
| } else { | |
| return '' | |
| } | |
| } | |
| const initialMaskedValue = '' | |
| const InputCnpj = memo(({ onChange = () => {}, value, defaultValue, ...rest }) => { | |
| const [maskedValue, setMaskedValue] = useState(initialMaskedValue) | |
| useEffect( | |
| () => { | |
| setMaskedValue(maskValue(value || defaultValue)) | |
| }, | |
| [defaultValue] | |
| ) | |
| const handleChange = event => { | |
| const { target } = event | |
| const { value: inputValue = 0 } = target | |
| const value = unmaskValue(inputValue) | |
| const maskedValue = maskValue(inputValue) | |
| setMaskedValue(maskedValue) | |
| if (!onChange || typeof onChange !== 'function') return false | |
| return onChange(event, value, maskedValue) | |
| } | |
| return ( | |
| <Input maxLength={18} type='tel' value={maskedValue} onChange={handleChange} {...rest} /> | |
| ) | |
| }) | |
| export default InputCnpj |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { memo, useState, useEffect } from 'react' | |
| import Input from './Input' | |
| const maskValue = (value = '') => { | |
| value = value.toString() | |
| value = value.replace(/\D/g, '') | |
| if (!value) return '' | |
| if (value.length === 4 && /\d{4}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 1)}` | |
| if (value.length === 5 && /\d{5}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 2)}` | |
| if (value.length === 6 && /\d{6}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 3)}` | |
| if (value.length === 7 && /\d{7}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 3)}.${value.substr(6, 1)}` | |
| if (value.length === 8 && /\d{8}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 3)}.${value.substr(6, 2)}` | |
| if (value.length === 9 && /\d{9}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 3)}.${value.substr(6, 3)}` | |
| if (value.length === 10 && /\d{10}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 3)}.${value.substr(6, 3)}-${value.substr(9, 1)}` | |
| if (value.length === 11 && /\d{11}/.test(value)) return `${value.substr(0, 3)}.${value.substr(3, 3)}.${value.substr(6, 3)}-${value.substr(9, 2)}` | |
| return value | |
| } | |
| const unmaskValue = (maskedValue = '') => { | |
| if (!maskedValue) return '' | |
| if (maskedValue.length === 10) { | |
| return maskedValue.replace(/\D/g, '') | |
| } else { | |
| return '' | |
| } | |
| } | |
| const initialMaskedValue = '' | |
| const InputCpf = memo(({ onChange = () => {}, value, defaultValue, ...rest }) => { | |
| const [maskedValue, setMaskedValue] = useState(initialMaskedValue) | |
| useEffect( | |
| () => { | |
| setMaskedValue(maskValue(value || defaultValue)) | |
| }, | |
| [defaultValue] | |
| ) | |
| const handleChange = event => { | |
| const { target } = event | |
| const { value: inputValue = 0 } = target | |
| const value = unmaskValue(inputValue) | |
| const maskedValue = maskValue(inputValue) | |
| setMaskedValue(maskedValue) | |
| if (!onChange || typeof onChange !== 'function') return false | |
| return onChange(event, value, maskedValue) | |
| } | |
| return ( | |
| <Input maxLength={14} type='tel' value={maskedValue} onChange={handleChange} {...rest} /> | |
| ) | |
| }) | |
| export default InputCpf |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { memo, useState, useEffect } from 'react' | |
| import moment from 'moment' | |
| import Input from './Input' | |
| const maskValue = (value = '') => { | |
| if (value.length === 24) | |
| return moment.utc(value).format('DD/MM/YYYY') | |
| if (value.length === 10 && /\d{4}-\d{2}-\d{2}/.test(value) && moment(value, 'YYYY-MM-DD', true).isValid() && moment(value, 'YYYY-MM-DD', true).isSameOrBefore(moment())) | |
| return moment(value, 'YYYY-MM-DD', true).utc().format('DD/MM/YYYY') | |
| value = value.toString() | |
| value = value.replace(/\D/g, '') | |
| if (value.length === 3) return `${value.substr(0, 2)}/${value.substr(2, 1)}` | |
| if (value.length === 4) return `${value.substr(0, 2)}/${value.substr(2, 2)}` | |
| if (value.length === 5) return `${value.substr(0, 2)}/${value.substr(2, 2)}/${value.substr(4, 1)}` | |
| if (value.length === 6) return `${value.substr(0, 2)}/${value.substr(2, 2)}/${value.substr(4, 2)}` | |
| if (value.length === 7) return `${value.substr(0, 2)}/${value.substr(2, 2)}/${value.substr(4, 3)}` | |
| if (value.length === 8) return `${value.substr(0, 2)}/${value.substr(2, 2)}/${value.substr(4, 4)}` | |
| return value | |
| } | |
| const unmaskValue = (maskedValue = '') => { | |
| if (!maskedValue) return '' | |
| if (maskedValue.length === 10) { | |
| return moment(maskedValue, 'DD/MM/YYYY', true).format('YYYY-MM-DD') | |
| } else { | |
| return '' | |
| } | |
| } | |
| const initialMaskedValue = '' | |
| const InputDate = memo(({ onChange = () => {}, value, defaultValue, ...rest }) => { | |
| const [maskedValue, setMaskedValue] = useState(initialMaskedValue) | |
| useEffect(() => { | |
| setMaskedValue(maskValue(value || defaultValue)) | |
| }, | |
| [defaultValue]) | |
| const handleChange = event => { | |
| const { target } = event | |
| const { value: inputValue = 0 } = target | |
| const value = unmaskValue(inputValue) | |
| const maskedValue = maskValue(inputValue) | |
| setMaskedValue(maskedValue) | |
| if (!onChange || typeof onChange !== 'function') return false | |
| return onChange(event, value, maskedValue) | |
| } | |
| return ( | |
| <Input maxLength={10} type='tel' value={maskedValue} onChange={handleChange} {...rest} /> | |
| ) | |
| }) | |
| export default InputDate |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { memo, useState, useEffect } from 'react' | |
| import Input from './Input' | |
| const maskValue = (value = '') => { | |
| value = value.toString() | |
| value = value.replace(/\D/g, '') | |
| if (!value) return '' | |
| if (value.length === 1 && /\d/.test(value)) return `(${value}` | |
| if (value.length === 2 && /\d{2}/.test(value)) return `(${value}` | |
| if (value.length === 3 && /\d{3}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 1)}` | |
| if (value.length === 4 && /\d{4}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 2)}` | |
| if (value.length === 5 && /\d{5}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 3)}` | |
| if (value.length === 6 && /\d{6}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 4)}` | |
| if (value.length === 7 && /\d{7}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 4)}-${value.substr(6, 1)}` | |
| if (value.length === 8 && /\d{8}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 4)}-${value.substr(6, 2)}` | |
| if (value.length === 9 && /\d{9}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 4)}-${value.substr(6, 3)}` | |
| if (value.length === 10 && /\d{10}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 4)}-${value.substr(6, 4)}` | |
| if (value.length === 11 && /\d{11}/.test(value)) return `(${value.substr(0, 2)}) ${value.substr(2, 5)}-${value.substr(7, 4)}` | |
| return value | |
| } | |
| const unmaskValue = (maskedValue = '') => { | |
| if (!maskedValue) return '' | |
| if (maskedValue.length === 10) { | |
| return maskedValue.replace(/\D/g, '') | |
| } else { | |
| return '' | |
| } | |
| } | |
| const initialMaskedValue = '' | |
| const InputPhone = memo(({ onChange = () => {}, value, defaultValue, ...rest }) => { | |
| const [maskedValue, setMaskedValue] = useState(initialMaskedValue) | |
| useEffect( | |
| () => { | |
| setMaskedValue(maskValue(value || defaultValue)) | |
| }, | |
| [defaultValue] | |
| ) | |
| const handleChange = event => { | |
| const { target } = event | |
| const { value: inputValue = 0 } = target | |
| const value = unmaskValue(inputValue) | |
| const maskedValue = maskValue(inputValue) | |
| setMaskedValue(maskedValue) | |
| if (!onChange || typeof onChange !== 'function') return false | |
| return onChange(event, value, maskedValue) | |
| } | |
| return ( | |
| <Input type='tel' maxLength={15} value={maskedValue} onChange={handleChange} {...rest} /> | |
| ) | |
| }) | |
| export default InputPhone |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment