33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import type { RequestInputSource } from './requestInputUtils';
|
|
import { applyTemplateSuggestion, hasOpenTemplate } from './requestInputUtils';
|
|
import styles from './ActionInspector.module.css';
|
|
|
|
type Props = {
|
|
value: string;
|
|
sources: RequestInputSource[];
|
|
onChange: (value: string) => void;
|
|
testId: string;
|
|
};
|
|
|
|
export default function TemplateSuggestions({ value, sources, onChange, testId }: Props): React.ReactElement | null {
|
|
if (!hasOpenTemplate(value) || sources.length === 0) return null;
|
|
|
|
return (
|
|
<div className={styles.templateSuggestions} data-testid={testId}>
|
|
<span className={styles.templateSuggestionsLabel}>Insert reference</span>
|
|
{sources.map((source) => (
|
|
<button
|
|
key={source.id}
|
|
type="button"
|
|
className={styles.templateSuggestion}
|
|
onClick={() => onChange(applyTemplateSuggestion(value, source.template))}
|
|
>
|
|
<span>{source.label}</span>
|
|
<code>{source.template}</code>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|