[#941] Add ' Autoclose brackets, quotes ' option ( with default value set to off ) in the General Settings tab of Preferences

Author: sagar-joshi

client/constants.js

@@ -74,6 +74,7 @@ export const SET_PREFERENCES = 'SET_PREFERENCES';
 export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';
 export const SET_GRID_OUTPUT = 'SET_GRID_OUTPUT';
 export const SET_SOUND_OUTPUT = 'SET_SOUND_OUTPUT';
+export const SET_AUTOCLOSE_BRACKETS_QUOTES = 'SET_AUTOCLOSE_BRACKETS_QUOTES';
 
 export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS';
 export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS';

client/modules/IDE/actions/preferences.js

@@ -51,6 +51,24 @@ export function setLineNumbers(value) {
   };
 }
 
+export function setAutocloseBracketsQuotes(value) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autocloseBracketsQuotes: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
 export function setAutosave(value) {
   return (dispatch, getState) => {
     dispatch({

client/modules/IDE/components/Preferences/index.jsx

@@ -202,6 +202,33 @@ class Preferences extends React.Component {
                 <label htmlFor="autosave-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
               </div>
             </div>
+            <div className="preference">
+              <h4 className="preference__title">{this.props.t('Preferences.AutocloseBracketsQuotes')}</h4>
+              <div className="preference__options">
+                <input
+                  type="radio"
+                  onChange={() => this.props.setAutocloseBracketsQuotes(true)}
+                  aria-label={this.props.t('Preferences.AutocloseBracketsQuotesOnARIA')}
+                  name="autoclosebracketsquotes"
+                  id="autoclosebracketsquotes-on"
+                  className="preference__radio-button"
+                  value="On"
+                  checked={this.props.autocloseBracketsQuotes}
+                />
+                <label htmlFor="autoclosebracketsquotes-on" className="preference__option">{this.props.t('Preferences.On')}</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setAutocloseBracketsQuotes(false)}
+                  aria-label={this.props.t('Preferences.AutocloseBracketsQuotesOffARIA')}
+                  name="autoclosebracketsquotes"
+                  id="autoclosebracketsquotes-off"
+                  className="preference__radio-button"
+                  value="Off"
+                  checked={!this.props.autocloseBracketsQuotes}
+                />
+                <label htmlFor="autoclosebracketsquotes-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
+              </div>
+            </div>
             <div className="preference">
               <h4 className="preference__title">{this.props.t('Preferences.WordWrap')}</h4>
               <div className="preference__options">
@@ -361,6 +388,8 @@ Preferences.propTypes = {
   setLintWarning: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
   setTheme: PropTypes.func.isRequired,
+  autocloseBracketsQuotes: PropTypes.bool.isRequired,
+  setAutocloseBracketsQuotes: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
 };
 

client/modules/IDE/pages/IDEView.jsx

@@ -286,6 +286,8 @@ class IDEView extends React.Component {
               setSoundOutput={this.props.setSoundOutput}
               theme={this.props.preferences.theme}
               setTheme={this.props.setTheme}
+              autocloseBracketsQuotes={this.props.preferences.autocloseBracketsQuotes}
+              setAutocloseBracketsQuotes={this.props.setAutocloseBracketsQuotes}
             />
           </Overlay>
         )}
@@ -534,9 +536,11 @@ IDEView.propTypes = {
     soundOutput: PropTypes.bool.isRequired,
     theme: PropTypes.string.isRequired,
     autorefresh: PropTypes.bool.isRequired,
-    language: PropTypes.string.isRequired
+    language: PropTypes.string.isRequired,
+    autocloseBracketsQuotes: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
+  setAutocloseBracketsQuotes: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
   setAutosave: PropTypes.func.isRequired,
   setLineNumbers: PropTypes.func.isRequired,

client/modules/IDE/reducers/preferences.js

@@ -12,7 +12,8 @@ const initialState = {
   soundOutput: false,
   theme: 'light',
   autorefresh: false,
-  language: 'en-US'
+  language: 'en-US',
+  autocloseBracketsQuotes: false
 };
 
 const preferences = (state = initialState, action) => {
@@ -41,6 +42,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, { lineNumbers: action.value });
     case ActionTypes.SET_LANGUAGE:
       return Object.assign({}, state, { language: action.language });
+    case ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES:
+      return Object.assign({}, state, { autocloseBracketsQuotes: action.value });
     default:
       return state;
   }

translations/locales/en-US/translations.json

@@ -133,6 +133,9 @@
     "AutosaveOnARIA": "autosave on",
     "Off": "Off",
     "AutosaveOffARIA": "autosave off",
+    "AutocloseBracketsQuotes": "Autoclose brackets, quotes",
+    "AutocloseBracketsQuotesOnARIA": "autoclose brackets, quotes on",
+    "AutocloseBracketsQuotesOffARIA": "autoclose brackets, quotes off",
     "WordWrap": "Word Wrap",
     "LineWrapOnARIA": "linewrap on",
     "LineWrapOffARIA": "linewrap off",