Fix sidebar not changing styles when selected link prop changed (#1500)

* Sidebar on change props fix * Add interactive example story
auth0 · Feb 11, 2019 · bb79cb5 · bb79cb5
1 parent 4654bd9
commit bb79cb5
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 3 deletions.
diff --git a/core/components/molecules/sidebar/sidebar-link-group.js b/core/components/molecules/sidebar/sidebar-link-group.js
@@ -8,15 +8,29 @@ import Automation from '../../_helpers/automation-attribute'
 class SidebarLinkGroup extends React.Component {
   constructor(props) {
     super(props)
-    const open = props.defaultOpen || false
-    let subItemSelected = false
 
+    this.state = { open: props.defaultOpen || false, subItemSelected: false }
+    this.evaluateSubItemSelection(props, { mounted: false })
+  }
+
+  evaluateSubItemSelection(props, { mounted }) {
+    let subItemSelected = false
     React.Children.forEach(props.children, child => {
       /* group should be open and parent be selected */
       if (child && child.props && child.props.selected) subItemSelected = true
     })
 
-    this.state = { open, subItemSelected }
+    if (this.state.subItemSelected !== subItemSelected) {
+      if (mounted) {
+        this.setState({ subItemSelected })
+      } else {
+        this.state.subItemSelected = subItemSelected
+      }
+    }
+  }
+
+  componentDidUpdate() {
+    this.evaluateSubItemSelection(this.props, { mounted: true })
   }
 
   handleClick = () => {

diff --git a/core/components/molecules/sidebar/sidebar.story.js b/core/components/molecules/sidebar/sidebar.story.js
@@ -9,6 +9,85 @@ const StyledExample = styled(Example)`
   height: 500px;
 `
 
+class InteractiveExample extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { selected: 'dashboard' }
+    this.select = this.select.bind(this)
+  }
+
+  select(selected) {
+    this.setState({ selected })
+  }
+
+  render() {
+    const { selected } = this.state
+    return (
+      <Sidebar>
+        <Sidebar.Link
+          onClick={() => this.select('dashboard')}
+          selected={selected === 'dashboard'}
+          icon="dashboard"
+          label="Dashboard"
+        />
+        <Sidebar.Link
+          onClick={() => this.select('clients')}
+          selected={selected === 'clients'}
+          icon="clients"
+          label="Applications"
+        />
+        <Sidebar.Link
+          onClick={() => this.select('apis')}
+          selected={selected === 'apis'}
+          icon="apis"
+          label="APIs"
+        />
+        <Sidebar.Link
+          onClick={() => this.select('sso')}
+          selected={selected === 'sso'}
+          icon="sso-integrations"
+          label="SSO Integrations"
+        />
+        <Sidebar.LinkGroup icon="connections" label="Connections">
+          <Sidebar.Link
+            onClick={() => this.select('database')}
+            selected={selected === 'database'}
+            label="Database"
+          />
+          <Sidebar.Link
+            onClick={() => this.select('social')}
+            selected={selected === 'social'}
+            label="Social"
+          />
+          <Sidebar.Link
+            onClick={() => this.select('enterprise')}
+            selected={selected === 'enterprise'}
+            label="Enterprise"
+          />
+          <Sidebar.Link
+            onClick={() => this.select('passwordless')}
+            selected={selected === 'passwordless'}
+            label="Passwordless"
+          />
+        </Sidebar.LinkGroup>
+        <Sidebar.Link
+          onClick={() => this.select('users')}
+          selected={selected === 'users'}
+          icon="users"
+          label="Users"
+        />
+        <Sidebar.Link
+          onClick={() => this.select('rules')}
+          selected={selected === 'rules'}
+          icon="rules"
+          label="Rules"
+        />
+      </Sidebar>
+    )
+  }
+}
+
 storiesOf('Sidebar', module).add('default', () => (
   <StyledExample>
     <Sidebar>
@@ -28,6 +107,12 @@ storiesOf('Sidebar', module).add('default', () => (
   </StyledExample>
 ))
 
+storiesOf('Sidebar', module).add('interactive example', () => (
+  <StyledExample>
+    <InteractiveExample />
+  </StyledExample>
+))
+
 storiesOf('Sidebar', module).add('selected item', () => (
   <StyledExample>
     <Sidebar>