Remove references to defaultProps

app/components/AssetTree/AssetNode/AssetNode.js

@@ -71,16 +71,16 @@ const StyledLabel = styled.span`
 function AssetNode(props) {
   const {
     node,
-    root,
-    openNodes,
-    checkedNodes,
-    selectedAsset,
-    level,
-    checkboxes,
-    onToggle,
-    onRightClick,
-    onClick,
-    ancestorArchived,
+    root = false,
+    openNodes = [],
+    checkedNodes = [],
+    selectedAsset = null,
+    level = 0,
+    checkboxes = false,
+    onToggle = null,
+    onRightClick = null,
+    onClick = null,
+    ancestorArchived = false,
   } = props;
   const isOpen = root || openNodes.includes(node.uri);
   const isChecked = checkboxes && (root || checkedNodes.includes(node.uri));
@@ -185,18 +185,4 @@ AssetNode.propTypes = {
   ancestorArchived: PropTypes.bool,
 };
 
-AssetNode.defaultProps = {
-  root: false,
-  onToggle: null,
-  onRightClick: null,
-  onClick: null,
-  onCheck: null,
-  level: 0,
-  selectedAsset: null,
-  openNodes: [],
-  checkedNodes: [],
-  checkboxes: false,
-  ancestorArchived: false,
-};
-
 export default AssetNode;

app/components/AssetTree/AssetTree.js

@@ -12,25 +12,39 @@ import styles from './AssetTree.css';
 class AssetTree extends Component {
   constructor(props) {
     super(props);
+
+    const {
+      selectedAsset = null,
+      checkboxes = false,
+      onCheckAsset = null,
+      rootSelectable = true
+    } = props;
+
     this.state = { expandedNodes: [], checkedNodes: [] };
   }
 
   handleClick = (node) => {
+    const {
+      assets,
+      onSelectAsset,
+      rootSelectable = true
+    } = this.props;
+
     // Determine if this is selectable.  We don't consider a selection if:
     // 1. The asset collection is null
     // 2. The selected node is null
     // 3. Root selection is disabled and this is the root item
     //
     // To handle unselectable items, we trigger to clear the active selection.
-    if (this.props.assets === null || node === null) {
-      this.props.onSelectAsset(null);
+    if (assets === null || node === null) {
+      onSelectAsset(null);
       return;
-    } else if (!this.props.rootSelectable && (node.uri === this.props.assets.uri)) {
-      this.props.onSelectAsset(null);
+    } else if (!rootSelectable && (node.uri === assets.uri)) {
+      onSelectAsset(null);
       return;
     }
 
-    this.props.onSelectAsset(node);
+    onSelectAsset(node);
   };
 
   onToggle = (node) => {
@@ -64,6 +78,8 @@ class AssetTree extends Component {
   };
 
   setExpandAll = (expand) => {
+    const { assets } = this.props;
+
     this.setState(() => {
       const expandedNodes = [];
       // If we're collapsing, we just set this to an empty array.  Easy!
@@ -72,15 +88,17 @@ class AssetTree extends Component {
       }
 
       // If we're expanding, we need to recursively add every folder URI.
-      expandedNodes.push(this.props.assets.uri);
-      if (this.props.assets.children) {
-        this.props.assets.children.forEach((c) => this.setNodeExpanded(c, expandedNodes));
+      expandedNodes.push(assets.uri);
+      if (assets.children) {
+        assets.children.forEach((c) => this.setNodeExpanded(c, expandedNodes));
       }
       return { expandedNodes };
     });
   };
 
   handleCheck = (node, value) => {
+    const { onCheckAsset = null } = this.props;
+
     this.setState((prevState) => {
       const checkedNodes = [...prevState.checkedNodes];
       const index = checkedNodes.indexOf(node.uri);
@@ -92,22 +110,30 @@ class AssetTree extends Component {
       return { checkedNodes };
     });
 
-    if (this.props.onCheckAsset) {
-      this.props.onCheckAsset(node, value);
+    if (onCheckAsset) {
+      onCheckAsset(node, value);
     }
   };
 
   render() {
-    const assetTree = !this.props.assets ? null : (
+    const {
+      assets,
+      selectedAsset = null,
+      checkboxes = false,
+    } = this.props;
+
+    const { expandedNodes, checkedNodes } = this.state;
+
+    const assetTree = !assets ? null : (
       <AssetNode
         onClick={this.handleClick}
         root
-        key={this.props.assets.uri}
-        node={this.props.assets}
-        openNodes={this.state.expandedNodes}
-        checkedNodes={this.state.checkedNodes}
-        selectedAsset={this.props.selectedAsset}
-        checkboxes={this.props.checkboxes}
+        key={assets.uri}
+        node={assets}
+        openNodes={expandedNodes}
+        checkedNodes={checkedNodes}
+        selectedAsset={selectedAsset}
+        checkboxes={checkboxes}
         onToggle={this.onToggle}
         onCheck={this.handleCheck}
       />
@@ -126,11 +152,4 @@ AssetTree.propTypes = {
   rootSelectable: PropTypes.bool
 };
 
-AssetTree.defaultProps = {
-  selectedAsset: null,
-  checkboxes: false,
-  onCheckAsset: null,
-  rootSelectable: true
-};
-
 export default AssetTree;

app/components/CloneDirectory/CloneDirectory.js

@@ -62,20 +62,30 @@ class CloneDirectory extends Component {
   };
 
   render() {
+    const {
+      sourceDirectory,
+      targetBaseDirectory,
+      projectName,
+      onSourceDirectoryChanged,
+      onTargetBaseDirectoryChanged,
+      onProjectNameChanged,
+      isValidDirectory = false,
+    } = this.props;
+
     let validation = null;
     if (this.state.validationErrorMessage) {
       validation = <Error style={{ marginTop: '15px' }}>{this.state.validationErrorMessage}</Error>;
     }
 
-    const targetDirectory = this.props.targetBaseDirectory && this.props.projectName
-      ? `${this.props.targetBaseDirectory}/${this.props.projectName}`
+    const targetDirectory = targetBaseDirectory && projectName
+      ? `${targetBaseDirectory}/${projectName}`
       : '';
 
     return (
       <div className={styles.container} data-tid="container">
         <fieldset>
           <legend>Source project directory to clone:</legend>
-          <input readOnly type="text" value={this.props.sourceDirectory} />
+          <input readOnly type="text" value={sourceDirectory} />
           <Button
             className={styles.browse}
             onClick={this.handleBrowseSourceDirectory}
@@ -87,7 +97,7 @@ class CloneDirectory extends Component {
 
         <fieldset>
           <legend>Target base directory:</legend>
-          <input readOnly type="text" value={this.props.targetBaseDirectory} />
+          <input readOnly type="text" value={targetBaseDirectory} />
           <Button
             className={styles.browse}
             onClick={this.handleBrowseTargetBaseDirectory}
@@ -101,12 +111,12 @@ class CloneDirectory extends Component {
           <legend>New project name:</legend>
           <input
             type="text"
-            value={this.props.projectName}
+            value={projectName}
             onChange={this.handleProjectNameChange}
           />
         </fieldset>
 
-        {targetDirectory && this.props.isValidDirectory && (
+        {targetDirectory && isValidDirectory && (
           <div className={styles.targetDirectoryPreview}>
             <p>New project will be created at:</p>
             <code>{targetDirectory}</code>
@@ -127,10 +137,7 @@ CloneDirectory.propTypes = {
   onSourceDirectoryChanged: PropTypes.func.isRequired,
   onTargetBaseDirectoryChanged: PropTypes.func.isRequired,
   onProjectNameChanged: PropTypes.func.isRequired,
-  isValidDirectory: PropTypes.bool, 
-};
-CloneDirectory.defaultProps = {
-  isValidDirectory: false,  // Default to false
+  isValidDirectory: PropTypes.bool,
 };
 
 export default CloneDirectory;