Merge pull request #5246 from KDSBrowne/z.0.10-localize-switch-labels

Localize text in switch component

bigbluebutton-html5/imports/ui/components/switch/component.jsx

@@ -1,17 +1,30 @@
 import React from 'react';
 import Toggle from 'react-toggle';
 import classNames from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
 
-export default class Switch extends Toggle {
+const intlMessages = defineMessages({
+  on: {
+    id: 'app.switch.onLabel',
+    description: 'label for toggle switch on state',
+  },
+  off: {
+    id: 'app.switch.offLabel',
+    description: 'label for toggle switch off state',
+  },
+});
+
+class Switch extends Toggle {
   render() {
     const {
+      intl,
       className,
       icons: _icons,
       ariaLabelledBy,
       ariaDescribedBy,
       ariaLabel,
       ariaDesc,
-      ...inputProps,
+      ...inputProps
     } = this.props;
 
     const classes = classNames('react-toggle', {
@@ -21,33 +34,38 @@ export default class Switch extends Toggle {
     }, className);
 
     return (
-      <div className={classes}
+      <div
+        className={classes}
         onClick={this.handleClick}
         onTouchStart={this.handleTouchStart}
         onTouchMove={this.handleTouchMove}
-        onTouchEnd={this.handleTouchEnd}>
-        <div className='react-toggle-track' aria-hidden="true">
-          <div className='react-toggle-track-check'>
-            ON
+        onTouchEnd={this.handleTouchEnd}
+      >
+        <div className="react-toggle-track" aria-hidden="true">
+          <div className="react-toggle-track-check">
+            {intl.formatMessage(intlMessages.on)}
           </div>
-          <div className='react-toggle-track-x'>
-            OFF
+          <div className="react-toggle-track-x">
+            {intl.formatMessage(intlMessages.off)}
           </div>
         </div>
-        <div className='react-toggle-thumb' />
+        <div className="react-toggle-thumb" />
 
         <input
           {...inputProps}
-          ref={ref => { this.input = ref; }}
+          ref={(ref) => { this.input = ref; }}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
-          className='react-toggle-screenreader-only'
-          type='checkbox'
-          tabIndex='0'
+          className="react-toggle-screenreader-only"
+          type="checkbox"
+          tabIndex="0"
           aria-label={ariaLabel}
-          aria-describedby={ariaDescribedBy}/>
-          <div id={ariaDescribedBy} hidden>{ariaDesc}</div>
+          aria-describedby={ariaDescribedBy}
+        />
+        <div id={ariaDescribedBy} hidden>{ariaDesc}</div>
       </div>
     );
   }
-};
+}
+
+export default injectIntl(Switch);

bigbluebutton-html5/private/locales/en.json

@@ -179,6 +179,8 @@
     "app.settings.dataSavingTab.webcam": "Disable Webcams",
     "app.settings.dataSavingTab.screenShare": "Disable Desktop Sharing",
     "app.settings.dataSavingTab.description": "To save your bandwidth adjust what's currently being displayed.",
+    "app.switch.onLabel": "ON",
+    "app.switch.offLabel": "OFF",
     "app.actionsBar.actionsDropdown.actionsLabel": "Actions",
     "app.actionsBar.actionsDropdown.presentationLabel": "Upload a presentation",
     "app.actionsBar.actionsDropdown.initPollLabel": "Initiate a poll",