@pisell/materials 1.0.1051 → 1.0.1053

package/lib/components/dataSourceComponents/dataSourceSubForm/index.js

@@ -0,0 +1,332 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
+const require_objectSpread2 = require('../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
+const require_JsonWrapperContext = require('../dataSourceForm/provider/jsonWrapper/JsonWrapperContext.js');
+const require_DataSourceProvider = require('../provider/dataSource/DataSourceProvider.js');
+const require_FormSettingProvider = require('../dataSourceForm/provider/formSetting/FormSettingProvider.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let antd = require("antd");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let ahooks = require("ahooks");
+
+//#region src/components/dataSourceComponents/dataSourceSubForm/index.tsx
+const { TextArea, Password } = antd.Input;
+/**
+* @title 提取多语言文本
+* @description 兼容字符串、数字、多语言对象格式，返回可显示文本
+*/
+const getI18nText = (value) => {
+	if (value === null || value === void 0) return "";
+	if (typeof value === "string" || typeof value === "number") return `${value}`;
+	if (typeof value === "object") return value.original || value["zh-CN"] || value.en || value["zh-HK"] || value.ja || value.pt || "";
+	return "";
+};
+/**
+* @title 解析并规范化 xRecordSchema
+* @description 兼容字符串、数组、properties 和 fields 结构，统一成字段数组供渲染使用
+*/
+const normalizeRecordSchema = (xRecordSchema) => {
+	if (!xRecordSchema) return [];
+	let rawSchema = xRecordSchema;
+	if (typeof xRecordSchema === "string") try {
+		rawSchema = JSON.parse(xRecordSchema);
+	} catch (error) {
+		console.error("Failed to parse xRecordSchema:", error);
+		return [];
+	}
+	if (rawSchema && typeof rawSchema === "object" && !Array.isArray(rawSchema) && rawSchema.name) rawSchema = [rawSchema];
+	/**
+	* @title 规范化单个字段
+	* @description 将各种格式的字段配置统一转换为标准格式
+	*/
+	const normalizeSingleField = (field, fallbackName) => {
+		var _uiSchema$xDataSour;
+		const uiSchema = (field === null || field === void 0 ? void 0 : field.uiSchema) || {};
+		const name = (field === null || field === void 0 ? void 0 : field.name) || fallbackName;
+		if (!name) return null;
+		const component = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["x-component"]) || (field === null || field === void 0 ? void 0 : field.interface) || (field === null || field === void 0 ? void 0 : field.componentName) || (field === null || field === void 0 ? void 0 : field.component) || "Input";
+		const props = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["x-component-props"]) || {}), (field === null || field === void 0 ? void 0 : field.props) || {});
+		const uiSchemaDataSourceOptions = (uiSchema === null || uiSchema === void 0 || (_uiSchema$xDataSour = uiSchema["x-data-source"]) === null || _uiSchema$xDataSour === void 0 ? void 0 : _uiSchema$xDataSour.options) || [];
+		const options = (uiSchemaDataSourceOptions.length ? uiSchemaDataSourceOptions : (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.enum) || (field === null || field === void 0 ? void 0 : field.options) || (props === null || props === void 0 ? void 0 : props.options) || []).map((option) => {
+			if (typeof option === "string" || typeof option === "number") return {
+				label: option,
+				value: option
+			};
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, option), {}, { label: getI18nText(option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.value) });
+		});
+		if (component === "Select" && (field === null || field === void 0 ? void 0 : field.type) === "array" && !(props === null || props === void 0 ? void 0 : props.mode)) props.mode = "multiple";
+		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, field), {}, {
+			name,
+			label: getI18nText(field === null || field === void 0 ? void 0 : field.label) || getI18nText(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.title) || name,
+			component,
+			componentName: component,
+			options,
+			props,
+			uiSchema
+		});
+	};
+	if (Array.isArray(rawSchema)) return rawSchema.map((item) => normalizeSingleField(item)).filter(Boolean);
+	if (Array.isArray(rawSchema === null || rawSchema === void 0 ? void 0 : rawSchema.fields)) return rawSchema.fields.map((item) => normalizeSingleField(item)).filter(Boolean);
+	if (Array.isArray(rawSchema === null || rawSchema === void 0 ? void 0 : rawSchema.children)) return rawSchema.children.map((item) => normalizeSingleField(item)).filter(Boolean);
+	if ((rawSchema === null || rawSchema === void 0 ? void 0 : rawSchema.properties) && typeof rawSchema.properties === "object") return Object.keys(rawSchema.properties).map((name) => normalizeSingleField(rawSchema.properties[name], name)).filter(Boolean);
+	return [];
+};
+/**
+* @title 渲染单个表单字段（Form.Item + Antd 控件）
+* @description
+* 根据字段的 componentName/component 映射到对应的 Antd 组件，并包裹在 Form.Item 中。
+* Form.Item 的 name 绑定让 antd Form 自动管理该字段的值收集与回填。
+*
+* 支持的组件类型：
+* - 文本类：Input / Input.TextArea / Input.Password / Input.Email / Input.Phone / Input.Mobile / Input.URL / Input.Subdomain
+* - 数字类：InputNumber / Percent
+* - 时间类：DatePicker / TimePicker
+* - 颜色：ColorPicker
+* - 选择类：Select / Radio.Group / Checkbox.Group / Checkbox
+* - 开关：Switch
+* - 上传：Upload
+* - JSON：Input.JSON / Input.InputJSON
+* - 复杂组件（降级）：Translation / IconPicker / RecordListWrapper
+*/
+const renderFormItem = (field, isDisabled) => {
+	const componentType = `${field.componentName || field.component || "Input"}`;
+	const fieldOptions = field.options || [];
+	const fieldProps = require_objectSpread2._objectSpread2({}, field.props || {});
+	const label = field.label || field.name;
+	const name = field.name;
+	if (componentType === "Input.TextArea") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(TextArea, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled })));
+	if (componentType === "Input.Password" || componentType === "Password") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(Password, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled })));
+	if ([
+		"Input.Email",
+		"Input.Phone",
+		"Input.Mobile",
+		"Input.URL",
+		"Input.Subdomain"
+	].includes(componentType)) return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.Input, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled })));
+	if (componentType === "InputNumber" || componentType === "Percent") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.InputNumber, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+		disabled: isDisabled,
+		style: require_objectSpread2._objectSpread2({ width: "100%" }, fieldProps.style || {})
+	})));
+	if (componentType === "DatePicker") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.DatePicker, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+		disabled: isDisabled,
+		style: require_objectSpread2._objectSpread2({ width: "100%" }, fieldProps.style || {})
+	})));
+	if (componentType === "TimePicker") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.TimePicker, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+		disabled: isDisabled,
+		style: require_objectSpread2._objectSpread2({ width: "100%" }, fieldProps.style || {})
+	})));
+	if (componentType === "ColorPicker") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label,
+		getValueFromEvent: (color) => {
+			var _color$toHexString, _color$toHexString2;
+			return (_color$toHexString = color === null || color === void 0 || (_color$toHexString2 = color.toHexString) === null || _color$toHexString2 === void 0 ? void 0 : _color$toHexString2.call(color)) !== null && _color$toHexString !== void 0 ? _color$toHexString : color;
+		}
+	}, /* @__PURE__ */ react.default.createElement(antd.ColorPicker, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled })));
+	if (["Select", "RecordListWrapper"].includes(componentType)) return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.Select, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+		disabled: isDisabled,
+		options: fieldOptions,
+		style: require_objectSpread2._objectSpread2({ width: "100%" }, fieldProps.style || {})
+	})));
+	if (componentType === "Radio.Group") {
+		const radioOptions = fieldOptions.map((o) => {
+			var _o$label;
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, o), {}, { label: (_o$label = o.label) !== null && _o$label !== void 0 ? _o$label : String(o.value) });
+		});
+		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+			key: name,
+			name,
+			label
+		}, /* @__PURE__ */ react.default.createElement(antd.Radio.Group, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+			disabled: isDisabled,
+			options: radioOptions
+		})));
+	}
+	if (componentType === "Checkbox.Group") {
+		const checkboxOptions = fieldOptions.map((o) => {
+			var _o$label2;
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, o), {}, { label: (_o$label2 = o.label) !== null && _o$label2 !== void 0 ? _o$label2 : String(o.value) });
+		});
+		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+			key: name,
+			name,
+			label
+		}, /* @__PURE__ */ react.default.createElement(antd.Checkbox.Group, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+			disabled: isDisabled,
+			options: checkboxOptions
+		})));
+	}
+	if (componentType === "Checkbox") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label,
+		valuePropName: "checked"
+	}, /* @__PURE__ */ react.default.createElement(antd.Checkbox, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled }), label));
+	if (componentType === "Switch") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label,
+		valuePropName: "checked"
+	}, /* @__PURE__ */ react.default.createElement(antd.Switch, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled })));
+	if (componentType === "Upload") return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label,
+		valuePropName: "fileList",
+		getValueFromEvent: (e) => Array.isArray(e) ? e : e === null || e === void 0 ? void 0 : e.fileList
+	}, /* @__PURE__ */ react.default.createElement(antd.Upload, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled }), /* @__PURE__ */ react.default.createElement(antd.Button, { disabled: isDisabled }, "上传文件")));
+	if (["Input.JSON", "Input.InputJSON"].includes(componentType)) return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label,
+		getValueProps: (v) => ({ value: v !== void 0 && typeof v === "object" ? JSON.stringify(v, null, 2) : v !== null && v !== void 0 ? v : "" }),
+		getValueFromEvent: (e) => {
+			try {
+				return JSON.parse(e.target.value);
+			} catch (_unused) {
+				return e.target.value;
+			}
+		}
+	}, /* @__PURE__ */ react.default.createElement(TextArea, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+		disabled: isDisabled,
+		rows: fieldProps.rows || 6
+	})));
+	if (["Translation", "IconPicker"].includes(componentType)) return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.Input, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, {
+		disabled: isDisabled,
+		placeholder: fieldProps.placeholder || `${componentType}（请在低代码平台配置后使用）`
+	})));
+	return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+		key: name,
+		name,
+		label
+	}, /* @__PURE__ */ react.default.createElement(antd.Input, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, fieldProps), {}, { disabled: isDisabled })));
+};
+/**
+* @title DataSourceSubForm 子表单组件
+* @description
+* 独立的子表单组件，专注于渲染一组表单字段。支持两种使用方式：
+* 1. 传入 children：使用低代码引擎渲染的子组件（优先）
+* 2. 传入 xRecordSchema：通过配置自动生成表单字段（fallback）
+*
+* 值结构: { field1: v1, field2: v2 }
+*/
+const DataSourceSubForm = (props) => {
+	const { value = {}, onChange, children, xRecordSchema, renderMode = "edit", __designMode, className, style } = props;
+	const [innerForm] = antd.Form.useForm();
+	/** renderMode 为 disabled 时所有控件禁用 */
+	const isDisabled = renderMode === "disabled";
+	/** 确保 value 是对象 */
+	const safeValue = (0, react.useMemo)(() => {
+		if (value && typeof value === "object" && !Array.isArray(value)) return value;
+		return {};
+	}, [value]);
+	/** 当外部 value 变化时，同步到内部 Form */
+	(0, react.useEffect)(() => {
+		innerForm.setFieldsValue(safeValue);
+	}, [safeValue, innerForm]);
+	/** 内部 Form 值变化 -> 通知外部 */
+	const handleValuesChange = (0, ahooks.useMemoizedFn)((_, allValues) => {
+		onChange === null || onChange === void 0 || onChange(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, safeValue), allValues));
+	});
+	/** 解析 xRecordSchema 为字段数组 */
+	const fields = (0, react.useMemo)(() => normalizeRecordSchema(xRecordSchema), [xRecordSchema]);
+	/**
+	* @title 判断是否有有效的低代码子组件
+	* @description 排除引擎注入的空容器占位符
+	*/
+	const hasRealChildren = (0, react.useMemo)(() => {
+		const childArray = react.default.Children.toArray(children);
+		if (childArray.length === 0) return false;
+		return childArray.some((child) => react.default.isValidElement(child));
+	}, [children]);
+	/**
+	* @title 创建模拟数据源
+	* @description 供 DataSourceProvider 消费，使子组件（如 Select）可访问字段元信息
+	*/
+	const mockDataSource = (0, react.useMemo)(() => {
+		if (!fields || fields.length === 0) return null;
+		return {
+			fields: fields.map((field) => ({
+				name: field.name,
+				uiSchema: field.uiSchema,
+				interface: field.interface
+			})),
+			name: "dataSourceSubForm",
+			tableName: "dataSourceSubForm"
+		};
+	}, [fields]);
+	/**
+	* @title 渲染表单核心内容
+	* @description
+	* - 有 children：渲染低代码引擎注入的子组件
+	* - 无 children 但有 fields：用 renderFormItem 逐字段渲染 Antd 控件
+	* - 两者均无：显示空状态提示
+	*/
+	const renderFormContent = () => {
+		if (!hasRealChildren && fields.length === 0) return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-data-source-sub-form__empty" }, "No fields configured. Please configure xRecordSchema or add children components.");
+		const formContent = /* @__PURE__ */ react.default.createElement(require_JsonWrapperContext.default.Provider, { value: {
+			path: [],
+			level: 0
+		} }, /* @__PURE__ */ react.default.createElement(antd.Form, {
+			form: innerForm,
+			onValuesChange: handleValuesChange,
+			component: false,
+			layout: "vertical"
+		}, hasRealChildren ? children : fields.map((field) => renderFormItem(field, isDisabled))));
+		if (mockDataSource) return /* @__PURE__ */ react.default.createElement(require_FormSettingProvider.default, {
+			renderMode,
+			groupInfoPosition: "top",
+			size: "large"
+		}, /* @__PURE__ */ react.default.createElement(require_DataSourceProvider.default, {
+			dataSource: mockDataSource,
+			__designMode
+		}, formContent));
+		return /* @__PURE__ */ react.default.createElement(require_FormSettingProvider.default, {
+			renderMode,
+			groupInfoPosition: "top",
+			size: "large"
+		}, formContent);
+	};
+	return /* @__PURE__ */ react.default.createElement("div", {
+		className: (0, classnames.default)("pisell-data-source-sub-form", className),
+		style
+	}, renderFormContent());
+};
+var dataSourceSubForm_default = DataSourceSubForm;
+
+//#endregion
+exports.default = dataSourceSubForm_default;

package/lib/components/dataSourceComponents/dataSourceSubForm/index.less

@@ -0,0 +1,19 @@
+/**
+ * @title DataSourceSubForm 组件样式
+ * @description 独立的子表单组件样式定义
+ */
+
+// .pisell-data-source-sub-form {
+//   width: 100%;
+
+//   &__empty {
+//     color: #999;
+//     font-size: 12px;
+//     padding: 12px 0;
+//     text-align: center;
+//   }
+
+//   &__form-wrapper {
+//     width: 100%;
+//   }
+// }