mirror of https://github.com/portainer/portainer
99 lines
2.1 KiB
TypeScript
99 lines
2.1 KiB
TypeScript
import { CellContext } from '@tanstack/react-table';
|
|
import { Check, File as FileIcon, Folder, X } from 'lucide-react';
|
|
import { Form, Formik } from 'formik';
|
|
|
|
import { Icon } from '@@/Icon';
|
|
import { Button } from '@@/buttons';
|
|
import { Input } from '@@/form-components/Input';
|
|
|
|
import { FileData, isFilesTableMeta } from '../types';
|
|
|
|
export function NameCell({
|
|
getValue,
|
|
row: { original: item },
|
|
table,
|
|
}: CellContext<FileData, string>) {
|
|
const name = getValue();
|
|
const { meta } = table.options;
|
|
if (!isFilesTableMeta(meta)) {
|
|
throw new Error('Invalid table meta');
|
|
}
|
|
const isEdit = meta.isEdit(name);
|
|
|
|
if (item.custom) {
|
|
return item.custom;
|
|
}
|
|
|
|
if (isEdit) {
|
|
return (
|
|
<EditForm
|
|
originalName={name}
|
|
onSave={handleRename}
|
|
onClose={() => meta.setIsEdit(name, false)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{item.Dir ? (
|
|
<Button
|
|
color="link"
|
|
className="!ml-0 p-0"
|
|
onClick={() => meta.onBrowse(name)}
|
|
icon={Folder}
|
|
>
|
|
{name}
|
|
</Button>
|
|
) : (
|
|
<span className="vertical-center">
|
|
<Icon icon={FileIcon} />
|
|
{name}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
function handleRename(name: string) {
|
|
if (!isFilesTableMeta(meta)) {
|
|
throw new Error('Invalid table meta');
|
|
}
|
|
|
|
meta.onRename(item.Name, name);
|
|
meta.setIsEdit(name, false);
|
|
}
|
|
}
|
|
|
|
function EditForm({
|
|
originalName,
|
|
onSave,
|
|
onClose,
|
|
}: {
|
|
originalName: string;
|
|
onSave: (name: string) => void;
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<Formik
|
|
initialValues={{ name: originalName }}
|
|
onSubmit={({ name }) => onSave(name)}
|
|
onReset={onClose}
|
|
>
|
|
{({ values, setFieldValue }) => (
|
|
<Form className="flex items-center">
|
|
<Input
|
|
name="name"
|
|
value={values.name}
|
|
onChange={(e) => setFieldValue('name', e.target.value)}
|
|
className="input-sm w-auto"
|
|
/>
|
|
|
|
<Button color="none" type="reset" icon={X} />
|
|
|
|
<Button color="none" type="submit" icon={Check} />
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
);
|
|
}
|