From 859f13974c883f5ee0ef4b659998b4f0604bae55 Mon Sep 17 00:00:00 2001 From: Henrique Souza Date: Mon, 9 May 2022 08:57:51 -0300 Subject: [PATCH 1/2] chore: expose materialui props and align input center --- package.json | 2 +- src/core/PinInput.tsx | 69 ++++++++++++++++++++++++-------- src/stories/PinInput.stories.tsx | 61 +++++++++++++++++----------- 3 files changed, 91 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index b290bf98..1159b90c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/core/PinInput.tsx b/src/core/PinInput.tsx index b727bcd8..a4967918 100644 --- a/src/core/PinInput.tsx +++ b/src/core/PinInput.tsx @@ -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 @@ -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) { @@ -30,7 +40,10 @@ const PinInput: React.FC = ({ onPinChanged, validationResult, isValidating, - size + size, + style: styleProps, + inputProps, + variant }) => { const inputRefs = useRef([]) @@ -60,7 +73,9 @@ const PinInput: React.FC = ({ event: React.ChangeEvent, 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) @@ -97,30 +112,50 @@ const PinInput: React.FC = ({ } } + const useStyleProps = (): React.CSSProperties => { + const style = { + width: size === 'small' ? '40px' : '40px', + height: size === 'small' ? '30px' : '40px', + marginInline: size === 'small' ? '5px' : '10px' + } as React.CSSProperties + + if (styleProps) { + Object.assign(style, styleProps) + } + + return style + } + + const useInputProps = (): React.CSSProperties => { + const style = { + width: size === 'small' ? '40px' : '45px', + textAlign: 'center', + fontWeight: 'bold', + fontSize: size === 'small' ? '16px' : '20px', + padding: 'auto' + } as React.CSSProperties + + if (inputProps) { + Object.assign(style, inputProps) + } + + return style + } + return ( <> -
+ { Array.from({ length: pinLength }, (_, index) => ( 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 @@ -132,7 +167,7 @@ const PinInput: React.FC = ({ value={ pin[index] || '' } /> )) } -
+ ) } diff --git a/src/stories/PinInput.stories.tsx b/src/stories/PinInput.stories.tsx index a5d06518..b3c23c56 100644 --- a/src/stories/PinInput.stories.tsx +++ b/src/stories/PinInput.stories.tsx @@ -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 +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 = () => { @@ -37,9 +52,9 @@ export const Default = () => { return ( <> - Valid pin: 123123 -
-
+ + Valid pin: 123123 + { validationResult={ hasError } isValidating={ isValidating } size='small' + variant='outlined' /> -
-
- + + + ) } @@ -82,16 +98,15 @@ export const Large = () => { } else { setHasError(false) alert('PIN is correct') - } setIsValidating(false) } return ( <> - Valid pin: 123123 -
-
+ + Valid pin: 123123 + { isValidating={ isValidating } size='large' /> -
-
- + + + ) } From 6dcdc6b0411956a535371a80e9cb1bc2f063bbc7 Mon Sep 17 00:00:00 2001 From: Henrique Souza Date: Mon, 9 May 2022 09:55:01 -0300 Subject: [PATCH 2/2] chore: small changes --- src/core/PinInput.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/core/PinInput.tsx b/src/core/PinInput.tsx index a4967918..276bcb0a 100644 --- a/src/core/PinInput.tsx +++ b/src/core/PinInput.tsx @@ -116,13 +116,10 @@ const PinInput: React.FC = ({ const style = { width: size === 'small' ? '40px' : '40px', height: size === 'small' ? '30px' : '40px', - marginInline: size === 'small' ? '5px' : '10px' + marginInline: size === 'small' ? '5px' : '10px', + ...styleProps } as React.CSSProperties - if (styleProps) { - Object.assign(style, styleProps) - } - return style } @@ -132,13 +129,10 @@ const PinInput: React.FC = ({ textAlign: 'center', fontWeight: 'bold', fontSize: size === 'small' ? '16px' : '20px', - padding: 'auto' + padding: 'auto', + ...inputProps } as React.CSSProperties - if (inputProps) { - Object.assign(style, inputProps) - } - return style } @@ -148,7 +142,7 @@ const PinInput: React.FC = ({ { Array.from({ length: pinLength }, (_, index) => ( onKeyDown(event, index) } onPaste={ onPaste } color='primary'