925 lines
34 KiB
TypeScript
925 lines
34 KiB
TypeScript
|
import { Button, Dialog } from '@/components/ui'
|
|||
|
|
import Editor, { type Monaco } from '@monaco-editor/react'
|
|||
|
|
import type * as monacoApi from 'monaco-editor'
|
|||
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|||
|
|
import {
|
|||
|
|
FaArrowDown,
|
|||
|
|
FaArrowUp,
|
|||
|
|
FaBook,
|
|||
|
|
FaCheck,
|
|||
|
|
FaChevronDown,
|
|||
|
|
FaChevronRight,
|
|||
|
|
FaCode,
|
|||
|
|
FaCopy,
|
|||
|
|
FaExclamationTriangle,
|
|||
|
|
FaMagic,
|
|||
|
|
FaPlus,
|
|||
|
|
FaSearch,
|
|||
|
|
FaTimes,
|
|||
|
|
FaTrash,
|
|||
|
|
} from 'react-icons/fa'
|
|||
|
|
import { apiEntryName, attachScriptIntelliSense, insertAtCursor } from './scriptIntelliSense'
|
|||
|
|
import {
|
|||
|
|
scriptRuleConditions,
|
|||
|
|
type ScriptDialect,
|
|||
|
|
type ScriptRecipeParam,
|
|||
|
|
type ScriptRule,
|
|||
|
|
type ScriptRuleCondition,
|
|||
|
|
} from './types'
|
|||
|
|
|
|||
|
|
export type ScriptBuilderDialogProps = {
|
|||
|
|
isOpen: boolean
|
|||
|
|
value?: string
|
|||
|
|
dialect: ScriptDialect
|
|||
|
|
onClose: () => void
|
|||
|
|
onApply: (value: string) => void
|
|||
|
|
/** Kaydet/Vazgeç etiketleri; çağıran kendi çevirisini geçebilir. */
|
|||
|
|
saveLabel?: string
|
|||
|
|
cancelLabel?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const controlClass =
|
|||
|
|
'w-full min-w-0 h-9 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:border-indigo-400'
|
|||
|
|
|
|||
|
|
const cardClass =
|
|||
|
|
'rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900'
|
|||
|
|
|
|||
|
|
const editorOptions = {
|
|||
|
|
automaticLayout: true,
|
|||
|
|
fontSize: 12,
|
|||
|
|
minimap: { enabled: false },
|
|||
|
|
scrollBeyondLastLine: false,
|
|||
|
|
tabSize: 2,
|
|||
|
|
wordWrap: 'on',
|
|||
|
|
quickSuggestions: { other: true, comments: false, strings: true },
|
|||
|
|
suggestOnTriggerCharacters: true,
|
|||
|
|
padding: { top: 8, bottom: 8 },
|
|||
|
|
} as const
|
|||
|
|
|
|||
|
|
const emptyCondition = (kind?: string): ScriptRuleCondition => ({
|
|||
|
|
operator: 'equals',
|
|||
|
|
source: '',
|
|||
|
|
value: '',
|
|||
|
|
...(kind ? { kind } : {}),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function ScriptBuilderDialog({
|
|||
|
|
isOpen,
|
|||
|
|
value,
|
|||
|
|
dialect,
|
|||
|
|
onClose,
|
|||
|
|
onApply,
|
|||
|
|
saveLabel = 'Kaydet',
|
|||
|
|
cancelLabel = 'Vazgeç',
|
|||
|
|
}: ScriptBuilderDialogProps) {
|
|||
|
|
const [rules, setRules] = useState<ScriptRule[]>([])
|
|||
|
|
const [code, setCode] = useState('')
|
|||
|
|
// Sihirbaz bir butona basılarak açılır; varsayılan her zaman kod editörüdür.
|
|||
|
|
const [view, setView] = useState<'code' | 'wizard'>('code')
|
|||
|
|
const [openRules, setOpenRules] = useState<Record<string, boolean>>({})
|
|||
|
|
const [paletteOpen, setPaletteOpen] = useState(true)
|
|||
|
|
const [helpOpen, setHelpOpen] = useState(true)
|
|||
|
|
const [helpSearch, setHelpSearch] = useState('')
|
|||
|
|
const [copied, setCopied] = useState(false)
|
|||
|
|
|
|||
|
|
const editorRef = useRef<monacoApi.editor.IStandaloneCodeEditor | null>(null)
|
|||
|
|
const disposeIntelliSense = useRef<(() => void) | null>(null)
|
|||
|
|
/** Sihirbazda ilk düzenleme yapılana kadar kod'a dokunulmaz. */
|
|||
|
|
const wizardTouched = useRef(false)
|
|||
|
|
/**
|
|||
|
|
* Lehçe nesnesi çağıranın prop'larından türetildiği için her render'da yeniden
|
|||
|
|
* oluşabilir. Sıfırlama efektinin ona bağlanması, kullanıcı yazarken editörü
|
|||
|
|
* boşaltırdı — o yüzden efekt lehçeyi ref üzerinden okur.
|
|||
|
|
*/
|
|||
|
|
const dialectRef = useRef(dialect)
|
|||
|
|
dialectRef.current = dialect
|
|||
|
|
|
|||
|
|
const generatedScript = useMemo(() => dialect.buildScript(rules), [dialect, rules])
|
|||
|
|
const completeRuleCount = rules.filter((rule) => dialect.isRuleComplete(rule)).length
|
|||
|
|
const codeDiverged = code.trim() !== '' && code.trim() !== generatedScript.trim()
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!isOpen) return
|
|||
|
|
const parsed = dialectRef.current.parseScript(value)
|
|||
|
|
setRules(parsed.rules)
|
|||
|
|
setCode(value?.trim() ?? '')
|
|||
|
|
setOpenRules(Object.fromEntries(parsed.rules.map((rule) => [rule.id, false])))
|
|||
|
|
setPaletteOpen(parsed.rules.length === 0)
|
|||
|
|
setView('code')
|
|||
|
|
setCopied(false)
|
|||
|
|
setHelpSearch('')
|
|||
|
|
wizardTouched.current = false
|
|||
|
|
}, [isOpen, value])
|
|||
|
|
|
|||
|
|
// Kural eklemek, çıkarmak veya değiştirmek script'e anında yansır: sihirbazda
|
|||
|
|
// yapılan her düzenleme kod editörünü de günceller.
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (view !== 'wizard' || !wizardTouched.current) return
|
|||
|
|
setCode(generatedScript)
|
|||
|
|
}, [generatedScript, view])
|
|||
|
|
|
|||
|
|
useEffect(
|
|||
|
|
() => () => {
|
|||
|
|
disposeIntelliSense.current?.()
|
|||
|
|
disposeIntelliSense.current = null
|
|||
|
|
},
|
|||
|
|
[],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const optionSources = useMemo(() => {
|
|||
|
|
const sources = new Set<string>()
|
|||
|
|
dialect.conditionKinds.forEach((kind) => kind.optionSource && sources.add(kind.optionSource))
|
|||
|
|
dialect.recipes.forEach((recipe) =>
|
|||
|
|
recipe.params.forEach((param) => param.optionSource && sources.add(param.optionSource)),
|
|||
|
|
)
|
|||
|
|
return [...sources]
|
|||
|
|
}, [dialect])
|
|||
|
|
|
|||
|
|
const handleEditorMount = useCallback(
|
|||
|
|
(editor: monacoApi.editor.IStandaloneCodeEditor, monaco: Monaco) => {
|
|||
|
|
editorRef.current = editor
|
|||
|
|
disposeIntelliSense.current?.()
|
|||
|
|
disposeIntelliSense.current = attachScriptIntelliSense(
|
|||
|
|
monaco,
|
|||
|
|
editor,
|
|||
|
|
() => dialectRef.current,
|
|||
|
|
{ optionSources },
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
[optionSources],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const touchRules = (next: (current: ScriptRule[]) => ScriptRule[]) => {
|
|||
|
|
wizardTouched.current = true
|
|||
|
|
setRules(next)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const updateRule = (id: string, patch: Partial<ScriptRule>) =>
|
|||
|
|
touchRules((current) => current.map((rule) => (rule.id === id ? { ...rule, ...patch } : rule)))
|
|||
|
|
|
|||
|
|
const updateParam = (id: string, key: string, next: string) =>
|
|||
|
|
touchRules((current) =>
|
|||
|
|
current.map((rule) =>
|
|||
|
|
rule.id === id ? { ...rule, params: { ...rule.params, [key]: next } } : rule,
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Koşul güncellemesi: `index` 0 ise ana koşul, değilse ek koşullardan biri.
|
|||
|
|
* Ek koşul kalmadığında `conditions` alanı tamamen kaldırılır — eski tek
|
|||
|
|
* koşullu kurallarla aynı JSON'a serileşmesi buna bağlı.
|
|||
|
|
*/
|
|||
|
|
const updateCondition = (rule: ScriptRule, index: number, patch: Partial<ScriptRuleCondition>) => {
|
|||
|
|
if (index === 0) {
|
|||
|
|
updateRule(rule.id, { condition: { ...rule.condition, ...patch } })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const conditions = [...(rule.conditions ?? [])]
|
|||
|
|
conditions[index - 1] = { ...conditions[index - 1], ...patch }
|
|||
|
|
updateRule(rule.id, { conditions })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addCondition = (rule: ScriptRule) =>
|
|||
|
|
updateRule(rule.id, {
|
|||
|
|
conditions: [
|
|||
|
|
...(rule.conditions ?? []),
|
|||
|
|
// Tek kaynak türü olan lehçelerde `kind` taşımak gereksiz gürültü.
|
|||
|
|
emptyCondition(dialect.conditionKinds.length > 1 ? rule.condition.kind : undefined),
|
|||
|
|
],
|
|||
|
|
join: rule.join ?? 'and',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const removeCondition = (rule: ScriptRule, index: number) => {
|
|||
|
|
const conditions = (rule.conditions ?? []).filter((_, item) => item !== index - 1)
|
|||
|
|
updateRule(rule.id, conditions.length ? { conditions } : { conditions: undefined, join: undefined })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const moveRule = (index: number, delta: number) =>
|
|||
|
|
touchRules((current) => {
|
|||
|
|
const target = index + delta
|
|||
|
|
if (target < 0 || target >= current.length) return current
|
|||
|
|
const next = [...current]
|
|||
|
|
const [moved] = next.splice(index, 1)
|
|||
|
|
next.splice(target, 0, moved)
|
|||
|
|
return next
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const addRule = (recipeId: string) => {
|
|||
|
|
const rule = dialect.createRule(recipeId)
|
|||
|
|
touchRules((current) => [...current, rule])
|
|||
|
|
setOpenRules((current) => ({ ...current, [rule.id]: true }))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const copyScript = () => {
|
|||
|
|
navigator.clipboard?.writeText(view === 'wizard' ? generatedScript : code)
|
|||
|
|
setCopied(true)
|
|||
|
|
setTimeout(() => setCopied(false), 1500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const openWizard = () => {
|
|||
|
|
// Elle yazılmış bir script'i kurallar okuyamıyorsa, kullanıcı bir kural
|
|||
|
|
// değiştirene kadar kod olduğu gibi durur; banner bunu söyler.
|
|||
|
|
const parsed = dialect.parseScript(code)
|
|||
|
|
if (parsed.rules.length) {
|
|||
|
|
setRules(parsed.rules)
|
|||
|
|
setOpenRules(Object.fromEntries(parsed.rules.map((rule) => [rule.id, false])))
|
|||
|
|
}
|
|||
|
|
setView('wizard')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const filteredApi = useMemo(() => {
|
|||
|
|
const query = helpSearch.trim().toLocaleLowerCase('tr')
|
|||
|
|
if (!query) return dialect.apiReference
|
|||
|
|
return dialect.apiReference.filter((entry) =>
|
|||
|
|
`${entry.signature} ${entry.description}`.toLocaleLowerCase('tr').includes(query),
|
|||
|
|
)
|
|||
|
|
}, [dialect.apiReference, helpSearch])
|
|||
|
|
|
|||
|
|
const filteredSnippets = useMemo(() => {
|
|||
|
|
const query = helpSearch.trim().toLocaleLowerCase('tr')
|
|||
|
|
if (!query) return dialect.snippets
|
|||
|
|
return dialect.snippets.filter((snippet) =>
|
|||
|
|
`${snippet.label} ${snippet.group} ${snippet.description} ${snippet.code}`
|
|||
|
|
.toLocaleLowerCase('tr')
|
|||
|
|
.includes(query),
|
|||
|
|
)
|
|||
|
|
}, [dialect.snippets, helpSearch])
|
|||
|
|
|
|||
|
|
const renderOptionInput = (
|
|||
|
|
optionSource: string | undefined,
|
|||
|
|
selectedValue: string,
|
|||
|
|
onChange: (next: string) => void,
|
|||
|
|
placeholder: string,
|
|||
|
|
) => {
|
|||
|
|
const options = optionSource ? dialect.getOptions(optionSource) : []
|
|||
|
|
if (!options.length) {
|
|||
|
|
return (
|
|||
|
|
<input
|
|||
|
|
className={controlClass}
|
|||
|
|
placeholder={placeholder}
|
|||
|
|
value={selectedValue}
|
|||
|
|
onChange={(event) => onChange(event.target.value)}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<select
|
|||
|
|
className={controlClass}
|
|||
|
|
value={options.includes(selectedValue) ? selectedValue : ''}
|
|||
|
|
onChange={(event) => onChange(event.target.value)}
|
|||
|
|
>
|
|||
|
|
<option value="">{placeholder}</option>
|
|||
|
|
{options.map((option) => (
|
|||
|
|
<option key={option} value={option}>
|
|||
|
|
{option}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const renderParam = (rule: ScriptRule, param: ScriptRecipeParam) => {
|
|||
|
|
if (param.type === 'fieldList') {
|
|||
|
|
const selectedFields = rule.fields ?? []
|
|||
|
|
const options = dialect.getOptions(param.optionSource || '')
|
|||
|
|
return (
|
|||
|
|
<div key={param.key} className="col-span-12 min-w-0">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">{param.label}</span>
|
|||
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|||
|
|
{selectedFields.map((fieldName) => (
|
|||
|
|
<span
|
|||
|
|
key={fieldName}
|
|||
|
|
className="flex items-center gap-1 rounded-full bg-indigo-100 px-2 py-[2px] text-[11px] text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200"
|
|||
|
|
>
|
|||
|
|
{fieldName}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="text-indigo-400 hover:text-red-500"
|
|||
|
|
onClick={() =>
|
|||
|
|
updateRule(rule.id, {
|
|||
|
|
fields: selectedFields.filter((item) => item !== fieldName),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<FaTimes size={9} />
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
<select
|
|||
|
|
className={`${controlClass} !h-8 !w-44`}
|
|||
|
|
value=""
|
|||
|
|
onChange={(event) => {
|
|||
|
|
const next = event.target.value
|
|||
|
|
if (!next || selectedFields.includes(next)) return
|
|||
|
|
updateRule(rule.id, { fields: [...selectedFields, next] })
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<option value="">+ ekle</option>
|
|||
|
|
{options
|
|||
|
|
.filter((fieldName) => !selectedFields.includes(fieldName))
|
|||
|
|
.map((fieldName) => (
|
|||
|
|
<option key={fieldName} value={fieldName}>
|
|||
|
|
{fieldName}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentValue = rule.params[param.key] ?? ''
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<label key={param.key} className="col-span-12 min-w-0 md:col-span-4">
|
|||
|
|
<span className="mb-1 block truncate text-xs text-gray-500" title={param.help}>
|
|||
|
|
{param.label}
|
|||
|
|
{param.optional && <span className="ml-1 text-gray-300">(ops.)</span>}
|
|||
|
|
</span>
|
|||
|
|
{param.type === 'option' &&
|
|||
|
|
renderOptionInput(
|
|||
|
|
param.optionSource,
|
|||
|
|
currentValue,
|
|||
|
|
(next) => updateParam(rule.id, param.key, next),
|
|||
|
|
param.placeholder || 'Seç',
|
|||
|
|
)}
|
|||
|
|
{param.type === 'select' && (
|
|||
|
|
<select
|
|||
|
|
className={controlClass}
|
|||
|
|
value={currentValue}
|
|||
|
|
onChange={(event) => updateParam(rule.id, param.key, event.target.value)}
|
|||
|
|
>
|
|||
|
|
{param.choices?.map((choice) => (
|
|||
|
|
<option key={choice.value} value={choice.value}>
|
|||
|
|
{choice.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
)}
|
|||
|
|
{(param.type === 'text' || param.type === 'number') && (
|
|||
|
|
<input
|
|||
|
|
className={controlClass}
|
|||
|
|
type={param.type === 'number' ? 'number' : 'text'}
|
|||
|
|
value={currentValue}
|
|||
|
|
placeholder={param.placeholder}
|
|||
|
|
onChange={(event) => updateParam(rule.id, param.key, event.target.value)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{param.help && (
|
|||
|
|
<span className="mt-1 block truncate text-[11px] text-gray-400" title={param.help}>
|
|||
|
|
{param.help}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</label>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const renderCondition = (rule: ScriptRule, condition: ScriptRuleCondition, index: number) => {
|
|||
|
|
const operator = dialect.operators.find((item) => item.value === condition.operator)
|
|||
|
|
const kind =
|
|||
|
|
dialect.conditionKinds.find((item) => item.value === condition.kind) ||
|
|||
|
|
dialect.conditionKinds[0]
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={index} className="grid grid-cols-12 items-end gap-2">
|
|||
|
|
{index > 0 ? (
|
|||
|
|
<label className="col-span-12 min-w-0 md:col-span-2">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Bağlaç</span>
|
|||
|
|
<select
|
|||
|
|
className={controlClass}
|
|||
|
|
value={rule.join ?? 'and'}
|
|||
|
|
onChange={(event) =>
|
|||
|
|
updateRule(rule.id, { join: event.target.value as ScriptRule['join'] })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<option value="and">VE</option>
|
|||
|
|
<option value="or">VEYA</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
) : (
|
|||
|
|
<div className="col-span-12 hidden md:col-span-2 md:block">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Koşul</span>
|
|||
|
|
<div className="flex h-9 items-center text-xs font-semibold text-gray-400">EĞER</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<label className="col-span-12 min-w-0 md:col-span-3">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Karşılaştırma</span>
|
|||
|
|
<select
|
|||
|
|
className={controlClass}
|
|||
|
|
value={condition.operator}
|
|||
|
|
onChange={(event) => updateCondition(rule, index, { operator: event.target.value })}
|
|||
|
|
>
|
|||
|
|
{dialect.operators.map((item) => (
|
|||
|
|
<option key={item.value} value={item.value}>
|
|||
|
|
{item.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
{operator?.needsSource && dialect.conditionKinds.length > 1 && (
|
|||
|
|
<label className="col-span-12 min-w-0 md:col-span-2">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Kaynak</span>
|
|||
|
|
<select
|
|||
|
|
className={controlClass}
|
|||
|
|
value={condition.kind ?? dialect.conditionKinds[0]?.value ?? ''}
|
|||
|
|
onChange={(event) =>
|
|||
|
|
updateCondition(rule, index, { kind: event.target.value, source: '' })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{dialect.conditionKinds.map((item) => (
|
|||
|
|
<option key={item.value} value={item.value}>
|
|||
|
|
{item.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{operator?.needsSource && (
|
|||
|
|
<label className="col-span-12 min-w-0 md:col-span-3">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Alan</span>
|
|||
|
|
{renderOptionInput(
|
|||
|
|
kind?.optionSource,
|
|||
|
|
condition.source,
|
|||
|
|
(next) => updateCondition(rule, index, { source: next }),
|
|||
|
|
kind?.placeholder || 'Seç',
|
|||
|
|
)}
|
|||
|
|
</label>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{operator?.needsValue && (
|
|||
|
|
<label className="col-span-12 min-w-0 md:col-span-2">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Değer</span>
|
|||
|
|
<input
|
|||
|
|
className={controlClass}
|
|||
|
|
value={condition.value}
|
|||
|
|
placeholder="Aktif / 1000"
|
|||
|
|
onChange={(event) => updateCondition(rule, index, { value: event.target.value })}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{index > 0 && (
|
|||
|
|
<div className="col-span-12 flex md:col-span-1">
|
|||
|
|
<Button
|
|||
|
|
shape="circle"
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
variant="plain"
|
|||
|
|
title="Koşulu kaldır"
|
|||
|
|
icon={<FaTimes />}
|
|||
|
|
onClick={() => removeCondition(rule, index)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const renderRule = (rule: ScriptRule, index: number) => {
|
|||
|
|
const recipe = dialect.getRecipe(rule.recipe)
|
|||
|
|
if (!recipe) return null
|
|||
|
|
|
|||
|
|
const open = openRules[rule.id] ?? true
|
|||
|
|
const complete = dialect.isRuleComplete(rule)
|
|||
|
|
const group = dialect.groups.find((item) => item.key === recipe.group)
|
|||
|
|
const Icon = group?.icon ?? FaCode
|
|||
|
|
const conditions = scriptRuleConditions(rule)
|
|||
|
|
const trigger = dialect.getTrigger?.(rule)
|
|||
|
|
const triggerInfo = dialect.triggers?.find((item) => item.value === trigger)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={rule.id} className={cardClass}>
|
|||
|
|
<div className="flex items-center gap-2 px-3 py-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="shrink-0 text-gray-400"
|
|||
|
|
onClick={() => setOpenRules((current) => ({ ...current, [rule.id]: !open }))}
|
|||
|
|
>
|
|||
|
|
{open ? <FaChevronDown size={11} /> : <FaChevronRight size={11} />}
|
|||
|
|
</button>
|
|||
|
|
<Icon className={complete ? 'text-indigo-500' : 'text-gray-300'} size={13} />
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<div className="truncate text-sm font-semibold">
|
|||
|
|
{index + 1}. {recipe.label}
|
|||
|
|
</div>
|
|||
|
|
<div className="truncate text-[11px] text-gray-400" title={dialect.describeRule(rule)}>
|
|||
|
|
{dialect.describeRule(rule)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{conditions.length > 1 && (
|
|||
|
|
<span className="shrink-0 rounded-full bg-violet-100 px-2 py-[1px] text-[11px] text-violet-700 dark:bg-violet-900 dark:text-violet-200">
|
|||
|
|
{conditions.length} koşul · {rule.join === 'or' ? 'VEYA' : 'VE'}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{triggerInfo && trigger !== dialect.triggers?.[0]?.value && (
|
|||
|
|
<span
|
|||
|
|
className="shrink-0 rounded-full bg-sky-100 px-2 py-[1px] text-[11px] text-sky-700 dark:bg-sky-900 dark:text-sky-200"
|
|||
|
|
title={triggerInfo.help}
|
|||
|
|
>
|
|||
|
|
{triggerInfo.label}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{!complete && (
|
|||
|
|
<span
|
|||
|
|
className="flex shrink-0 items-center gap-1 rounded-full bg-amber-100 px-2 py-[1px] text-[11px] text-amber-700 dark:bg-amber-900 dark:text-amber-200"
|
|||
|
|
title={
|
|||
|
|
dialect.getRuleWarning?.(rule) ||
|
|||
|
|
'Zorunlu alanlar dolmadığı için bu kural script’e eklenmez.'
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<FaExclamationTriangle size={9} /> eksik
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<div className="flex shrink-0 items-center">
|
|||
|
|
<Button
|
|||
|
|
shape="circle"
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
variant="plain"
|
|||
|
|
title="Yukarı taşı"
|
|||
|
|
icon={<FaArrowUp />}
|
|||
|
|
onClick={() => moveRule(index, -1)}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
shape="circle"
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
variant="plain"
|
|||
|
|
title="Aşağı taşı"
|
|||
|
|
icon={<FaArrowDown />}
|
|||
|
|
onClick={() => moveRule(index, 1)}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
shape="circle"
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
variant="plain"
|
|||
|
|
title="Kuralı sil"
|
|||
|
|
icon={<FaTrash />}
|
|||
|
|
onClick={() => touchRules((current) => current.filter((item) => item.id !== rule.id))}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{open && (
|
|||
|
|
<div className="border-t border-gray-100 px-3 py-3 dark:border-gray-800">
|
|||
|
|
<p className="mb-3 text-[11px] text-gray-400">{recipe.summary}</p>
|
|||
|
|
|
|||
|
|
<div className="mb-3 flex flex-col gap-2 rounded-md bg-gray-50 p-2 dark:bg-gray-800/40">
|
|||
|
|
{dialect.triggers && (
|
|||
|
|
<label className="w-full md:w-56">
|
|||
|
|
<span className="mb-1 block text-xs text-gray-500">Ne zaman</span>
|
|||
|
|
<select
|
|||
|
|
className={controlClass}
|
|||
|
|
value={trigger ?? dialect.triggers[0].value}
|
|||
|
|
onChange={(event) => updateRule(rule.id, { trigger: event.target.value })}
|
|||
|
|
>
|
|||
|
|
{dialect.triggers.map((item) => (
|
|||
|
|
<option key={item.value} value={item.value} title={item.help}>
|
|||
|
|
{item.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{conditions.map((condition, conditionIndex) =>
|
|||
|
|
renderCondition(rule, condition, conditionIndex),
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<Button
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
icon={<FaPlus />}
|
|||
|
|
title="Aynı kurala ikinci bir koşul ekler; VE/VEYA ile birleşir."
|
|||
|
|
onClick={() => addCondition(rule)}
|
|||
|
|
>
|
|||
|
|
Koşul ekle
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-12 gap-x-3 gap-y-3">
|
|||
|
|
{recipe.params.map((param) => renderParam(rule, param))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<pre className="mt-3 overflow-x-auto rounded border border-gray-100 bg-gray-950 px-3 py-2 font-mono text-[11px] text-emerald-100 dark:border-gray-800">
|
|||
|
|
{dialect.buildRuleLine(rule, rules) || recipe.example}
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const helpPanel = (
|
|||
|
|
<section className={`flex min-h-0 w-80 shrink-0 flex-col ${cardClass} p-3`}>
|
|||
|
|
<div className="mb-2 flex items-center gap-2">
|
|||
|
|
<FaSearch className="text-gray-400" size={11} />
|
|||
|
|
<input
|
|||
|
|
className="w-full min-w-0 bg-transparent text-xs text-gray-700 outline-none dark:text-gray-100"
|
|||
|
|
placeholder="Kısayol veya snippet ara"
|
|||
|
|
value={helpSearch}
|
|||
|
|
onChange={(event) => setHelpSearch(event.target.value)}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
shape="circle"
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
variant="plain"
|
|||
|
|
title="Paneli kapat"
|
|||
|
|
icon={<FaTimes />}
|
|||
|
|
onClick={() => setHelpOpen(false)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="min-h-0 flex-1 overflow-y-auto pr-1">
|
|||
|
|
<div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-gray-400">
|
|||
|
|
Snippet
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3 flex flex-col gap-1">
|
|||
|
|
{filteredSnippets.map((snippet) => (
|
|||
|
|
<button
|
|||
|
|
key={snippet.label}
|
|||
|
|
type="button"
|
|||
|
|
className="rounded border border-gray-100 px-2 py-1.5 text-left hover:border-indigo-300 hover:bg-indigo-50 dark:border-gray-800 dark:hover:bg-gray-800"
|
|||
|
|
title={`${snippet.description}\n\n${snippet.code}`}
|
|||
|
|
onClick={() => insertAtCursor(editorRef.current, snippet.code)}
|
|||
|
|
>
|
|||
|
|
<div className="truncate text-xs font-medium text-gray-700 dark:text-gray-100">
|
|||
|
|
{snippet.label}
|
|||
|
|
</div>
|
|||
|
|
<div className="truncate text-[10px] text-gray-400">{snippet.description}</div>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
{!filteredSnippets.length && (
|
|||
|
|
<span className="text-[11px] text-gray-400">Eşleşen snippet yok.</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-gray-400">
|
|||
|
|
Runtime API
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-col gap-1">
|
|||
|
|
{filteredApi.map((entry) => (
|
|||
|
|
<button
|
|||
|
|
key={entry.signature}
|
|||
|
|
type="button"
|
|||
|
|
className="rounded px-1 py-1 text-left hover:bg-indigo-50 dark:hover:bg-gray-800"
|
|||
|
|
title={entry.description}
|
|||
|
|
onClick={() => insertAtCursor(editorRef.current, apiEntryName(entry))}
|
|||
|
|
>
|
|||
|
|
<code className="block truncate font-mono text-[11px] text-indigo-600 dark:text-indigo-300">
|
|||
|
|
{entry.signature}
|
|||
|
|
</code>
|
|||
|
|
<span className="block truncate text-[10px] text-gray-400">{entry.description}</span>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
{!filteredApi.length && (
|
|||
|
|
<span className="text-[11px] text-gray-400">Eşleşen kısayol yok.</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog
|
|||
|
|
preventScroll
|
|||
|
|
isOpen={isOpen}
|
|||
|
|
width={1360}
|
|||
|
|
contentClassName="flex flex-col"
|
|||
|
|
style={{ overlay: { zIndex: 1300 } }}
|
|||
|
|
onClose={onClose}
|
|||
|
|
onRequestClose={onClose}
|
|||
|
|
>
|
|||
|
|
{/*
|
|||
|
|
Yükseklik zinciri iki yerden kopuyordu: Dialog'un `height` prop'u yalnızca
|
|||
|
|
react-modal içeriğine uygulanıyor, ve `.dialog-body` global olarak `flex-1`
|
|||
|
|
alıyor. `!flex-none` ile flex boyutlandırmasını kapatıp yüksekliği
|
|||
|
|
doğrudan veriyoruz.
|
|||
|
|
*/}
|
|||
|
|
<Dialog.Body className="flex h-[calc(100vh-16rem)] max-h-[calc(90vh-7rem)] min-h-[320px] !flex-none flex-col gap-3 !overflow-hidden mt-5">
|
|||
|
|
<div className="flex flex-wrap items-center gap-2 border-b border-gray-200 pb-3 dark:border-gray-700">
|
|||
|
|
<FaCode className="text-indigo-500" />
|
|||
|
|
<h5 className="mr-1">{dialect.title}</h5>
|
|||
|
|
<span
|
|||
|
|
className="rounded-full bg-indigo-100 px-2.5 py-[2px] text-[11px] font-medium text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200"
|
|||
|
|
title={dialect.subjectHint}
|
|||
|
|
>
|
|||
|
|
{dialect.subject}
|
|||
|
|
</span>
|
|||
|
|
{view === 'wizard' && (
|
|||
|
|
<span
|
|||
|
|
className={`rounded-full px-2.5 py-[2px] text-[11px] font-medium ${
|
|||
|
|
completeRuleCount
|
|||
|
|
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200'
|
|||
|
|
: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{completeRuleCount}/{rules.length} kural
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="ml-auto flex items-center gap-2">
|
|||
|
|
{view === 'code' && !helpOpen && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
type="button"
|
|||
|
|
title="Kısayol ve snippet panelini aç"
|
|||
|
|
icon={<FaBook />}
|
|||
|
|
onClick={() => setHelpOpen(true)}
|
|||
|
|
>
|
|||
|
|
Yardım
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button size="sm" type="button" icon={<FaCopy />} onClick={copyScript}>
|
|||
|
|
{copied ? 'Kopyalandı' : 'Kopyala'}
|
|||
|
|
</Button>
|
|||
|
|
<div className="flex overflow-hidden rounded-md border border-gray-200 dark:border-gray-700">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium ${
|
|||
|
|
view === 'code'
|
|||
|
|
? 'bg-indigo-500 text-white'
|
|||
|
|
: 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|||
|
|
}`}
|
|||
|
|
onClick={() => setView('code')}
|
|||
|
|
>
|
|||
|
|
<FaCode /> Kod
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium ${
|
|||
|
|
view === 'wizard'
|
|||
|
|
? 'bg-indigo-500 text-white'
|
|||
|
|
: 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|||
|
|
}`}
|
|||
|
|
title="Kod yazmadan kural kurmak için sihirbazı aç"
|
|||
|
|
onClick={openWizard}
|
|||
|
|
>
|
|||
|
|
<FaMagic /> Sihirbaz
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{view === 'wizard' && codeDiverged && (
|
|||
|
|
<div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
|
|||
|
|
<FaExclamationTriangle className="shrink-0" />
|
|||
|
|
<span className="flex-1">
|
|||
|
|
Koddaki script kurallardan farklı. Burada bir kuralı değiştirdiğin anda kod
|
|||
|
|
kurallardan yeniden üretilir.
|
|||
|
|
</span>
|
|||
|
|
<Button size="xs" type="button" onClick={() => setView('code')}>
|
|||
|
|
Kodu gör
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{view === 'code' ? (
|
|||
|
|
<div className="flex min-h-0 flex-1 gap-3">
|
|||
|
|
<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2">
|
|||
|
|
<div className="flex items-center justify-between gap-2 text-xs text-gray-500">
|
|||
|
|
<span className="min-w-0 truncate">{dialect.codeHint}</span>
|
|||
|
|
{rules.length > 0 && (
|
|||
|
|
<Button
|
|||
|
|
disabled={!generatedScript}
|
|||
|
|
size="xs"
|
|||
|
|
type="button"
|
|||
|
|
title="Sihirbazdaki kurallardan script'i yeniden üretir."
|
|||
|
|
icon={<FaMagic />}
|
|||
|
|
onClick={() => setCode(generatedScript)}
|
|||
|
|
>
|
|||
|
|
Kurallardan üret
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
|||
|
|
<Editor
|
|||
|
|
height="100%"
|
|||
|
|
language="javascript"
|
|||
|
|
theme="vs-dark"
|
|||
|
|
value={code}
|
|||
|
|
options={editorOptions}
|
|||
|
|
onMount={handleEditorMount}
|
|||
|
|
onChange={(next) => setCode(next || '')}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{helpOpen && helpPanel}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="grid min-h-0 flex-1 grid-cols-12 gap-4 overflow-hidden">
|
|||
|
|
<section className="col-span-7 flex min-h-0 flex-col gap-2 overflow-y-auto pr-1">
|
|||
|
|
<div className={cardClass}>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-800"
|
|||
|
|
onClick={() => setPaletteOpen((current) => !current)}
|
|||
|
|
>
|
|||
|
|
<span className="shrink-0 text-gray-400">
|
|||
|
|
{paletteOpen ? <FaChevronDown size={11} /> : <FaChevronRight size={11} />}
|
|||
|
|
</span>
|
|||
|
|
<FaPlus className="text-indigo-500" size={12} />
|
|||
|
|
<span className="flex-1 text-sm font-semibold">Kural Ekle</span>
|
|||
|
|
</button>
|
|||
|
|
{paletteOpen && (
|
|||
|
|
<div className="flex flex-col gap-3 border-t border-gray-100 px-3 py-3 dark:border-gray-800">
|
|||
|
|
{dialect.groups.map((group) => {
|
|||
|
|
const Icon = group.icon
|
|||
|
|
const groupRecipes = dialect.recipes.filter(
|
|||
|
|
(recipe) => recipe.group === group.key,
|
|||
|
|
)
|
|||
|
|
if (!groupRecipes.length) return null
|
|||
|
|
return (
|
|||
|
|
<div key={group.key}>
|
|||
|
|
<div
|
|||
|
|
className="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-400"
|
|||
|
|
title={group.description}
|
|||
|
|
>
|
|||
|
|
<Icon size={10} /> {group.title}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{groupRecipes.map((recipe) => (
|
|||
|
|
<Button
|
|||
|
|
key={recipe.id}
|
|||
|
|
size="sm"
|
|||
|
|
type="button"
|
|||
|
|
title={`${recipe.summary}\n\nÖrnek: ${recipe.example}`}
|
|||
|
|
onClick={() => addRule(recipe.id)}
|
|||
|
|
>
|
|||
|
|
{recipe.label}
|
|||
|
|
</Button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{rules.map(renderRule)}
|
|||
|
|
|
|||
|
|
{!rules.length && (
|
|||
|
|
<div className="rounded-lg border border-dashed border-gray-300 p-8 text-center text-xs text-gray-400 dark:border-gray-700">
|
|||
|
|
Henüz kural yok. Yukarıdan bir kural ekle; her kural tek satırlık script üretir ve
|
|||
|
|
kod sekmesine anında yansır.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className={`col-span-5 flex min-h-0 flex-col ${cardClass} p-3`}>
|
|||
|
|
<div className="mb-3 flex items-center justify-between gap-2">
|
|||
|
|
<span className="flex items-center gap-2 text-sm font-semibold">
|
|||
|
|
<FaCode className="text-gray-400" />
|
|||
|
|
Script Önizleme
|
|||
|
|
</span>
|
|||
|
|
<span className="rounded-full bg-gray-100 px-2 py-[2px] text-[11px] text-gray-500 dark:bg-gray-800 dark:text-gray-300">
|
|||
|
|
{generatedScript ? `${generatedScript.split('\n').length - 1} satır` : 'boş'}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
|||
|
|
<Editor
|
|||
|
|
height="100%"
|
|||
|
|
language="javascript"
|
|||
|
|
theme="vs-dark"
|
|||
|
|
value={generatedScript || '// Kural ekledikçe script burada oluşur'}
|
|||
|
|
options={{ ...editorOptions, readOnly: true }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<p className="mt-2 text-[11px] text-gray-400">
|
|||
|
|
İlk satırdaki <code>{'// @builder'}</code> yorumu kuralları saklar; dialog yeniden
|
|||
|
|
açıldığında sihirbaz kuralları buradan geri yükler.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Dialog.Body>
|
|||
|
|
|
|||
|
|
<Dialog.Footer className="mt-1 flex justify-end gap-2 border-t border-gray-200 pt-3 dark:border-gray-700">
|
|||
|
|
<Button size="sm" type="button" variant="plain" icon={<FaTimes />} onClick={onClose}>
|
|||
|
|
{cancelLabel}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
type="button"
|
|||
|
|
variant="solid"
|
|||
|
|
icon={<FaCheck />}
|
|||
|
|
onClick={() => {
|
|||
|
|
onApply(view === 'wizard' ? generatedScript : code)
|
|||
|
|
onClose()
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{saveLabel}
|
|||
|
|
</Button>
|
|||
|
|
</Dialog.Footer>
|
|||
|
|
</Dialog>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ScriptBuilderDialog
|