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>
|
<span className="ml-2 w-1/3 truncate">{displayName}</span>
|
||||||
<Show when={!isDirectory}>
|
<Show when={!isDirectory}>
|
||||||
<div className="ml-auto w-1/2">
|
<div className="ml-auto w-1/2">
|
||||||
<ExplorerNodeValue displayName={displayName} value={value} />{' '}
|
<ExplorerNodeValue
|
||||||
{/* Using the new component */}
|
displayName={displayName}
|
||||||
|
value={value}
|
||||||
|
setValue={(v) => node.put(v)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,14 +1,17 @@
|
|||||||
import { useState } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
const VALUE_TRUNCATE_LENGTH = 50;
|
const VALUE_TRUNCATE_LENGTH = 50;
|
||||||
|
|
||||||
type ExplorerNodeValueProps = {
|
type ExplorerNodeValueProps = {
|
||||||
value: any;
|
value: any;
|
||||||
displayName: string;
|
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 [showMore, setShowMore] = useState(false);
|
||||||
|
const [editableValue, setEditableValue] = useState<any>(JSON.stringify(value));
|
||||||
|
const inputRef = useRef<any>(null);
|
||||||
|
|
||||||
const truncateValue = () => {
|
const truncateValue = () => {
|
||||||
if (displayName === 'priv' || displayName === 'key') {
|
if (displayName === 'priv' || displayName === 'key') {
|
||||||
@ -19,6 +22,23 @@ const ExplorerNodeValue: React.FC<ExplorerNodeValueProps> = ({ displayName, valu
|
|||||||
: value;
|
: 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') {
|
if (typeof value === 'string') {
|
||||||
return (
|
return (
|
||||||
<span className="text-xs text-blue-400">
|
<span className="text-xs text-blue-400">
|
||||||
@ -30,12 +50,30 @@ const ExplorerNodeValue: React.FC<ExplorerNodeValueProps> = ({ displayName, valu
|
|||||||
Show {showMore ? 'less' : 'more'}{' '}
|
Show {showMore ? 'less' : 'more'}{' '}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
"{showMore ? value : truncateValue()}"
|
<span
|
||||||
|
ref={inputRef}
|
||||||
|
contentEditable
|
||||||
|
onBlur={handleBlur}
|
||||||
|
onInput={(e) => setEditableValue(e.currentTarget.textContent)}
|
||||||
|
>
|
||||||
|
{showMore ? value : truncateValue()}
|
||||||
|
</span>
|
||||||
</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;
|
export default ExplorerNodeValue;
|
||||||
|
Loading…
Reference in New Issue
Block a user