Spaces:
Build error
Build error
File size: 2,730 Bytes
0bfe2e3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import React, { useState, useEffect } from 'react';
import styles from './CustomFormatter.module.css';
interface CustomFormatterProps {
formatter: string;
setFormatter: (formatter: string) => void;
}
const CustomFormatter: React.FC<CustomFormatterProps> = ({
formatter,
setFormatter,
}) => {
const [isExpanded, setIsExpanded] = useState(false);
let initialName = '';
let initialDesc = '';
if (formatter.startsWith('custom:') && formatter.length > 7) {
const formatterData = JSON.parse(formatter.substring(7));
initialName = formatterData.name || '';
initialDesc = formatterData.description || '';
}
const [customNameSyntax, setCustomNameSyntax] = useState(initialName);
const [customDescSyntax, setCustomDescSyntax] = useState(initialDesc);
// Load the existing formatter on component mount
useEffect(() => {
const formatterData = {
name: customNameSyntax,
description: customDescSyntax,
};
setFormatter(`custom:${JSON.stringify(formatterData)}`);
}, [customNameSyntax, customDescSyntax, setFormatter]);
return (
<div className={styles.customFormatterContainer}>
<h3
className={styles.customFormatterTitle}
onClick={() => setIsExpanded(!isExpanded)}
>
Custom Formatter
<span className={styles.expandIcon}>{isExpanded ? '▼' : '►'}</span>
</h3>
{isExpanded && (
<div className={styles.customFormatterContent}>
<p className={styles.customFormatterDescription}>
Define a custom formatter syntax. Write
<code>{'{debug.jsonf}'}</code> to see the available variables.
<br />
For a more detailed explanation, check the{' '}
<a href="https://github.com/Viren070/AIOStreams/wiki/Custom-Formatter">
wiki
</a>
<br />
</p>
<div className={styles.formGroup}>
<label className={styles.label}>Name Format:</label>
<textarea
className={styles.syntaxInput}
value={customNameSyntax}
onChange={(e) => setCustomNameSyntax(e.target.value)}
placeholder="E.g.: {addon.name}"
rows={2}
/>
</div>
<div className={styles.formGroup}>
<label className={styles.label}>Description Format:</label>
<textarea
className={styles.syntaxInput}
value={customDescSyntax}
onChange={(e) => setCustomDescSyntax(e.target.value)}
placeholder="E.g.: {stream.name}"
rows={3}
/>
</div>
</div>
)}
</div>
);
};
export default CustomFormatter;
|