Skip to content

Commit

Permalink
Merge pull request #263 from nginformatica/update/pin-input
Browse files Browse the repository at this point in the history 
0.25.4 - Update Pin Input component
  • Loading branch information
@henriquemod
henriquemod authored May 9, 2022
2 parents 597705b + 6dcdc6b commit 9399390
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 41 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "flipper-ui",
"version": "0.25.3",
"version": "0.25.4",
"description": "",
"main": "dist/index.js",
"homepage": "https://flipper-ui.vercel.app",
Expand Down
63 changes: 46 additions & 17 deletions src/core/PinInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useRef } from 'react'
import { TextField } from '@material-ui/core'
import styled from 'styled-components'

interface PinInputGridProps {
pin: Array<number | undefined>
Expand All @@ -9,8 +10,17 @@ interface PinInputGridProps {
validationResult: boolean | undefined
isValidating: boolean
size: 'small' | 'large'
style?: React.CSSProperties
inputProps?: React.CSSProperties
variant?: 'outlined' | 'standard'
}

const Container = styled.div`
display: flex;
width: auto;
justify-content: center;
`

const removeValuesFromArray = (valuesArray: string[], value: string) => {
const valueIndex = valuesArray.findIndex(entry => entry === value)
if (valueIndex === -1) {
Expand All @@ -30,7 +40,10 @@ const PinInput: React.FC<PinInputGridProps> = ({
onPinChanged,
validationResult,
isValidating,
size
size,
style: styleProps,
inputProps,
variant
}) => {
const inputRefs = useRef<HTMLInputElement[]>([])

Expand Down Expand Up @@ -60,7 +73,9 @@ const PinInput: React.FC<PinInputGridProps> = ({
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
index: number
) => {
if (event.target.value.length > 1) {return}
if (event.target.value.length > 1) {
return
}
const previousValue = event.target.defaultValue
const valuesArray = event.target.value.split('')
removeValuesFromArray(valuesArray, previousValue)
Expand Down Expand Up @@ -97,30 +112,44 @@ const PinInput: React.FC<PinInputGridProps> = ({
}
}

const useStyleProps = (): React.CSSProperties => {
const style = {
width: size === 'small' ? '40px' : '40px',
height: size === 'small' ? '30px' : '40px',
marginInline: size === 'small' ? '5px' : '10px',
...styleProps
} as React.CSSProperties

return style
}

const useInputProps = (): React.CSSProperties => {
const style = {
width: size === 'small' ? '40px' : '45px',
textAlign: 'center',
fontWeight: 'bold',
fontSize: size === 'small' ? '16px' : '20px',
padding: 'auto',
...inputProps
} as React.CSSProperties

return style
}

return (
<>
<div>
<Container>
{ Array.from({ length: pinLength }, (_, index) => (
<TextField
disabled={ isValidating }
variant='outlined'
variant={ variant || 'outlined' }
onKeyDown={ event => onKeyDown(event, index) }
onPaste={ onPaste }
color='primary'
error={ validationResult }
style={ {
width: size === 'small' ? '40px' : '40px',
height: size === 'small' ? '30px' : '40px',
marginInline: size === 'small' ? '5px' : '10px'
} }
style={ useStyleProps() }
InputProps={ {
style: {
width: size === 'small' ? '40px' : '45px',
textAlign: 'center',
fontWeight: 'bold',
fontSize: size === 'small' ? '16px' : '20px',
padding: 'auto'
}
style: useInputProps()
} }
inputRef={ (el: HTMLInputElement) => {
inputRefs.current[index] = el
Expand All @@ -132,7 +161,7 @@ const PinInput: React.FC<PinInputGridProps> = ({
value={ pin[index] || '' }
/>
)) }
</div>
</Container>
</>
)
}
Expand Down
61 changes: 38 additions & 23 deletions src/stories/PinInput.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,27 @@ import React, { useState } from 'react'
import { ComponentMeta } from '@storybook/react'
import PinInput from '../core/PinInput'
import { Button } from '@material-ui/core'
import styled from 'styled-components'

export default {
title: 'PinInput',
component: PinInput
} as ComponentMeta<typeof PinInput>

const ValidateContainer = styled.div`
display: flex;
width: auto;
justify-content: center;
margin-bottom: 2rem;
`

const ButtonContainer = styled.div`
display: flex;
width: auto;
justify-content: center;
margin-top: 3rem;
`

const PIN_LENGTH = 6

export const Default = () => {
Expand Down Expand Up @@ -37,9 +52,9 @@ export const Default = () => {

return (
<>
<span>Valid pin: 123123</span>
<br />
<br />
<ValidateContainer>
<span>Valid pin: 123123</span>
</ValidateContainer>
<PinInput
pin={ pin }
setPin={ setPin }
Expand All @@ -48,15 +63,16 @@ export const Default = () => {
validationResult={ hasError }
isValidating={ isValidating }
size='small'
variant='outlined'
/>
<br />
<br />
<Button
onClick={ () => {
handleValidation()
} }>
Validate
</Button>
<ButtonContainer>
<Button
onClick={ () => {
handleValidation()
} }>
Validate
</Button>
</ButtonContainer>
</>
)
}
Expand All @@ -82,16 +98,15 @@ export const Large = () => {
} else {
setHasError(false)
alert('PIN is correct')

}
setIsValidating(false)
}

return (
<>
<span>Valid pin: 123123</span>
<br />
<br />
<ValidateContainer>
<span>Valid pin: 123123</span>
</ValidateContainer>
<PinInput
pin={ pin }
setPin={ setPin }
Expand All @@ -101,14 +116,14 @@ export const Large = () => {
isValidating={ isValidating }
size='large'
/>
<br />
<br />
<Button
onClick={ () => {
handleValidation()
} }>
Validate
</Button>
<ButtonContainer>
<Button
onClick={ () => {
handleValidation()
} }>
Validate
</Button>
</ButtonContainer>
</>
)
}

1 comment on commit 9399390

@vercel
Copy link

@vercel vercel bot commented on 9399390 May 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flipper-ui – ./

flipper-ui.vercel.app
flipper-ui-git-master-ngi.vercel.app
flipper-ui-ngi.vercel.app

Please sign in to comment.