100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import { Button } from '@/components/ui'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import DesignerDrawer from './DesignerDrawer'
|
|
import { translateLabel } from './localization'
|
|
import { DesignerFieldValue, DesignerLanguageOption, DesignerSelection } from './types'
|
|
|
|
export interface DesignerLayerController {
|
|
isDesignMode: boolean
|
|
isPanelVisible: boolean
|
|
isSaving: boolean
|
|
isDirty: boolean
|
|
canUndo: boolean
|
|
canRedo: boolean
|
|
selectedLanguage: string
|
|
drawerLanguages: DesignerLanguageOption[]
|
|
setIsPanelVisible: (visible: boolean) => void
|
|
changeLanguage: (cultureName: string) => void
|
|
changeField: (fieldKey: string, value: DesignerFieldValue) => void
|
|
resetContent: () => void
|
|
exitDesignMode: () => void
|
|
save: () => void
|
|
undo: () => void
|
|
redo: () => void
|
|
}
|
|
|
|
interface DesignerLayerProps {
|
|
pageTitle: string
|
|
selection: DesignerSelection | null
|
|
designer: DesignerLayerController
|
|
}
|
|
|
|
/**
|
|
* Tasarim modunun sayfadan bagimsiz arayuzu: durum cubugu ve duzenleme paneli.
|
|
* Tasarim modu kapaliyken hicbir sey render etmez.
|
|
*/
|
|
const DesignerLayer: React.FC<DesignerLayerProps> = ({ pageTitle, selection, designer }) => {
|
|
const { translate } = useLocalization()
|
|
|
|
if (!designer.isDesignMode) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed bottom-6 left-6 z-40 flex items-center gap-2 rounded-full bg-slate-900/95 px-3 py-2 text-sm font-medium text-white shadow-xl backdrop-blur">
|
|
<span className="pl-1">{pageTitle}</span>
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${designer.isDirty ? 'bg-amber-400' : 'bg-emerald-400'}`}
|
|
title={
|
|
designer.isDirty
|
|
? translateLabel(translate, 'Public.designer.unsaved')
|
|
: translateLabel(translate, 'Public.designer.saved')
|
|
}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="plain"
|
|
size="sm"
|
|
className="!text-white"
|
|
onClick={() => designer.setIsPanelVisible(!designer.isPanelVisible)}
|
|
>
|
|
{designer.isPanelVisible
|
|
? translateLabel(translate, 'Public.designer.hidePanel')
|
|
: translateLabel(translate, 'App.PublicDesigner.ShowPanel')}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="plain"
|
|
size="sm"
|
|
className="!text-white"
|
|
onClick={designer.exitDesignMode}
|
|
>
|
|
{translateLabel(translate, 'Public.designer.exit')}
|
|
</Button>
|
|
</div>
|
|
|
|
<DesignerDrawer
|
|
isOpen={designer.isPanelVisible}
|
|
selection={selection}
|
|
pageTitle={pageTitle}
|
|
selectedLanguage={designer.selectedLanguage}
|
|
languages={designer.drawerLanguages}
|
|
isSaving={designer.isSaving}
|
|
isDirty={designer.isDirty}
|
|
canUndo={designer.canUndo}
|
|
canRedo={designer.canRedo}
|
|
onClose={() => designer.setIsPanelVisible(false)}
|
|
onSave={designer.save}
|
|
onLanguageChange={designer.changeLanguage}
|
|
onReset={designer.resetContent}
|
|
onFieldChange={designer.changeField}
|
|
onUndo={designer.undo}
|
|
onRedo={designer.redo}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DesignerLayer
|