Update: Add valueLabelsFile for easier translation

README.md

@@ -35,8 +35,32 @@ Example:
 ```
 
 Of course you can localize a value. e.g. `Vendor.Package:Folder.Filename:1`
-If you have set a value label for the min or max value, you don't need to set `minLabel` of `maxLabel`
+If you have set a value label for the min or max value, you don't need to set `minLabel` of `maxLabel`.
 
+If you work with `xlf` files, you can also ad a setting called `valueLabelsFile`:
+
+```yaml
+'Foo.Bar:Element':
+  properties:
+    zoomLevel:
+      type: integer
+      ui:
+        inspector:
+          editor: 'Carbon.RangeEditor/Editor'
+          editorOptions:
+            minLabel: null
+            maxLabel: null
+            min: 1
+            max: 6
+            step: 1
+            unit: ''
+            valueLabelsFile: 'Foo.Bar:ZoomLevel'
+            valueLabels:
+              2: 'Override label from Foo.Bar:ZoomLevel:2'
+```
+
+In that case, the plugin search for the translation value in the file `ZoomLevel.xlf` in the package `Foo.Bar`.
+Example: For the value `5` the translation string will be `Foo.Bar:ZoomLevel:5`.
 
 [packagist]: https://packagist.org/packages/carbon/rangeeditor
 [latest stable version]: https://poser.pugx.org/carbon/rangeeditor/v/stable

Resources/Private/RangeEditor/Editor/index.js

@@ -17,6 +17,7 @@ const defaultProps = {
         minLabel: null,
         maxLabel: null,
         disabled: false,
+        valueLabelsFile: "",
         valueLabels: {},
     },
 };
@@ -48,15 +49,38 @@ function Editor(props, second) {
     };
 
     const options = { ...defaultProps.options, ...props.options };
-    const { value, highlight } = props;
+    const { value, highlight, i18nRegistry } = props;
     const valueAsString = value === 0 ? "0" : value || "";
     // Calculate the width of the input field based on the length of the min, max and step values
     const numLength = (value) => value.toString().length;
     const additionalStepLength = numLength(options.step) - 1;
     const styleWidth = Math.max(numLength(options.min), numLength(options.max)) + additionalStepLength + "ch";
-    const valueLabels = options.valueLabels;
 
+    const { valueLabels, valueLabelsFile } = options;
     const showMiddle = !!(value != options.min && value != options.max);
+    const getValueLabel = (value) => {
+        if (valueLabels && valueLabels[value]) {
+            return valueLabels[value];
+        }
+        if (valueLabelsFile) {
+            return `${valueLabelsFile}:${value}`;
+        }
+        return null;
+    };
+
+    const getLabel = (value) => {
+        if (value == options.min) {
+            const label = options.minLabel || getValueLabel(options.min) || options.min + options.unit;
+            return i18nRegistry.translate(label);
+        }
+        if (value == options.max) {
+            const label = options.maxLabel || getValueLabel(options.max) || options.max + options.unit;
+            return i18nRegistry.translate(label);
+        }
+        return i18nRegistry.translate(getValueLabel(value));
+    };
+
+    const currentLabel = getLabel(value);
 
     return (
         <div className={clsx(style.editor, options.disabled && style.editorDisabled)}>
@@ -73,23 +97,19 @@ function Editor(props, second) {
             <div className={style.editorValue}>
                 <button
                     type="button"
-                    title={props.i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorMinimum")}
+                    title={i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorMinimum")}
                     onClick={() => changeValue(options.min)}
                     style={{ opacity: options.min == value ? 1 : 0.7 }}
                     disabled={options.disabled}
                 >
-                    {props.i18nRegistry.translate(
-                        options.minLabel || valueLabels[options.min] || options.min + options.unit,
-                    )}
+                    {getLabel(options.min)}
                 </button>
                 {!showMiddle && <span>&nbsp;</span>}
-                {valueLabels[value] && showMiddle && (
-                    <span className={style.valueLabel}>{props.i18nRegistry.translate(valueLabels[value])}</span>
-                )}
-                {!valueLabels[value] && showMiddle && (
+                {currentLabel && showMiddle && <span className={style.valueLabel}>{currentLabel}</span>}
+                {!currentLabel && showMiddle && (
                     <span>
                         <input
-                            title={props.i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorCurrentValue")}
+                            title={i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorCurrentValue")}
                             type="text"
                             onKeyPress={this.onKeyPress}
                             onChange={this.handleChange}
@@ -102,14 +122,12 @@ function Editor(props, second) {
                 )}
                 <button
                     type="button"
-                    title={props.i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorMaximum")}
+                    title={i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorMaximum")}
                     onClick={() => changeValue(options.max)}
                     style={{ opacity: options.max == value ? 1 : 0.7 }}
                     disabled={options.disabled}
                 >
-                    {props.i18nRegistry.translate(
-                        options.maxLabel || valueLabels[options.max] || options.max + options.unit,
-                    )}
+                    {getLabel(options.max)}
                 </button>
             </div>
         </div>