81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------------ React --------------------------------------------------------
|
|
import { FormEvent } from 'react';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import CheckIcon from '@/assets/CheckIcon';
|
|
import CloseIcon from '@/assets/CloseIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const InlineInput = ({
|
|
label = '',
|
|
name = '',
|
|
type = 'text',
|
|
placeholder = '',
|
|
defaultValue = '',
|
|
autoComplete = 'off',
|
|
onSubmit = (value?: string) => {},
|
|
}) => {
|
|
const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault();
|
|
|
|
if (!ev.currentTarget.reportValidity()) {
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(ev.currentTarget);
|
|
|
|
const value = formData.get(name);
|
|
|
|
onSubmit(value ? value.toString() : null);
|
|
};
|
|
|
|
return (
|
|
<form
|
|
className='inlineInputContainer'
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<label
|
|
htmlFor={name}
|
|
className='inlineInputLabel'
|
|
>
|
|
{label}
|
|
</label>
|
|
|
|
<div className='inlineInputRow'>
|
|
<input
|
|
type={type}
|
|
name={name}
|
|
id={name}
|
|
defaultValue={defaultValue}
|
|
placeholder={placeholder}
|
|
autoComplete={autoComplete}
|
|
className='inlineInput'
|
|
required
|
|
/>
|
|
<button
|
|
type='reset'
|
|
className='inlineInputButton'
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
<button
|
|
type='submit'
|
|
className='inlineInputButton'
|
|
>
|
|
<CheckIcon />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default InlineInput;
|