@bpmn-io/properties-panel 3.20.1 → 3.21.0

package/dist/index.esm.js

@@ -3048,6 +3048,28 @@ function HeaderButton(props) {
   });
 }
 
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
+ */
+
+/**
+ * A simple translation stub to be used for multi-language support.
+ * Can be easily replaced with a more sophisticated solution.
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
+ */
+function translateFallback(template, replacements) {
+  replacements = replacements || {};
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}
+
 function CollapsibleEntry(props) {
   const {
     element,
@@ -3055,7 +3077,8 @@ function CollapsibleEntry(props) {
     id,
     label,
     open: shouldOpen,
-    remove
+    remove,
+    translate = translateFallback
   } = props;
   const [open, setOpen] = useState(shouldOpen);
   const toggleOpen = () => setOpen(!open);
@@ -3071,9 +3094,7 @@ function CollapsibleEntry(props) {
       }
     }, [onShow, setOpen])
   };
-
-  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
-  const placeholderLabel = '<empty>';
+  const placeholderLabel = translate('<empty>');
   return jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
@@ -3086,14 +3107,14 @@ function CollapsibleEntry(props) {
         children: label || placeholderLabel
       }), jsx("button", {
         type: "button",
-        title: "Toggle list item",
+        title: translate('Toggle list item'),
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
         children: jsx(ArrowIcon, {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
       }), remove ? jsx("button", {
         type: "button",
-        title: "Delete item",
+        title: translate('Delete item'),
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
         children: jsx(DeleteIcon, {})
@@ -3121,7 +3142,8 @@ function CollapsibleEntry(props) {
 function ListItem(props) {
   const {
     autoFocusEntry,
-    autoOpen
+    autoOpen,
+    translate = translateFallback
   } = props;
 
   // focus specified entry on auto open
@@ -3143,7 +3165,8 @@ function ListItem(props) {
     class: "bio-properties-panel-list-item",
     children: jsx(CollapsibleEntry, {
       ...props,
-      open: autoOpen
+      open: autoOpen,
+      translate: translate
     })
   });
 }
@@ -3160,7 +3183,8 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true
+    shouldOpen = true,
+    translate = translateFallback
   } = props;
   useEffect(() => {
     if (props.shouldSort != undefined) {
@@ -3262,20 +3286,22 @@ function ListGroup(props) {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxs("button", {
           type: "button",
-          title: "Create new list item",
+          title: translate('Create new list item'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
           children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
             class: "bio-properties-panel-add-entry-label",
-            children: "Create"
+            children: translate('Create')
           }) : null]
         }) : null, hasItems ? jsx("div", {
-          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          title: translate(`List contains {numOfItems} item${items.length != 1 ? 's' : ''}`, {
+            numOfItems: items.length
+          }),
           class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsx("button", {
           type: "button",
-          title: "Toggle section",
+          title: translate('Toggle section'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -3302,7 +3328,8 @@ function ListGroup(props) {
             autoOpen: autoOpen,
             element: element,
             index: index,
-            key: id
+            key: id,
+            translate: translate
           });
         })
       })