Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Allow using password inputs #2673

Merged
merged 3 commits into from
Jan 9, 2023
Merged

feat: Allow using password inputs #2673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66820eb
feat: Add password inputs
flacial Jan 5, 2023
3910e4b
feat: Add component story
flacial Jan 5, 2023
07efe16
refactor: Remove unused import
flacial Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions components/FormCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export type TextField = Omit<Option, 'value'> & { value: string }
export type Option = {
title: string
type?: string
valueType?: 'password'
error?: string
placeHolder?: string
value?: string | number | Item[]
Expand Down Expand Up @@ -48,7 +49,7 @@ type OptionInfoProps = {
mdInputBg?: 'white' | 'none'
}

const displayInputType = (
const displayvalueType = (
index: number,
onChange: Function,
option: Option,
Expand All @@ -57,7 +58,7 @@ const displayInputType = (
const [cursorInput, setCursorInput] = useState<number | null>(0)
const [cursorMdInput, setCursorMdInput] = useState<number | null>(0)

const { placeHolder, type } = option
const { placeHolder, type, valueType } = option
const value: any = option.value
switch (type) {
case MD_INPUT:
Expand All @@ -79,7 +80,7 @@ const displayInputType = (
default:
return (
<input
type="text"
type={valueType || 'text'}
className={`form-control ${styles.optionInfo__input}`}
data-testid={`input${index}`}
value={`${value || ''}`}
Expand Down Expand Up @@ -120,7 +121,7 @@ const OptionInfo: React.FC<OptionInfoProps> = ({
>
{`${(capitalizeTitle && _.capitalize(title)) || title}`}
</span>
{displayInputType(index, onChange, option, mdInputBg)}
{displayvalueType(index, onChange, option, mdInputBg)}
{error && <ErrorMessage error={error} />}
</div>
)
Expand Down
26 changes: 26 additions & 0 deletions stories/components/FormCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const mockValues: Option[] = [
{ title: 'level', value: 'noob' }
]

const mockValuesWithPassword: Option[] = [
{ title: 'password', value: 'somePassword', valueType: 'password' }
]

const MockBasic: React.FC = () => {
const onClick = (title: any) => onChange(title, 4)
const mockedDropdown = [
Expand Down Expand Up @@ -56,6 +60,22 @@ const MockBasic: React.FC = () => {
return <FormCard onChange={onChange} values={options} onSubmit={mockBtn} />
}

const MockWithPassword: React.FC = () => {
const mockedDropdown = mockValuesWithPassword
const [options, setOptions] = useState(mockedDropdown)
const onChange = (value: string, index: number) => {
formChange(value, index, options, setOptions)
}

return (
<FormCard
onChange={onChange}
values={options}
onSubmit={{ ...mockBtn, title: 'Save Changes' }}
/>
)
}

const MockWithTitle: React.FC = () => {
const [options, setOptions] = useState(mockValues)
const onChange = (value: string, index: number) => {
Expand Down Expand Up @@ -173,6 +193,12 @@ export const Basic: React.FC = () => (
</div>
)

export const _WithPassword: React.FC = () => (
<div className="col-5 m-auto">
<MockWithPassword />
</div>
)

export const _WithTitle: React.FC = () => (
<div className="col-5 m-auto">
<MockWithTitle />
Expand Down