From 11a780d84cd895db94af94537a904d93849604da Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 7 Feb 2018 09:20:56 -0800
Subject: [PATCH] Update Prettier line-widths for example code

---
 .prettierrc.examples                          |  2 +-
 .../composing-components.js                   |  5 +-
 .../extracting-components-continued.js        | 14 ++---
 .../extracting-components.js                  | 10 +--
 .../rendering-a-component.js                  |  5 +-
 examples/es5-syntax-example.js                |  4 +-
 examples/introducing-jsx.js                   | 13 +---
 examples/reconciliation/index-used-as-key.js  | 61 +++++--------------
 .../reconciliation/no-index-used-as-key.js    | 61 +++++--------------
 .../rendering-elements/render-an-element.js   |  5 +-
 .../update-rendered-element.js                | 12 +---
 examples/tutorial-expanded-version.js         |  4 +-
 .../input-type-file.js                        | 17 ++----
 13 files changed, 56 insertions(+), 157 deletions(-)

diff --git a/.prettierrc.examples b/.prettierrc.examples
index 1d6941b2..bd17fb7e 100644
--- a/.prettierrc.examples
+++ b/.prettierrc.examples
@@ -2,7 +2,7 @@
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
   "parser": "flow",
-  "printWidth": 40,
+  "printWidth": 60,
   "singleQuote": true,
   "trailingComma": "es5"
 }
\ No newline at end of file
diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js
index f81f7668..3fb4c9c6 100644
--- a/examples/components-and-props/composing-components.js
+++ b/examples/components-and-props/composing-components.js
@@ -12,7 +12,4 @@ function App() {
   );
 }
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/examples/components-and-props/extracting-components-continued.js b/examples/components-and-props/extracting-components-continued.js
index bcd08b85..d35b5e36 100644
--- a/examples/components-and-props/extracting-components-continued.js
+++ b/examples/components-and-props/extracting-components-continued.js
@@ -16,9 +16,7 @@ function UserInfo(props) {
   return (
     <div className="UserInfo">
       <Avatar user={props.user} />
-      <div className="UserInfo-name">
-        {props.user.name}
-      </div>
+      <div className="UserInfo-name">{props.user.name}</div>
     </div>
   );
 }
