77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import type { ImportOptions } from "../../types/api";
|
|
|
|
export type ImportBarProps = {
|
|
onSubmit: (opts: ImportOptions) => void;
|
|
};
|
|
|
|
export default function ImportBar({ onSubmit }: ImportBarProps) {
|
|
const [formData, setFormData] = useState<ImportOptions>({ mode: 'import' });
|
|
|
|
|
|
const handleSubmit = useCallback((e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
onSubmit(formData);
|
|
}, [formData, onSubmit]);
|
|
|
|
const changeMode = useCallback((mode: ImportOptions['mode']) => {
|
|
if (mode === 'add') {
|
|
setFormData({ ...formData, mode });
|
|
}
|
|
|
|
else {
|
|
setFormData({ mode });
|
|
}
|
|
}, [formData, setFormData]);
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="field">
|
|
<label className="label">Import mode</label>
|
|
<div className="control">
|
|
<div className="buttons has-addons is-left">
|
|
<button
|
|
type="button"
|
|
className={`button ${formData.mode === 'import' ? "is-primary is-selected" : ""}`}
|
|
onClick={() => changeMode('import')}>Import</button>
|
|
<button
|
|
type="button"
|
|
className={`button ${formData.mode === 'add' ? "is-primary is-selected" : ""}`}
|
|
onClick={() => changeMode('add')}>Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{formData.mode === 'add' && <div className="field">
|
|
<label className="label">Additional options</label>
|
|
<div className="control">
|
|
<label className="checkbox">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.learnCategories}
|
|
onChange={e => setFormData({ ...formData, learnCategories: e.target.checked})}/> Learn categories
|
|
</label>
|
|
</div>
|
|
<div className="control">
|
|
<label className="checkbox">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.runTransfers}
|
|
onChange={e => setFormData({ ...formData, runTransfers: e.target.checked})}/> Run transfers
|
|
</label>
|
|
</div>
|
|
</div>}
|
|
|
|
<div className="field mt-5">
|
|
<div className="control">
|
|
<button
|
|
type="submit"
|
|
className="button is-link is-fullwidth">Submit transactions</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
} |