@xbeeant/form-engine-designer 0.0.2 → 0.0.4

package/src/widgets/BindEditor.tsx

@@ -1,105 +0,0 @@
-// ============================================================================
-// BindEditor — 编辑 bind 属性（路径映射）
-// 支持四种模式：无/字符串/数组/false，不同模式显示不同的子控件
-// ============================================================================
-
-import type { WidgetProps } from '@xbeeant/form-engine-ui';
-import { Form, Input, Select } from 'antd';
-import { useState } from 'react';
-
-function getBindMode(value: unknown): string {
-  if (value === false || value === 'false') {
-    return 'false';
-  }
-  if (Array.isArray(value)) {
-    return 'array';
-  }
-  if (typeof value === 'string' && value.length > 0) {
-    return 'string';
-  }
-  return 'none';
-}
-
-const BIND_MODE_OPTIONS = [
-  { value: 'none', label: '无（使用字段路径）' },
-  { value: 'string', label: '字符串路径' },
-  { value: 'array', label: '字符串数组（多路径拆分）' },
-  { value: 'false', label: '不绑定（不提交）' },
-];
-
-export function BindEditor({ value, onChange, title }: WidgetProps) {
-  const mode = getBindMode(value);
-  // 本地状态缓存文本值，防止每次按键都触发 onChange
-  const [textValue, setTextValue] = useState<string>(
-    Array.isArray(value)
-      ? (value as string[]).join('\n')
-      : typeof value === 'string'
-        ? value
-        : '',
-  );
-
-  const handleModeChange = (newMode: string) => {
-    if (newMode === 'none') {
-      onChange(undefined);
-      setTextValue('');
-    } else if (newMode === 'string') {
-      onChange('');
-      setTextValue('');
-    } else if (newMode === 'array') {
-      onChange([]);
-      setTextValue('');
-    } else if (newMode === 'false') {
-      onChange(false);
-      setTextValue('');
-    }
-  };
-
-  const handleTextCommit = () => {
-    if (mode === 'string') {
-      onChange(textValue || undefined);
-    } else if (mode === 'array') {
-      const lines = textValue
-        .split('\n')
-        .map((s) => s.trim())
-        .filter((s) => s.length > 0);
-      onChange(lines.length > 0 ? lines : undefined);
-    }
-  };
-
-  return (
-    <Form.Item layout={'vertical'} label={title} style={{ width: '100%' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-        <Select
-          value={mode}
-          options={BIND_MODE_OPTIONS}
-          onChange={handleModeChange}
-          style={{ width: '100%' }}
-        />
-        {mode === 'string' && (
-          <Input
-            placeholder='如: user.name'
-            value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
-            onBlur={handleTextCommit}
-            onPressEnter={handleTextCommit}
-          />
-        )}
-        {mode === 'array' && (
-          <Input.TextArea
-            rows={3}
-            placeholder={'如: a.b\nc.d'}
-            value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
-            onBlur={handleTextCommit}
-          />
-        )}
-        <div style={{ fontSize: 11, color: '#999' }}>
-          提示：bind 将字段值映射到不同数据路径。string[]
-          表示字段值数组按顺序拆分到多个路径；false 表示字段不参与提交。
-        </div>
-      </div>
-    </Form.Item>
-  );
-}
-
-export const bindEditorWidget = BindEditor;

package/src/widgets/CodeEditor.tsx

@@ -1,114 +0,0 @@
-// ============================================================================
-// CodeEditor — 属性面板专用 JSON 编辑器
-// 供 remoteData 等对象配置使用：支持语法校验、格式化与占位符示例
-// 值格式：object | array（非法 JSON 不写回，光标处自动提示）
-// ============================================================================
-
-import type { WidgetProps } from '@xbeeant/form-engine-ui';
-import { Button, Form, Input, Space, Typography } from 'antd';
-import { useMemo, useState } from 'react';
-
-export function CodeEditor({
-  value,
-  onChange,
-  title,
-  description,
-  placeholder,
-  ...rest
-}: WidgetProps) {
-  const fieldProps = rest as Record<string, unknown>;
-  const lines = (fieldProps?.lines as number) ?? 10;
-
-  const [error, setError] = useState<string | null>(null);
-
-  // 编辑态文案：初始为 JSON 字符串；解析失败时保留原文（不打断输入）
-  const [draft, setDraft] = useState<string | undefined>(undefined);
-
-  const text = useMemo(() => {
-    if (draft !== undefined) {
-      return draft;
-    }
-    if (value === undefined || value === null) {
-      return '';
-    }
-    try {
-      return JSON.stringify(value, null, 2);
-    } catch {
-      return String(value);
-    }
-  }, [draft, value]);
-
-  const handleChange = (raw: string) => {
-    setDraft(raw);
-    const trimmed = raw.trim();
-    if (!trimmed) {
-      setError(null);
-      onChange(undefined);
-      return;
-    }
-    try {
-      const parsed = JSON.parse(trimmed);
-      setError(null);
-      onChange(parsed);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'JSON 解析失败');
-    }
-  };
-
-  const handleFormat = () => {
-    try {
-      const formatted = JSON.stringify(JSON.parse(text), null, 2);
-      setDraft(formatted);
-      setError(null);
-    } catch {
-      // 语法非法时静默，保留原文
-    }
-  };
-
-  return (
-    <Form.Item
-      label={title}
-      layout={'vertical'}
-      style={{ width: '100%' }}
-      help={
-        error ? (
-          <Typography.Text type='danger' style={{ fontSize: 11 }}>
-            {error}
-          </Typography.Text>
-        ) : description ? (
-          <span style={{ fontSize: 11, color: '#999' }}>{description}</span>
-        ) : undefined
-      }
-      validateStatus={error ? 'error' : undefined}
-    >
-      <Input.TextArea
-        value={text}
-        rows={lines}
-        onChange={(e) => handleChange(e.target.value)}
-        placeholder={
-          placeholder
-            ? `示例：\n${typeof placeholder === 'string' ? placeholder : JSON.stringify(placeholder, null, 2)}`
-            : '{}'
-        }
-        style={{ fontFamily: 'monospace', fontSize: 12 }}
-      />
-      <Space.Compact style={{ marginTop: 6, width: '100%' }}>
-        <Button size='small' onClick={handleFormat} disabled={!!error}>
-          格式化
-        </Button>
-        <Button
-          size='small'
-          onClick={() => {
-            setDraft('');
-            setError(null);
-            onChange(undefined);
-          }}
-        >
-          清空
-        </Button>
-      </Space.Compact>
-    </Form.Item>
-  );
-}
-
-export const codeEditorWidget = CodeEditor;

package/src/widgets/DefaultEditor.tsx

@@ -1,73 +0,0 @@
-// ============================================================================
-// DefaultEditor — 按字段类型编辑默认值
-// string → Input, number/integer → InputNumber, boolean → Switch, object/array → JSON TextArea
-// ============================================================================
-
-import type { WidgetProps } from '@xbeeant/form-engine-ui';
-import { Form, Input, InputNumber, Switch } from 'antd';
-
-export function DefaultEditor({
-  value,
-  onChange,
-  title,
-  ...rest
-}: WidgetProps) {
-  const fieldProps = rest as Record<string, unknown>;
-  const dataType = (fieldProps?.dataType as string) ?? 'string';
-
-  if (dataType === 'boolean') {
-    return (
-      <Form.Item label={title} style={{ width: '100%' }}>
-        <Switch checked={!!value} onChange={(v) => onChange(v)} />
-      </Form.Item>
-    );
-  }
-
-  if (dataType === 'number' || dataType === 'integer') {
-    return (
-      <Form.Item label={title} style={{ width: '100%' }}>
-        <InputNumber
-          value={value as number}
-          onChange={(v) => onChange(v ?? undefined)}
-          style={{ width: '100%' }}
-        />
-      </Form.Item>
-    );
-  }
-
-  if (dataType === 'object' || dataType === 'array') {
-    const text = value !== undefined ? JSON.stringify(value, null, 2) : '';
-    return (
-      <Form.Item label={`${title}（JSON）`} style={{ width: '100%' }}>
-        <Input.TextArea
-          rows={3}
-          value={text}
-          onChange={(e) => {
-            const t = e.target.value.trim();
-            if (!t) {
-              onChange(undefined);
-              return;
-            }
-            try {
-              onChange(JSON.parse(t));
-            } catch {
-              // JSON 解析失败时不更新
-            }
-          }}
-        />
-      </Form.Item>
-    );
-  }
-
-  // string
-  return (
-    <Form.Item label={title} style={{ width: '100%' }}>
-      <Input
-        value={(value as string) ?? ''}
-        onChange={(e) => onChange(e.target.value || undefined)}
-      />
-    </Form.Item>
-  );
-}
-
-export const defaultEditorWidget = DefaultEditor;

package/src/widgets/DependenciesEditor.tsx

@@ -1,56 +0,0 @@
-// ============================================================================
-// DependenciesEditor — 编辑 dependencies 依赖字段路径（string[]）
-// 通过标签选择器从表单字段中选择依赖路径，也支持手动输入自定义路径
-// ============================================================================
-
-import type { WidgetProps } from '@xbeeant/form-engine-ui';
-import { Form, Select } from 'antd';
-import { useEffect, useRef, useState } from 'react';
-import { useFormDataFieldOptions } from './useFormDataFields';
-
-export function DependenciesEditor({ value, onChange, title }: WidgetProps) {
-  const fieldOptions = useFormDataFieldOptions();
-  const [tags, setTags] = useState<string[]>(() =>
-    Array.isArray(value) ? [...value] : [],
-  );
-  const prevValueRef = useRef(value);
-  const lastEmittedRef = useRef(value);
-
-  // 外部 value 变化（切换节点等）时重置，自身 onChange 回传不重置
-  useEffect(() => {
-    if (prevValueRef.current !== value) {
-      prevValueRef.current = value;
-      if (value !== lastEmittedRef.current) {
-        setTags(Array.isArray(value) ? [...value] : []);
-      }
-    }
-  }, [value]);
-
-  const commit = (next: string[]) => {
-    setTags(next);
-    lastEmittedRef.current = next;
-    onChange(next.length > 0 ? next : undefined);
-  };
-
-  return (
-    <Form.Item layout={'vertical'} label={title} style={{ width: '100%' }}>
-      <Select
-        size='small'
-        mode='tags'
-        value={tags}
-        onChange={(v) =>
-          commit((v as string[]).map((s) => s.trim()).filter(Boolean))
-        }
-        options={fieldOptions}
-        placeholder='选择或输入依赖字段路径'
-        style={{ width: '100%' }}
-      />
-      <div style={{ fontSize: 11, color: '#999', marginTop: 4 }}>
-        提示：依赖字段值变化时，触发该字段重新求值与渲染。支持相对路径（如 处于
-        address.city 时填 province 表示 address.province）。
-      </div>
-    </Form.Item>
-  );
-}
-
-export const dependenciesEditorWidget = DependenciesEditor;

package/src/widgets/EnumEditor.tsx

@@ -1,66 +0,0 @@
-// ============================================================================
-// EnumEditor — 编辑 enum 枚举值及 enumNames 枚举文案
-// 使用两个 TextArea，值按行分隔
-// ============================================================================
-
-import type { WidgetProps } from '@xbeeant/form-engine-ui';
-import { Form, Input } from 'antd';
-
-export function EnumEditor({ value, onChange }: WidgetProps) {
-  // value 是一个包含 _enum 和 _enumNames 的对象（由 engine 传入）
-  // 实际上 engine 传入的 value 是字段存储的原始值
-  // 这里我们使用单独的 _enum 和 _enumNames key
-  // 实际上这个 widget 对应 schema 中的 _enum 字段
-  // 但 engine 只传单个 value
-
-  // 这里简化处理：value 是 _enum 的序列化字符串
-  // _enumNames 通过 props 或 dependValues 传递
-  // 但更简洁的方式是让 schema 中有两个独立字段
-
-  // 这个 widget 实际上应该对应两个字段。让我们重新考虑...
-  // 在 schema 中，我们只定义了一个 _enum 字段，这个 widget 渲染时
-  // value 是 _enum 的值（序列化字符串）
-
-  return (
-    <>
-      <Form.Item label='枚举值（enum，每行一个）' style={{ width: '100%' }}>
-        <Input.TextArea
-          rows={3}
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder='每行一个枚举值'
-        />
-      </Form.Item>
-      {/* _enumNames 由调用方通过额外逻辑处理 */}
-      <div
-        style={{ fontSize: 11, color: '#999', marginTop: -12, marginBottom: 8 }}
-      >
-        提示：枚举值用于选项的值，枚举文案见下方字段
-      </div>
-    </>
-  );
-}
-
-export const enumEditorWidget = EnumEditor;
-
-// ────────────────────────────────────────────────────────────────────────────
-// EnumNamesEditor — 编辑 enumNames（与 _enum 配对使用）
-// ────────────────────────────────────────────────────────────────────────────
-
-export function EnumNamesEditor({ value, onChange }: WidgetProps) {
-  return (
-    <Form.Item
-      label='枚举文案（enumNames，每行一个）'
-      style={{ width: '100%' }}
-    >
-      <Input.TextArea
-        rows={3}
-        value={typeof value === 'string' ? value : ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder='每行一个枚举文案，与枚举值一一对应'
-      />
-    </Form.Item>
-  );
-}
-
-export const enumNamesEditorWidget = EnumNamesEditor;