Skip to content

Commit

Permalink
Merge pull request #18 from platformbuilders/feat/masked-text
Browse files Browse the repository at this point in the history
Feat/masked text
  • Loading branch information
duspada-builders authored Jul 21, 2021
2 parents 05d1d7f + 443abb0 commit 01f0647
Show file tree
Hide file tree
Showing 31 changed files with 1,201 additions and 23 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ module.exports = {
'react/no-unescaped-entities': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-non-null-assertion': 0,
'sonarjs/no-collapsible-if': 'off',
},
settings: {
react: {
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@platformbuilders/react-native-elements",
"version": "0.2.7",
"version": "0.3.0",
"description": "Platform Builders Shared Components Library For React Native",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down Expand Up @@ -46,7 +46,6 @@
},
"peerDependencies": {
"@platformbuilders/helpers": ">=0.3.5",
"@platformbuilders/react-native-masked-text": ">=1.0.3",
"formik": ">=2.1.6",
"lodash": ">=4.17.20",
"lottie-react-native": ">=3.5.0",
Expand Down Expand Up @@ -74,12 +73,14 @@
},
"dependencies": {
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"date-and-time": "^1.0.1",
"react-native-responsive-fontsize": "0.4.3",
"react-native-smooth-pincode-input": "^1.0.9",
"react-native-web": "0.13.3",
"react-text-mask": "5.4.3",
"text-mask-addons": "3.8.0",
"ts-jest": "26.5.4"
"ts-jest": "26.5.4",
"vanilla-masker": "1.2.0"
},
"jest": {
"preset": "react-native",
Expand All @@ -93,7 +94,6 @@
"@commitlint/cli": "11.0.0",
"@commitlint/config-conventional": "11.0.0",
"@platformbuilders/helpers": "0.3.5",
"@platformbuilders/react-native-masked-text": "1.0.3",
"@storybook/addon-actions": "6.0.22",
"@storybook/addon-backgrounds": "6.0.22",
"@storybook/addon-knobs": "6.0.22",
Expand Down
36 changes: 36 additions & 0 deletions src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ exports[`<Button /> should render button 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -36,7 +37,9 @@ exports[`<Button /> should render button 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -96,6 +99,7 @@ exports[`<Button /> should render button when rounded 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={true}
style={
Array [
Expand All @@ -109,7 +113,9 @@ exports[`<Button /> should render button when rounded 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
Expand Down Expand Up @@ -169,6 +175,7 @@ exports[`<Button /> should render button with children 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -182,7 +189,9 @@ exports[`<Button /> should render button with children 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -260,6 +269,7 @@ exports[`<Button /> should render button with contrast 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -273,7 +283,9 @@ exports[`<Button /> should render button with contrast 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -333,6 +345,7 @@ exports[`<Button /> should render button with custom accessibility label 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -346,7 +359,9 @@ exports[`<Button /> should render button with custom accessibility label 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -406,6 +421,7 @@ exports[`<Button /> should render button with custom style 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -419,7 +435,9 @@ exports[`<Button /> should render button with custom style 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -481,6 +499,7 @@ exports[`<Button /> should render button with custom text style 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -494,7 +513,9 @@ exports[`<Button /> should render button with custom text style 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -556,6 +577,7 @@ exports[`<Button /> should render button with disabled 1`] = `
<View
buttonVariant="primary"
disabled={true}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -569,7 +591,9 @@ exports[`<Button /> should render button with disabled 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -629,6 +653,7 @@ exports[`<Button /> should render button with loading 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -642,7 +667,9 @@ exports[`<Button /> should render button with loading 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -721,6 +748,7 @@ exports[`<Button /> should render button with test id 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -734,7 +762,9 @@ exports[`<Button /> should render button with test id 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -794,6 +824,7 @@ exports[`<Button /> should render button with typography variant 1`] = `
<View
buttonVariant="primary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -807,7 +838,9 @@ exports[`<Button /> should render button with typography variant 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down Expand Up @@ -867,6 +900,7 @@ exports[`<Button /> should render button with variant 1`] = `
<View
buttonVariant="secondary"
disabled={false}
hasBorder={false}
rounded={false}
style={
Array [
Expand All @@ -880,7 +914,9 @@ exports[`<Button /> should render button with variant 1`] = `
"flexDirection": "row",
"height": 70.71428571428572,
"justifyContent": "center",
"maxWidth": "100%",
"minWidth": 282.8571428571429,
"overflow": "hidden",
"paddingBottom": 6.285714285714286,
"paddingLeft": 6.285714285714286,
"paddingRight": 6.285714285714286,
Expand Down
110 changes: 110 additions & 0 deletions src/components/MaskedText/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/**
* Type Definition.
*
* Using with Typescript development.
*
* Definitions by: Italo Izaac <https://github.com/iiandrade>
*/

import * as React from 'react'
import { TextInput, TextInputProps } from 'react-native'

// Type prop of TextInputMask.
export type TextInputMaskTypeProp =
| 'document'
| 'credit-card'
| 'cpf'
| 'cnpj'
| 'zip-code'
| 'only-numbers'
| 'money'
| 'cel-phone'
| 'datetime'
| 'no-mask'
| 'custom'
| 'account-bank'
| 'uppercase'

// Option prop of TextInputMask.
export interface TextInputMaskOptionProp {
// Money type.
precision?: number
separator?: string
delimiter?: string
unit?: string
suffixUnit?: string
zeroCents?: boolean

// Phone type.
withDDD?: boolean
dddMask?: string
maskType?: 'BRL' | 'INTERNATIONAL'

// Datetime type.
format?: string

// Credit card type.
obfuscated?: boolean
issuer?: 'visa-or-mastercard' | 'diners' | 'amex'

// Custom type.
mask?: string
validator?: (value: string, settings: TextInputMaskOptionProp) => boolean
getRawValue?: (value: string, settings: TextInputMaskOptionProp) => any
translation?: { [s: string]: (val: string) => string | null | undefined }
}

// TextInputMask Props
export interface TextInputMaskProps extends Pick<TextInputProps, Exclude<keyof TextInputProps, 'onChangeText'>> {
type: TextInputMaskTypeProp
options?: TextInputMaskOptionProp
checkText?: (previous: string, next: string) => boolean
onChangeText?: (text: string, rawText?: string) => void
refInput?: (ref: any) => void
customTextInput?: any
customTextInputProps?: Object
includeRawValueInChangeText?: boolean
}

// TextInputMask Component
export class TextInputMask extends React.Component<TextInputMaskProps> {}

// TextMask
export class TextMask extends React.Component<TextInputMaskProps> {}

// MaskService
export namespace MaskService {
function toMask(
type: string,
value: string,
options?: TextInputMaskOptionProp
): string
function toRawValue(
type: string,
maskedValue: string,
options?: TextInputMaskOptionProp
): string
function isValid(
type: string,
value: string,
options?: TextInputMaskOptionProp
): boolean
}

// TextInputMaskMethods
export class TextInputMaskMethods {
getElement(): TextInput
getRawValue(): string
isValid(): boolean
}

// TextInputMasked
export type TextInputMasked = TextInputMaskMethods | null

// TextMaskMethods
export class TextMaskMethods {
getElement(): TextInput
}

// TextMaskInstance
export type TextMaskInstance = TextMaskMethods | null
7 changes: 7 additions & 0 deletions src/components/MaskedText/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import MaskService from './lib/mask-service';
import TextInputMask from './lib/text-input-mask';
import TextMask from './lib/text-mask';

module.exports.MaskService = MaskService;
module.exports.TextInputMask = TextInputMask;
module.exports.TextMask = TextMask;
Loading

0 comments on commit 01f0647

Please sign in to comment.