Update: Adding option to show the box logo (#24)

Fix: Fix autoFocus issue and add shortcut for breadcrumbs
Docs: Update with example app
Update: Adding option to show the box logo. If logoUrl = box, then the box logo will show otherwise the default placeholder
Fix: Delete functionality in explorer

Author: priyajeet

src/components/ContentExplorer/ContentExplorer.js

@@ -759,8 +759,8 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
             return;
         }
 
-        const { id, permissions, type }: BoxItem = selected;
-        if (!id || !permissions || !type) {
+        const { id, permissions, parent, type }: BoxItem = selected;
+        if (!id || !permissions || !parent || !type) {
             return;
         }
 

src/components/Header/Header.js

@@ -1,11 +1,11 @@
 /**
  * @flow
- * @file File picker content header
+ * @file Header bar
  * @author Box
  */
 
 import React from 'react';
-import IconDefaultLogo from '../icons/IconDefaultLogo';
+import Logo from './Logo';
 import { Button } from '../Button';
 import { VIEW_FOLDER, VIEW_SEARCH } from '../../constants';
 import type { View } from '../../flowTypes';
@@ -28,9 +28,7 @@ const Header = ({ view, searchQuery, canUpload, onSearch, onUpload, logoUrl, get
     return (
         <div className='buik-header'>
             <div className='buik-header-left'>
-                <div className='buik-logo'>
-                    {logoUrl ? <img alt='' src={logoUrl} className='buik-logo-custom' /> : <IconDefaultLogo />}
-                </div>
+                <Logo url={logoUrl} />
                 <div className='buik-search'>
                     <input
                         type='search'

src/components/Header/Header.scss

@@ -13,23 +13,6 @@
         padding-right: 20px;
     }
 
-    .buik-logo {
-        padding-left: 20px;
-
-        .buik-logo-custom {
-            max-height: 32px;
-            max-width: 80px;
-        }
-
-        .buik-is-small & {
-            display: none;
-        }
-
-        svg {
-            display: block;
-        }
-    }
-
     .buik-header-left {
         align-items: center;
         display: flex;

src/components/Header/Logo.js

@@ -0,0 +1,30 @@
+/**
+ * @flow
+ * @file Logo for the header
+ * @author Box
+ */
+
+import React from 'react';
+import IconDefaultLogo from '../icons/IconDefaultLogo';
+import IconBoxLogo from '../icons/IconBoxLogo';
+import './Logo.scss';
+
+type Props = {
+    url?: string
+};
+
+function getLogo(url?: string) {
+    if (url === 'box') {
+        return <IconBoxLogo />;
+    } else if (typeof url === 'string') {
+        return <img alt='' src={url} className='buik-logo-custom' />;
+    }
+    return <IconDefaultLogo />;
+}
+
+const Logo = ({ url }: Props) =>
+    <div className='buik-logo'>
+        {getLogo(url)}
+    </div>;
+
+export default Logo;

src/components/Header/Logo.scss

@@ -0,0 +1,18 @@
+@import '../variables';
+
+.buik-logo {
+    padding-left: 20px;
+
+    .buik-logo-custom {
+        max-height: 32px;
+        max-width: 80px;
+    }
+
+    .buik-is-small & {
+        display: none;
+    }
+
+    svg {
+        display: block;
+    }
+}

src/components/icons/IconBoxLogo.js

@@ -9,27 +9,25 @@ import { BOX_BLUE } from '../../constants';
 import type { IconType } from '../../flowTypes';
 
 const IconBoxLogo = ({ color = BOX_BLUE, height = 25, width = 45 }: IconType) =>
-    <div>
-        <svg height={height} width={width} viewBox='0 0 98 52' aria-labelledby='title desc' role='img'>
-            <path
-                fill={color}
-                fillRule='evenodd'
-                d='M95.34 44.7c1.1 1.53.8 3.66-.75 4.8-1.56
-                    1.13-3.74.84-4.93-.64l-7.8-10.23-7.82 10.23c-1.2 1.48-3.36
-                    1.77-4.9.63-1.55-1.15-1.87-3.28-.75-4.8l9.06-11.86L68.4
-                    21c-1.1-1.54-.8-3.67.75-4.8 1.55-1.14 3.72-.85 4.9.63l7.82 10.23
-                    7.8-10.23c1.2-1.48 3.38-1.77 4.92-.63 1.52 1.13 1.84 3.26.73
-                    4.8L86.3 32.84l9.04 11.85zM53.9 43.22c-5.86 0-10.6-4.65-10.6-10.4
-                    0-5.72 4.74-10.37 10.6-10.37 5.85 0 10.6 4.65 10.6 10.38 0
-                    5.74-4.75 10.4-10.6 10.4zm-31.23 0c-5.85 0-10.6-4.65-10.6-10.4
-                    0-5.72 4.75-10.37 10.6-10.37 5.86 0 10.6 4.65 10.6 10.38 0 5.74-4.74
-                    10.4-10.6 10.4zm31.22-27.7c-6.78 0-12.66 3.73-15.63
-                    9.2-2.97-5.47-8.84-9.2-15.6-9.2-4 0-7.66 1.3-10.6 3.46V4.38C12.02
-                    2.52 10.45 1 8.53 1 6.6 1 5.03 2.5 5 4.4v28.7c.16 9.43 8 17.03
-                    17.67 17.03 6.77 0 12.64-3.73 15.6-9.2 2.98 5.47 8.86 9.2 15.62
-                    9.2 9.74 0 17.66-7.75 17.66-17.32 0-9.55-7.92-17.3-17.68-17.3z'
-            />
-        </svg>
-    </div>;
+    <svg height={height} width={width} viewBox='0 0 98 52' role='img'>
+        <path
+            fill={color}
+            fillRule='evenodd'
+            d='M95.34 44.7c1.1 1.53.8 3.66-.75 4.8-1.56
+                1.13-3.74.84-4.93-.64l-7.8-10.23-7.82 10.23c-1.2 1.48-3.36
+                1.77-4.9.63-1.55-1.15-1.87-3.28-.75-4.8l9.06-11.86L68.4
+                21c-1.1-1.54-.8-3.67.75-4.8 1.55-1.14 3.72-.85 4.9.63l7.82 10.23
+                7.8-10.23c1.2-1.48 3.38-1.77 4.92-.63 1.52 1.13 1.84 3.26.73
+                4.8L86.3 32.84l9.04 11.85zM53.9 43.22c-5.86 0-10.6-4.65-10.6-10.4
+                0-5.72 4.74-10.37 10.6-10.37 5.85 0 10.6 4.65 10.6 10.38 0
+                5.74-4.75 10.4-10.6 10.4zm-31.23 0c-5.85 0-10.6-4.65-10.6-10.4
+                0-5.72 4.75-10.37 10.6-10.37 5.86 0 10.6 4.65 10.6 10.38 0 5.74-4.74
+                10.4-10.6 10.4zm31.22-27.7c-6.78 0-12.66 3.73-15.63
+                9.2-2.97-5.47-8.84-9.2-15.6-9.2-4 0-7.66 1.3-10.6 3.46V4.38C12.02
+                2.52 10.45 1 8.53 1 6.6 1 5.03 2.5 5 4.4v28.7c.16 9.43 8 17.03
+                17.67 17.03 6.77 0 12.64-3.73 15.6-9.2 2.98 5.47 8.86 9.2 15.62
+                9.2 9.74 0 17.66-7.75 17.66-17.32 0-9.55-7.92-17.3-17.68-17.3z'
+        />
+    </svg>;
 
 export default IconBoxLogo;

src/components/icons/IconDefaultLogo.js

@@ -209,7 +209,7 @@ <h1>Folder Picker (max 3 items / token generator / no upload)</h1>
                 });
                 contentPicker2.show(folderId, tokenGenerator2, {
                     container: '.contentPicker2',
-                    logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png',
+                    logoUrl: 'box',
                     maxSelectable: 1
                 });
             }