893 lines
30 KiB
TypeScript
893 lines
30 KiB
TypeScript
|
import React from 'react'
|
|||
|
|
import * as UiKit from '@/components/ui'
|
|||
|
|
import PlatformViewHost, {
|
|||
|
|
type PlatformViewName,
|
|||
|
|
} from '@/components/componentEditor/PlatformViewHost'
|
|||
|
|
import { FaArrowDown, FaArrowUp, FaClone, FaGripVertical, FaTrash } from 'react-icons/fa'
|
|||
|
|
import {
|
|||
|
|
getDesignerValueByPath,
|
|||
|
|
normalizeDesignerKeyList,
|
|||
|
|
type DesignerBinding,
|
|||
|
|
type DesignerNode,
|
|||
|
|
} from './types'
|
|||
|
|
|
|||
|
|
export const DESIGNER_DRAG_TYPE = 'application/x-sozsoft-designer'
|
|||
|
|
|
|||
|
|
interface VisualCanvasProps {
|
|||
|
|
nodes: DesignerNode[]
|
|||
|
|
selectedId: string | null
|
|||
|
|
background: string
|
|||
|
|
interactive?: boolean
|
|||
|
|
onSelect?: (id: string) => void
|
|||
|
|
onDropComponent?: (definitionName: string, parentId: string | null) => void
|
|||
|
|
onMove?: (id: string, direction: -1 | 1) => void
|
|||
|
|
onDuplicate?: (id: string) => void
|
|||
|
|
onDelete?: (id: string) => void
|
|||
|
|
renderCustomComponent?: (name: string, props?: Record<string, unknown>) => React.ReactNode
|
|||
|
|
dataValues?: Record<string, unknown>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class PreviewBoundary extends React.Component<
|
|||
|
|
{ name: string; resetKey: string; children: React.ReactNode },
|
|||
|
|
{ failed: boolean }
|
|||
|
|
> {
|
|||
|
|
state = { failed: false }
|
|||
|
|
|
|||
|
|
static getDerivedStateFromError() {
|
|||
|
|
return { failed: true }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidUpdate(previousProps: Readonly<{ resetKey: string }>) {
|
|||
|
|
if (this.state.failed && previousProps.resetKey !== this.props.resetKey) {
|
|||
|
|
this.setState({ failed: false })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
if (this.state.failed) {
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
|
|||
|
|
{this.props.name} önizlemesi için ek veri veya alt bileşen gerekiyor.
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return this.props.children
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const resolveUiComponent = (name: string): React.ElementType | null => {
|
|||
|
|
const parts = name.split('.')
|
|||
|
|
let component: unknown = (UiKit as Record<string, unknown>)[parts[0]]
|
|||
|
|
|
|||
|
|
for (const part of parts.slice(1)) {
|
|||
|
|
if ((typeof component !== 'object' && typeof component !== 'function') || !component) {
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
component = (component as Record<string, unknown>)[part]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return component ? (component as React.ElementType) : null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const executeEvent = (script: string, event: unknown, node: DesignerNode) => {
|
|||
|
|
if (!script.trim()) return
|
|||
|
|
try {
|
|||
|
|
const run = new Function('event', 'component', 'props', script)
|
|||
|
|
run(event, node, node.props)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(`Designer event error (${node.type}):`, error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getBindingValue = (
|
|||
|
|
binding: DesignerBinding,
|
|||
|
|
dataValues: Record<string, unknown>,
|
|||
|
|
currentItem?: unknown,
|
|||
|
|
) => {
|
|||
|
|
const path = binding.path.trim()
|
|||
|
|
if (currentItem !== undefined && (path === '$item' || path.startsWith('$item.'))) {
|
|||
|
|
return getDesignerValueByPath(currentItem, path === '$item' ? '' : path.slice(6))
|
|||
|
|
}
|
|||
|
|
return getDesignerValueByPath(dataValues[binding.sourceId], path)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toSelectOptions = (
|
|||
|
|
value: unknown,
|
|||
|
|
labelPath = '',
|
|||
|
|
valuePath = '',
|
|||
|
|
): Array<Record<string, unknown>> => {
|
|||
|
|
if (!Array.isArray(value)) return []
|
|||
|
|
return value.map((item, index) => {
|
|||
|
|
if (item === null || typeof item !== 'object' || Array.isArray(item)) {
|
|||
|
|
return { label: String(item ?? ''), value: item ?? index }
|
|||
|
|
}
|
|||
|
|
const record = item as Record<string, unknown>
|
|||
|
|
const primitiveKeys = Object.keys(record).filter(
|
|||
|
|
(key) => record[key] === null || ['string', 'number', 'boolean'].includes(typeof record[key]),
|
|||
|
|
)
|
|||
|
|
const labelKey = ['label', 'name', 'title', 'text', 'description'].find(
|
|||
|
|
(key) => record[key] !== undefined,
|
|||
|
|
)
|
|||
|
|
const valueKey = ['value', 'id', 'code', 'key'].find((key) => record[key] !== undefined)
|
|||
|
|
const labelValue = labelPath
|
|||
|
|
? getDesignerValueByPath(record, labelPath)
|
|||
|
|
: labelKey
|
|||
|
|
? record[labelKey]
|
|||
|
|
: record[primitiveKeys[0]]
|
|||
|
|
const optionValue = valuePath
|
|||
|
|
? getDesignerValueByPath(record, valuePath)
|
|||
|
|
: valueKey
|
|||
|
|
? record[valueKey]
|
|||
|
|
: record[primitiveKeys[1] || primitiveKeys[0]]
|
|||
|
|
return {
|
|||
|
|
...record,
|
|||
|
|
label: String(labelValue ?? `Seçenek ${index + 1}`),
|
|||
|
|
value: optionValue ?? index,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getPreviewProps = (
|
|||
|
|
node: DesignerNode,
|
|||
|
|
dataValues: Record<string, unknown>,
|
|||
|
|
currentItem?: unknown,
|
|||
|
|
) => {
|
|||
|
|
const props: Record<string, unknown> = {}
|
|||
|
|
Object.entries(node.props).forEach(([key, value]) => {
|
|||
|
|
if (key === 'children' || key === 'html' || value === '') return
|
|||
|
|
if (key.startsWith('on') && typeof value === 'string') return
|
|||
|
|
props[key] = value
|
|||
|
|
})
|
|||
|
|
Object.entries(node.events).forEach(([name, script]) => {
|
|||
|
|
if (!script.trim()) return
|
|||
|
|
props[name] = (...args: unknown[]) => {
|
|||
|
|
const event =
|
|||
|
|
node.type === 'Checkbox' && name === 'onChange'
|
|||
|
|
? {
|
|||
|
|
checked: Boolean(args[0]),
|
|||
|
|
originalEvent: args[1],
|
|||
|
|
target:
|
|||
|
|
args[1] && typeof args[1] === 'object' && 'target' in args[1]
|
|||
|
|
? (args[1] as { target: unknown }).target
|
|||
|
|
: undefined,
|
|||
|
|
}
|
|||
|
|
: args[0]
|
|||
|
|
executeEvent(script, event, node)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
Object.entries(node.bindings || {}).forEach(([propertyName, binding]) => {
|
|||
|
|
if (propertyName !== 'children' && binding.sourceId) {
|
|||
|
|
props[propertyName] = getBindingValue(binding, dataValues, currentItem)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (node.type === 'Select' || node.type === 'AutoComplete' || node.type === 'Menu') {
|
|||
|
|
const collectionProperty = node.type === 'Menu' ? 'items' : 'options'
|
|||
|
|
if (node.type === 'Select') {
|
|||
|
|
const legacyAliases: Record<string, string> = {
|
|||
|
|
clearable: 'isClearable',
|
|||
|
|
disabled: 'isDisabled',
|
|||
|
|
multiple: 'isMulti',
|
|||
|
|
searchable: 'isSearchable',
|
|||
|
|
}
|
|||
|
|
Object.entries(legacyAliases).forEach(([legacyName, runtimeName]) => {
|
|||
|
|
if (props[runtimeName] === undefined && props[legacyName] !== undefined) {
|
|||
|
|
props[runtimeName] = props[legacyName]
|
|||
|
|
}
|
|||
|
|
delete props[legacyName]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const optionsBinding = node.bindings?.[collectionProperty]
|
|||
|
|
props[collectionProperty] = toSelectOptions(
|
|||
|
|
props[collectionProperty],
|
|||
|
|
optionsBinding?.labelPath,
|
|||
|
|
optionsBinding?.valuePath,
|
|||
|
|
)
|
|||
|
|
if (node.type === 'Select' && 'value' in props) {
|
|||
|
|
const options = props.options as Array<Record<string, unknown>>
|
|||
|
|
props.defaultValue = options.find((option) => option.value === props.value) || null
|
|||
|
|
delete props.value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (node.type === 'Input' && 'value' in props) {
|
|||
|
|
props.defaultValue = props.value
|
|||
|
|
delete props.value
|
|||
|
|
}
|
|||
|
|
if (node.type === 'Checkbox' && 'checked' in props) {
|
|||
|
|
props.defaultChecked = Boolean(props.checked)
|
|||
|
|
delete props.checked
|
|||
|
|
}
|
|||
|
|
if ('value' in props && !props.onChange) props.onChange = () => undefined
|
|||
|
|
if ('checked' in props && !props.onChange) props.onChange = () => undefined
|
|||
|
|
props.key = JSON.stringify([node.props, node.bindings])
|
|||
|
|
return props
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const PlatformPlaceholder = ({ node }: { node: DesignerNode }) => (
|
|||
|
|
<div
|
|||
|
|
className="flex min-h-40 items-center justify-center rounded-lg border border-dashed border-sky-300 bg-gradient-to-br from-sky-50 to-indigo-50 p-6 text-center dark:border-sky-800 dark:from-slate-900 dark:to-sky-950"
|
|||
|
|
style={{ minHeight: String(node.props.height || '320px') }}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600 font-bold text-white">
|
|||
|
|
S
|
|||
|
|
</div>
|
|||
|
|
<div className="font-semibold text-slate-800 dark:text-slate-100">
|
|||
|
|
{node.type.replace(/View$/, '')}
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-1 text-xs text-slate-500">
|
|||
|
|
{String(node.props.listFormCode || 'Property panelinden List Form Code seçin')}
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-3 text-[11px] uppercase tracking-wider text-sky-700 dark:text-sky-300">
|
|||
|
|
Platform görünümü
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const PLATFORM_VIEW_NAMES: Record<string, PlatformViewName> = {
|
|||
|
|
ListView: 'List',
|
|||
|
|
DataGridView: 'Grid',
|
|||
|
|
TreeView: 'Tree',
|
|||
|
|
GanttView: 'GanttView',
|
|||
|
|
TodoBoard: 'TodoBoard',
|
|||
|
|
CardView: 'CardView',
|
|||
|
|
SchedulerView: 'SchedulerView',
|
|||
|
|
PivotView: 'Pivot',
|
|||
|
|
ChartView: 'Chart',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const GridColumnHeaders = ({ columns }: { columns: string[] }) => (
|
|||
|
|
<div className="min-w-0 overflow-auto rounded-md border border-slate-200 bg-slate-100 [grid-column:1/-1] dark:border-slate-700 dark:bg-slate-800">
|
|||
|
|
{columns.length ? (
|
|||
|
|
<div className="flex min-w-max divide-x divide-slate-200 dark:divide-slate-700">
|
|||
|
|
{columns.map((column) => (
|
|||
|
|
<div
|
|||
|
|
key={column}
|
|||
|
|
className="min-w-32 px-3 py-2 text-xs font-semibold text-slate-600 dark:text-slate-200"
|
|||
|
|
>
|
|||
|
|
{column}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="px-3 py-2 text-center text-xs text-slate-400">
|
|||
|
|
Data panelinden gösterilecek sütunları seçin.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const getGridCellText = (value: unknown) =>
|
|||
|
|
typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value ?? '') || '—'
|
|||
|
|
|
|||
|
|
const GridDataTablePreview = ({
|
|||
|
|
borderlessRow = false,
|
|||
|
|
compact = false,
|
|||
|
|
hoverable = true,
|
|||
|
|
items,
|
|||
|
|
overflow = true,
|
|||
|
|
selectedColumns,
|
|||
|
|
}: {
|
|||
|
|
borderlessRow?: boolean
|
|||
|
|
compact?: boolean
|
|||
|
|
hoverable?: boolean
|
|||
|
|
items: unknown[]
|
|||
|
|
overflow?: boolean
|
|||
|
|
selectedColumns?: string[]
|
|||
|
|
}) => {
|
|||
|
|
const firstObject = items.find(
|
|||
|
|
(item): item is Record<string, unknown> =>
|
|||
|
|
Boolean(item) && typeof item === 'object' && !Array.isArray(item),
|
|||
|
|
)
|
|||
|
|
const columns = selectedColumns ?? (firstObject ? Object.keys(firstObject) : ['value'])
|
|||
|
|
|
|||
|
|
if (!columns.length) {
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-4 text-center text-xs text-slate-500 [grid-column:1/-1] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
|
|||
|
|
Preview için en az bir sütun seçin.
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={`min-w-0 rounded-lg border border-slate-200 bg-white shadow-sm [grid-column:1/-1] dark:border-slate-700 dark:bg-slate-900 ${overflow ? 'overflow-auto' : 'overflow-visible'}`}
|
|||
|
|
>
|
|||
|
|
<table className={`w-full border-collapse text-left ${compact ? 'text-[11px]' : 'text-xs'}`}>
|
|||
|
|
<thead className="bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200">
|
|||
|
|
<tr>
|
|||
|
|
{columns.map((column) => (
|
|||
|
|
<th
|
|||
|
|
key={column}
|
|||
|
|
className={`whitespace-nowrap border-b border-slate-200 dark:border-slate-700 ${compact ? 'px-2 py-1' : 'px-3 py-2'}`}
|
|||
|
|
>
|
|||
|
|
{column === 'value' ? 'Value' : column}
|
|||
|
|
</th>
|
|||
|
|
))}
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{items.slice(0, 100).map((item, rowIndex) => (
|
|||
|
|
<tr
|
|||
|
|
key={rowIndex}
|
|||
|
|
className={`${borderlessRow ? '' : 'border-b border-slate-100 last:border-b-0 dark:border-slate-800'} ${hoverable ? 'transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/70' : ''}`}
|
|||
|
|
>
|
|||
|
|
{columns.map((column) => {
|
|||
|
|
const value = column === 'value' ? item : getDesignerValueByPath(item, column)
|
|||
|
|
const text = getGridCellText(value)
|
|||
|
|
return (
|
|||
|
|
<td
|
|||
|
|
key={column}
|
|||
|
|
className={`max-w-64 truncate text-slate-800 dark:text-slate-100 ${compact ? 'px-2 py-1' : 'px-3 py-2'}`}
|
|||
|
|
title={text}
|
|||
|
|
>
|
|||
|
|
{text}
|
|||
|
|
</td>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const renderElement = (
|
|||
|
|
node: DesignerNode,
|
|||
|
|
children: React.ReactNode,
|
|||
|
|
dataValues: Record<string, unknown>,
|
|||
|
|
currentItem: unknown,
|
|||
|
|
interactive: boolean,
|
|||
|
|
renderCustomComponent?: (name: string, props?: Record<string, unknown>) => React.ReactNode,
|
|||
|
|
) => {
|
|||
|
|
if (node.type === 'Spacer') {
|
|||
|
|
return <div aria-hidden="true" style={{ height: Number(node.props.height) || 24 }} />
|
|||
|
|
}
|
|||
|
|
if (node.type === 'FlexRow') {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={String(node.props.className || '')}
|
|||
|
|
style={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: Number(node.props.gap) || 0,
|
|||
|
|
flexWrap: node.props.wrap ? 'wrap' : 'nowrap',
|
|||
|
|
alignItems: String(node.props.align || 'stretch'),
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.type === 'PageContainer') {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={String(node.props.className || '')}
|
|||
|
|
style={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
gap: Number(node.props.gap) || 0,
|
|||
|
|
margin: '0 auto',
|
|||
|
|
maxWidth: String(node.props.maxWidth || '1280px'),
|
|||
|
|
padding: Number(node.props.padding) || 0,
|
|||
|
|
width: '100%',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.type === 'TwoColumns' || node.type === 'SidebarContent') {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={String(node.props.className || '')}
|
|||
|
|
style={{
|
|||
|
|
display: 'grid',
|
|||
|
|
gap: Number(node.props.gap) || 0,
|
|||
|
|
gridTemplateColumns:
|
|||
|
|
node.type === 'SidebarContent'
|
|||
|
|
? `${String(node.props.sidebarWidth || '280px')} minmax(0, 1fr)`
|
|||
|
|
: 'repeat(2, minmax(0, 1fr))',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.type === 'HeaderContent') {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={String(node.props.className || '')}
|
|||
|
|
style={{ display: 'flex', flexDirection: 'column', gap: Number(node.props.gap) || 0 }}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.type === 'Grid') {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={String(node.props.className || '')}
|
|||
|
|
style={{
|
|||
|
|
display: 'grid',
|
|||
|
|
gridTemplateColumns: `repeat(${Number(node.props.cols) || 3}, minmax(0, 1fr))`,
|
|||
|
|
gap: (Number(node.props.gap) || 0) * 4,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.kind === 'platform') {
|
|||
|
|
if (interactive) return <PlatformPlaceholder node={node} />
|
|||
|
|
return (
|
|||
|
|
<PlatformViewHost
|
|||
|
|
height={String(node.props.height || '420px')}
|
|||
|
|
listFormCode={String(node.props.listFormCode || '')}
|
|||
|
|
view={PLATFORM_VIEW_NAMES[node.type] || (node.type as PlatformViewName)}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.kind === 'custom') {
|
|||
|
|
return renderCustomComponent?.(node.type, { ...node.props, children }) || null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const childrenBinding = node.bindings?.children
|
|||
|
|
const boundChildren = childrenBinding?.sourceId
|
|||
|
|
? getBindingValue(childrenBinding, dataValues, currentItem)
|
|||
|
|
: undefined
|
|||
|
|
const content: React.ReactNode =
|
|||
|
|
React.Children.count(children) > 0
|
|||
|
|
? children
|
|||
|
|
: boundChildren === null || boundChildren === undefined
|
|||
|
|
? String(node.props.children ?? '') || undefined
|
|||
|
|
: React.isValidElement(boundChildren)
|
|||
|
|
? boundChildren
|
|||
|
|
: typeof boundChildren === 'object'
|
|||
|
|
? JSON.stringify(boundChildren)
|
|||
|
|
: String(boundChildren)
|
|||
|
|
const props = getPreviewProps(node, dataValues, currentItem)
|
|||
|
|
if (node.type === 'Table') {
|
|||
|
|
const legacyData = Array.isArray(props.data) ? props.data : []
|
|||
|
|
const items =
|
|||
|
|
Array.isArray(props.items) && (props.items.length > 0 || !legacyData.length)
|
|||
|
|
? props.items
|
|||
|
|
: legacyData
|
|||
|
|
const legacyColumns = Array.isArray(node.props.columns)
|
|||
|
|
? node.props.columns
|
|||
|
|
.map((column) => {
|
|||
|
|
if (typeof column === 'string') return column
|
|||
|
|
if (!column || typeof column !== 'object' || Array.isArray(column)) return ''
|
|||
|
|
const record = column as Record<string, unknown>
|
|||
|
|
return String(record.dataIndex ?? record.key ?? '')
|
|||
|
|
})
|
|||
|
|
.filter(Boolean)
|
|||
|
|
: undefined
|
|||
|
|
return (
|
|||
|
|
<GridDataTablePreview
|
|||
|
|
borderlessRow={Boolean(node.props.borderlessRow)}
|
|||
|
|
compact={Boolean(node.props.compact)}
|
|||
|
|
hoverable={node.props.hoverable !== false}
|
|||
|
|
items={items}
|
|||
|
|
overflow={node.props.overflow !== false}
|
|||
|
|
selectedColumns={
|
|||
|
|
Array.isArray(node.props.dataColumns)
|
|||
|
|
? node.props.dataColumns.filter(
|
|||
|
|
(column): column is string => typeof column === 'string',
|
|||
|
|
)
|
|||
|
|
: legacyColumns
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.type === 'Menu') {
|
|||
|
|
const menuProps = { ...props }
|
|||
|
|
const options = Array.isArray(menuProps.items)
|
|||
|
|
? (menuProps.items as Array<Record<string, unknown>>)
|
|||
|
|
: []
|
|||
|
|
delete menuProps.items
|
|||
|
|
delete menuProps.variant
|
|||
|
|
menuProps.defaultActiveKeys = normalizeDesignerKeyList(menuProps.defaultActiveKeys)
|
|||
|
|
menuProps.defaultExpandedKeys = normalizeDesignerKeyList(menuProps.defaultExpandedKeys)
|
|||
|
|
return (
|
|||
|
|
<UiKit.Menu {...(menuProps as React.ComponentProps<typeof UiKit.Menu>)}>
|
|||
|
|
{options.map((option, index) => (
|
|||
|
|
<UiKit.Menu.MenuItem
|
|||
|
|
key={String(option.value ?? index)}
|
|||
|
|
eventKey={String(option.value ?? index)}
|
|||
|
|
>
|
|||
|
|
{String(option.label ?? option.value ?? `Menü ${index + 1}`)}
|
|||
|
|
</UiKit.Menu.MenuItem>
|
|||
|
|
))}
|
|||
|
|
{content}
|
|||
|
|
</UiKit.Menu>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (node.type === 'checkbox') {
|
|||
|
|
return <input {...(props as React.InputHTMLAttributes<HTMLInputElement>)} type="checkbox" />
|
|||
|
|
}
|
|||
|
|
if (node.kind === 'html') return React.createElement(node.type, props, content)
|
|||
|
|
|
|||
|
|
const Component = resolveUiComponent(node.type)
|
|||
|
|
if (!Component) {
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-md border border-slate-200 bg-slate-50 p-3 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
|
|||
|
|
{node.type}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return React.createElement(Component, props, content)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const NodeView = ({
|
|||
|
|
node,
|
|||
|
|
index,
|
|||
|
|
selectedId,
|
|||
|
|
interactive,
|
|||
|
|
onSelect,
|
|||
|
|
onDropComponent,
|
|||
|
|
onMove,
|
|||
|
|
onDuplicate,
|
|||
|
|
onDelete,
|
|||
|
|
renderCustomComponent,
|
|||
|
|
dataValues,
|
|||
|
|
currentItem,
|
|||
|
|
}: {
|
|||
|
|
node: DesignerNode
|
|||
|
|
index: number
|
|||
|
|
selectedId: string | null
|
|||
|
|
interactive: boolean
|
|||
|
|
onSelect?: (id: string) => void
|
|||
|
|
onDropComponent?: (definitionName: string, parentId: string | null) => void
|
|||
|
|
onMove?: (id: string, direction: -1 | 1) => void
|
|||
|
|
onDuplicate?: (id: string) => void
|
|||
|
|
onDelete?: (id: string) => void
|
|||
|
|
renderCustomComponent?: (name: string, props?: Record<string, unknown>) => React.ReactNode
|
|||
|
|
dataValues: Record<string, unknown>
|
|||
|
|
currentItem?: unknown
|
|||
|
|
}) => {
|
|||
|
|
const selected = interactive && selectedId === node.id
|
|||
|
|
const acceptsDroppedChildren = [
|
|||
|
|
'PageContainer',
|
|||
|
|
'TwoColumns',
|
|||
|
|
'SidebarContent',
|
|||
|
|
'HeaderContent',
|
|||
|
|
'FlexRow',
|
|||
|
|
'div',
|
|||
|
|
'Card',
|
|||
|
|
'FormContainer',
|
|||
|
|
].includes(node.type)
|
|||
|
|
const itemsBinding = ['Grid', 'Table'].includes(node.type) ? node.bindings?.items : undefined
|
|||
|
|
const boundItems = itemsBinding?.sourceId
|
|||
|
|
? getBindingValue(itemsBinding, dataValues, currentItem)
|
|||
|
|
: node.props.items
|
|||
|
|
const sourceRootItems = itemsBinding?.sourceId ? dataValues[itemsBinding.sourceId] : undefined
|
|||
|
|
const effectiveBoundItems =
|
|||
|
|
Array.isArray(boundItems) || currentItem !== undefined
|
|||
|
|
? boundItems
|
|||
|
|
: Array.isArray(sourceRootItems)
|
|||
|
|
? sourceRootItems
|
|||
|
|
: boundItems
|
|||
|
|
const repeatedItems = Array.isArray(effectiveBoundItems)
|
|||
|
|
? interactive && !(node.type === 'Grid' && node.children.length === 0)
|
|||
|
|
? effectiveBoundItems.slice(0, 1)
|
|||
|
|
: effectiveBoundItems
|
|||
|
|
: []
|
|||
|
|
const childContexts = repeatedItems.length ? repeatedItems : [currentItem]
|
|||
|
|
const children = childContexts.flatMap((childItem, itemIndex) =>
|
|||
|
|
node.children.map((child, childIndex) => (
|
|||
|
|
<NodeView
|
|||
|
|
key={`${child.id}_${itemIndex}`}
|
|||
|
|
node={child}
|
|||
|
|
index={childIndex}
|
|||
|
|
selectedId={selectedId}
|
|||
|
|
interactive={interactive}
|
|||
|
|
renderCustomComponent={renderCustomComponent}
|
|||
|
|
dataValues={dataValues}
|
|||
|
|
currentItem={childItem}
|
|||
|
|
onSelect={onSelect}
|
|||
|
|
onDropComponent={onDropComponent}
|
|||
|
|
onMove={onMove}
|
|||
|
|
onDuplicate={onDuplicate}
|
|||
|
|
onDelete={onDelete}
|
|||
|
|
/>
|
|||
|
|
)),
|
|||
|
|
)
|
|||
|
|
const renderedChildren =
|
|||
|
|
node.type === 'Grid' && interactive && node.children.length === 0
|
|||
|
|
? repeatedItems.length
|
|||
|
|
? [
|
|||
|
|
<GridDataTablePreview
|
|||
|
|
key={`grid_data_${node.id}`}
|
|||
|
|
borderlessRow={Boolean(node.props.borderlessRow)}
|
|||
|
|
compact={Boolean(node.props.compact)}
|
|||
|
|
hoverable={node.props.hoverable !== false}
|
|||
|
|
items={repeatedItems}
|
|||
|
|
overflow={node.props.overflow !== false}
|
|||
|
|
selectedColumns={
|
|||
|
|
Array.isArray(node.props.dataColumns)
|
|||
|
|
? node.props.dataColumns.filter(
|
|||
|
|
(column): column is string => typeof column === 'string',
|
|||
|
|
)
|
|||
|
|
: undefined
|
|||
|
|
}
|
|||
|
|
/>,
|
|||
|
|
]
|
|||
|
|
: [
|
|||
|
|
<GridColumnHeaders
|
|||
|
|
key={`grid_headers_${node.id}`}
|
|||
|
|
columns={
|
|||
|
|
Array.isArray(node.props.dataColumns)
|
|||
|
|
? node.props.dataColumns.filter(
|
|||
|
|
(column): column is string => typeof column === 'string',
|
|||
|
|
)
|
|||
|
|
: []
|
|||
|
|
}
|
|||
|
|
/>,
|
|||
|
|
]
|
|||
|
|
: node.type === 'Grid' &&
|
|||
|
|
!interactive &&
|
|||
|
|
itemsBinding?.sourceId &&
|
|||
|
|
effectiveBoundItems === undefined
|
|||
|
|
? [
|
|||
|
|
<div
|
|||
|
|
key={`grid_loading_${node.id}`}
|
|||
|
|
className="rounded-lg border border-slate-200 bg-slate-50 p-4 text-center text-xs text-slate-500 [grid-column:1/-1] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400"
|
|||
|
|
>
|
|||
|
|
Veriler yükleniyor…
|
|||
|
|
</div>,
|
|||
|
|
]
|
|||
|
|
: node.type === 'Grid' &&
|
|||
|
|
itemsBinding?.sourceId &&
|
|||
|
|
effectiveBoundItems !== undefined &&
|
|||
|
|
!Array.isArray(effectiveBoundItems)
|
|||
|
|
? [
|
|||
|
|
<div
|
|||
|
|
key={`grid_binding_error_${node.id}`}
|
|||
|
|
className="rounded-lg border border-amber-300 bg-amber-50 p-3 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200"
|
|||
|
|
>
|
|||
|
|
Grid items bağlantısı bir koleksiyon döndürmelidir. Seçili path:{' '}
|
|||
|
|
<code>{itemsBinding.path || '(root)'}</code>
|
|||
|
|
</div>,
|
|||
|
|
]
|
|||
|
|
: node.type === 'Grid' && node.children.length === 0 && repeatedItems.length
|
|||
|
|
? [
|
|||
|
|
<GridDataTablePreview
|
|||
|
|
key={`grid_data_${node.id}`}
|
|||
|
|
borderlessRow={Boolean(node.props.borderlessRow)}
|
|||
|
|
compact={Boolean(node.props.compact)}
|
|||
|
|
hoverable={node.props.hoverable !== false}
|
|||
|
|
items={repeatedItems}
|
|||
|
|
overflow={node.props.overflow !== false}
|
|||
|
|
selectedColumns={
|
|||
|
|
Array.isArray(node.props.dataColumns)
|
|||
|
|
? node.props.dataColumns.filter(
|
|||
|
|
(column): column is string => typeof column === 'string',
|
|||
|
|
)
|
|||
|
|
: undefined
|
|||
|
|
}
|
|||
|
|
/>,
|
|||
|
|
]
|
|||
|
|
: children
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={`group/node relative min-h-[28px] rounded-md ${
|
|||
|
|
interactive
|
|||
|
|
? selected
|
|||
|
|
? 'outline outline-2 outline-sky-500 outline-offset-2'
|
|||
|
|
: 'outline outline-1 outline-transparent hover:outline-sky-300'
|
|||
|
|
: ''
|
|||
|
|
}`}
|
|||
|
|
data-designer-node={node.id}
|
|||
|
|
draggable={interactive}
|
|||
|
|
onClickCapture={() => {
|
|||
|
|
if (interactive) onSelect?.(node.id)
|
|||
|
|
}}
|
|||
|
|
onClick={(event) => {
|
|||
|
|
if (!interactive) return
|
|||
|
|
event.stopPropagation()
|
|||
|
|
onSelect?.(node.id)
|
|||
|
|
}}
|
|||
|
|
onDragStart={(event) => {
|
|||
|
|
if (!interactive) return
|
|||
|
|
event.stopPropagation()
|
|||
|
|
event.dataTransfer.setData(
|
|||
|
|
DESIGNER_DRAG_TYPE,
|
|||
|
|
JSON.stringify({ source: 'canvas', nodeId: node.id }),
|
|||
|
|
)
|
|||
|
|
}}
|
|||
|
|
onDragOver={(event) => {
|
|||
|
|
if (!interactive || !acceptsDroppedChildren) return
|
|||
|
|
event.preventDefault()
|
|||
|
|
event.stopPropagation()
|
|||
|
|
event.dataTransfer.dropEffect = 'copy'
|
|||
|
|
}}
|
|||
|
|
onDrop={(event) => {
|
|||
|
|
if (!interactive || !acceptsDroppedChildren) return
|
|||
|
|
event.preventDefault()
|
|||
|
|
event.stopPropagation()
|
|||
|
|
const raw =
|
|||
|
|
event.dataTransfer.getData(DESIGNER_DRAG_TYPE) ||
|
|||
|
|
event.dataTransfer.getData('text/plain')
|
|||
|
|
if (!raw) return
|
|||
|
|
const payload = JSON.parse(raw)
|
|||
|
|
if (payload.source === 'library') onDropComponent?.(payload.name, node.id)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{interactive && (
|
|||
|
|
<div
|
|||
|
|
className={`absolute -top-7 right-0 z-20 items-center overflow-hidden rounded-md bg-sky-600 text-white shadow-md ${
|
|||
|
|
selected ? 'flex' : 'hidden group-hover/node:flex'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<span className="flex items-center gap-1 px-2 text-[10px] font-semibold">
|
|||
|
|
<FaGripVertical /> {node.type}
|
|||
|
|
</span>
|
|||
|
|
<button
|
|||
|
|
className="p-1.5 hover:bg-sky-700"
|
|||
|
|
title="Yukarı taşı"
|
|||
|
|
type="button"
|
|||
|
|
onClick={(event) => {
|
|||
|
|
event.stopPropagation()
|
|||
|
|
onMove?.(node.id, -1)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<FaArrowUp />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="p-1.5 hover:bg-sky-700"
|
|||
|
|
title="Aşağı taşı"
|
|||
|
|
type="button"
|
|||
|
|
onClick={(event) => {
|
|||
|
|
event.stopPropagation()
|
|||
|
|
onMove?.(node.id, 1)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<FaArrowDown />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="p-1.5 hover:bg-sky-700"
|
|||
|
|
title="Çoğalt"
|
|||
|
|
type="button"
|
|||
|
|
onClick={(event) => {
|
|||
|
|
event.stopPropagation()
|
|||
|
|
onDuplicate?.(node.id)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<FaClone />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="p-1.5 hover:bg-red-600"
|
|||
|
|
title="Sil"
|
|||
|
|
type="button"
|
|||
|
|
onClick={(event) => {
|
|||
|
|
event.stopPropagation()
|
|||
|
|
onDelete?.(node.id)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<FaTrash />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<PreviewBoundary
|
|||
|
|
name={node.type}
|
|||
|
|
resetKey={JSON.stringify([node.props, node.bindings, node.events])}
|
|||
|
|
>
|
|||
|
|
{renderElement(
|
|||
|
|
node,
|
|||
|
|
renderedChildren,
|
|||
|
|
dataValues,
|
|||
|
|
currentItem,
|
|||
|
|
interactive,
|
|||
|
|
renderCustomComponent,
|
|||
|
|
)}
|
|||
|
|
</PreviewBoundary>
|
|||
|
|
{interactive &&
|
|||
|
|
node.children.length === 0 &&
|
|||
|
|
acceptsDroppedChildren && (
|
|||
|
|
<div className="m-2 rounded border border-dashed border-slate-300 px-3 py-4 text-center text-xs text-slate-400">
|
|||
|
|
Bileşeni buraya bırakın
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<span className="hidden">{index}</span>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const VisualCanvas = ({
|
|||
|
|
nodes,
|
|||
|
|
selectedId,
|
|||
|
|
background,
|
|||
|
|
interactive = true,
|
|||
|
|
onSelect,
|
|||
|
|
onDropComponent,
|
|||
|
|
onMove,
|
|||
|
|
onDuplicate,
|
|||
|
|
onDelete,
|
|||
|
|
renderCustomComponent,
|
|||
|
|
dataValues = {},
|
|||
|
|
}: VisualCanvasProps) => {
|
|||
|
|
const previewDataValues = dataValues
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="min-h-full p-8 text-slate-900 dark:text-slate-100"
|
|||
|
|
style={{ background }}
|
|||
|
|
onClick={() => interactive && onSelect?.('')}
|
|||
|
|
onDragOver={(event) => interactive && event.preventDefault()}
|
|||
|
|
onDrop={(event) => {
|
|||
|
|
if (!interactive) return
|
|||
|
|
event.preventDefault()
|
|||
|
|
const raw =
|
|||
|
|
event.dataTransfer.getData(DESIGNER_DRAG_TYPE) ||
|
|||
|
|
event.dataTransfer.getData('text/plain')
|
|||
|
|
if (!raw) return
|
|||
|
|
const payload = JSON.parse(raw)
|
|||
|
|
if (payload.source === 'library') onDropComponent?.(payload.name, null)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{nodes.length ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{nodes.map((node, index) => (
|
|||
|
|
<NodeView
|
|||
|
|
key={node.id}
|
|||
|
|
node={node}
|
|||
|
|
index={index}
|
|||
|
|
selectedId={selectedId}
|
|||
|
|
interactive={interactive}
|
|||
|
|
renderCustomComponent={renderCustomComponent}
|
|||
|
|
dataValues={previewDataValues}
|
|||
|
|
onSelect={onSelect}
|
|||
|
|
onDropComponent={onDropComponent}
|
|||
|
|
onMove={onMove}
|
|||
|
|
onDuplicate={onDuplicate}
|
|||
|
|
onDelete={onDelete}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex min-h-[520px] items-center justify-center rounded-xl border-2 border-dashed border-slate-300 bg-white/70 text-center dark:border-slate-700 dark:bg-slate-900/70">
|
|||
|
|
<div className="w-full max-w-2xl px-6">
|
|||
|
|
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-sky-100 text-2xl text-sky-600">
|
|||
|
|
+
|
|||
|
|
</div>
|
|||
|
|
<h3 className="font-semibold text-slate-700 dark:text-slate-200">
|
|||
|
|
Sayfa layout’unu seçin
|
|||
|
|
</h3>
|
|||
|
|
<p className="mt-1 text-sm text-slate-500">
|
|||
|
|
Hazır bir yerleşimle başlayın veya Toolbox’taki My Components grubundan kendi layout
|
|||
|
|
komponentinizi kullanın.
|
|||
|
|
</p>
|
|||
|
|
{interactive && (
|
|||
|
|
<div className="mt-5 grid grid-cols-2 gap-2 sm:grid-cols-4">
|
|||
|
|
{[
|
|||
|
|
['PageContainer', 'Sayfa alanı', '□'],
|
|||
|
|
['TwoColumns', 'İki kolon', '▥'],
|
|||
|
|
['SidebarContent', 'Sidebar + içerik', '◧'],
|
|||
|
|
['HeaderContent', 'Üst alan + içerik', '⊟'],
|
|||
|
|
].map(([name, label, icon]) => (
|
|||
|
|
<button
|
|||
|
|
key={name}
|
|||
|
|
className="rounded-lg border border-slate-200 bg-white p-3 text-xs font-semibold text-slate-600 shadow-sm transition hover:border-sky-400 hover:text-sky-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300"
|
|||
|
|
type="button"
|
|||
|
|
onClick={(event) => {
|
|||
|
|
event.stopPropagation()
|
|||
|
|
onDropComponent?.(name, null)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span className="mb-1 block text-xl text-sky-500">{icon}</span>
|
|||
|
|
{label}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default VisualCanvas
|