mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 06:03:22 +00:00
contenteditable explorer nodes
This commit is contained in:
parent
192a23ac56
commit
aaf712e482
@ -64,8 +64,11 @@ export default function ExplorerNode({
|
||||
<span className="ml-2 w-1/3 truncate">{displayName}</span>
|
||||
<Show when={!isDirectory}>
|
||||
<div className="ml-auto w-1/2">
|
||||
<ExplorerNodeValue displayName={displayName} value={value} />{' '}
|
||||
{/* Using the new component */}
|
||||
<ExplorerNodeValue
|
||||
displayName={displayName}
|
||||
value={value}
|
||||
setValue={(v) => node.put(v)}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
@ -1,14 +1,17 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
const VALUE_TRUNCATE_LENGTH = 50;
|
||||
|
||||
type ExplorerNodeValueProps = {
|
||||
value: any;
|
||||
displayName: string;
|
||||
setValue: (value: any) => void;
|
||||
};
|
||||
|
||||
const ExplorerNodeValue: React.FC<ExplorerNodeValueProps> = ({ displayName, value }) => {
|
||||
const ExplorerNodeValue: React.FC<ExplorerNodeValueProps> = ({ displayName, value, setValue }) => {
|
||||
const [showMore, setShowMore] = useState(false);
|
||||
const [editableValue, setEditableValue] = useState<any>(JSON.stringify(value));
|
||||
const inputRef = useRef<any>(null);
|
||||
|
||||
const truncateValue = () => {
|
||||
if (displayName === 'priv' || displayName === 'key') {
|
||||
@ -19,6 +22,23 @@ const ExplorerNodeValue: React.FC<ExplorerNodeValueProps> = ({ displayName, valu
|
||||
: value;
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
let parsedValue;
|
||||
try {
|
||||
parsedValue = JSON.parse(editableValue);
|
||||
} catch (e) {
|
||||
parsedValue = editableValue;
|
||||
}
|
||||
setValue(parsedValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Handling unmount
|
||||
return () => {
|
||||
handleBlur();
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (typeof value === 'string') {
|
||||
return (
|
||||
<span className="text-xs text-blue-400">
|
||||
@ -30,12 +50,30 @@ const ExplorerNodeValue: React.FC<ExplorerNodeValueProps> = ({ displayName, valu
|
||||
Show {showMore ? 'less' : 'more'}{' '}
|
||||
</span>
|
||||
)}
|
||||
"{showMore ? value : truncateValue()}"
|
||||
<span
|
||||
ref={inputRef}
|
||||
contentEditable
|
||||
onBlur={handleBlur}
|
||||
onInput={(e) => setEditableValue(e.currentTarget.textContent)}
|
||||
>
|
||||
{showMore ? value : truncateValue()}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className="text-xs text-green-400">{JSON.stringify(value)}</span>;
|
||||
return (
|
||||
<span className="text-xs text-green-400">
|
||||
<span
|
||||
ref={inputRef}
|
||||
contentEditable
|
||||
onBlur={handleBlur}
|
||||
onInput={(e) => setEditableValue(e.currentTarget.textContent)}
|
||||
>
|
||||
{JSON.stringify(value)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExplorerNodeValue;
|
||||
|
Loading…
Reference in New Issue
Block a user