shadowdao
65a10a1ef9
Each component defined a .craft.related.settings panel that was never rendered -- the right panel renders only GuidedStyles (per-type *StylePanel components), never .related.settings. Removed all dead settings components across every component, their settings-only helpers (including the dead uploadToWhp/showBrowser/handleBrowse asset-browse blocks in Logo/Navbar/VideoBlock/FeaturesGrid, and CtasEditor in _cta-helpers), and dropped the now-empty related keys. Render output, .craft props/rules, and toHtml statics are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { escapeHtml, escapeAttr } from '../../utils/escape';
|
|
|
|
interface InputFieldProps {
|
|
label?: string;
|
|
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
|
|
name?: string;
|
|
placeholder?: string;
|
|
required?: boolean;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
export const InputField: UserComponent<InputFieldProps> = ({
|
|
label = 'Label',
|
|
type = 'text',
|
|
name = 'field',
|
|
placeholder = '',
|
|
required = false,
|
|
style = {},
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
return (
|
|
<div
|
|
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '4px',
|
|
outline: selected ? '2px solid #3b82f6' : 'none',
|
|
borderRadius: '4px',
|
|
...style,
|
|
}}
|
|
>
|
|
{label && (
|
|
<label style={{ fontSize: '14px', fontWeight: '500', color: '#18181b' }}>
|
|
{label}{required && <span style={{ color: '#ef4444' }}> *</span>}
|
|
</label>
|
|
)}
|
|
<input
|
|
type={type}
|
|
name={name}
|
|
placeholder={placeholder}
|
|
required={required}
|
|
style={{
|
|
padding: '10px 12px',
|
|
border: '1px solid #d4d4d8',
|
|
borderRadius: '6px',
|
|
fontSize: '14px',
|
|
color: '#18181b',
|
|
backgroundColor: '#ffffff',
|
|
outline: 'none',
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
InputField.craft = {
|
|
displayName: 'Input',
|
|
props: {
|
|
label: 'Your Name',
|
|
type: 'text',
|
|
name: 'name',
|
|
placeholder: 'Enter your name',
|
|
required: false,
|
|
style: {},
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(InputField as any).toHtml = (props: InputFieldProps, _childrenHtml: string) => {
|
|
const wrapStyle = cssPropsToString({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '4px',
|
|
...props.style,
|
|
});
|
|
const reqAttr = props.required ? ' required' : '';
|
|
const labelHtml = props.label
|
|
? `<label style="font-size:14px;font-weight:500;color:#18181b">${escapeHtml(props.label)}${props.required ? '<span style="color:#ef4444"> *</span>' : ''}</label>`
|
|
: '';
|
|
return {
|
|
html: `<div${wrapStyle ? ` style="${wrapStyle}"` : ''}>
|
|
${labelHtml}
|
|
<input type="${props.type || 'text'}" name="${escapeAttr(props.name || 'field')}" placeholder="${escapeAttr(props.placeholder || '')}"${reqAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box" />
|
|
</div>`,
|
|
};
|
|
};
|