feat: Add SplitViewCommand support controlled show label text

Close #17

Author: myxvisual

docs/src/routes/Components/NavigationView/SimpleExample.tsx

@@ -70,6 +70,23 @@ export default class SimpleExample extends React.Component<React.HTMLAttributes<
           </NavigationView>
         </div>
 
+        <div>
+          <NavigationView
+            isControlled={false}
+            style={{ width: 640, height: 640, ...baseStyle }}
+            pageTitle="San Francisco"
+            displayMode="compact"
+            autoResize={false}
+            initWidth={120}
+            expandedWidth={480}
+            defaultExpanded={false}
+            navigationTopNodes={navigationTopNodes}
+            navigationBottomNodes={navigationBottomNode}
+            focusNavigationNodeIndex={2}
+          >
+            <img src={require("./components/images/golden-gate-bridge-2037990_1280.jpg")} height="100%" style={{ objectFit: "cover" }} />
+          </NavigationView>
+        </div>
       </div>
     );
   }

src/NavigationView/index.tsx

@@ -181,9 +181,12 @@ export class NavigationView extends React.Component<NavigationViewProps, Navigat
 
   getNewNodeProps = (currNode: any, index: number, expanded?: boolean, haveExpandedNode?: boolean) => {
     const { onClick } = currNode.props;
+    const isSplitViewCommand = currNode && currNode.type === SplitViewCommand;
     const { focusNodeIndex } = this.state;
+
     return {
       key: `${index} ${expanded}`,
+      showLabel: isSplitViewCommand ? this.state.expanded : void 0,
       visited: focusNodeIndex === void 0 ? void 0 : focusNodeIndex === index,
       onClick: (e: any) => {
         this.setState({
@@ -297,17 +300,15 @@ export class NavigationView extends React.Component<NavigationViewProps, Navigat
             </div>
           </div>
         </div>
-        {isCompact ? (
-          <div
-            style={{
-              width: "100%",
-              height: "100%",
-              overflow: "hidden"
-            }}
-          >
-            {children}
-          </div>
-        ) : children}
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            overflow: "hidden"
+          }}
+        >
+          {children}
+        </div>
       </div>
     );
 

src/SplitViewCommand/index.tsx

@@ -25,13 +25,18 @@ export interface DataProps {
    * Use 10ft Design mode.
    */
   isTenFt?: boolean;
+  /**
+   * Set show label text.
+   */
+  showLabel?: boolean;
 }
 
 export interface SplitViewCommandProps extends DataProps, React.HTMLAttributes<HTMLDivElement> {}
 
 export class SplitViewCommand extends React.Component<SplitViewCommandProps> {
   static defaultProps: SplitViewCommandProps = {
-    isTenFt: false
+    isTenFt: false,
+    showLabel: true
   };
 
   displayName: "SplitViewCommand";
@@ -50,6 +55,7 @@ export class SplitViewCommand extends React.Component<SplitViewCommandProps> {
       onMouseLeave,
       isTenFt,
       iconStyle,
+      showLabel,
       ...attributes
     } = this.props;
     const { theme } = this.context;
@@ -95,7 +101,16 @@ export class SplitViewCommand extends React.Component<SplitViewCommandProps> {
 }
 
 function getStyles(splitViewCommand: SplitViewCommand) {
-  const { context, props: { style, iconStyle, visited, isTenFt } } = splitViewCommand;
+  const {
+    context,
+    props: {
+      style,
+      iconStyle,
+      visited,
+      isTenFt,
+      showLabel
+    }
+  } = splitViewCommand;
   const { theme } = context;
   const { prefixStyle } = theme;
 
@@ -135,7 +150,9 @@ function getStyles(splitViewCommand: SplitViewCommand) {
     }),
     label: {
       color: isTenFt ? void 0 : (visited ? theme.accent : theme.baseHigh),
-      cursor: "default"
+      cursor: "default",
+      opacity: showLabel ? 1 : 0,
+      transition: "opacity .25s"
     }
   };
 }