Merge pull request #2209 from atom/aw/refactor-dialogs

Refactor dialog handling

Author: smashwilson

docs/focus-management.md

@@ -29,7 +29,7 @@ We move focus around by registering Atom commands.
 For example, in `GitTabView`:
 
 ```
-      this.props.commandRegistry.add(this.refRoot, {
+      this.props.commands.add(this.refRoot, {
         'tool-panel:unfocus': this.blur,
         'core:focus-next': this.advanceFocus,
         'core:focus-previous': this.retreatFocus,

lib/atom/atom-text-editor.js

@@ -36,6 +36,9 @@ export default class AtomTextEditor extends React.Component {
     didDestroySelection: PropTypes.func,
 
     hideEmptiness: PropTypes.bool,
+    preselect: PropTypes.bool,
+    className: PropTypes.string,
+    tabIndex: PropTypes.number,
 
     refModel: RefHolderPropType,
 
@@ -49,6 +52,8 @@ export default class AtomTextEditor extends React.Component {
     didDestroySelection: () => {},
 
     hideEmptiness: false,
+    preselect: false,
+    tabIndex: 0,
   }
 
   constructor(props) {
@@ -77,6 +82,13 @@ export default class AtomTextEditor extends React.Component {
 
     this.refParent.map(element => {
       const editor = new TextEditor(modelProps);
+      editor.getElement().tabIndex = this.props.tabIndex;
+      if (this.props.className) {
+        editor.getElement().classList.add(this.props.className);
+      }
+      if (this.props.preselect) {
+        editor.selectAll();
+      }
       element.appendChild(editor.getElement());
       this.getRefModel().setter(editor);
       this.refElement.setter(editor.getElement());

lib/atom/panel.js

@@ -22,14 +22,12 @@ export default class Panel extends React.Component {
     children: PropTypes.element.isRequired,
     options: PropTypes.object,
     onDidClosePanel: PropTypes.func,
-    visible: PropTypes.bool,
     itemHolder: RefHolderPropType,
   }
 
   static defaultProps = {
     options: {},
     onDidClosePanel: panel => {},
-    visible: true,
   }
 
   constructor(props) {
@@ -46,21 +44,6 @@ export default class Panel extends React.Component {
     this.setupPanel();
   }
 
-  shouldComponentUpdate(newProps) {
-    return this.props.visible !== newProps.visible;
-  }
-
-  componentDidUpdate() {
-    if (this.didCloseItem) {
-      // eslint-disable-next-line no-console
-      console.error('Unexpected update in `Panel`: the contained panel has been destroyed');
-    }
-
-    if (this.panel) {
-      this.panel[this.props.visible ? 'show' : 'hide']();
-    }
-  }
-
   render() {
     return ReactDOM.createPortal(
       this.props.children,
@@ -76,7 +59,7 @@ export default class Panel extends React.Component {
     const methodName = `add${location}Panel`;
 
     const item = createItem(this.domNode, this.props.itemHolder);
-    const options = {...this.props.options, visible: this.props.visible, item};
+    const options = {...this.props.options, item};
     this.panel = this.props.workspace[methodName](options);
     this.subscriptions.add(
       this.panel.onDidDestroy(() => {

lib/autofocus.js

@@ -0,0 +1,75 @@
+/**
+ * When triggered, automatically focus the first element ref passed to this object.
+ *
+ * To unconditionally focus a single element:
+ *
+ * ```
+ * class SomeComponent extends React.Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.autofocus = new Autofocus();
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <div className="github-Form">
+ *         <input ref={this.autofocus.target} type="text" />
+ *         <input type="text" />
+ *       </div>
+ *     );
+ *   }
+ *
+ *   componentDidMount() {
+ *     this.autofocus.trigger();
+ *   }
+ * }
+ * ```
+ *
+ * If multiple form elements are present, use `firstTarget` to create the ref instead. The rendered ref you assign the
+ * lowest numeric index will be focused on trigger:
+ *
+ * ```
+ * class SomeComponent extends React.Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.autofocus = new Autofocus();
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <div className="github-Form">
+ *         {this.props.someProp && <input ref={this.autofocus.firstTarget(0)} />}
+ *         <input ref={this.autofocus.firstTarget(1)} type="text" />
+ *         <input type="text" />
+ *       </div>
+ *     );
+ *   }
+ *
+ *   componentDidMount() {
+ *     this.autofocus.trigger();
+ *   }
+ * }
+ * ```
+ *
+ */
+export default class AutoFocus {
+  constructor() {
+    this.index = Infinity;
+    this.captured = null;
+  }
+
+  target = element => this.firstTarget(0)(element);
+
+  firstTarget = index => element => {
+    if (index < this.index) {
+      this.index = index;
+      this.captured = element;
+    }
+  };
+
+  trigger() {
+    if (this.captured !== null) {
+      setTimeout(() => this.captured.focus(), 0);
+    }
+  }
+}

lib/controllers/commit-controller.js

@@ -24,7 +24,7 @@ export default class CommitController extends React.Component {
   static propTypes = {
     workspace: PropTypes.object.isRequired,
     grammars: PropTypes.object.isRequired,
-    commandRegistry: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
     config: PropTypes.object.isRequired,
     tooltips: PropTypes.object.isRequired,
 
@@ -104,7 +104,7 @@ export default class CommitController extends React.Component {
         prepareToCommit={this.props.prepareToCommit}
         commit={this.commit}
         abortMerge={this.props.abortMerge}
-        commandRegistry={this.props.commandRegistry}
+        commands={this.props.commands}
         maximumCharacterLimit={72}
         messageBuffer={this.commitMessageBuffer}
         isMerging={this.props.isMerging}

lib/controllers/dialogs-controller.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import InitDialog from '../views/init-dialog';
+import CloneDialog from '../views/clone-dialog';
+import CredentialDialog from '../views/credential-dialog';
+import OpenIssueishDialog from '../views/open-issueish-dialog';
+import OpenCommitDialog from '../views/open-commit-dialog';
+
+const DIALOG_COMPONENTS = {
+  null: NullDialog,
+  init: InitDialog,
+  clone: CloneDialog,
+  credential: CredentialDialog,
+  issueish: OpenIssueishDialog,
+  commit: OpenCommitDialog,
+};
+
+export default class DialogsController extends React.Component {
+  static propTypes = {
+    // Model
+    request: PropTypes.shape({
+      identifier: PropTypes.string.isRequired,
+      isProgressing: PropTypes.bool.isRequired,
+    }).isRequired,
+
+    // Atom environment
+    workspace: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+  };
+
+  state = {
+    requestInProgress: null,
+    requestError: [null, null],
+  }
+
+  render() {
+    const DialogComponent = DIALOG_COMPONENTS[this.props.request.identifier];
+    return <DialogComponent {...this.getCommonProps()} />;
+  }
+
+  getCommonProps() {
+    const {request} = this.props;
+    const accept = request.isProgressing
+      ? async (...args) => {
+        this.setState({requestError: [null, null], requestInProgress: request});
+        try {
+          const result = await request.accept(...args);
+          this.setState({requestInProgress: null});
+          return result;
+        } catch (error) {
+          this.setState({requestError: [request, error], requestInProgress: null});
+          return undefined;
+        }
+      } : (...args) => {
+        this.setState({requestError: [null, null]});
+        try {
+          return request.accept(...args);
+        } catch (error) {
+          this.setState({requestError: [request, error]});
+          return undefined;
+        }
+      };
+    const wrapped = wrapDialogRequest(request, {accept});
+
+    return {
+      config: this.props.config,
+      commands: this.props.commands,
+      workspace: this.props.workspace,
+      inProgress: this.state.requestInProgress === request,
+      error: this.state.requestError[0] === request ? this.state.requestError[1] : null,
+      request: wrapped,
+    };
+  }
+}
+
+function NullDialog() {
+  return null;
+}
+
+class DialogRequest {
+  constructor(identifier, params = {}) {
+    this.identifier = identifier;
+    this.params = params;
+    this.isProgressing = false;
+    this.accept = () => {};
+    this.cancel = () => {};
+  }
+
+  onAccept(cb) {
+    this.accept = cb;
+  }
+
+  onProgressingAccept(cb) {
+    this.isProgressing = true;
+    this.onAccept(cb);
+  }
+
+  onCancel(cb) {
+    this.cancel = cb;
+  }
+
+  getParams() {
+    return this.params;
+  }
+}
+
+function wrapDialogRequest(original, {accept}) {
+  const dup = new DialogRequest(original.identifier, original.params);
+  dup.isProgressing = original.isProgressing;
+  dup.onAccept(accept);
+  dup.onCancel(original.cancel);
+  return dup;
+}
+
+export const dialogRequests = {
+  null: {
+    identifier: 'null',
+    isProgressing: false,
+    params: {},
+    accept: () => {},
+    cancel: () => {},
+  },
+
+  init({dirPath}) {
+    return new DialogRequest('init', {dirPath});
+  },
+
+  clone(opts) {
+    return new DialogRequest('clone', {
+      sourceURL: '',
+      destPath: '',
+      ...opts,
+    });
+  },
+
+  credential(opts) {
+    return new DialogRequest('credential', {
+      includeUsername: false,
+      includeRemember: false,
+      prompt: 'Please authenticate',
+      ...opts,
+    });
+  },
+
+  issueish() {
+    return new DialogRequest('issueish');
+  },
+
+  commit() {
+    return new DialogRequest('commit');
+  },
+};

lib/controllers/editor-conflict-controller.js

@@ -15,7 +15,7 @@ import {autobind} from '../helpers';
 export default class EditorConflictController extends React.Component {
   static propTypes = {
     editor: PropTypes.object.isRequired,
-    commandRegistry: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
     resolutionProgress: PropTypes.object.isRequired,
     isRebase: PropTypes.bool.isRequired,
     refreshResolutionProgress: PropTypes.func.isRequired,
@@ -56,7 +56,7 @@ export default class EditorConflictController extends React.Component {
     return (
       <div>
         {this.state.conflicts.size > 0 && (
-          <Commands registry={this.props.commandRegistry} target="atom-text-editor">
+          <Commands registry={this.props.commands} target="atom-text-editor">
             <Command command="github:resolve-as-ours" callback={this.getResolverUsing([OURS])} />
             <Command command="github:resolve-as-theirs" callback={this.getResolverUsing([THEIRS])} />
             <Command command="github:resolve-as-base" callback={this.getResolverUsing([BASE])} />

lib/controllers/git-tab-controller.js

@@ -35,7 +35,7 @@ export default class GitTabController extends React.Component {
     fetchInProgress: PropTypes.bool.isRequired,
 
     workspace: PropTypes.object.isRequired,
-    commandRegistry: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
     grammars: PropTypes.object.isRequired,
     resolutionProgress: PropTypes.object.isRequired,
     notificationManager: PropTypes.object.isRequired,
@@ -49,7 +49,7 @@ export default class GitTabController extends React.Component {
     undoLastDiscard: PropTypes.func.isRequired,
     discardWorkDirChangesForPaths: PropTypes.func.isRequired,
     openFiles: PropTypes.func.isRequired,
-    initializeRepo: PropTypes.func.isRequired,
+    openInitializeDialog: PropTypes.func.isRequired,
     controllerRef: RefHolderPropType,
   };
 
@@ -107,15 +107,15 @@ export default class GitTabController extends React.Component {
 
         resolutionProgress={this.props.resolutionProgress}
         workspace={this.props.workspace}
-        commandRegistry={this.props.commandRegistry}
+        commands={this.props.commands}
         grammars={this.props.grammars}
         tooltips={this.props.tooltips}
         notificationManager={this.props.notificationManager}
         project={this.props.project}
         confirm={this.props.confirm}
         config={this.props.config}
 
-        initializeRepo={this.props.initializeRepo}
+        openInitializeDialog={this.props.openInitializeDialog}
         openFiles={this.props.openFiles}
         discardWorkDirChangesForPaths={this.props.discardWorkDirChangesForPaths}
         undoLastDiscard={this.props.undoLastDiscard}