@sap-ux/ui-components 1.3.0 → 1.3.2

package/dist/components/UITranslationInput/UITranslationInput.js

@@ -22,7 +22,95 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UITranslationInput = void 0;
 const react_1 = __importStar(require("react"));
 const UIInput_1 = require("../UIInput");
+const Icons_1 = require("../Icons");
 const UITranslationButton_1 = require("./UITranslationButton");
+const UITranslationButton_types_1 = require("./UITranslationButton.types");
+const UITranslationUtils_1 = require("./UITranslationUtils");
+const defaults_1 = require("./defaults");
+const UIFormattedText_1 = require("./UIFormattedText");
+/**
+ * Method returns suggestion object with message and tooltip based on passed translation button props.
+ *
+ * @param props Properties of translation input component.
+ * @returns Translation suggestion object.
+ */
+const getTranslationSuggestion = (props) => {
+    const { value = '', allowedPatterns, entries, strings = defaults_1.defaultTranslationInputStrings, namingConvention = UITranslationButton_types_1.TranslationKeyGenerator.CamelCase, defaultPattern, i18nPrefix, allowedI18nPrefixes } = props;
+    const i18nKey = UITranslationUtils_1.extractI18nKey(value, allowedPatterns, allowedI18nPrefixes || [i18nPrefix]);
+    let message = '';
+    let tooltip = '';
+    let suggest;
+    if (i18nKey) {
+        // There is already i18n binding as value
+        const entry = UITranslationUtils_1.getTranslationByKey(entries, i18nKey);
+        if (entry) {
+            tooltip = strings.i18nEntryExistsTooltip;
+            suggest = {
+                entry,
+                type: UITranslationButton_types_1.SuggestValueType.Existing,
+                icon: Icons_1.UiIcons.WorldArrow
+            };
+        }
+        else {
+            message = strings.i18nKeyMissingDescription;
+            tooltip = strings.i18nKeyMissingTooltip;
+            suggest = {
+                entry: {
+                    key: {
+                        value: i18nKey
+                    },
+                    value: {
+                        value: i18nKey
+                    }
+                },
+                type: UITranslationButton_types_1.SuggestValueType.New,
+                icon: Icons_1.UiIcons.WorldWarning
+            };
+        }
+    }
+    else {
+        // Use generation format passed from outside or use default as 'Standard';
+        const existingEntry = UITranslationUtils_1.getTranslationByText(entries, value);
+        if (existingEntry) {
+            message = strings.i18nReplaceWithExistingDescription;
+            tooltip = strings.i18nReplaceWithExistingTooltip;
+            suggest = {
+                entry: existingEntry,
+                type: UITranslationButton_types_1.SuggestValueType.Update
+            };
+        }
+        else {
+            message = strings.i18nValueMissingDescription;
+            tooltip = strings.i18nValueMissingTooltip;
+            const key = UITranslationUtils_1.generateI18nKey(value, namingConvention, entries);
+            suggest = {
+                entry: {
+                    key: {
+                        value: key
+                    },
+                    value: {
+                        value
+                    }
+                },
+                type: UITranslationButton_types_1.SuggestValueType.New
+            };
+        }
+    }
+    // I18n string to apply for input value
+    suggest.i18n = UITranslationUtils_1.applyI18nPattern(suggest.entry.key.value, defaultPattern, i18nPrefix);
+    // Format message to show in callout
+    const messageValues = {
+        key: suggest.entry.key.value,
+        value: suggest.entry.value.value,
+        i18n: suggest.i18n
+    };
+    tooltip = UIFormattedText_1.formatText(tooltip, messageValues);
+    return {
+        message: react_1.default.createElement(UIFormattedText_1.UIFormattedText, { values: messageValues }, message),
+        tooltip,
+        suggest
+    };
+};
 /**
  * Component to render translation input with button to provide helper callout with i18n generation option.
  *
@@ -30,7 +118,8 @@ const UITranslationButton_1 = require("./UITranslationButton");
  * @returns Component to render translation input.
  */
 function UITranslationInput(props) {
-    const { title, id, className, onChange, value, allowedPatterns, defaultPattern, entries, busy, i18nPrefix, allowedI18nPrefixes, namingConvention, onCreateNewEntry, onShowExistingEntry, disabled } = props;
+    const { id, className, onChange, value, allowedPatterns, defaultPattern, entries, busy, i18nPrefix, allowedI18nPrefixes, namingConvention, onCreateNewEntry, onShowExistingEntry, disabled, strings } = props;
+    const suggestion = getTranslationSuggestion(props);
     let classNames = ' ui-translatable__input';
     // Custom external classes
     if (className) {
@@ -39,8 +128,20 @@ function UITranslationInput(props) {
     const onUpdateValue = react_1.useCallback((newValue) => {
         onChange?.({}, newValue);
     }, [onChange]);
+    // Generate DOM id for i18n button
+    let buttonId = `${id}-i18n`;
+    let title = props.title;
+    if (suggestion.suggest?.type === UITranslationButton_types_1.SuggestValueType.Existing && strings?.i18nEntryExistsInputTooltip) {
+        // Change DOM id with additional suffix
+        buttonId += '-navigate';
+        // Overwrite title with information about reference entry
+        title = UIFormattedText_1.formatText(strings.i18nEntryExistsInputTooltip, {
+            value: value || '',
+            translation: suggestion.suggest.entry.value.value
+        });
+    }
     const onRenderSuffix = react_1.useCallback(() => {
-        return (react_1.default.createElement(UITranslationButton_1.UITranslationButton, { id: `${id}-i18n`, value: value, allowedPatterns: allowedPatterns, defaultPattern: defaultPattern, entries: entries, busy: busy, i18nPrefix: i18nPrefix, allowedI18nPrefixes: allowedI18nPrefixes, namingConvention: namingConvention, onCreateNewEntry: onCreateNewEntry, onShowExistingEntry: onShowExistingEntry, onUpdateValue: onUpdateValue, disabled: disabled }));
+        return (react_1.default.createElement(UITranslationButton_1.UITranslationButton, { id: buttonId, value: value, busy: busy, onCreateNewEntry: onCreateNewEntry, onShowExistingEntry: onShowExistingEntry, onUpdateValue: onUpdateValue, disabled: disabled, strings: strings, suggestion: suggestion }));
     }, [
         value,
         allowedPatterns,
@@ -58,4 +159,7 @@ function UITranslationInput(props) {
     return (react_1.default.createElement(UIInput_1.UITextInput, { ...props, title: title, onRenderSuffix: value?.trim() ? onRenderSuffix : undefined, className: classNames }));
 }
 exports.UITranslationInput = UITranslationInput;
+UITranslationInput.defaultProps = {
+    strings: defaults_1.defaultTranslationInputStrings
+};
 //# sourceMappingURL=UITranslationInput.js.map

package/dist/components/UITranslationInput/UITranslationInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"UITranslationInput.js","sourceRoot":"","sources":["../../../src/components/UITranslationInput/UITranslationInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAE3C,wCAAyC;AAEzC,+DAA4D;AAO5D;;;;;GAKG;AACH,SAAgB,kBAAkB,CAAC,KAA8B;IAC7D,MAAM,EACF,KAAK,EACL,EAAE,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,eAAe,EACf,cAAc,EACd,OAAO,EACP,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACX,GAAG,KAAK,CAAC;IAEV,IAAI,UAAU,GAAG,yBAAyB,CAAC;IAC3C,0BAA0B;IAC1B,IAAI,SAAS,EAAE;QACX,UAAU,IAAI,IAAI,SAAS,EAAE,CAAC;KACjC;IAED,MAAM,aAAa,GAAG,mBAAW,CAC7B,CAAC,QAAgB,EAAQ,EAAE;QACvB,QAAQ,EAAE,CAAC,EAAuC,EAAE,QAAQ,CAAC,CAAC;IAClE,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,MAAM,cAAc,GAAG,mBAAW,CAAC,GAAuB,EAAE;QACxD,OAAO,CACH,8BAAC,yCAAmB,IAChB,EAAE,EAAE,GAAG,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;IACN,CAAC,EAAE;QACC,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,IAAI;QACJ,QAAQ;QACR,UAAU;QACV,mBAAmB;QACnB,gBAAgB;QAChB,gBAAgB;QAChB,mBAAmB;QACnB,aAAa;KAChB,CAAC,CAAC;IAEH,OAAO,CACH,8BAAC,qBAAW,OACJ,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC1D,SAAS,EAAE,UAAU,GACvB,CACL,CAAC;AACN,CAAC;AAzED,gDAyEC"}
+{"version":3,"file":"UITranslationInput.js","sourceRoot":"","sources":["../../../src/components/UITranslationInput/UITranslationInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/UITranslationInput/defaults.d.ts

@@ -1,3 +1,3 @@
-import type { TranslationButtonStrings } from './UITranslationButton.types';
-export declare const defaultTranslationButtonStrings: TranslationButtonStrings;
+import type { TranslationInputStrings } from './UITranslationButton.types';
+export declare const defaultTranslationInputStrings: TranslationInputStrings;
 //# sourceMappingURL=defaults.d.ts.map

package/dist/components/UITranslationInput/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/components/UITranslationInput/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,eAAO,MAAM,+BAA+B,EAAE,wBAY7C,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/components/UITranslationInput/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,eAAO,MAAM,8BAA8B,EAAE,uBAa5C,CAAC"}

package/dist/components/UITranslationInput/defaults.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultTranslationButtonStrings = void 0;
-exports.defaultTranslationButtonStrings = {
-    acceptButtonLabel: 'Accept',
+exports.defaultTranslationInputStrings = void 0;
+exports.defaultTranslationInputStrings = {
+    acceptButtonLabel: 'Apply',
     cancelButtonLabel: 'Cancel',
     i18nKeyMissingTooltip: 'Text key or value is not available in i18n file.',
     i18nKeyMissingDescription: 'Generate a text key {{{key}}} with value {{{value}}} in i18n file.',
@@ -10,6 +10,7 @@ exports.defaultTranslationButtonStrings = {
     i18nValueMissingDescription: 'Generate a text key {{{key}}} in i18n file and substitute {{{value}}} by {{{i18n}}}.',
     i18nReplaceWithExistingTooltip: 'Text key {{{key}}} for value {{{value}}} is available in i18n file. \nConsider substituting {{{value}}} by {{{i18n}}}.',
     i18nReplaceWithExistingDescription: 'Text key {{{key}}} for value {{{value}}} is available in i18n file.Substitute {{{value}}} by {{{i18n}}}.',
-    i18nEntryExistsTooltip: 'Edit in source file'
+    i18nEntryExistsTooltip: 'Edit in source file',
+    i18nEntryExistsInputTooltip: "Value: '{{{value}}}'.\nTranslation: '{{{translation}}}'."
 };
 //# sourceMappingURL=defaults.js.map

package/dist/components/UITranslationInput/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/components/UITranslationInput/defaults.ts"],"names":[],"mappings":";;;AAEa,QAAA,+BAA+B,GAA6B;IACrE,iBAAiB,EAAE,QAAQ;IAC3B,iBAAiB,EAAE,QAAQ;IAC3B,qBAAqB,EAAE,kDAAkD;IACzE,yBAAyB,EAAE,oEAAoE;IAC/F,uBAAuB,EAAE,kEAAkE;IAC3F,2BAA2B,EAAE,sFAAsF;IACnH,8BAA8B,EAC1B,wHAAwH;IAC5H,kCAAkC,EAC9B,0GAA0G;IAC9G,sBAAsB,EAAE,qBAAqB;CAChD,CAAC"}
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/components/UITranslationInput/defaults.ts"],"names":[],"mappings":";;;AAEa,QAAA,8BAA8B,GAA4B;IACnE,iBAAiB,EAAE,OAAO;IAC1B,iBAAiB,EAAE,QAAQ;IAC3B,qBAAqB,EAAE,kDAAkD;IACzE,yBAAyB,EAAE,oEAAoE;IAC/F,uBAAuB,EAAE,kEAAkE;IAC3F,2BAA2B,EAAE,sFAAsF;IACnH,8BAA8B,EAC1B,wHAAwH;IAC5H,kCAAkC,EAC9B,0GAA0G;IAC9G,sBAAsB,EAAE,qBAAqB;IAC7C,2BAA2B,EAAE,0DAA0D;CAC1F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sap-ux/ui-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "license": "Apache-2.0",
   "description": "SAP UI Components Library",
   "repository": {

package/storybook/iframe.html

@@ -377,4 +377,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"*.story.tsx","importPathMatcher":"^\\.[\\\\/](?:stories\\/(?!\\.)(?=.)[^/]*?\\.story\\.tsx)$"}];</script><script src="runtime~main.d4909001.iframe.bundle.js"></script><script src="733.4fa1d656.iframe.bundle.js"></script><script src="main.5b8f5833.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"*.story.tsx","importPathMatcher":"^\\.[\\\\/](?:stories\\/(?!\\.)(?=.)[^/]*?\\.story\\.tsx)$"}];</script><script src="runtime~main.d4909001.iframe.bundle.js"></script><script src="733.4fa1d656.iframe.bundle.js"></script><script src="main.a2292fb0.iframe.bundle.js"></script></body></html>