90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
|
import React, { CSSProperties, useCallback, useRef, useEffect } from 'react';
|
||
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
||
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
||
|
|
|
||
|
|
interface FooterProps {
|
||
|
|
text?: string;
|
||
|
|
style?: CSSProperties;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Footer: UserComponent<FooterProps> = ({
|
||
|
|
text = '© 2026 MySite. All rights reserved.',
|
||
|
|
style = {},
|
||
|
|
}) => {
|
||
|
|
const {
|
||
|
|
connectors: { connect, drag },
|
||
|
|
selected,
|
||
|
|
actions: { setProp },
|
||
|
|
} = useNode((node) => ({
|
||
|
|
selected: node.events.selected,
|
||
|
|
}));
|
||
|
|
|
||
|
|
const elRef = useRef<HTMLElement | null>(null);
|
||
|
|
|
||
|
|
const handleBlur = useCallback(() => {
|
||
|
|
if (elRef.current) {
|
||
|
|
const newText = elRef.current.innerText;
|
||
|
|
setProp((p: FooterProps) => { p.text = newText; }, 500);
|
||
|
|
}
|
||
|
|
}, [setProp]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (elRef.current && !selected) {
|
||
|
|
elRef.current.innerText = text || '';
|
||
|
|
}
|
||
|
|
}, [text, selected]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<footer
|
||
|
|
ref={(ref: HTMLElement | null): void => {
|
||
|
|
elRef.current = ref;
|
||
|
|
if (ref) connect(drag(ref));
|
||
|
|
}}
|
||
|
|
contentEditable={selected}
|
||
|
|
suppressContentEditableWarning
|
||
|
|
onBlur={handleBlur}
|
||
|
|
style={{
|
||
|
|
padding: '24px 20px',
|
||
|
|
textAlign: 'center',
|
||
|
|
outline: 'none',
|
||
|
|
cursor: selected ? 'text' : 'pointer',
|
||
|
|
...style,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{selected ? undefined : (text || '')}
|
||
|
|
</footer>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
/* ---------- Craft config ---------- */
|
||
|
|
|
||
|
|
Footer.craft = {
|
||
|
|
displayName: 'Footer',
|
||
|
|
props: {
|
||
|
|
text: '© 2026 MySite. All rights reserved.',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#18181b',
|
||
|
|
color: '#a1a1aa',
|
||
|
|
fontSize: '14px',
|
||
|
|
padding: '24px 20px',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
canDrag: () => true,
|
||
|
|
canMoveIn: () => false,
|
||
|
|
canMoveOut: () => true,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
/* ---------- HTML export ---------- */
|
||
|
|
|
||
|
|
(Footer as any).toHtml = (props: FooterProps, _childrenHtml: string) => {
|
||
|
|
const styleStr = cssPropsToString({
|
||
|
|
padding: '24px 20px',
|
||
|
|
textAlign: 'center',
|
||
|
|
...props.style,
|
||
|
|
});
|
||
|
|
const escapedText = (props.text || '').replace(/</g, '<').replace(/>/g, '>');
|
||
|
|
return { html: `<footer${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</footer>` };
|
||
|
|
};
|