@@ -27,9 +25,7 @@ function Comment(props) {
   return (
     <div className="Comment">
       <UserInfo user={props.author} />
-      <div className="Comment-text">
-        {props.text}
-      </div>
+      <div className="Comment-text">{props.text}</div>
       <div className="Comment-date">
         {formatDate(props.date)}
       </div>
@@ -39,12 +35,10 @@ function Comment(props) {
 
 const comment = {
   date: new Date(),
-  text:
-    'I hope you enjoy learning React!',
+  text: 'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl:
-      'http://placekitten.com/g/64/64',
+    avatarUrl: 'http://placekitten.com/g/64/64',
   },
 };
 ReactDOM.render(
diff --git a/examples/components-and-props/extracting-components.js b/examples/components-and-props/extracting-components.js
index 1ad153c3..1c5e6bae 100644
--- a/examples/components-and-props/extracting-components.js
+++ b/examples/components-and-props/extracting-components.js
@@ -15,9 +15,7 @@ function Comment(props) {
           {props.author.name}
         </div>
       </div>
-      <div className="Comment-text">
-        {props.text}
-      </div>
+      <div className="Comment-text">{props.text}</div>
       <div className="Comment-date">
         {formatDate(props.date)}
       </div>
@@ -27,12 +25,10 @@ function Comment(props) {
 
 const comment = {
   date: new Date(),
-  text:
-    'I hope you enjoy learning React!',
+  text: 'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl:
-      'http://placekitten.com/g/64/64',
+    avatarUrl: 'http://placekitten.com/g/64/64',
   },
 };
 ReactDOM.render(
diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js
index 5458b516..2b0c4b67 100644
--- a/examples/components-and-props/rendering-a-component.js
+++ b/examples/components-and-props/rendering-a-component.js
@@ -3,7 +3,4 @@ function Welcome(props) {
 }
 
 const element = <Welcome name="Sara" />;
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
+ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js
index 122f7c39..c8d2ac98 100644
--- a/examples/es5-syntax-example.js
+++ b/examples/es5-syntax-example.js
@@ -1,5 +1,3 @@
 const element = <h1>Hello, world!</h1>;
-const container = document.getElementById(
-  'root'
-);
+const container = document.getElementById('root');
 ReactDOM.render(element, container);
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
index 67013fa8..3f1a07f3 100644
--- a/examples/introducing-jsx.js
+++ b/examples/introducing-jsx.js
@@ -1,7 +1,5 @@
 function formatName(user) {
-  return (
-    user.firstName + ' ' + user.lastName
-  );
+  return user.firstName + ' ' + user.lastName;
 }
 
 const user = {
@@ -9,11 +7,6 @@ const user = {
   lastName: 'Perez',
 };
 
-const element = (
-  <h1>Hello, {formatName(user)}!</h1>
-);
+const element = <h1>Hello, {formatName(user)}!</h1>;
 
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
+ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
index bb4d4284..8eb76c4b 100644
--- a/examples/reconciliation/index-used-as-key.js
+++ b/examples/reconciliation/index-used-as-key.js
@@ -7,9 +7,7 @@ const ToDo = props => (
       <input />
     </td>
     <td>
-      <label>
-        {props.createdAt.toTimeString()}
-      </label>
+      <label>{props.createdAt.toTimeString()}</label>
     </td>
   </tr>
 );
@@ -31,26 +29,18 @@ class ToDoList extends React.Component {
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort(
-      (a, b) => {
-        return (
-          a.createdAt - b.createdAt
-        );
-      }
-    );
+    const sortedList = this.state.list.sort((a, b) => {
+      return a.createdAt - b.createdAt;
+    });
     this.setState({
       list: [...sortedList],
     });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort(
-      (a, b) => {
-        return (
-          b.createdAt - a.createdAt
-        );
-      }
-    );
+    const sortedList = this.state.list.sort((a, b) => {
+      return b.createdAt - a.createdAt;
+    });
     this.setState({
       list: [...sortedList],
     });
@@ -58,8 +48,7 @@ class ToDoList extends React.Component {
 
   addToEnd() {
     const date = new Date();
-    const nextId =
-      this.state.todoCounter + 1;
+    const nextId = this.state.todoCounter + 1;
     const newList = [
       ...this.state.list,
       {id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
 
   addToStart() {
     const date = new Date();
-    const nextId =
-      this.state.todoCounter + 1;
+    const nextId = this.state.todoCounter + 1;
     const newList = [
       {id: nextId, createdAt: date},
       ...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
       <div>
         <code>key=index</code>
         <br />
-        <button
-          onClick={this.addToStart.bind(
-            this
-          )}>
+        <button onClick={this.addToStart.bind(this)}>
           Add New to Start
         </button>
-        <button
-          onClick={this.addToEnd.bind(
-            this
-          )}>
+        <button onClick={this.addToEnd.bind(this)}>
           Add New to End
         </button>
-        <button
-          onClick={this.sortByEarliest.bind(
-            this
-          )}>
+        <button onClick={this.sortByEarliest.bind(this)}>
           Sort by Earliest
         </button>
-        <button
-          onClick={this.sortByLatest.bind(
-            this
-          )}>
+        <button onClick={this.sortByLatest.bind(this)}>
           Sort by Latest
         </button>
         <table>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
             <th />
             <th>created at</th>
           </tr>
-          {this.state.list.map(
-            (todo, index) => (
-              <ToDo
-                key={index}
-                {...todo}
-              />
-            )
-          )}
+          {this.state.list.map((todo, index) => (
+            <ToDo key={index} {...todo} />
+          ))}
         </table>
       </div>
     );
diff --git a/examples/reconciliation/no-index-used-as-key.js b/examples/reconciliation/no-index-used-as-key.js
index 04e3ffad..56bbbbdf 100644
--- a/examples/reconciliation/no-index-used-as-key.js
+++ b/examples/reconciliation/no-index-used-as-key.js
@@ -7,9 +7,7 @@ const ToDo = props => (
       <input />
     </td>
     <td>
-      <label>
-        {props.createdAt.toTimeString()}
-      </label>
+      <label>{props.createdAt.toTimeString()}</label>
     </td>
   </tr>
 );
@@ -31,26 +29,18 @@ class ToDoList extends React.Component {
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort(
-      (a, b) => {
-        return (
-          a.createdAt - b.createdAt
-        );
-      }
-    );
+    const sortedList = this.state.list.sort((a, b) => {
+      return a.createdAt - b.createdAt;
+    });
     this.setState({
       list: [...sortedList],
     });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort(
-      (a, b) => {
-        return (
-          b.createdAt - a.createdAt
-        );
-      }
-    );
+    const sortedList = this.state.list.sort((a, b) => {
+      return b.createdAt - a.createdAt;
+    });
     this.setState({
       list: [...sortedList],
     });
@@ -58,8 +48,7 @@ class ToDoList extends React.Component {
 
   addToEnd() {
     const date = new Date();
-    const nextId =
-      this.state.toDoCounter + 1;
+    const nextId = this.state.toDoCounter + 1;
     const newList = [
       ...this.state.list,
       {id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
 
   addToStart() {
     const date = new Date();
-    const nextId =
-      this.state.toDoCounter + 1;
+    const nextId = this.state.toDoCounter + 1;
     const newList = [
       {id: nextId, createdAt: date},
       ...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
       <div>
         <code>key=id</code>
         <br />
-        <button
-          onClick={this.addToStart.bind(
-            this
-          )}>
+        <button onClick={this.addToStart.bind(this)}>
           Add New to Start
         </button>
-        <button
-          onClick={this.addToEnd.bind(
-            this
-          )}>
+        <button onClick={this.addToEnd.bind(this)}>
           Add New to End
         </button>
-        <button
-          onClick={this.sortByEarliest.bind(
-            this
-          )}>
+        <button onClick={this.sortByEarliest.bind(this)}>
           Sort by Earliest
         </button>
-        <button
-          onClick={this.sortByLatest.bind(
-            this
-          )}>
+        <button onClick={this.sortByLatest.bind(this)}>
           Sort by Latest
         </button>
         <table>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
             <th />
             <th>created at</th>
           </tr>
-          {this.state.list.map(
-            (todo, index) => (
-              <ToDo
-                key={todo.id}
-                {...todo}
-              />
-            )
-          )}
+          {this.state.list.map((todo, index) => (
+            <ToDo key={todo.id} {...todo} />
+          ))}
         </table>
       </div>
     );
diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
index 2d4345ef..024b3587 100644
--- a/examples/rendering-elements/render-an-element.js
+++ b/examples/rendering-elements/render-an-element.js
@@ -1,5 +1,2 @@
 const element = <h1>Hello, world</h1>;
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
+ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
index f16ddcc1..a4dabafc 100644
--- a/examples/rendering-elements/update-rendered-element.js
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -2,17 +2,11 @@ function tick() {
   const element = (
     <div>
       <h1>Hello, world!</h1>
-      <h2>
-        It is{' '}
-        {new Date().toLocaleTimeString()}.
-      </h2>
+      <h2>It is {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
-  // highlight-range{1-4}
-  ReactDOM.render(
-    element,
-    document.getElementById('root')
-  );
+  // highlight-next-line
+  ReactDOM.render(element, document.getElementById('root'));
 }
 
 setInterval(tick, 1000);
diff --git a/examples/tutorial-expanded-version.js b/examples/tutorial-expanded-version.js
index 61a7d094..f3ad0d72 100644
--- a/examples/tutorial-expanded-version.js
+++ b/examples/tutorial-expanded-version.js
@@ -1,7 +1,5 @@
 <div className="shopping-list">
-  <h1>
-    Shopping List for {props.name}
-  </h1>
+  <h1>Shopping List for {props.name}</h1>
   <ul>
     <li>Instagram</li>
     <li>WhatsApp</li>
diff --git a/examples/uncontrolled-components/input-type-file.js b/examples/uncontrolled-components/input-type-file.js
index 93dd13fc..cbb855a1 100644
--- a/examples/uncontrolled-components/input-type-file.js
+++ b/examples/uncontrolled-components/input-type-file.js
@@ -1,24 +1,19 @@
 class FileInput extends React.Component {
   constructor(props) {
     super(props);
-    this.handleSubmit = this.handleSubmit.bind(
-      this
-    );
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
-  // highlight-range{5}
+  // highlight-range{4}
   handleSubmit(event) {
     event.preventDefault();
     alert(
-      `Selected file - ${
-        this.fileInput.files[0].name
-      }`
+      `Selected file - ${this.fileInput.files[0].name}`
     );
   }
 
   render() {
     return (
-      <form
-        onSubmit={this.handleSubmit}>
+      <form onSubmit={this.handleSubmit}>
         <label>
           Upload file:
           {/* highlight-range{1-6} */}
@@ -30,9 +25,7 @@ class FileInput extends React.Component {
           />
         </label>
         <br />
-        <button type="submit">
-          Submit
-        </button>
+        <button type="submit">Submit</button>
       </form>
     );
   }