modalTitle prop

This commit is contained in:
BFlat committed 2024-01-22 11:17:51 +07:00
1 parent 3b503a9c8a
commit 90429c162e
2 files changed
+67 -63

No files matched your search

@@ -16,78 +16,81 @@ interface TabConfig {
interface SelectSearcherProps {
label?: string;
tabs: TabConfig[];
modalTitle?: string;
}
const SelectSearcher = memo(({ label, tabs }: SelectSearcherProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const { weightTitle, setWeightTitle } = useToken();
const SelectSearcher = memo(
({ label, tabs, modalTitle = "Select" }: SelectSearcherProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const { weightTitle, setWeightTitle } = useToken();
const openModal = () => {
setIsModalOpen(true);
};
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
const closeModal = () => {
setIsModalOpen(false);
};
const handleRemove = () => {
setWeightTitle && setWeightTitle("");
};
const handleRemove = () => {
setWeightTitle && setWeightTitle("");
};
const searchTabs = tabs.map(tab => ({
label: tab.label,
content: tab.searcherKey ? (
<Searcher
type="modal"
onResultSelect={closeModal}
searcherKey={tab.searcherKey}
weightType={tab.weightTypeFilter}
/>
) : null,
padding: true,
}));
const searchTabs = tabs.map(tab => ({
label: tab.label,
content: tab.searcherKey ? (
<Searcher
type="modal"
onResultSelect={closeModal}
searcherKey={tab.searcherKey}
weightType={tab.weightTypeFilter}
/>
) : null,
padding: true,
}));
return (
<>
<div>
{label && <label className="sub-title">{label}</label>}
return (
<>
<div>
{label && <label className="sub-title">{label}</label>}
<div className="d-flex gap-2">
<Input
disabled={true}
className="w-100"
placeholder="None selected"
value={weightTitle ? weightTitle : ""}
/>
<Button
label={weightTitle ? "Change" : "Select"}
onClick={openModal}
/>
{weightTitle && (
<Button
square={true}
variant="danger"
icon={faTrash}
onClick={handleRemove}
tooltip="Remove"
<div className="d-flex gap-2">
<Input
disabled={true}
className="w-100"
placeholder="None selected"
value={weightTitle ? weightTitle : ""}
/>
)}
<Button
label={weightTitle ? "Change" : "Select"}
onClick={openModal}
/>
{weightTitle && (
<Button
square={true}
variant="danger"
icon={faTrash}
onClick={handleRemove}
tooltip="Remove"
/>
)}
</div>
</div>
</div>
<Modal
show={isModalOpen}
handleClose={closeModal}
title="Select a LoRA Weight"
content={() => <NonRouteTabs tabs={searchTabs} />}
showButtons={false}
padding={false}
large={true}
position="top"
mobileFullscreen={true}
/>
</>
);
});
<Modal
show={isModalOpen}
handleClose={closeModal}
title={modalTitle}
content={() => <NonRouteTabs tabs={searchTabs} />}
showButtons={false}
padding={false}
large={true}
position="top"
mobileFullscreen={true}
/>
</>
);
}
);
export default SelectSearcher;
@@ -8,7 +8,8 @@ export default function TabContentLibrary(props: {
return (
<div>
<SelectSearcher
label="Select a Video Media"
modalTitle="Select a Video"
label="Select a Video"
tabs={[
{
label: "All Videos",