@sap-ux/ui-components
Version:
SAP UI Components Library
176 lines • 7.58 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 = (0, UITranslationUtils_1.extractI18nKey)(value, allowedPatterns, allowedI18nPrefixes || [i18nPrefix]);
let message = '';
let tooltip = '';
let suggest;
if (i18nKey) {
// There is already i18n binding as value
const entry = (0, 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 = (0, 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 = (0, 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 = (0, 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 = (0, 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.
*
* @param props Component properties.
* @returns Component to render translation input.
*/
const UITranslationInput = (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) {
classNames += ` ${className}`;
}
const onUpdateValue = (0, 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';
if (!title) {
title = (0, UIFormattedText_1.formatText)(strings.i18nEntryExistsInputTooltip, {
value: value || '',
translation: suggestion.suggest.entry.value.value
});
}
}
const onRenderSuffix = (0, react_1.useCallback)(() => {
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,
defaultPattern,
entries,
busy,
disabled,
i18nPrefix,
allowedI18nPrefixes,
namingConvention,
onCreateNewEntry,
onShowExistingEntry,
onUpdateValue
]);
const onRenderInput = (0, react_1.useCallback)((props, defaultRender) => {
if (defaultRender) {
return (react_1.default.createElement("div", { className: "ui-translatable__field", title: title }, defaultRender({ ...props, title: undefined })));
}
return null;
}, [title]);
return (react_1.default.createElement(UIInput_1.UITextInput, { ...props, onRenderSuffix: value?.trim() ? onRenderSuffix : undefined, className: classNames, onRenderInput: onRenderInput }));
};
exports.UITranslationInput = UITranslationInput;
exports.UITranslationInput.defaultProps = {
strings: defaults_1.defaultTranslationInputStrings
};
//# sourceMappingURL=UITranslationInput.js.map