Add Save and Cancel buttons to dir preview entry manager (#1381)

This commit is contained in:
Evan Simkowitz 2024-12-04 14:48:26 -05:00 committed by GitHub
parent 29e8929f91
commit 60031ef8c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 2 deletions

View file

@ -243,4 +243,10 @@
border: 1px solid rgba(255, 255, 255, 0.15);
background: #212121;
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
.entry-manager-buttons {
display: flex;
flex-direction: row;
gap: 10px;
}
}

View file

@ -1,6 +1,7 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { Button } from "@/app/element/button";
import { Input } from "@/app/element/input";
import { ContextMenuModel } from "@/app/store/contextmenu";
import { PLATFORM, atoms, createBlock, getApi, globalStore } from "@/app/store/global";
@ -146,12 +147,21 @@ type EntryManagerOverlayProps = {
entryManagerType: EntryManagerType;
startingValue?: string;
onSave: (newValue: string) => void;
onCancel?: () => void;
style?: React.CSSProperties;
getReferenceProps?: () => any;
};
const EntryManagerOverlay = memo(
({ entryManagerType, startingValue, onSave, forwardRef, style, getReferenceProps }: EntryManagerOverlayProps) => {
({
entryManagerType,
startingValue,
onSave,
onCancel,
forwardRef,
style,
getReferenceProps,
}: EntryManagerOverlayProps) => {
const [value, setValue] = useState(startingValue);
return (
<div className="entry-manager-overlay" ref={forwardRef} style={style} {...getReferenceProps()}>
@ -168,7 +178,15 @@ const EntryManagerOverlay = memo(
onSave(value);
}
}}
></Input>
/>
</div>
<div className="entry-manager-buttons">
<Button className="vertical-padding-4" onClick={() => onSave(value)}>
Save
</Button>
<Button className="vertical-padding-4 red outlined" onClick={onCancel}>
Cancel
</Button>
</div>
</div>
);
@ -870,6 +888,7 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
}}
{...getReferenceProps()}
onContextMenu={(e) => handleFileContextMenu(e)}
onClick={() => setEntryManagerProps(undefined)}
>
<DirectoryTable
model={model}
@ -891,6 +910,7 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
forwardRef={refs.setFloating}
style={floatingStyles}
getReferenceProps={getFloatingProps}
onCancel={() => setEntryManagerProps(undefined)}
/>
)}
</Fragment>