StyAndCo/zeppelin
3
0
Fork 0
mirror of https://github.com/ZeppelinBot/Zeppelin.git synced 2025-03-15 05:41:51 +00:00
Code Releases Activity

presetup: improve result formatting, add click-to-copy

Browse source
This commit is contained in:
Dragory 2021-01-20 22:39:07 +02:00
parent 0757cc368a
commit 53436033e2
No known key found for this signature in database
GPG key ID: 5F387BA66DF8AAC1
2 changed files with 42 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
presetup-configurator/src/Configurator.css
View file

@ -40,9 +40,12 @@
}
.Configurator .result {
margin-top: 16px;
width: 100%;
background-color: #eee;
padding: 8px;
border: 1px solid #444;
border-radius: 4px;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
cursor: copy;
}

41
presetup-configurator/src/Configurator.tsx
View file

@ -85,9 +85,43 @@ export function Configurator() {
const [formattedResult, setFormattedResult] = useState("");
useEffect(() => {
setFormattedResult(yaml.dump(result));
let _formattedResult = yaml.dump(result);
// Add line break before each unquoted top-level or second-level property
_formattedResult = _formattedResult.replace(/^ {0,2}[a-z_]+:/gm, "\n$&").trim();
// Add additional line break at the end
_formattedResult += "\n";
// Explain "exclude: []"
_formattedResult = _formattedResult.replace(/exclude: \[]/, "$& # Exclude nothing = include everything");
setFormattedResult(_formattedResult);
}, [result]);
const resultRows = formattedResult.split("\n").length || 1;
const [copied, setCopied] = useState(false);
function copyResultText(textarea: HTMLTextAreaElement) {
textarea.select();
document.execCommand("copy");
setCopied(true);
}
const [copyResetTimeout, setCopyResetTimeout] = useState<number|null>(null);
useEffect(() => {
if (!copied) {
return;
}
if (copyResetTimeout != null) {
window.clearTimeout(copyResetTimeout);
}
const timeout = window.setTimeout(() => setCopied(false), 3000);
setCopyResetTimeout(timeout);
}, [copied]);
return (
<div className="Configurator">
{/* Options */}
@ -146,7 +180,10 @@ export function Configurator() {
</div>
{/* Result */}
<pre className="result">{formattedResult}</pre>
<textarea className="result" rows={resultRows} readOnly={true} value={formattedResult} onClick={e => copyResultText(e.target as HTMLTextAreaElement)} />
{copied
? <em>Copied!</em>
: <em>Click textarea to copy</em>}
</div>
);
}