@pdfme/ui 6.1.2-dev.31 → 6.1.2-dev.32

package/dist/components/Designer/RightSidebar/DetailView/schemaChangeHelpers.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeSchemaItem, SchemaForUI } from '@pdfme/common';
+export declare const getSameTypeBulkUpdateSchemas: ({ activeSchema, activeSchemas, }: {
+    activeSchema: SchemaForUI;
+    activeSchemas: SchemaForUI[];
+}) => SchemaForUI[];
+export declare const isSingleSchemaOnlyChange: (key: string) => boolean;
+export declare const expandSameTypeBulkUpdateChanges: ({ activeSchema, activeSchemas, changes, }: {
+    activeSchema: SchemaForUI;
+    activeSchemas: SchemaForUI[];
+    changes: ChangeSchemaItem[];
+}) => ChangeSchemaItem[];

package/dist/index.js

@@ -214183,34 +214183,70 @@ var WidgetRenderer = (props) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref });
 };
 //#endregion
+//#region src/components/Designer/RightSidebar/DetailView/schemaChangeHelpers.ts
+var singleSchemaOnlyChangeKeys = new Set([
+	"id",
+	"name",
+	"type",
+	"content",
+	"position"
+]);
+var getSameTypeBulkUpdateSchemas = ({ activeSchema, activeSchemas }) => {
+	if (activeSchemas.length > 1 && activeSchemas.every((schema) => schema.type === activeSchema.type)) return activeSchemas;
+	return [activeSchema];
+};
+var isSingleSchemaOnlyChange = (key) => singleSchemaOnlyChangeKeys.has(key) || key.startsWith("position.");
+var expandSameTypeBulkUpdateChanges = ({ activeSchema, activeSchemas, changes }) => {
+	const targetSchemas = getSameTypeBulkUpdateSchemas({
+		activeSchema,
+		activeSchemas
+	});
+	if (targetSchemas.length <= 1) return changes;
+	if (!changes.every((change) => change.schemaId === activeSchema.id)) return changes;
+	if (changes.some((change) => isSingleSchemaOnlyChange(change.key))) return changes;
+	return changes.flatMap((change) => {
+		return targetSchemas.map((schema) => ({
+			...change,
+			schemaId: schema.id
+		}));
+	});
+};
+//#endregion
 //#region src/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.tsx
 var ButtonGroupWidget = (props) => {
-	const { activeElements, changeSchemas, schemas, schema } = props;
+	const { activeElements, activeSchema, changeSchemas, schemas, schema } = props;
 	const { token } = theme_default.useToken();
 	const buttons = Array.isArray(schema?.buttons) ? schema.buttons : [];
-	const apply = (btn) => {
-		const key = btn.key;
-		const type = btn.type;
+	const getSelectedSchemas = () => {
 		const ids = activeElements.map((ae) => ae.id);
-		changeSchemas(schemas.filter((s) => ids.includes(s.id)).map((s) => {
-			const oldValue = Boolean(s[key] ?? false);
-			return {
-				key,
-				value: type === "boolean" ? !oldValue : btn.value,
-				schemaId: s.id
-			};
-		}));
+		return schemas.filter((s) => ids.includes(s.id));
+	};
+	const getTargetSchemas = () => getSameTypeBulkUpdateSchemas({
+		activeSchema,
+		activeSchemas: getSelectedSchemas()
+	});
+	const getButtonValue = (btn, targetSchemas) => {
+		if (btn.type !== "boolean") return btn.value;
+		return !targetSchemas.every((s) => Boolean(s[btn.key] ?? false));
+	};
+	const apply = (btn) => {
+		const targetSchemas = getTargetSchemas();
+		const value = getButtonValue(btn, targetSchemas);
+		changeSchemas(targetSchemas.map((s) => ({
+			key: btn.key,
+			value,
+			schemaId: s.id
+		})));
 	};
 	const isActive = (btn) => {
 		const key = btn.key;
 		const type = btn.type;
-		let active = false;
-		const ids = activeElements.map((ae) => ae.id);
-		schemas.filter((s) => ids.includes(s.id)).forEach((s) => {
+		const targetSchemas = getTargetSchemas();
+		if (targetSchemas.length === 0) return false;
+		return targetSchemas.every((s) => {
 			const schemaRecord = s;
-			active = type === "boolean" ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
+			return type === "boolean" ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
 		});
-		return active;
 	};
 	const replaceCurrentColor = (svgString, color) => color ? svgString.replace(/="currentColor"/g, `="${color}"`) : svgString;
 	const svgIcon = (svgString) => {
@@ -214239,6 +214275,7 @@ var ButtonGroupWidget = (props) => {
 //#region src/components/Designer/RightSidebar/DetailView/index.tsx
 var { Text: Text$2 } = Typography;
 var TEXT_OVERFLOW_EXPAND_SCHEMA_TYPES = new Set(["text", "multiVariableText"]);
+var getElementIds = (elements) => elements.map(({ id }) => id);
 var DetailView = (props) => {
 	const { token } = theme_default.useToken();
 	const { schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } = props;
@@ -214246,6 +214283,19 @@ var DetailView = (props) => {
 	const i18n = (0, import_react$9.useContext)(I18nContext);
 	const pluginsRegistry = (0, import_react$9.useContext)(PluginsRegistry);
 	const options = (0, import_react$9.useContext)(OptionsContext);
+	const activeSchemas = (0, import_react$9.useMemo)(() => {
+		const ids = new Set(props.activeElements.map((element) => element.id));
+		return props.schemas.filter((schema) => ids.has(schema.id));
+	}, [props.activeElements, props.schemas]);
+	const changeSchemasWithSameTypeSelection = (0, import_react$9.useCallback)((changes) => changeSchemas(expandSameTypeBulkUpdateChanges({
+		activeSchema,
+		activeSchemas,
+		changes
+	})), [
+		activeSchema,
+		activeSchemas,
+		changeSchemas
+	]);
 	const typedI18n = (0, import_react$9.useCallback)((key) => {
 		return typeof i18n === "function" ? i18n(key) : key;
 	}, [i18n]);
@@ -214254,6 +214304,7 @@ var DetailView = (props) => {
 			AlignWidget: (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignWidget, {
 				...p,
 				...props,
+				changeSchemas: changeSchemasWithSameTypeSelection,
 				options
 			}),
 			Divider: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider$2, { style: {
@@ -214263,6 +214314,7 @@ var DetailView = (props) => {
 			ButtonGroup: (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupWidget, {
 				...p,
 				...props,
+				changeSchemas: changeSchemasWithSameTypeSelection,
 				options
 			})
 		};
@@ -214272,6 +214324,7 @@ var DetailView = (props) => {
 				newWidgets[widgetKey] = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WidgetRenderer, {
 					...p,
 					...props,
+					changeSchemas: changeSchemasWithSameTypeSelection,
 					options,
 					theme: token,
 					i18n: typedI18n,
@@ -214281,6 +214334,7 @@ var DetailView = (props) => {
 		}
 		return newWidgets;
 	}, [
+		changeSchemasWithSameTypeSelection,
 		options,
 		pluginsRegistry,
 		props,
@@ -214384,9 +214438,9 @@ var DetailView = (props) => {
 				});
 			}
 		}
-		if (changes.length) form.validateFields().then(() => changeSchemas(changes)).catch((reason) => {
+		if (changes.length) form.validateFields().then(() => changeSchemasWithSameTypeSelection(changes)).catch((reason) => {
 			if (reason.errorFields.length) changes = changes.filter((change) => !reason.errorFields.find((field) => field.name.includes(change.key)));
-			if (changes.length) changeSchemas(changes);
+			if (changes.length) changeSchemasWithSameTypeSelection(changes);
 		});
 	}, 100);
 	const activePlugin = pluginsRegistry.findByType(activeSchema.type);
@@ -214537,7 +214591,7 @@ var DetailView = (props) => {
 	};
 	const safeProperties = { ...propPanelSchema.properties };
 	if (typeof activePropPanelSchema === "function") {
-		const { size, schemas, pageSize, basePdf, changeSchemas, activeElements, deselectSchema, activeSchema } = props;
+		const { size, schemas, pageSize, basePdf, activeElements, deselectSchema, activeSchema } = props;
 		const functionResult = activePropPanelSchema({
 			size,
 			schemas,
@@ -214610,7 +214664,7 @@ var DetailView = (props) => {
 	});
 };
 var propsAreUnchanged = (prevProps, nextProps) => {
-	return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema);
+	return JSON.stringify(prevProps.activeSchema) === JSON.stringify(nextProps.activeSchema) && JSON.stringify(getElementIds(prevProps.activeElements)) === JSON.stringify(getElementIds(nextProps.activeElements));
 };
 var DetailView_default = import_react$9.memo(DetailView, propsAreUnchanged);
 //#endregion